diff --git a/components/form/login.tsx b/components/form/login.tsx
index 32f8e8e..5c940e5 100644
--- a/components/form/login.tsx
+++ b/components/form/login.tsx
@@ -6,22 +6,31 @@ import { Button } from "@heroui/button";
 import Link from "next/link";
 import Cookies from "js-cookie";
 import { close, error, loading } from "@/config/swal";
-import { checkUsernames, getProfile, postSignIn } from "@/service/master-user";
+import {
+  checkUsernames,
+  getProfile,
+  otpRequest,
+  otpValidation,
+  postSignIn,
+} from "@/service/master-user";
 import { useRouter } from "next/navigation";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { saveActivity } from "@/service/activity-log";
 import { Image } from "@heroui/react";
+import { InputOtp } from "@heroui/input-otp";
 
 export default function Login() {
   const router = useRouter();
   const [isVisible, setIsVisible] = React.useState(false);
 
   const toggleVisibility = () => setIsVisible(!isVisible);
-
+  const [needOtp, setNeedOtp] = useState(false);
+  const [otpValue, setOtpValue] = useState("");
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-
+  const [accessData, setAccessData] = useState<any>();
+  const [profile, setProfile] = useState<any>();
   const onSubmit = async () => {
     const data = {
       username: username,
@@ -36,73 +45,19 @@ export default function Login() {
       if (response?.error) {
         error("Username / Password Tidak Sesuai");
       } else {
+        setAccessData(response?.data?.data);
         const access_token: any = response?.data?.data?.access_token;
         const refresh_token: any = response?.data?.data?.refresh_token;
-        const dateTime: any = new Date();
-        const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
-
-        Cookies.set("access_token", access_token, {
-          expires: 1,
-        });
-        Cookies.set("refresh_token", refresh_token, {
-          expires: 1,
-        });
-        Cookies.set("time_refresh", newTime, {
-          expires: 1,
-        });
-        Cookies.set("is_first_login", "true", {
-          secure: true,
-          sameSite: "strict",
-        });
         const profile = await getProfile(access_token);
-        const resActivity = await saveActivity(
-          {
-            activityTypeId: 1,
-            url: "https://kontenhumas.com/auth",
-            userId: profile?.data?.data?.id,
-          },
-          response?.data?.data?.id_token
+        console.log("PROFILE : ", profile?.data?.data?.email);
+        setProfile(profile?.data?.data);
+        const res = await otpRequest(
+          profile?.data?.data?.email,
+          profile?.data?.data?.fullname
         );
-        console.log("PROFILE : ", profile?.data);
-        Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
-          expires: 1,
-        });
-        Cookies.set("uie", profile?.data?.data?.id, {
-          expires: 1,
-        });
-        Cookies.set("ufne", profile?.data?.data?.fullname, {
-          expires: 1,
-        });
-        Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
-          expires: 1,
-        });
-        Cookies.set("username", profile?.data?.data?.username, {
-          expires: 1,
-        });
-        Cookies.set("urie", profile?.data?.data?.roleId, {
-          expires: 1,
-        });
-        Cookies.set("roleName", profile?.data?.data?.roleName, {
-          expires: 1,
-        });
-        Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
-          expires: 1,
-        });
-        Cookies.set("ulne", profile?.data?.data?.userLevelId, {
-          expires: 1,
-        });
-        Cookies.set("urce", profile?.data?.data?.roleCode, {
-          expires: 1,
-        });
-        Cookies.set("email", profile?.data?.data?.email, {
-          expires: 1,
-        });
+        setNeedOtp(true);
 
-        router.push("/admin/dashboard");
         close();
-        Cookies.set("status", "login", {
-          expires: 1,
-        });
       }
     }
     // }
@@ -148,6 +103,78 @@ export default function Login() {
     });
   };
 
+  const submitOtp = async () => {
+    loading();
+    const validation = await otpValidation(profile?.email, otpValue);
+    if (validation?.error) {
+      error("OTP Tidak Sesuai");
+      return false;
+    }
+    const dateTime: any = new Date();
+
+    const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
+
+    Cookies.set("access_token", accessData?.access_token, {
+      expires: 1,
+    });
+    Cookies.set("refresh_token", accessData?.refresh_token, {
+      expires: 1,
+    });
+    Cookies.set("time_refresh", newTime, {
+      expires: 1,
+    });
+    Cookies.set("is_first_login", "true", {
+      secure: true,
+      sameSite: "strict",
+    });
+    const resActivity = await saveActivity(
+      {
+        activityTypeId: 1,
+        url: "https://kontenhumas.com/auth",
+        userId: profile?.data?.data?.id,
+      },
+      accessData?.id_token
+    );
+    Cookies.set("profile_picture", profile?.profilePictureUrl, {
+      expires: 1,
+    });
+    Cookies.set("uie", profile?.id, {
+      expires: 1,
+    });
+    Cookies.set("ufne", profile?.fullname, {
+      expires: 1,
+    });
+    Cookies.set("ulie", profile?.userLevelGroup, {
+      expires: 1,
+    });
+    Cookies.set("username", profile?.username, {
+      expires: 1,
+    });
+    Cookies.set("urie", profile?.roleId, {
+      expires: 1,
+    });
+    Cookies.set("roleName", profile?.roleName, {
+      expires: 1,
+    });
+    Cookies.set("masterPoldaId", profile?.masterPoldaId, {
+      expires: 1,
+    });
+    Cookies.set("ulne", profile?.userLevelId, {
+      expires: 1,
+    });
+    Cookies.set("urce", profile?.roleCode, {
+      expires: 1,
+    });
+    Cookies.set("email", profile?.email, {
+      expires: 1,
+    });
+    router.push("/admin/dashboard");
+    Cookies.set("status", "login", {
+      expires: 1,
+    });
+    close();
+  };
+
   return (
     <div className="flex flex-row h-full">
       <div
@@ -174,7 +201,31 @@ export default function Login() {
           />
         </Link>
       </div>
-      {isResetPassword ? (
+      {needOtp ? (
+        <div className="bg-[#1F1A17] w-full md:w-2/5 p-8  md:px-24 justify-center flex flex-col">
+          <p className="text-[72px] text-[#DD8306] font-semibold mb-10">
+            Login
+          </p>
+          <p className="my-2 text-white">OTP</p>
+          <InputOtp length={6} value={otpValue} onValueChange={setOtpValue} />
+
+          <Button
+            size="lg"
+            className="w-fit bg-[#DD8306] rounded-md font-semibold my-3 text-white"
+            onPress={submitOtp}
+          >
+            Submit
+          </Button>
+          <div className="flex justify-between md:justify-end my-2 text-white">
+            <Link
+              href={`/`}
+              className="text-[#DD8306] cursor-pointer md:hidden"
+            >
+              Beranda
+            </Link>
+          </div>
+        </div>
+      ) : isResetPassword ? (
         <div className="bg-[#1F1A17] w-full md:w-2/5 p-8  md:px-24 justify-center flex flex-col">
           <p className="text-[72px] text-[#DD8306] font-semibold mb-10">
             Reset Password