diff --git a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
index 6926d0b2..0d06ca43 100644
--- a/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
+++ b/crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py
@@ -2,6 +2,7 @@
 # For license information, please see license.txt
 
 import json
+
 import frappe
 from frappe import _
 from frappe.model.document import Document
@@ -10,46 +11,54 @@ from frappe.model.document import Document
 class CRMFieldsLayout(Document):
 	pass
 
+
 @frappe.whitelist()
 def get_fields_layout(doctype: str, type: str):
-	sections = []
+	tabs = []
 	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
 		layout = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
 	else:
 		return []
 
 	if layout.layout:
-		sections = json.loads(layout.layout)
+		tabs = json.loads(layout.layout)
+
+	has_tabs = tabs[0].get("sections") if tabs and tabs[0] else False
+
+	if not has_tabs:
+		tabs = [{"no_tabs": True, "sections": tabs}]
 
 	allowed_fields = []
-	for section in sections:
-		if not section.get("fields"):
-			continue
-		allowed_fields.extend(section.get("fields"))
+	for tab in tabs:
+		for section in tab.get("sections"):
+			if not section.get("fields"):
+				continue
+			allowed_fields.extend(section.get("fields"))
 
 	fields = frappe.get_meta(doctype).fields
 	fields = [field for field in fields if field.fieldname in allowed_fields]
 
-	for section in sections:
-		for field in section.get("fields") if section.get("fields") else []:
-			field = next((f for f in fields if f.fieldname == field), None)
-			if field:
-				if field.fieldtype == "Select" and field.options:
-					field.options = field.options.split("\n")
-					field.options = [{"label": _(option), "value": option} for option in field.options]
-					field.options.insert(0, {"label": "", "value": ""})
-				field = {
-					"label": _(field.label),
-					"name": field.fieldname,
-					"type": field.fieldtype,
-					"options": field.options,
-					"mandatory": field.reqd,
-					"placeholder": field.get("placeholder"),
-					"filters": field.get("link_filters")
-				}
-				section["fields"][section.get("fields").index(field["name"])] = field
+	for tab in tabs:
+		for section in tab.get("sections"):
+			for field in section.get("fields") if section.get("fields") else []:
+				field = next((f for f in fields if f.fieldname == field), None)
+				if field:
+					if field.fieldtype == "Select" and field.options:
+						field.options = field.options.split("\n")
+						field.options = [{"label": _(option), "value": option} for option in field.options]
+						field.options.insert(0, {"label": "", "value": ""})
+					field = {
+						"label": _(field.label),
+						"name": field.fieldname,
+						"type": field.fieldtype,
+						"options": field.options,
+						"mandatory": field.reqd,
+						"placeholder": field.get("placeholder"),
+						"filters": field.get("link_filters"),
+					}
+					section["fields"][section.get("fields").index(field["name"])] = field
 
-	return sections or []
+	return tabs or []
 
 
 @frappe.whitelist()
@@ -59,11 +68,13 @@ def save_fields_layout(doctype: str, type: str, layout: str):
 	else:
 		doc = frappe.new_doc("CRM Fields Layout")
 
-	doc.update({
-		"dt": doctype,
-		"type": type,
-		"layout": layout,
-	})
+	doc.update(
+		{
+			"dt": doctype,
+			"type": type,
+			"layout": layout,
+		}
+	)
 	doc.save(ignore_permissions=True)
 
 	return doc.layout
diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index 4828e329..93330670 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -31,16 +31,8 @@
     <LoadingIndicator class="h-6 w-6" />
     <span>{{ __('Loading...') }}</span>
   </div>
-  <div
-    v-else
-    class="flex flex-col gap-3 border border-outline-gray-1 rounded-lg"
-  >
-    <FieldLayout
-      v-if="sections.data"
-      :sections="sections.data"
-      :data="data.doc"
-      :allowTabs="true"
-    />
+  <div v-else>
+    <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="data.doc" />
   </div>
   <DataFieldsModal
     v-if="showDataFieldsModal"
@@ -98,7 +90,7 @@ const data = createDocumentResource({
   },
 })
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['DataFields', props.doctype],
   params: { doctype: props.doctype, type: 'Data Fields' },
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 3916887c..35f95ad5 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -1,180 +1,209 @@
 <template>
-  <div class="flex flex-col" :class="{ 'my-4 sm:my-6': allowTabs }">
-    <div
-      v-for="(section, i) in sections"
-      :key="section.label"
-      class="section first:border-t-0 border-outline-gray-modals first:pt-0"
+  <div
+    class="flex flex-col"
+    :class="{
+      'border border-outline-gray-1 rounded-lg': hasTabs,
+      'border-outline-gray-modals': modal && hasTabs,
+    }"
+  >
+    <Tabs
+      v-model="tabIndex"
+      class="!h-full"
+      :tabs="tabs"
+      v-slot="{ tab }"
+      :tablistClass="
+        !hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''
+      "
     >
-      <div
-        v-if="!section.hideBorder && i != 0"
-        class="h-px w-full border-t my-5"
-      />
-      <Section
-        class="text-lg font-medium"
-        :class="{ 'px-3 sm:px-5': allowTabs }"
-        :label="section.label"
-        :hideLabel="section.hideLabel"
-        :opened="section.opened"
-        :collapsible="section.collapsible"
-        collapseIconPosition="right"
-      >
+      <div :class="{ 'my-4 sm:my-6': hasTabs }">
         <div
-          class="grid gap-4 mt-6"
-          :class="[gridClass(section.columns), { 'px-3 sm:px-5': allowTabs }]"
+          v-for="(section, i) in tab.sections"
+          :key="section.label"
+          class="section"
         >
-          <div v-for="field in section.fields" :key="field.name">
+          <div
+            v-if="i != 0"
+            class="w-full"
+            :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
+          />
+          <Section
+            class="text-lg font-medium"
+            :class="{ 'px-3 sm:px-5': hasTabs }"
+            :label="section.label"
+            :hideLabel="section.hideLabel"
+            :opened="section.opened"
+            :collapsible="section.collapsible"
+            collapseIconPosition="right"
+          >
             <div
-              class="settings-field"
-              v-if="
-                (field.type == 'Check' ||
-                  (field.read_only && data[field.name]) ||
-                  !field.read_only ||
-                  !field.hidden) &&
-                (!field.depends_on || field.display_via_depends_on)
-              "
+              class="grid gap-4"
+              :class="[
+                gridClass(section.columns),
+                { 'px-3 sm:px-5': hasTabs },
+                { 'mt-6': !section.hideLabel },
+              ]"
             >
-              <div
-                v-if="field.type != 'Check'"
-                class="mb-2 text-sm text-ink-gray-5"
-              >
-                {{ __(field.label) }}
-                <span
-                  class="text-ink-red-3"
+              <div v-for="field in section.fields" :key="field.name">
+                <div
+                  class="settings-field"
                   v-if="
-                    field.mandatory ||
-                    (field.mandatory_depends_on &&
-                      field.mandatory_via_depends_on)
+                    (field.type == 'Check' ||
+                      (field.read_only && data[field.name]) ||
+                      !field.read_only ||
+                      !field.hidden) &&
+                    (!field.depends_on || field.display_via_depends_on)
                   "
-                  >*</span
                 >
-              </div>
-              <FormControl
-                v-if="field.read_only && field.type !== 'Check'"
-                type="text"
-                :placeholder="getPlaceholder(field)"
-                v-model="data[field.name]"
-                :disabled="true"
-              />
-              <FormControl
-                v-else-if="field.type === 'Select'"
-                type="select"
-                class="form-control"
-                :class="field.prefix ? 'prefix' : ''"
-                :options="field.options"
-                v-model="data[field.name]"
-                :placeholder="getPlaceholder(field)"
-              >
-                <template v-if="field.prefix" #prefix>
-                  <IndicatorIcon :class="field.prefix" />
-                </template>
-              </FormControl>
-              <div
-                v-else-if="field.type == 'Check'"
-                class="flex items-center gap-2"
-              >
-                <FormControl
-                  class="form-control"
-                  type="checkbox"
-                  v-model="data[field.name]"
-                  @change="(e) => (data[field.name] = e.target.checked)"
-                  :disabled="Boolean(field.read_only)"
-                />
-                <label
-                  class="text-sm text-ink-gray-5"
-                  @click="data[field.name] = !data[field.name]"
-                >
-                  {{ __(field.label) }}
-                  <span class="text-ink-red-3" v-if="field.mandatory">*</span>
-                </label>
-              </div>
-              <div class="flex gap-1" v-else-if="field.type === 'Link'">
-                <Link
-                  class="form-control flex-1"
-                  :value="data[field.name]"
-                  :doctype="field.options"
-                  :filters="field.filters"
-                  @change="(v) => (data[field.name] = v)"
-                  :placeholder="getPlaceholder(field)"
-                  :onCreate="field.create"
-                />
-                <Button
-                  v-if="data[field.name] && field.edit"
-                  class="shrink-0"
-                  :label="__('Edit')"
-                  @click="field.edit(data[field.name])"
-                >
-                  <template #prefix>
-                    <EditIcon class="h-4 w-4" />
-                  </template>
-                </Button>
-              </div>
+                  <div
+                    v-if="field.type != 'Check'"
+                    class="mb-2 text-sm text-ink-gray-5"
+                  >
+                    {{ __(field.label) }}
+                    <span
+                      class="text-ink-red-3"
+                      v-if="
+                        field.mandatory ||
+                        (field.mandatory_depends_on &&
+                          field.mandatory_via_depends_on)
+                      "
+                      >*</span
+                    >
+                  </div>
+                  <FormControl
+                    v-if="field.read_only && field.type !== 'Check'"
+                    type="text"
+                    :placeholder="getPlaceholder(field)"
+                    v-model="data[field.name]"
+                    :disabled="true"
+                  />
+                  <FormControl
+                    v-else-if="field.type === 'Select'"
+                    type="select"
+                    class="form-control"
+                    :class="field.prefix ? 'prefix' : ''"
+                    :options="field.options"
+                    v-model="data[field.name]"
+                    :placeholder="getPlaceholder(field)"
+                  >
+                    <template v-if="field.prefix" #prefix>
+                      <IndicatorIcon :class="field.prefix" />
+                    </template>
+                  </FormControl>
+                  <div
+                    v-else-if="field.type == 'Check'"
+                    class="flex items-center gap-2"
+                  >
+                    <FormControl
+                      class="form-control"
+                      type="checkbox"
+                      v-model="data[field.name]"
+                      @change="(e) => (data[field.name] = e.target.checked)"
+                      :disabled="Boolean(field.read_only)"
+                    />
+                    <label
+                      class="text-sm text-ink-gray-5"
+                      @click="data[field.name] = !data[field.name]"
+                    >
+                      {{ __(field.label) }}
+                      <span class="text-ink-red-3" v-if="field.mandatory"
+                        >*</span
+                      >
+                    </label>
+                  </div>
+                  <div class="flex gap-1" v-else-if="field.type === 'Link'">
+                    <Link
+                      class="form-control flex-1"
+                      :value="data[field.name]"
+                      :doctype="field.options"
+                      :filters="field.filters"
+                      @change="(v) => (data[field.name] = v)"
+                      :placeholder="getPlaceholder(field)"
+                      :onCreate="field.create"
+                    />
+                    <Button
+                      v-if="data[field.name] && field.edit"
+                      class="shrink-0"
+                      :label="__('Edit')"
+                      @click="field.edit(data[field.name])"
+                    >
+                      <template #prefix>
+                        <EditIcon class="h-4 w-4" />
+                      </template>
+                    </Button>
+                  </div>
 
-              <Link
-                v-else-if="field.type === 'User'"
-                class="form-control"
-                :value="getUser(data[field.name]).full_name"
-                :doctype="field.options"
-                :filters="field.filters"
-                @change="(v) => (data[field.name] = v)"
-                :placeholder="getPlaceholder(field)"
-                :hideMe="true"
-              >
-                <template #prefix>
-                  <UserAvatar class="mr-2" :user="data[field.name]" size="sm" />
-                </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">
-                      {{ getUser(option.value).full_name }}
-                    </div>
-                  </Tooltip>
-                </template>
-              </Link>
-              <DateTimePicker
-                v-else-if="field.type === 'Datetime'"
-                v-model="data[field.name]"
-                icon-left=""
-                :formatter="(date) => getFormat(date, '', true, true)"
-                :placeholder="getPlaceholder(field)"
-                input-class="border-none"
-              />
-              <DatePicker
-                v-else-if="field.type === 'Date'"
-                icon-left=""
-                v-model="data[field.name]"
-                :formatter="(date) => getFormat(date, '', true)"
-                :placeholder="getPlaceholder(field)"
-                input-class="border-none"
-              />
-              <FormControl
-                v-else-if="
-                  ['Small Text', 'Text', 'Long Text'].includes(field.type)
-                "
-                type="textarea"
-                :placeholder="getPlaceholder(field)"
-                v-model="data[field.name]"
-              />
-              <FormControl
-                v-else-if="['Int'].includes(field.type)"
-                type="number"
-                :placeholder="getPlaceholder(field)"
-                v-model="data[field.name]"
-              />
-              <FormControl
-                v-else
-                type="text"
-                :placeholder="getPlaceholder(field)"
-                v-model="data[field.name]"
-                :disabled="Boolean(field.read_only)"
-              />
+                  <Link
+                    v-else-if="field.type === 'User'"
+                    class="form-control"
+                    :value="getUser(data[field.name]).full_name"
+                    :doctype="field.options"
+                    :filters="field.filters"
+                    @change="(v) => (data[field.name] = v)"
+                    :placeholder="getPlaceholder(field)"
+                    :hideMe="true"
+                  >
+                    <template #prefix>
+                      <UserAvatar
+                        class="mr-2"
+                        :user="data[field.name]"
+                        size="sm"
+                      />
+                    </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">
+                          {{ getUser(option.value).full_name }}
+                        </div>
+                      </Tooltip>
+                    </template>
+                  </Link>
+                  <DateTimePicker
+                    v-else-if="field.type === 'Datetime'"
+                    v-model="data[field.name]"
+                    icon-left=""
+                    :formatter="(date) => getFormat(date, '', true, true)"
+                    :placeholder="getPlaceholder(field)"
+                    input-class="border-none"
+                  />
+                  <DatePicker
+                    v-else-if="field.type === 'Date'"
+                    icon-left=""
+                    v-model="data[field.name]"
+                    :formatter="(date) => getFormat(date, '', true)"
+                    :placeholder="getPlaceholder(field)"
+                    input-class="border-none"
+                  />
+                  <FormControl
+                    v-else-if="
+                      ['Small Text', 'Text', 'Long Text'].includes(field.type)
+                    "
+                    type="textarea"
+                    :placeholder="getPlaceholder(field)"
+                    v-model="data[field.name]"
+                  />
+                  <FormControl
+                    v-else-if="['Int'].includes(field.type)"
+                    type="number"
+                    :placeholder="getPlaceholder(field)"
+                    v-model="data[field.name]"
+                  />
+                  <FormControl
+                    v-else
+                    type="text"
+                    :placeholder="getPlaceholder(field)"
+                    v-model="data[field.name]"
+                    :disabled="Boolean(field.read_only)"
+                  />
+                </div>
+              </div>
             </div>
-          </div>
+          </Section>
         </div>
-      </Section>
-    </div>
+      </div>
+    </Tabs>
   </div>
 </template>
 
@@ -186,19 +215,24 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { getFormat } from '@/utils'
-import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
+import { Tabs, Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
+import { ref, computed } from 'vue'
 
 const { getUser } = usersStore()
 
 const props = defineProps({
-  sections: Array,
+  tabs: Array,
   data: Object,
-  allowTabs: {
+  modal: {
     type: Boolean,
     default: false,
   },
 })
 
+const hasTabs = computed(() => !props.tabs[0].no_tabs)
+
+const tabIndex = ref(0)
+
 function gridClass(columns) {
   columns = columns || 3
   let griColsMap = {
diff --git a/frontend/src/components/Modals/AddressModal.vue b/frontend/src/components/Modals/AddressModal.vue
index a23396de..fd7cd25a 100644
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/frontend/src/components/Modals/AddressModal.vue
@@ -22,8 +22,8 @@
             </Button>
           </div>
         </div>
-        <div v-if="sections.data">
-          <FieldLayout :sections="sections.data" :data="_address" />
+        <div v-if="tabs.data">
+          <FieldLayout :tabs="tabs.data" :data="_address" />
           <ErrorMessage class="mt-2" :message="error" />
         </div>
       </div>
@@ -106,7 +106,7 @@ const dialogOptions = computed(() => {
   return { title, size, actions }
 })
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['QuickEntry', 'Address'],
   params: { doctype: 'Address', type: 'Quick Entry' },
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index c7993e7e..8487985a 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -59,7 +59,7 @@
           </div>
           <FieldLayout
             v-else-if="filteredSections.length"
-            :sections="filteredSections"
+            :tabs="filteredSections"
             :data="_contact"
           />
         </div>
@@ -245,7 +245,7 @@ const detailFields = computed(() => {
   return details.filter((detail) => detail.value)
 })
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['QuickEntry', 'Contact'],
   params: { doctype: 'Contact', type: 'Quick Entry' },
@@ -253,7 +253,7 @@ const sections = createResource({
 })
 
 const filteredSections = computed(() => {
-  let allSections = sections.data || []
+  let allSections = tabs.data?.[0]?.sections || []
   if (!allSections.length) return []
 
   allSections.forEach((s) => {
@@ -276,7 +276,7 @@ const filteredSections = computed(() => {
     })
   })
 
-  return allSections
+  return [{ no_tabs: true, sections: allSections }]
 })
 
 const dirty = computed(() => {
diff --git a/frontend/src/components/Modals/DataFieldsModal.vue b/frontend/src/components/Modals/DataFieldsModal.vue
index dd763d89..17b56b48 100644
--- a/frontend/src/components/Modals/DataFieldsModal.vue
+++ b/frontend/src/components/Modals/DataFieldsModal.vue
@@ -29,13 +29,13 @@
             size="sm"
           />
         </div>
-        <div v-if="sections?.data">
+        <div v-if="tabs?.data">
           <FieldLayoutEditor
             v-if="!preview"
-            :sections="sections.data"
+            :sections="tabs.data"
             :doctype="_doctype"
           />
-          <FieldLayout v-else :sections="sections.data" :data="{}" />
+          <FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
         </div>
       </div>
     </template>
@@ -77,20 +77,20 @@ function getParams() {
   return { doctype: _doctype.value, type: 'Data Fields' }
 }
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['DataFieldsModal', _doctype.value],
   params: getParams(),
   onSuccess(data) {
-    sections.originalData = JSON.parse(JSON.stringify(data))
+    tabs.originalData = JSON.parse(JSON.stringify(data))
   },
 })
 
 watch(
-  () => sections?.data,
+  () => tabs?.data,
   () => {
     dirty.value =
-      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+      JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
   },
   { deep: true },
 )
@@ -99,18 +99,21 @@ onMounted(() => useDebounceFn(reload, 100)())
 
 function reload() {
   nextTick(() => {
-    sections.params = getParams()
-    sections.reload()
+    tabs.params = getParams()
+    tabs.reload()
   })
 }
 
 function saveChanges() {
-  let _sections = JSON.parse(JSON.stringify(sections.data))
-  _sections.forEach((section) => {
-    if (!section.fields) return
-    section.fields = section.fields.map(
-      (field) => field.fieldname || field.name,
-    )
+  let _tabs = JSON.parse(JSON.stringify(tabs.data))
+  _tabs.forEach((tab) => {
+    if (!tab.sections) return
+    tab.sections.forEach((section) => {
+      if (!section.fields) return
+      section.fields = section.fields.map(
+        (field) => field.fieldname || field.name,
+      )
+    })
   })
   loading.value = true
   call(
@@ -118,7 +121,7 @@ function saveChanges() {
     {
       doctype: _doctype.value,
       type: 'Data Fields',
-      layout: JSON.stringify(_sections),
+      layout: JSON.stringify(_tabs),
     },
   ).then(() => {
     loading.value = false
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index da8c9c5a..2ccadec6 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -36,7 +36,7 @@
           <div class="h-px w-full border-t my-5" />
           <FieldLayout
             v-if="filteredSections.length"
-            :sections="filteredSections"
+            :tabs="filteredSections"
             :data="deal"
           />
           <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
@@ -100,28 +100,30 @@ const isDealCreating = ref(false)
 const chooseExistingContact = ref(false)
 const chooseExistingOrganization = ref(false)
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['QuickEntry', 'CRM Deal'],
   params: { doctype: 'CRM Deal', type: 'Quick Entry' },
   auto: true,
-  transform: (data) => {
-    return data.forEach((section) => {
-      section.fields.forEach((field) => {
-        if (field.name == 'status') {
-          field.type = 'Select'
-          field.options = dealStatuses.value
-          field.prefix = getDealStatus(deal.status).iconColorClass
-        } else if (field.name == 'deal_owner') {
-          field.type = 'User'
-        }
+  transform: (_tabs) => {
+    return _tabs.forEach((tab) => {
+      tab.sections.forEach((section) => {
+        section.fields.forEach((field) => {
+          if (field.name == 'status') {
+            field.type = 'Select'
+            field.options = dealStatuses.value
+            field.prefix = getDealStatus(deal.status).iconColorClass
+          } else if (field.name == 'deal_owner') {
+            field.type = 'User'
+          }
+        })
       })
     })
   },
 })
 
 const filteredSections = computed(() => {
-  let allSections = sections.data || []
+  let allSections = tabs.data?.[0]?.sections || []
   if (!allSections.length) return []
 
   let _filteredSections = []
@@ -159,7 +161,7 @@ const filteredSections = computed(() => {
     }
   })
 
-  return _filteredSections
+  return [{ no_tabs: true, sections: _filteredSections }]
 })
 
 const dealStatuses = computed(() => {
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 958b04fd..401afeac 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -23,7 +23,7 @@
           </div>
         </div>
         <div>
-          <FieldLayout v-if="sections.data" :sections="sections.data" :data="lead" />
+          <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="lead" />
           <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
         </div>
       </div>
@@ -63,21 +63,23 @@ const router = useRouter()
 const error = ref(null)
 const isLeadCreating = ref(false)
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['QuickEntry', 'CRM Lead'],
   params: { doctype: 'CRM Lead', type: 'Quick Entry' },
   auto: true,
-  transform: (data) => {
-    return data.forEach((section) => {
-      section.fields.forEach((field) => {
-        if (field.name == 'status') {
-          field.type = 'Select'
-          field.options = leadStatuses.value
-          field.prefix = getLeadStatus(lead.status).iconColorClass
-        } else if (field.name == 'lead_owner') {
-          field.type = 'User'
-        }
+  transform: (_tabs) => {
+    return _tabs.forEach((tab) => {
+      tab.sections.forEach((section) => {
+        section.fields.forEach((field) => {
+          if (field.name == 'status') {
+            field.type = 'Select'
+            field.options = leadStatuses.value
+            field.prefix = getLeadStatus(lead.status).iconColorClass
+          } else if (field.name == 'lead_owner') {
+            field.type = 'User'
+          }
+        })
       })
     })
   },
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index 03bec690..e5f1d589 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -37,7 +37,7 @@
           </div>
           <FieldLayout
             v-else-if="filteredSections.length"
-            :sections="filteredSections"
+            :tabs="filteredSections"
             :data="_organization"
           />
         </div>
@@ -241,7 +241,7 @@ const fields = computed(() => {
   return details.filter((field) => field.value)
 })
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['QuickEntry', 'CRM Organization'],
   params: { doctype: 'CRM Organization', type: 'Quick Entry' },
@@ -249,7 +249,7 @@ const sections = createResource({
 })
 
 const filteredSections = computed(() => {
-  let allSections = sections.data || []
+  let allSections = tabs.data?.[0]?.sections || []
   if (!allSections.length) return []
 
   allSections.forEach((s) => {
@@ -272,7 +272,7 @@ const filteredSections = computed(() => {
     })
   })
 
-  return allSections
+  return [{ no_tabs: true, sections: allSections }]
 })
 
 watch(
diff --git a/frontend/src/components/Modals/QuickEntryModal.vue b/frontend/src/components/Modals/QuickEntryModal.vue
index 903637a2..8859d386 100644
--- a/frontend/src/components/Modals/QuickEntryModal.vue
+++ b/frontend/src/components/Modals/QuickEntryModal.vue
@@ -35,13 +35,13 @@
             size="sm"
           />
         </div>
-        <div v-if="sections?.data">
+        <div v-if="tabs?.data">
           <FieldLayoutEditor
             v-if="!preview"
-            :sections="sections.data"
+            :sections="tabs.data"
             :doctype="_doctype"
           />
-          <FieldLayout v-else :sections="sections.data" :data="{}" />
+          <FieldLayout v-else :tabs="tabs.data" :data="{}" />
         </div>
       </div>
     </template>
@@ -83,20 +83,20 @@ function getParams() {
   return { doctype: _doctype.value, type: 'Quick Entry' }
 }
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['QuickEntryModal', _doctype.value],
   params: getParams(),
   onSuccess(data) {
-    sections.originalData = JSON.parse(JSON.stringify(data))
+    tabs.originalData = JSON.parse(JSON.stringify(data))
   },
 })
 
 watch(
-  () => sections?.data,
+  () => tabs?.data,
   () => {
     dirty.value =
-      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+      JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
   },
   { deep: true },
 )
@@ -105,18 +105,21 @@ onMounted(() => useDebounceFn(reload, 100)())
 
 function reload() {
   nextTick(() => {
-    sections.params = getParams()
-    sections.reload()
+    tabs.params = getParams()
+    tabs.reload()
   })
 }
 
 function saveChanges() {
-  let _sections = JSON.parse(JSON.stringify(sections.data))
-  _sections.forEach((section) => {
-    if (!section.fields) return
-    section.fields = section.fields.map(
-      (field) => field.fieldname || field.name,
-    )
+  let _tabs = JSON.parse(JSON.stringify(tabs.data))
+  _tabs.forEach((tab) => {
+    if (!tab.sections) return
+    tab.sections.forEach((section) => {
+      if (!section.fields) return
+      section.fields = section.fields.map(
+        (field) => field.fieldname || field.name,
+      )
+    })
   })
   loading.value = true
   call(
@@ -124,7 +127,7 @@ function saveChanges() {
     {
       doctype: _doctype.value,
       type: 'Quick Entry',
-      layout: JSON.stringify(_sections),
+      layout: JSON.stringify(_tabs),
     },
   ).then(() => {
     loading.value = false
diff --git a/frontend/src/components/Modals/SidePanelModal.vue b/frontend/src/components/Modals/SidePanelModal.vue
index 06468737..6bd24b18 100644
--- a/frontend/src/components/Modals/SidePanelModal.vue
+++ b/frontend/src/components/Modals/SidePanelModal.vue
@@ -29,18 +29,20 @@
             size="sm"
           />
         </div>
-        <div v-if="sections.data" class="flex gap-4">
+        <div v-if="tabs.data?.[0]?.sections" class="flex gap-4">
           <SidePanelLayoutEditor
             class="flex flex-1 flex-col pr-2"
-            :sections="sections.data"
+            :sections="tabs.data[0].sections"
             :doctype="_doctype"
           />
           <div v-if="preview" class="flex flex-1 flex-col border rounded">
             <div
-              v-for="(section, i) in sections.data"
+              v-for="(section, i) in tabs.data[0].sections"
               :key="section.label"
               class="flex flex-col py-1.5 px-1"
-              :class="{ 'border-b': i !== sections.data?.length - 1 }"
+              :class="{
+                'border-b': i !== tabs.data[0].sections?.length - 1,
+              }"
             >
               <Section
                 class="p-2"
@@ -106,20 +108,20 @@ function getParams() {
   return { doctype: _doctype.value, type: 'Side Panel' }
 }
 
-const sections = createResource({
+const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['SidePanel', _doctype.value],
   params: getParams(),
   onSuccess(data) {
-    sections.originalData = JSON.parse(JSON.stringify(data))
+    tabs.originalData = JSON.parse(JSON.stringify(data))
   },
 })
 
 watch(
-  () => sections?.data,
+  () => tabs?.data,
   () => {
     dirty.value =
-      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+      JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
   },
   { deep: true },
 )
@@ -128,18 +130,20 @@ onMounted(() => useDebounceFn(reload, 100)())
 
 function reload() {
   nextTick(() => {
-    sections.params = getParams()
-    sections.reload()
+    tabs.params = getParams()
+    tabs.reload()
   })
 }
 
 function saveChanges() {
-  let _sections = JSON.parse(JSON.stringify(sections.data))
-  _sections.forEach((section) => {
-    if (!section.fields) return
-    section.fields = section.fields
-      .map((field) => field.fieldname || field.name)
-      .filter(Boolean)
+  let _tabs = JSON.parse(JSON.stringify(tabs.data))
+  _tabs.forEach((tab) => {
+    tab.sections.forEach((section) => {
+      if (!section.fields) return
+      section.fields = section.fields
+        .map((field) => field.fieldname || field.name)
+        .filter(Boolean)
+    })
   })
   loading.value = true
   call(
@@ -147,7 +151,7 @@ function saveChanges() {
     {
       doctype: _doctype.value,
       type: 'Side Panel',
-      layout: JSON.stringify(_sections),
+      layout: JSON.stringify(_tabs),
     },
   ).then(() => {
     loading.value = false
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index d3e60eb0..e8d6c876 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -12,11 +12,7 @@
       />
     </h2>
     <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
-      <FieldLayout
-        v-if="data?.doc && sections"
-        :sections="sections"
-        :data="data.doc"
-      />
+      <FieldLayout v-if="data?.doc && tabs" :tabs="tabs" :data="data.doc" />
       <ErrorMessage class="mt-2" :message="error" />
     </div>
     <div v-else class="flex flex-1 items-center justify-center">
@@ -98,7 +94,7 @@ const data = createDocumentResource({
   },
 })
 
-const sections = computed(() => {
+const tabs = computed(() => {
   if (!fields.data) return []
   let _sections = []
   let fieldsData = fields.data
@@ -138,7 +134,7 @@ const sections = computed(() => {
     }
   })
 
-  return _sections
+  return [{ no_tabs: true, sections: _sections }]
 })
 
 function update() {
@@ -148,7 +144,8 @@ function update() {
 }
 
 function validateMandatoryFields() {
-  for (let section of sections.value) {
+  if (!tabs.value) return false
+  for (let section of tabs.value[0].sections) {
     for (let field of section.fields) {
       if (
         (field.mandatory ||