diff --git a/frontend/src/components/DocFields.vue b/frontend/src/components/DocFields.vue
index 4cee585e..bee3c890 100644
--- a/frontend/src/components/DocFields.vue
+++ b/frontend/src/components/DocFields.vue
@@ -33,7 +33,7 @@
   </div>
   <div
     v-else
-    class="flex flex-col gap-3 mb-3 border border-outline-gray-1 p-5 rounded-lg"
+    class="flex flex-col gap-3 mb-3 border border-outline-gray-1 p-3 sm:p-5 rounded-lg"
   >
     <Fields v-if="sections.data" :sections="sections.data" :data="data.doc" />
   </div>
diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index bb5e0125..98d86e14 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -12,14 +12,7 @@
       >
         {{ section.label }}
       </div>
-      <div
-        class="grid gap-4"
-        :class="
-          section.columns
-            ? 'grid-cols-' + section.columns
-            : 'grid-cols-2 sm:grid-cols-3'
-        "
-      >
+      <div class="grid gap-4" :class="gridClass(section.columns)">
         <div v-for="field in section.fields" :key="field.name">
           <div
             class="settings-field"
@@ -190,6 +183,17 @@ const props = defineProps({
   data: Object,
 })
 
+function gridClass(columns) {
+  columns = columns || 3
+  let griColsMap = {
+    1: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  }
+  return griColsMap[columns]
+}
+
 const getPlaceholder = (field) => {
   if (field.placeholder) {
     return __(field.placeholder)
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index e8652133..ad87bf2b 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -452,6 +452,11 @@ const tabs = computed(() => {
       label: __('Comments'),
       icon: CommentIcon,
     },
+    {
+      name: 'Data',
+      label: __('Data'),
+      icon: DetailsIcon,
+    },
     {
       name: 'Calls',
       label: __('Calls'),
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index d863ff0e..dac90935 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -362,6 +362,11 @@ const tabs = computed(() => {
       label: __('Comments'),
       icon: CommentIcon,
     },
+    {
+      name: 'Data',
+      label: __('Data'),
+      icon: DetailsIcon,
+    },
     {
       name: 'Calls',
       label: __('Calls'),
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index def9e9ed..d1a7f3af 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -6,10 +6,7 @@ module.exports = {
     './node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
     '../node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
   ],
-  safelist: [
-    { pattern: /!(text|bg)-/, variants: ['hover', 'active'] },
-    { pattern: /^grid-cols-/ },
-  ],
+  safelist: [{ pattern: /!(text|bg)-/, variants: ['hover', 'active'] }],
   theme: {
     extend: {},
   },