diff --git a/crm/fcrm/doctype/crm_task/crm_task.json b/crm/fcrm/doctype/crm_task/crm_task.json
index bb962714..cdb95c61 100644
--- a/crm/fcrm/doctype/crm_task/crm_task.json
+++ b/crm/fcrm/doctype/crm_task/crm_task.json
@@ -59,7 +59,7 @@
   },
   {
    "fieldname": "due_date",
-   "fieldtype": "Date",
+   "fieldtype": "Datetime",
    "label": "Due Date"
   },
   {
@@ -87,7 +87,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-01-19 21:55:42.654547",
+ "modified": "2024-02-08 12:04:00.955984",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Task",
diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index d2319ce8..da4d4e47 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -154,8 +154,12 @@
               </div>
               <div v-if="task.due_date" class="flex gap-2">
                 <CalendarIcon />
-                <Tooltip :text="dateFormat(task.due_date, 'ddd, MMM D, YYYY')">
-                  {{ dateFormat(task.due_date, 'D MMM') }}
+                <Tooltip
+                  :text="
+                    dateFormat(task.due_date, 'ddd, MMM D, YYYY | hh:mm a')
+                  "
+                >
+                  {{ dateFormat(task.due_date, 'D MMM, hh:mm a') }}
                 </Tooltip>
               </div>
               <div class="flex items-center justify-center">
@@ -367,24 +371,24 @@
                 </Tooltip>
               </div>
               <div class="flex gap-0.5">
-              <Tooltip text="Reply">
-                <Button
-                  variant="ghost"
-                  class="text-gray-700"
-                  @click="reply(activity.data)"
-                >
-                  <ReplyIcon class="h-4 w-4" />
-                </Button>
-              </Tooltip>
-              <Tooltip text="Reply All">
-                <Button
-                  variant="ghost"
-                  class="text-gray-700"
-                  @click="reply(activity.data, true)"
-                >
-                  <ReplyAllIcon class="h-4 w-4" />
-                </Button>
-              </Tooltip>
+                <Tooltip text="Reply">
+                  <Button
+                    variant="ghost"
+                    class="text-gray-700"
+                    @click="reply(activity.data)"
+                  >
+                    <ReplyIcon class="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+                <Tooltip text="Reply All">
+                  <Button
+                    variant="ghost"
+                    class="text-gray-700"
+                    @click="reply(activity.data, true)"
+                  >
+                    <ReplyAllIcon class="h-4 w-4" />
+                  </Button>
+                </Tooltip>
               </div>
             </div>
             <div class="text-sm leading-5 text-gray-600">
diff --git a/frontend/src/components/Controls/DatetimePicker.vue b/frontend/src/components/Controls/DatetimePicker.vue
index ed7febb7..26bf680b 100644
--- a/frontend/src/components/Controls/DatetimePicker.vue
+++ b/frontend/src/components/Controls/DatetimePicker.vue
@@ -4,16 +4,14 @@
     class="flex w-full [&>div:first-child]:w-full"
   >
     <template #target="{ togglePopover }">
-      <input
+      <Input
         readonly
         type="text"
         :placeholder="placeholder"
         :value="value && formatter ? formatter(value) : value"
         @focus="!readonly ? togglePopover() : null"
-        :class="[
-          'form-input  block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm placeholder-gray-500',
-          inputClass,
-        ]"
+        :class="inputClass"
+        v-bind="$attrs"
       />
     </template>
     <template #body="{ togglePopover }">
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index 52b61ed9..34204853 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -17,17 +17,18 @@
         v-slot="{ column, item }"
         :row="row"
       >
-        <div
+        <Tooltip
           v-if="column.key === 'due_date'"
-          class="flex items-center gap-2 text-base"
+          class="flex items-center gap-2 truncate text-base"
+          :text="dateFormat(item, 'ddd, MMM D, YYYY | hh:mm a')"
         >
-          <CalendarIcon />
-          <div v-if="item">
-            <Tooltip :text="dateFormat(item, 'ddd, MMM D, YYYY')">
-              {{ dateFormat(item, 'D MMM') }}
-            </Tooltip>
+          <div>
+            <CalendarIcon />
           </div>
-        </div>
+          <div v-if="item" class="truncate">
+            {{ dateFormat(item, 'D MMM, hh:mm a') }}
+          </div>
+        </Tooltip>
         <ListRowItem v-else :item="item">
           <template #prefix>
             <div v-if="column.key === 'status'">
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 46f5df4d..70dec7d7 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -80,12 +80,13 @@
               </Tooltip>
             </template>
           </Link>
-          <DatePicker
+          <DatetimePicker
             class="datepicker w-36"
-            v-model="_task.due_date"
+            icon-left="calendar"
+            :value="_task.due_date"
+            @change="(val) => (_task.due_date = val)"
             placeholder="Due Date"
             input-class="border-none"
-            :formatValue="(val) => val.split('-').reverse().join('-')"
           />
           <Dropdown :options="taskPriorityOptions(updateTaskPriority)">
             <Button :label="_task.priority" class="w-full justify-between">
@@ -108,7 +109,8 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { taskStatusOptions, taskPriorityOptions } from '@/utils'
 import { usersStore } from '@/stores/users'
-import { TextEditor, Dropdown, Tooltip, DatePicker, call } from 'frappe-ui'
+import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
+import { TextEditor, Dropdown, Tooltip, call } from 'frappe-ui'
 import { ref, defineModel, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 0dd794ce..5f1c3e98 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
+  <div class="flex items-center justify-between px-5 py-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">