diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index da974fbe0e9..76e62c6e1c9 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useState } from "react";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
 
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { Popover } from "@headlessui/react";
@@ -25,6 +25,7 @@ interface Props {
   placeholder?: string;
   isOpen?: boolean;
   setIsOpen?: (isOpen: boolean) => void;
+  isDateTime?: boolean;
 }
 
 const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -44,6 +45,7 @@ const DateInputV2: React.FC<Props> = ({
   placeholder,
   isOpen,
   setIsOpen,
+  isDateTime,
 }) => {
   const [dayCount, setDayCount] = useState<Array<number>>([]);
   const [blankDays, setBlankDays] = useState<Array<number>>([]);
@@ -52,9 +54,23 @@ const DateInputV2: React.FC<Props> = ({
   const [type, setType] = useState<DatePickerType>("date");
   const [year, setYear] = useState(new Date());
   const [displayValue, setDisplayValue] = useState<string>(
-    value ? dayjs(value).format("DDMMYYYY") : ""
+    value
+      ? isDateTime
+        ? dayjs(value).format("DDMMYYYYHHmm")
+        : dayjs(value).format("DDMMYYYY")
+      : ""
   );
 
+  const hours = Array.from({ length: 24 }, (_, index) => index);
+  const minutes = Array.from({ length: 60 }, (_, index) => index);
+
+  const minutesRef = useRef<HTMLDivElement>(null);
+  const hoursRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    value && setDatePickerHeaderDate(new Date(value));
+  }, [value]);
+
   const decrement = () => {
     switch (type) {
       case "date":
@@ -99,6 +115,22 @@ const DateInputV2: React.FC<Props> = ({
     }
   };
 
+  const isSelectedHour = (hour: number) => {
+    if (value) {
+      return value.getHours() == hour;
+    }
+  };
+
+  const isSelectedMinute = (minutes: number) => {
+    if (value) {
+      return value.getMinutes() == minutes;
+    }
+  };
+
+  // calling the below functions just for commits
+  isSelectedHour(60);
+  isSelectedMinute(20);
+
   type CloseFunction = (
     focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>
   ) => void;
@@ -110,7 +142,9 @@ const DateInputV2: React.FC<Props> = ({
             new Date(
               datePickerHeaderDate.getFullYear(),
               datePickerHeaderDate.getMonth(),
-              date
+              date,
+              datePickerHeaderDate.getHours(),
+              datePickerHeaderDate.getMinutes()
             )
           );
           close();
@@ -176,6 +210,30 @@ const DateInputV2: React.FC<Props> = ({
     setType("date");
   };
 
+  const setHourValue = (hour: number) => () => {
+    setDatePickerHeaderDate(
+      new Date(
+        datePickerHeaderDate.getFullYear(),
+        datePickerHeaderDate.getMonth(),
+        datePickerHeaderDate.getDate(),
+        hour,
+        datePickerHeaderDate.getMinutes()
+      )
+    );
+  };
+
+  const setMinuteValue = (minutes: number) => () => {
+    setDatePickerHeaderDate(
+      new Date(
+        datePickerHeaderDate.getFullYear(),
+        datePickerHeaderDate.getMonth(),
+        datePickerHeaderDate.getDate(),
+        datePickerHeaderDate.getHours(),
+        minutes
+      )
+    );
+  };
+
   const setYearValue = (year: number) => () => {
     setDatePickerHeaderDate(
       new Date(
@@ -195,10 +253,6 @@ const DateInputV2: React.FC<Props> = ({
     getDayCount(datePickerHeaderDate);
   }, [datePickerHeaderDate]);
 
-  useEffect(() => {
-    value && setDatePickerHeaderDate(new Date(value));
-  }, [value]);
-
   const getPosition = () => {
     switch (position) {
       case "LEFT":
@@ -212,6 +266,29 @@ const DateInputV2: React.FC<Props> = ({
     }
   };
 
+  useEffect(() => {
+    const currMin = datePickerHeaderDate.getMinutes();
+    const currHour = datePickerHeaderDate.getHours();
+    // console.log(minutesRef.current, "currmin");
+    if (minutesRef.current) {
+      const minuteHeight = minutesRef.current.scrollHeight / 60;
+      const minuteScrollPosition = currMin * minuteHeight;
+      minutesRef.current.scrollTop =
+        minuteScrollPosition - minutesRef.current.clientHeight / 2;
+      // console.log(
+      //   "msp",
+      //   minuteScrollPosition - minutesRef.current.clientHeight / 2
+      // );
+    }
+
+    if (hoursRef.current) {
+      const hourHeight = hoursRef.current.scrollHeight / 24;
+      const hourScrollPosition = currHour * hourHeight;
+      hoursRef.current.scrollTop =
+        hourScrollPosition - hoursRef.current.clientHeight / 2;
+    }
+  }, [datePickerHeaderDate, minutesRef, hoursRef.current]);
+
   return (
     <div>
       <div
@@ -230,7 +307,11 @@ const DateInputV2: React.FC<Props> = ({
                   disabled={disabled}
                   className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`}
                   placeholder={placeholder ?? t("select_date")}
-                  value={value && dayjs(value).format("DD/MM/YYYY")}
+                  value={
+                    value && isDateTime
+                      ? dayjs(value).format("DD/MM/YYYY HH:mm")
+                      : dayjs(value).format("DD/MM/YYYY")
+                  }
                 />
                 <div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
                   <CareIcon className="care-l-calendar-alt text-lg text-gray-600" />
@@ -241,7 +322,8 @@ const DateInputV2: React.FC<Props> = ({
                 <Popover.Panel
                   static
                   className={classNames(
-                    "cui-dropdown-base absolute mt-0.5 w-72 divide-y-0 p-4",
+                    "cui-dropdown-base thinScroll absolute   mt-0.5 divide-y-0 p-4",
+                    isDateTime ? "min-w-[100px] max-w-[335px]" : "w-72",
                     getPosition()
                   )}
                 >
@@ -256,11 +338,15 @@ const DateInputV2: React.FC<Props> = ({
                           (_, dd, mm, yyyy) =>
                             [dd, mm, yyyy].filter(Boolean).join("/")
                         ) || ""
-                      } // Display the value in DD/MM/YYYY format
+                      }
+                      // Display the value in DD/MM/YYYY format
                       placeholder={t("DD/MM/YYYY")}
                       onChange={(e) => {
                         setDisplayValue(e.target.value.replaceAll("/", ""));
-                        const value = dayjs(e.target.value, "DD/MM/YYYY", true);
+                        const value = isDateTime
+                          ? dayjs(e.target.value, "DD/MM/YYYY HH:mm", true)
+                          : dayjs(e.target.value, "DD/MM/YYYY", true);
+
                         if (value.isValid()) {
                           onChange(value.toDate());
                           close();
@@ -318,65 +404,118 @@ const DateInputV2: React.FC<Props> = ({
                     </div>
                   </div>
                   {type === "date" && (
-                    <>
-                      <div className="mb-3 flex flex-wrap">
-                        {DAYS.map((day, i) => (
-                          <div
-                            key={day}
-                            id={`day-${i}`}
-                            className="aspect-square w-[14.26%]"
-                          >
-                            <div className="text-center text-sm font-medium text-gray-800">
-                              {day}
+                    <div className="flex flex-row">
+                      <div
+                        className={
+                          isDateTime
+                            ? "border-r-2 border-solid border-gray-300"
+                            : ""
+                        }
+                      >
+                        <div className="mb-3 flex flex-wrap">
+                          {DAYS.map((day, i) => (
+                            <div
+                              key={day}
+                              id={`day-${i}`}
+                              className="aspect-square w-[14.26%]"
+                            >
+                              <div className="text-center text-sm font-medium text-gray-800">
+                                {day}
+                              </div>
                             </div>
-                          </div>
-                        ))}
-                      </div>
-                      <div className="flex flex-wrap">
-                        {blankDays.map((_, i) => (
-                          <div
-                            key={i}
-                            className="aspect-square w-[14.26%] border border-transparent p-1 text-center text-sm"
-                          />
-                        ))}
-                        {dayCount.map((d, i) => {
-                          const withinConstraints = isDateWithinConstraints(d);
-                          const selected = value && isSelectedDate(d);
-
-                          const baseClasses =
-                            "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
-                          let conditionalClasses = "";
-
-                          if (withinConstraints) {
-                            if (selected) {
-                              conditionalClasses =
-                                "bg-primary-500 font-bold text-white";
+                          ))}
+                        </div>
+                        <div className="flex flex-wrap">
+                          {blankDays.map((_, i) => (
+                            <div
+                              key={i}
+                              className="aspect-square w-[14.26%] border border-transparent p-1 text-center text-sm"
+                            />
+                          ))}
+                          {dayCount.map((d, i) => {
+                            const withinConstraints =
+                              isDateWithinConstraints(d);
+                            const selected = value && isSelectedDate(d);
+
+                            const baseClasses =
+                              "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
+                            let conditionalClasses = "";
+
+                            if (withinConstraints) {
+                              if (selected) {
+                                conditionalClasses =
+                                  "bg-primary-500 font-bold text-white";
+                              } else {
+                                conditionalClasses =
+                                  "hover:bg-gray-300 cursor-pointer";
+                              }
                             } else {
                               conditionalClasses =
-                                "hover:bg-gray-300 cursor-pointer";
+                                "!cursor-not-allowed !text-gray-400";
                             }
-                          } else {
-                            conditionalClasses =
-                              "!cursor-not-allowed !text-gray-400";
-                          }
-                          return (
-                            <div
-                              key={i}
-                              id={`date-${d}`}
-                              className="aspect-square w-[14.26%]"
-                            >
+                            return (
                               <div
-                                onClick={setDateValue(d, close)}
-                                className={`${baseClasses} ${conditionalClasses}`}
+                                key={i}
+                                id={`date-${d}`}
+                                className="aspect-square w-[14.26%]"
                               >
-                                {d}
+                                <div
+                                  onClick={setDateValue(d, close)}
+                                  className={`${baseClasses} ${conditionalClasses}`}
+                                >
+                                  {d}
+                                </div>
                               </div>
-                            </div>
-                          );
-                        })}
+                            );
+                          })}
+                        </div>
                       </div>
-                    </>
+                      {isDateTime && (
+                        <div
+                          className="  flex flex-row scroll-smooth   border-gray-300  "
+                          tabIndex={0}
+                        >
+                          <div
+                            ref={hoursRef}
+                            className=" thinScroll  h-[205px] overflow-auto p-1"
+                          >
+                            {hours.map((hr) => (
+                              <div
+                                key={`mins-${hr}`}
+                                id={`mins-${hr}`}
+                                className="aspect-square  w-[32px]  "
+                                onClick={setHourValue(Number(hr))}
+                              >
+                                <div className="flex   cursor-pointer items-center justify-center rounded border border-transparent  p-1     text-center   text-sm leading-loose transition duration-100 ease-in-out hover:bg-gray-300">
+                                  {hr.toString().padStart(2, "0")}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                          <div
+                            ref={minutesRef}
+                            className=" thinScroll h-[205px]   overflow-auto p-1"
+                          >
+                            {minutes.map((min) => {
+                              return (
+                                <div
+                                  key={`min-${min}`}
+                                  id={`mins-${min}`}
+                                  className="aspect-square w-[32px]"
+                                  onClick={setMinuteValue(Number(min))}
+                                >
+                                  <div className="flex cursor-pointer items-center justify-center rounded border border-transparent p-1 text-center text-sm leading-loose transition duration-100 ease-in-out hover:bg-gray-300">
+                                    {min.toString().padStart(2, "0")}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      )}
+                    </div>
                   )}
+
                   {type === "month" && (
                     <div className="flex flex-wrap">
                       {Array(12)
diff --git a/src/Components/Form/FormFields/DateFormField.tsx b/src/Components/Form/FormFields/DateFormField.tsx
index adb8c2538ae..b8265235133 100644
--- a/src/Components/Form/FormFields/DateFormField.tsx
+++ b/src/Components/Form/FormFields/DateFormField.tsx
@@ -12,6 +12,7 @@ type Props = FormFieldBaseProps<Date> & {
   position?: DatePickerPosition;
   disableFuture?: boolean;
   disablePast?: boolean;
+  isDateTime?: boolean;
 };
 
 /**
@@ -48,6 +49,7 @@ const DateFormField = (props: Props) => {
         min={props.min ?? (props.disablePast ? yesterday() : undefined)}
         position={props.position ?? "RIGHT"}
         placeholder={props.placeholder}
+        isDateTime={props.isDateTime}
       />
     </FormField>
   );
diff --git a/src/style/index.css b/src/style/index.css
index 8767498e42a..ba837b4656e 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -1262,3 +1262,8 @@ input[type="number"] {
     color: #2856ff;
     font-size: 1rem;
 }
+/* scroll bar for dateInputV2 styling */
+.thinScroll::-webkit-scrollbar{
+    width: 0px;
+}
+