diff --git a/crm/api/doc.py b/crm/api/doc.py
index f8e20b85..0c535e99 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -534,8 +534,10 @@ def get_assigned_users(doctype, name, default_assigned_to=None):
 
 
 @frappe.whitelist()
-def get_fields(doctype: str):
+def get_fields(doctype: str, allow_all_fieldtypes: bool = False):
 	not_allowed_fieldtypes = list(frappe.model.no_value_fields) + ["Read Only"]
+	if allow_all_fieldtypes:
+		not_allowed_fieldtypes = []
 	fields = frappe.get_meta(doctype).fields
 
 	_fields = []
@@ -553,6 +555,7 @@ def get_fields(doctype: str):
 				"type": field.fieldtype,
 				"value": field.fieldname,
 				"options": field.options,
+				"mandatory": field.reqd,
 			})
 
 	return _fields
\ No newline at end of file
diff --git a/frontend/src/components/Settings/TwilioSettings.vue b/frontend/src/components/Settings/TwilioSettings.vue
index ba955dc3..2842d1bf 100644
--- a/frontend/src/components/Settings/TwilioSettings.vue
+++ b/frontend/src/components/Settings/TwilioSettings.vue
@@ -1,3 +1,65 @@
 <template>
-    Twilio Settings
-</template>
\ No newline at end of file
+  <div class="flex flex-col gap-8 h-full">
+    <h2 class="text-xl font-semibold leading-none">
+      {{ __('Twilio Settings') }}
+    </h2>
+    <div class="flex-1 overflow-y-auto">
+      <Fields
+        v-if="data?.doc && sections"
+        :sections="sections"
+        :data="data.doc"
+      />
+    </div>
+    <div class="flex flex-row-reverse">
+      <Button :label="__('Update')" variant="solid" />
+    </div>
+  </div>
+</template>
+<script setup>
+import Fields from '@/components/Fields.vue'
+import { createDocumentResource, createResource } from 'frappe-ui'
+import { computed } from 'vue'
+
+const fields = createResource({
+  url: 'crm.api.doc.get_fields',
+  cache: ['fields', 'Twilio Settings'],
+  params: {
+    doctype: 'Twilio Settings',
+    allow_all_fieldtypes: true,
+  },
+  auto: true,
+})
+
+const data = createDocumentResource({
+  doctype: 'Twilio Settings',
+  name: 'Twilio Settings',
+  fields: ['*'],
+  cache: 'Twilio Settings',
+  auto: true,
+})
+
+const sections = computed(() => {
+  if (!fields.data) return []
+  let _sections = []
+  let fieldsData = fields.data
+
+  fieldsData.forEach((field) => {
+    if (field.type === 'Section Break') {
+      _sections.push({
+        label: field.value,
+        columns: 1,
+        fields: [],
+      })
+    } else if (field.type === 'Column Break') {
+      _sections[_sections.length - 1].columns += 1
+    } else {
+      _sections[_sections.length - 1].fields.push({
+        ...field,
+        name: field.value,
+      })
+    }
+  })
+
+  return _sections
+})
+</script>
diff --git a/frontend/src/components/Settings/WhatsAppSettings.vue b/frontend/src/components/Settings/WhatsAppSettings.vue
index cd50fdb3..6023a2b7 100644
--- a/frontend/src/components/Settings/WhatsAppSettings.vue
+++ b/frontend/src/components/Settings/WhatsAppSettings.vue
@@ -1,3 +1,72 @@
 <template>
-    WhatsApp Settings
-</template>
\ No newline at end of file
+  <div class="flex h-full flex-col gap-8">
+    <h2 class="text-xl font-semibold leading-none">
+      {{ __('WhatsApp Settings') }}
+    </h2>
+    <div class="flex-1 overflow-y-auto">
+      <Fields
+        v-if="data?.doc && sections"
+        :sections="sections"
+        :data="data.doc"
+      />
+    </div>
+    <div class="flex flex-row-reverse">
+      <Button :label="__('Update')" variant="solid" />
+    </div>
+  </div>
+</template>
+<script setup>
+import Fields from '@/components/Fields.vue'
+import { createDocumentResource, createResource } from 'frappe-ui'
+import { computed } from 'vue'
+
+const fields = createResource({
+  url: 'crm.api.doc.get_fields',
+  cache: ['fields', 'WhatsApp Settings'],
+  params: {
+    doctype: 'WhatsApp Settings',
+    includeAllFields: true,
+  },
+  auto: true,
+})
+
+const data = createDocumentResource({
+  doctype: 'WhatsApp Settings',
+  name: 'WhatsApp Settings',
+  fields: ['*'],
+  cache: 'WhatsApp Settings',
+  auto: true,
+})
+
+const sections = computed(() => {
+  if (!fields.data) return []
+  let _sections = []
+  let fieldsData = fields.data
+
+  if (fieldsData[0].type !== 'Section Break') {
+    _sections.push({
+      label: 'General',
+      columns: 1,
+      fields: [],
+    })
+  }
+  fieldsData.forEach((field) => {
+    if (field.type === 'Section Break') {
+      _sections.push({
+        label: field.value,
+        columns: 1,
+        fields: [],
+      })
+    } else if (field.type === 'Column Break') {
+      _sections[_sections.length - 1].columns += 1
+    } else {
+      _sections[_sections.length - 1].fields.push({
+        ...field,
+        name: field.value,
+      })
+    }
+  })
+
+  return _sections
+})
+</script>