diff --git a/crm/api/doc.py b/crm/api/doc.py
index 9a47b355..a704bb94 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -200,6 +200,9 @@ def get_field_obj(field):
 		"label": field.label,
 		"type": get_type(field),
 		"name": field.fieldname,
+		"hidden": field.hidden,
+		"reqd": field.reqd,
+		"read_only": field.read_only,
 	}
 
 	obj["placeholder"] = "Add " + field.label + "..."
diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index 85c39f61..6932b3aa 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -3,6 +3,7 @@
     <div
       v-for="field in fields"
       :key="field.label"
+      :class="[field.hidden && 'hidden']"
       class="flex items-center gap-2 px-3 leading-5 first:mt-3"
     >
       <div class="w-[106px] shrink-0 text-sm text-gray-600">
@@ -11,8 +12,15 @@
       <div
         class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
       >
+        <Tooltip
+          v-if="field.read_only"
+          class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
+          :text="field.tooltip"
+        >
+          {{ data[field.name] }}
+        </Tooltip>
         <FormControl
-          v-if="
+          v-else-if="
             [
               'email',
               'number',
@@ -70,13 +78,6 @@
           @change="(data) => emit('update', field.name, data)"
           :onCreate="field.create"
         />
-        <Tooltip
-          v-else-if="field.type === 'read_only'"
-          class="flex h-7 cursor-pointer items-center px-2 py-1"
-          :text="field.tooltip"
-        >
-          {{ field.value }}
-        </Tooltip>
         <FormControl
           v-else
           class="form-control"