diff --git a/app/component/TimePickerField.js b/app/component/TimePickerField.js
index 57f874c..8861b16 100644
--- a/app/component/TimePickerField.js
+++ b/app/component/TimePickerField.js
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
+import { DesktopTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { handleTwoLength } from "@/helper";
 import ClockField from "@/components/icons/ClockField";
 
@@ -15,9 +15,11 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
   return (
     <div className="w-full relative field-date-picker">
       <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <TimePicker
+        <DesktopTimePicker
           ampm={false}
           open={isOpen}
+          MobileDatePicke
+          vers
           onClose={closeTimePicker}
           disabled={isVacation}
           format="hh:mm"