diff --git a/crm/fcrm/doctype/crm_deal/api.py b/crm/fcrm/doctype/crm_deal/api.py
index 7cc776bd..26a88ca6 100644
--- a/crm/fcrm/doctype/crm_deal/api.py
+++ b/crm/fcrm/doctype/crm_deal/api.py
@@ -10,7 +10,7 @@ def get_deal(name):
 
 	deal["fields_meta"] = get_fields_meta("CRM Deal")
 	deal["_form_script"] = get_form_script("CRM Deal")
-	deal["_assign"] = get_assigned_users("CRM Deal", deal.name, deal.owner)
+	deal["_assign"] = get_assigned_users("CRM Deal", deal.name)
 	return deal
 
 
diff --git a/crm/fcrm/doctype/crm_lead/api.py b/crm/fcrm/doctype/crm_lead/api.py
index 2ecaf112..613cbb46 100644
--- a/crm/fcrm/doctype/crm_lead/api.py
+++ b/crm/fcrm/doctype/crm_lead/api.py
@@ -10,5 +10,5 @@ def get_lead(name):
 
 	lead["fields_meta"] = get_fields_meta("CRM Lead")
 	lead["_form_script"] = get_form_script("CRM Lead")
-	lead["_assign"] = get_assigned_users("CRM Lead", lead.name, lead.owner)
+	lead["_assign"] = get_assigned_users("CRM Lead", lead.name)
 	return lead
diff --git a/frontend/src/components/AssignTo.vue b/frontend/src/components/AssignTo.vue
new file mode 100644
index 00000000..1f42df3a
--- /dev/null
+++ b/frontend/src/components/AssignTo.vue
@@ -0,0 +1,31 @@
+<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"
+  />
+</template>
+<script setup>
+import MultipleAvatar from '@/components/MultipleAvatar.vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import { ref } from 'vue'
+
+const props = defineProps({
+  data: Object,
+  doctype: String,
+})
+
+const showAssignmentModal = ref(false)
+const assignees = defineModel()
+</script>
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index e3e581c0..680e80e4 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -151,7 +151,10 @@
                     <Link
                       v-else-if="field.fieldtype === 'User'"
                       class="form-control"
-                      :value="getUser(data[field.fieldname]).full_name"
+                      :value="
+                        data[field.fieldname] &&
+                        getUser(data[field.fieldname]).full_name
+                      "
                       :doctype="field.options"
                       :filters="field.filters"
                       @change="(v) => (data[field.fieldname] = v)"
@@ -160,6 +163,7 @@
                     >
                       <template #prefix>
                         <UserAvatar
+                          v-if="data[field.fieldname]"
                           class="mr-2"
                           :user="data[field.fieldname]"
                           size="sm"
diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index 93edca1b..2100255d 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -133,10 +133,6 @@ const addValue = (value) => {
 }
 
 function updateAssignees() {
-  if (assignees.value.length === 0) {
-    error.value = 'Please select at least one assignee'
-    return
-  }
   const removedAssignees = oldAssignees.value
     .filter(
       (assignee) => !assignees.value.find((a) => a.name === assignee.name),
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index 4e42f54a..d13ce621 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -74,7 +74,7 @@
                               field.mandatory_via_depends_on)
                           "
                           class="text-ink-red-3"
-                          >*</span
+                          > *</span
                         >
                       </div>
                     </Tooltip>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 90c9cb93..6fbc23d4 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -9,12 +9,11 @@
     </template>
     <template #right-header>
       <CustomActions v-if="customActions" :actions="customActions" />
-      <component :is="deal.data._assignedTo?.length == 1 ? 'Button' : 'div'">
-        <MultipleAvatar
-          :avatars="deal.data._assignedTo"
-          @click="showAssignmentModal = true"
-        />
-      </component>
+      <AssignTo
+        v-model="deal.data._assignedTo"
+        :data="deal.data"
+        doctype="CRM Deal"
+      />
       <Dropdown :options="statusOptions('deal', updateField, customStatuses)">
         <template #default="{ open }">
           <Button
@@ -237,13 +236,6 @@
       afterInsert: (doc) => addContact(doc.name),
     }"
   />
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="deal.data._assignedTo"
-    :doc="deal.data"
-    doctype="CRM Deal"
-  />
   <FilesUploader
     v-if="deal.data?.name"
     v-model="showFilesUploader"
@@ -278,9 +270,8 @@ import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import AssignTo from '@/components/AssignTo.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
@@ -390,7 +381,6 @@ onBeforeUnmount(() => {
 
 const reload = ref(false)
 const showOrganizationModal = ref(false)
-const showAssignmentModal = ref(false)
 const showFilesUploader = ref(false)
 const _organization = ref({})
 
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index c59547b2..8e6d98b9 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -9,12 +9,11 @@
     </template>
     <template #right-header>
       <CustomActions v-if="customActions" :actions="customActions" />
-      <component :is="lead.data._assignedTo?.length == 1 ? 'Button' : 'div'">
-        <MultipleAvatar
-          :avatars="lead.data._assignedTo"
-          @click="showAssignmentModal = true"
-        />
-      </component>
+      <AssignTo
+        v-model="lead.data._assignedTo"
+        :data="lead.data"
+        doctype="CRM Lead"
+      />
       <Dropdown :options="statusOptions('lead', updateField, customStatuses)">
         <template #default="{ open }">
           <Button
@@ -180,13 +179,6 @@
       </div>
     </Resizer>
   </div>
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="lead.data._assignedTo"
-    :doc="lead.data"
-    doctype="CRM Lead"
-  />
   <Dialog
     v-model="showConvertToDealModal"
     :options="{
@@ -286,9 +278,8 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import AssignTo from '@/components/AssignTo.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
@@ -373,7 +364,6 @@ onMounted(() => {
 })
 
 const reload = ref(false)
-const showAssignmentModal = ref(false)
 const showFilesUploader = ref(false)
 
 function updateLead(fieldname, value, callback) {
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index 72de7654..cfb86ed3 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -34,12 +34,11 @@
     v-if="deal.data"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <component :is="deal.data._assignedTo?.length == 1 ? 'Button' : 'div'">
-      <MultipleAvatar
-        :avatars="deal.data._assignedTo"
-        @click="showAssignmentModal = true"
-      />
-    </component>
+    <AssignTo
+      v-model="deal.data._assignedTo"
+      :data="deal.data"
+      doctype="CRM Deal"
+    />
     <div class="flex items-center gap-2">
       <CustomActions v-if="customActions" :actions="customActions" />
     </div>
@@ -59,155 +58,115 @@
           @updateField="updateField"
         />
         <div
-          v-if="fieldsLayout.data"
+          v-if="sections.data"
           class="flex flex-1 flex-col justify-between overflow-hidden"
         >
-          <div class="flex flex-col overflow-y-auto">
+          <SidePanelLayout
+            v-model="deal.data"
+            :sections="sections.data"
+            doctype="CRM Deal"
+            v-slot="{ section }"
+            @update="updateField"
+            @reload="sections.reload"
+          >
             <div
-              v-for="(section, i) in fieldsLayout.data"
-              :key="section.name"
-              class="flex flex-col px-2 py-3 sm:p-3"
-              :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
+              v-if="section.name == 'contacts_section'"
+              class="contacts-area"
             >
-              <Section :label="section.label" :opened="section.opened">
-                <template #actions>
-                  <div v-if="section.contacts" class="pr-2">
-                    <Link
-                      value=""
-                      doctype="Contact"
-                      @change="(e) => addContact(e)"
-                      :onCreate="
-                        (value, close) => {
-                          _contact = {
-                            first_name: value,
-                            company_name: deal.data.organization,
-                          }
-                          showContactModal = true
-                          close()
-                        }
-                      "
-                    >
-                      <template #target="{ togglePopover }">
-                        <Button
-                          class="h-7 px-3"
-                          variant="ghost"
-                          icon="plus"
-                          @click="togglePopover()"
-                        />
-                      </template>
-                    </Link>
-                  </div>
-                </template>
-                <SidePanelLayout
-                  v-if="section.columns?.[0].fields"
-                  :fields="section.columns[0].fields"
-                  :isLastSection="i == fieldsLayout.data.length - 1"
-                  doctype="CRM Deal"
-                  v-model="deal.data"
-                  @update="updateField"
-                />
-                <div v-else>
-                  <div
-                    v-if="
-                      dealContacts?.loading && dealContacts?.data?.length == 0
-                    "
-                    class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
-                  >
-                    <LoadingIndicator class="h-4 w-4" />
-                    <span>{{ __('Loading...') }}</span>
-                  </div>
-                  <div
-                    v-else-if="section.contacts.length"
-                    v-for="(contact, i) in section.contacts"
-                    :key="contact.name"
-                  >
-                    <div
-                      class="px-2 pb-2.5"
-                      :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
-                    >
-                      <Section :opened="contact.opened">
-                        <template #header="{ opened, toggle }">
-                          <div
-                            class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
-                          >
-                            <div
-                              class="flex h-7 items-center gap-2 truncate"
-                              @click="toggle()"
-                            >
-                              <Avatar
-                                :label="contact.full_name"
-                                :image="contact.image"
-                                size="md"
-                              />
-                              <div class="truncate">
-                                {{ contact.full_name }}
-                              </div>
-                              <Badge
-                                v-if="contact.is_primary"
-                                class="ml-2"
-                                variant="outline"
-                                :label="__('Primary')"
-                                theme="green"
-                              />
-                            </div>
-                            <div class="flex items-center">
-                              <Dropdown :options="contactOptions(contact.name)">
-                                <Button
-                                  icon="more-horizontal"
-                                  class="text-ink-gray-5"
-                                  variant="ghost"
-                                />
-                              </Dropdown>
-                              <Button
-                                variant="ghost"
-                                @click="
-                                  router.push({
-                                    name: 'Contact',
-                                    params: { contactId: contact.name },
-                                  })
-                                "
-                              >
-                                <ArrowUpRightIcon class="h-4 w-4" />
-                              </Button>
-                              <Button variant="ghost" @click="toggle()">
-                                <FeatherIcon
-                                  name="chevron-right"
-                                  class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
-                                  :class="{ 'rotate-90': opened }"
-                                />
-                              </Button>
-                            </div>
-                          </div>
-                        </template>
+              <div
+                v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
+                class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
+              >
+                <LoadingIndicator class="h-4 w-4" />
+                <span>{{ __('Loading...') }}</span>
+              </div>
+              <div
+                v-else-if="section.contacts.length"
+                v-for="(contact, i) in section.contacts"
+                :key="contact.name"
+              >
+                <div class="px-2 pb-2.5" :class="[i == 0 ? 'pt-5' : 'pt-2.5']">
+                  <Section :opened="contact.opened">
+                    <template #header="{ opened, toggle }">
+                      <div
+                        class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
+                      >
                         <div
-                          class="flex flex-col gap-1.5 text-base text-ink-gray-8"
+                          class="flex h-7 items-center gap-2 truncate"
+                          @click="toggle()"
                         >
-                          <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
-                            <Email2Icon class="h-4 w-4" />
-                            {{ contact.email }}
-                          </div>
-                          <div class="flex items-center gap-3 p-1 py-1.5">
-                            <PhoneIcon class="h-4 w-4" />
-                            {{ contact.mobile_no }}
+                          <Avatar
+                            :label="contact.full_name"
+                            :image="contact.image"
+                            size="md"
+                          />
+                          <div class="truncate">
+                            {{ contact.full_name }}
                           </div>
+                          <Badge
+                            v-if="contact.is_primary"
+                            class="ml-2"
+                            variant="outline"
+                            :label="__('Primary')"
+                            theme="green"
+                          />
                         </div>
-                      </Section>
-                    </div>
+                        <div class="flex items-center">
+                          <Dropdown :options="contactOptions(contact.name)">
+                            <Button
+                              icon="more-horizontal"
+                              class="text-ink-gray-5"
+                              variant="ghost"
+                            />
+                          </Dropdown>
+                          <Button
+                            variant="ghost"
+                            @click="
+                              router.push({
+                                name: 'Contact',
+                                params: { contactId: contact.name },
+                              })
+                            "
+                          >
+                            <ArrowUpRightIcon class="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" @click="toggle()">
+                            <FeatherIcon
+                              name="chevron-right"
+                              class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
+                              :class="{ 'rotate-90': opened }"
+                            />
+                          </Button>
+                        </div>
+                      </div>
+                    </template>
                     <div
-                      v-if="i != section.contacts.length - 1"
-                      class="mx-2 h-px border-t border-outline-gray-modals"
-                    />
-                  </div>
-                  <div
-                    v-else
-                    class="flex h-20 items-center justify-center text-base text-ink-gray-5"
-                  >
-                    {{ __('No contacts added') }}
-                  </div>
+                      class="flex flex-col gap-1.5 text-base text-ink-gray-8"
+                    >
+                      <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
+                        <Email2Icon class="h-4 w-4" />
+                        {{ contact.email }}
+                      </div>
+                      <div class="flex items-center gap-3 p-1 py-1.5">
+                        <PhoneIcon class="h-4 w-4" />
+                        {{ contact.mobile_no }}
+                      </div>
+                    </div>
+                  </Section>
                 </div>
-              </Section>
+                <div
+                  v-if="i != section.contacts.length - 1"
+                  class="mx-2 h-px border-t border-outline-gray-modals"
+                />
+              </div>
+              <div
+                v-else
+                class="flex h-20 items-center justify-center text-base text-ink-gray-5"
+              >
+                {{ __('No contacts added') }}
+              </div>
             </div>
-          </div>
+          </SidePanelLayout>
         </div>
       </div>
       <Activities
@@ -236,13 +195,6 @@
       afterInsert: (doc) => addContact(doc.name),
     }"
   />
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="deal.data._assignedTo"
-    :doc="deal.data"
-    doctype="CRM Deal"
-  />
 </template>
 <script setup>
 import Icon from '@/components/Icon.vue'
@@ -263,10 +215,8 @@ import SuccessIcon from '@/components/Icons/SuccessIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
+import AssignTo from '@/components/AssignTo.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
-import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
@@ -333,7 +283,7 @@ const deal = createResource({
       resource: {
         deal,
         dealContacts,
-        fieldsLayout,
+        sections,
       },
       call,
     }
@@ -356,7 +306,6 @@ onMounted(() => {
 
 const reload = ref(false)
 const showOrganizationModal = ref(false)
-const showAssignmentModal = ref(false)
 const _organization = ref({})
 
 function updateDeal(fieldname, value, callback) {
@@ -500,7 +449,7 @@ const tabs = computed(() => {
 })
 const { tabIndex } = useActiveTabManager(tabs, 'lastDealTab')
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
   cache: ['sidePanelSections', 'CRM Deal'],
   params: { doctype: 'CRM Deal' },
@@ -603,7 +552,7 @@ const dealContacts = createResource({
   cache: ['deal_contacts', props.dealId],
   auto: true,
   onSuccess: (data) => {
-    let contactSection = fieldsLayout.data?.find(
+    let contactSection = sections.data?.find(
       (section) => section.name == 'contacts_section',
     )
     if (!contactSection) return
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 26452022..6a2b7ea6 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -34,12 +34,11 @@
     v-if="lead.data"
     class="flex h-12 items-center justify-between gap-2 border-b px-3 py-2.5"
   >
-    <component :is="lead.data._assignedTo?.length == 1 ? 'Button' : 'div'">
-      <MultipleAvatar
-        :avatars="lead.data._assignedTo"
-        @click="showAssignmentModal = true"
-      />
-    </component>
+    <AssignTo
+      v-model="lead.data._assignedTo"
+      :data="lead.data"
+      doctype="CRM Lead"
+    />
     <div class="flex items-center gap-2">
       <CustomActions v-if="customActions" :actions="customActions" />
       <Button
@@ -64,26 +63,16 @@
           @updateField="updateField"
         />
         <div
-          v-if="fieldsLayout.data"
+          v-if="sections.data"
           class="flex flex-1 flex-col justify-between overflow-hidden"
         >
-          <div class="flex flex-col overflow-y-auto">
-            <div
-              v-for="(section, i) in fieldsLayout.data"
-              :key="section.name"
-              class="flex flex-col px-2 py-3 sm:p-3"
-              :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
-            >
-              <Section :label="section.label" :opened="section.opened">
-                <SidePanelLayout
-                  :fields="section.columns[0].fields"
-                  :isLastSection="i == fieldsLayout.data.length - 1"
-                  v-model="lead.data"
-                  @update="updateField"
-                />
-              </Section>
-            </div>
-          </div>
+          <SidePanelLayout
+            v-model="lead.data"
+            :sections="sections.data"
+            doctype="CRM Lead"
+            @update="updateField"
+            @reload="sections.reload"
+          />
         </div>
       </div>
       <Activities
@@ -96,13 +85,6 @@
       />
     </Tabs>
   </div>
-  <AssignmentModal
-    v-if="showAssignmentModal"
-    v-model="showAssignmentModal"
-    v-model:assignees="lead.data._assignedTo"
-    :doc="lead.data"
-    doctype="CRM Lead"
-  />
   <Dialog
     v-model="showConvertToDealModal"
     :options="{
@@ -186,10 +168,8 @@ import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities/Activities.vue'
-import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
-import MultipleAvatar from '@/components/MultipleAvatar.vue'
+import AssignTo from '@/components/AssignTo.vue'
 import Link from '@/components/Controls/Link.vue'
-import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
@@ -249,7 +229,7 @@ const lead = createResource({
       deleteDoc: deleteLead,
       resource: {
         lead,
-        fieldsLayout,
+        sections,
       },
       call,
     }
@@ -266,7 +246,6 @@ onMounted(() => {
 })
 
 const reload = ref(false)
-const showAssignmentModal = ref(false)
 
 function updateLead(fieldname, value, callback) {
   value = Array.isArray(fieldname) ? '' : value
@@ -420,7 +399,7 @@ watch(tabs, (value) => {
   }
 })
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
   cache: ['sidePanelSections', 'CRM Lead'],
   params: { doctype: 'CRM Lead' },