diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 937ba891..0acf08d2 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -108,15 +108,15 @@
         @updateField="updateField"
       />
       <div
-        v-if="detailSections.length"
+        v-if="fieldsLayout.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 detailSections"
+            v-for="(section, i) in fieldsLayout.data"
             :key="section.label"
             class="flex flex-col p-3"
-            :class="{ 'border-b': i !== detailSections.length - 1 }"
+            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
             <Section :is-opened="section.opened" :label="section.label">
               <template #actions>
@@ -480,10 +480,12 @@ const tabs = computed(() => {
   return tabOptions.filter((tab) => (tab.condition ? tab.condition() : true))
 })
 
-const detailSections = computed(() => {
-  let data = deal.data
-  if (!data) return []
-  return getParsedFields(data.doctype_fields, deal_contacts.data)
+const fieldsLayout = createResource({
+  url: 'crm.api.doc.get_sidebar_fields',
+  cache: ['fieldsLayout', props.dealId],
+  params: { doctype: 'CRM Deal', name: props.dealId },
+  auto: true,
+  transform: (data) => getParsedFields(data, deal_contacts.data),
 })
 
 function getParsedFields(sections, contacts) {
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index a329d529..cddfdab9 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -162,15 +162,15 @@
         @updateField="updateField"
       />
       <div
-        v-if="detailSections.length"
+        v-if="fieldsLayout.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 detailSections"
+            v-for="(section, i) in fieldsLayout.data"
             :key="section.label"
             class="flex flex-col p-3"
-            :class="{ 'border-b': i !== detailSections.length - 1 }"
+            :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
             <Section :is-opened="section.opened" :label="section.label">
               <SectionFields
@@ -469,10 +469,11 @@ function validateFile(file) {
   }
 }
 
-const detailSections = computed(() => {
-  let data = lead.data
-  if (!data) return []
-  return data.doctype_fields
+const fieldsLayout = createResource({
+  url: 'crm.api.doc.get_sidebar_fields',
+  cache: ['fieldsLayout', props.leadId],
+  params: { doctype: 'CRM Lead', name: props.leadId },
+  auto: true,
 })
 
 function updateField(name, value, callback) {