diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index b93c2357..6ecd6ca8 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -15,7 +15,7 @@
         "
       >
         <div v-for="field in section.fields" :key="field.name">
-          <div class="mb-2 text-sm text-gray-600">
+          <div v-if="field.type != 'Check'" class="mb-2 text-sm text-gray-600">
             {{ __(field.label) }}
             <span class="text-red-500" v-if="field.mandatory">*</span>
           </div>
@@ -32,6 +32,25 @@
               <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-gray-600"
+              @click="data[field.name] = !data[field.name]"
+            >
+              {{ __(field.label) }}
+              <span class="text-red-500" v-if="field.mandatory">*</span>
+            </label>
+          </div>
           <Link
             v-else-if="field.type === 'Link'"
             class="form-control"
@@ -113,6 +132,34 @@
               </template>
             </NestedPopover>
           </div>
+          <DatetimePicker
+            v-else-if="field.type === 'Datetime'"
+            icon-left="calendar"
+            :value="data[field.name]"
+            @change="(val) => (data[field.name] = val)"
+            :placeholder="__(field.placeholder || field.label)"
+            input-class="border-none"
+          />
+          <DatePicker
+            v-else-if="field.type === 'Date'"
+            icon-left="calendar"
+            :value="data[field.name]"
+            @change="(val) => (data[field.name] = val)"
+            :placeholder="__(field.placeholder || field.label)"
+            input-class="border-none"
+          />
+          <FormControl
+            v-else-if="['Small Text', 'Text', 'Long Text'].includes(field.type)"
+            type="textarea"
+            :placeholder="__(field.placeholder || field.label)"
+            v-model="data[field.name]"
+          />
+          <FormControl
+            v-else-if="['Int'].includes(field.type)"
+            type="number"
+            :placeholder="__(field.placeholder || field.label)"
+            v-model="data[field.name]"
+          />
           <FormControl
             v-else
             type="text"
@@ -126,6 +173,8 @@
 </template>
 
 <script setup>
+import DatePicker from '@/components/Controls/DatePicker.vue'
+import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import DropdownItem from '@/components/DropdownItem.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
@@ -133,7 +182,6 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { Tooltip } from 'frappe-ui'
-import { isMobileView } from '@/composables/settings'
 
 const { getUser } = usersStore()