diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index 4b47125c..553b7d0e 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -15,40 +15,16 @@
             :opened="section.opened"
           >
             <template v-if="!preview" #actions>
-              <div v-if="section.name == 'contacts_section'" 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()
-                    }
-                  "
+              <slot name="actions" v-bind="{ section }">
+                <Button
+                  v-if="section.showEditButton"
+                  variant="ghost"
+                  class="w-7 mr-2"
+                  @click="showSidePanelModal = true"
                 >
-                  <template #target="{ togglePopover }">
-                    <Button
-                      class="h-7 px-3"
-                      variant="ghost"
-                      icon="plus"
-                      @click="togglePopover()"
-                    />
-                  </template>
-                </Link>
-              </div>
-              <Button
-                v-else-if="section.showEditButton"
-                variant="ghost"
-                class="w-7 mr-2"
-                @click="showSidePanelModal = true"
-              >
-                <EditIcon class="h-4 w-4" />
-              </Button>
+                  <EditIcon class="h-4 w-4" />
+                </Button>
+              </slot>
             </template>
             <slot v-bind="{ section }">
               <FadedScrollableDiv
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 40ce8bf3..2c352fb8 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -125,102 +125,136 @@
           :sections="sections.data"
           :addContact="addContact"
           doctype="CRM Deal"
-          v-slot="{ section }"
           @update="updateField"
           @reload="sections.reload"
         >
-          <div v-if="section.name == 'contacts_section'" class="contacts-area">
-            <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>
+          <template #actions="{ section }">
+            <div v-if="section.name == 'contacts_section'" 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>
+          <template #default="{ section }">
             <div
-              v-else-if="dealContacts?.data?.length"
-              v-for="(contact, i) in dealContacts.data"
-              :key="contact.name"
+              v-if="section.name == 'contacts_section'"
+              class="contacts-area"
             >
-              <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)">
-                          <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 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
+                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-if="i != dealContacts.data.length - 1"
-                class="mx-2 h-px border-t border-outline-gray-modals"
-              />
+                v-else-if="dealContacts?.data?.length"
+                v-for="(contact, i) in dealContacts.data"
+                :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)">
+                            <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
+                      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>
+                <div
+                  v-if="i != dealContacts.data.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
-              v-else
-              class="flex h-20 items-center justify-center text-base text-ink-gray-5"
-            >
-              {{ __('No contacts added') }}
-            </div>
-          </div>
+          </template>
         </SidePanelLayout>
       </div>
     </Resizer>
@@ -278,6 +312,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import AssignTo from '@/components/AssignTo.vue'
 import FilesUploader from '@/components/FilesUploader/FilesUploader.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'
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index 6972d0f5..0277bcd2 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -65,112 +65,141 @@
               v-model="deal.data"
               :sections="sections.data"
               doctype="CRM Deal"
-              v-slot="{ section }"
               @update="updateField"
               @reload="sections.reload"
             >
-              <div
-                v-if="section.name == 'contacts_section'"
-                class="contacts-area"
-              >
-                <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>
+              <template #actions="{ section }">
+                <div v-if="section.name == 'contacts_section'" 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>
+              <template #default="{ section }">
                 <div
-                  v-else-if="section.contacts.length"
-                  v-for="(contact, i) in section.contacts"
-                  :key="contact.name"
+                  v-if="section.name == 'contacts_section'"
+                  class="contacts-area"
                 >
                   <div
-                    class="px-2 pb-2.5"
-                    :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
+                    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"
                   >
-                    <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
-                        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>
+                    <LoadingIndicator class="h-4 w-4" />
+                    <span>{{ __('Loading...') }}</span>
                   </div>
                   <div
-                    v-if="i != section.contacts.length - 1"
-                    class="mx-2 h-px border-t border-outline-gray-modals"
-                  />
+                    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
+                          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>
+                    <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
-                  v-else
-                  class="flex h-20 items-center justify-center text-base text-ink-gray-5"
-                >
-                  {{ __('No contacts added') }}
-                </div>
-              </div>
+              </template>
             </SidePanelLayout>
           </div>
         </div>
@@ -224,6 +253,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import AssignTo from '@/components/AssignTo.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import Section from '@/components/Section.vue'
+import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'