diff --git a/components/form/content/image/image-detail-form.tsx b/components/form/content/image/image-detail-form.tsx
index 9837565..59d83dd 100644
--- a/components/form/content/image/image-detail-form.tsx
+++ b/components/form/content/image/image-detail-form.tsx
@@ -174,7 +174,7 @@ export default function FormImageDetail() {
   console.log("LALALALA", userLevelName);
   const [modalOpen, setModalOpen] = useState(false);
   const { id } = useParams() as { id: string };
-  console.log(id);
+  console.log("IDIDIDIDI", id);
   const editor = useRef(null);
   type ImageSchema = z.infer<typeof imageSchema>;
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
@@ -676,7 +676,7 @@ export default function FormImageDetail() {
                         <SwiperSlide key={index}>
                           <img
                             className="h-[480px] max-w-[600px]  rounded-md object-cover mx-auto border-2"
-                            src={data}
+                            src={data?.thumbnailUrl}
                             alt={`Image ${index + 1}`}
                           />
                         </SwiperSlide>
diff --git a/components/form/sign-up.tsx b/components/form/sign-up.tsx
index e4544ed..32d7c55 100644
--- a/components/form/sign-up.tsx
+++ b/components/form/sign-up.tsx
@@ -2,92 +2,110 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import Cookies from "js-cookie";
-// import { close, error, loading } from "@/config/swal";
 import { useRouter } from "next/navigation";
-
 import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { Label } from "../ui/label";
-
-// import { saveActivity } from "@/service/activity-log";
-
-import Swal from "sweetalert2";
-import { error } from "console";
-import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
 import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
 
+// ✅ import services
+import { requestOTP, createUser } from "@/service/auth";
+
 export default function SignUp() {
   const router = useRouter();
-  const [isVisible, setIsVisible] = useState(false);
-  const [isVisibleSetup, setIsVisibleSetup] = useState([false, false]);
-  const [oldEmail, setOldEmail] = useState("");
-  const [newEmail, setNewEmail] = useState("");
-  const [passwordSetup, setPasswordSetup] = useState("");
-  const [confPasswordSetup, setConfPasswordSetup] = useState("");
-
-  const toggleVisibility = () => setIsVisible(!isVisible);
-  const [needOtp, setNeedOtp] = useState(false);
-  const [isFirstLogin, setFirstLogin] = 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 [isValidEmail, setIsValidEmail] = useState(false);
-  const [isResetPassword, setIsResetPassword] = useState(false);
-  const [checkUsernameValue, setCheckUsernameValue] = useState("");
   const MySwal = withReactContent(Swal);
 
-  const setValUsername = (e: any) => {
-    const uname = e.replaceAll(/[^\w.-]/g, "");
-    setUsername(uname.toLowerCase());
-  };
-
-  const onSubmit = () => {
-    // Simpan userId dummy ke cookie
-    Cookies.set("userId", "3");
-
-    // (Opsional) Simpan juga data lainnya jika dibutuhkan
-    // Cookies.set("username", username);
-
-    // Redirect ke halaman dashboard atau homepage
-    router.push("/"); // Ganti dengan path sesuai kebutuhan
-  };
-
-  const [step, setStep] = useState<"login" | "otp">("login");
-  const [email, setEmail] = useState("");
+  const [step, setStep] = useState<"login" | "otp" | "form">("login");
   const [role, setRole] = useState("umum");
+  const [email, setEmail] = useState("");
   const [otp, setOtp] = useState(["", "", "", "", "", ""]);
-  const [membership, setMembership] = useState("");
-  const [certNumber, setCertNumber] = useState("");
-  const [membershipType, setMembershipType] = useState("");
-  const [nrp, setNrp] = useState("");
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [whatsapp, setWhatsapp] = useState("");
-  const [namaTenant, setNamaTenant] = useState("");
-  const [tenantPassword, setTenantPassword] = useState("");
-  const [confirmTenantPassword, setConfirmTenantPassword] = useState("");
-  const [firstNameKontributor, setFirstNameKontributor] = useState("");
-  const [lastNameKontributor, setLastNameKontributor] = useState("");
-  const [whatsappKontributor, setWhatsappKontributor] = useState("");
-  const [namaPerusahaan, setNamaPerusahaan] = useState("");
-  const [kategoriPerusahaan, setKategoriPerusahaan] = useState("");
-  const [kontributorPassword, setKontributorPassword] = useState("");
-  const [confirmKontributorPassword, setConfirmKontributorPassword] = useState("");
 
-  const handleSendOtp = (e: React.FormEvent) => {
+  // data user lengkap
+  const [fullname, setFullname] = useState("");
+  const [username, setUsername] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [address, setAddress] = useState("");
+  const [dateOfBirth, setDateOfBirth] = useState("");
+  const [genderType, setGenderType] = useState("male");
+  const [password, setPassword] = useState("");
+  const [workType, setWorkType] = useState("");
+
+  // 🔹 Handle OTP Request
+  const handleSendOtp = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Kirim OTP ke email
-    setStep("otp");
+
+    if (!email) {
+      MySwal.fire("Error", "Email wajib diisi", "error");
+      return;
+    }
+
+    try {
+      const res = await requestOTP({ email, name: fullname || email });
+
+      if (!res?.error) {
+        MySwal.fire("Sukses", "OTP berhasil dikirim ke email anda", "success");
+        setStep("otp");
+      } else {
+        MySwal.fire("Gagal", res.message || "Gagal mengirim OTP", "error");
+      }
+    } catch (err) {
+      console.error("Error send otp:", err);
+      MySwal.fire("Error", "Terjadi kesalahan server", "error");
+    }
   };
 
-  const handleVerifyOtp = (e: React.FormEvent) => {
+  // 🔹 Handle OTP Verification (dummy → lanjut form)
+  const handleVerifyOtp = async (e: React.FormEvent) => {
     e.preventDefault();
     const code = otp.join("");
-    // Verifikasi kode OTP
-    console.log("Kode OTP:", code);
+    if (code.length !== 6) {
+      MySwal.fire("Error", "OTP harus 6 digit", "error");
+      return;
+    }
+    // TODO: ganti dengan verifyOTP API
+    MySwal.fire("Sukses", "OTP diverifikasi!", "success");
+    setStep("form"); // lanjut ke form lengkap
+  };
+
+  // 🔹 Handle Register ke API /users
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+   const payload = {
+  address,
+  clientId: "web-app", // contoh default
+  dateOfBirth,
+  email,
+  fullName: fullname,   // 🔥 fix disini (bukan fullname)
+  genderType,
+  identityGroup: "",
+  identityGroupNumber: "",
+  identityNumber: "",
+  identityType: "",
+  lastEducation: "",
+  password,
+  phoneNumber,
+  userLevelId: 1,
+  userRoleId: 1,
+  username,
+  workType,
+};
+
+
+    try {
+      const res = await createUser(payload);
+      if (!res?.error) {
+        MySwal.fire("Sukses", "Akun berhasil dibuat!", "success");
+        router.push("/login");
+      } else {
+        MySwal.fire("Error", res.message || "Gagal membuat akun", "error");
+      }
+    } catch (err) {
+      console.error("Register error:", err);
+      MySwal.fire("Error", "Terjadi kesalahan server", "error");
+    }
   };
 
   const handleOtpChange = (index: number, value: string) => {
@@ -95,399 +113,133 @@ export default function SignUp() {
     const newOtp = [...otp];
     newOtp[index] = value;
     setOtp(newOtp);
-    // Fokus otomatis ke input selanjutnya
     const nextInput = document.getElementById(`otp-${index + 1}`);
     if (value && nextInput) nextInput.focus();
   };
 
   return (
     <div className="min-h-screen flex">
-      {/* Left Side - Logo Section */}
+      {/* Left Side Logo */}
       <div className="hidden lg:flex lg:w-1/2 bg-white relative overflow-hidden">
-        <div className="absolute inset-0 bg-white"></div>
         <div className="relative z-10 flex items-center justify-center w-full p-12">
           <div className="text-center">
             <Link href={"/"}>
-              <div>
-                <img
-                  src="/Group.png"
-                  alt="Mikul News Logo"
-                  className="max-w-2xl h-auto drop-shadow-lg"
-                />
-              </div>
+              <img src="/Group.png" alt="Logo" className="max-w-2xl h-auto" />
             </Link>
-            <div className="mt-8 text-white/90">
+            <div className="mt-8 text-black">
               <h2 className="text-2xl font-bold mb-2">Portal NetIdhub</h2>
               <p className="text-sm opacity-80">Platform beyond classic</p>
             </div>
           </div>
         </div>
-        {/* Decorative elements */}
-        <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-xl"></div>
-        <div className="absolute bottom-20 right-20 w-32 h-32 bg-white/5 rounded-full blur-2xl"></div>
       </div>
 
-      {/* Right Side - Login Form */}
+      {/* Right Side Form */}
       <div className="w-full lg:w-1/2 flex items-center justify-center p-8">
         <div className="w-full max-w-md">
-          <div className=" ">
-            <div className="text-center mb-8">
-              <div className=" w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-8">
-                <img
-                  src="/logo-netidhub.png"
-                  alt="netidhub Logo"
-                  className="max-w-[150px] h-auto drop-shadow-lg"
-                />
-              </div>
-              <h2 className="text-lg font-bold text-gray-900 mb-2 mt-5">
-                MENYATUKAN INDONESIA
-              </h2>
-            </div>
-            {step === "login" ? (
-              <form
-                onSubmit={handleSendOtp}
-                className="w-full max-w-lg p-6 ml-0 md:ml-5"
-              >
-                {/* Radio Buttons */}
-                <RadioGroup
-                  defaultValue="umum"
-                  className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-6"
-                  onValueChange={(val) => setRole(val)}
-                >
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="umum" id="umum" />
-                    <Label htmlFor="umum">Umum</Label>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="jurnalis" id="jurnalis" />
-                    <Label htmlFor="jurnalis">Jurnalis</Label>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="kontributor" id="kontributor" />
-                    <Label htmlFor="kontributor">Kontributor</Label>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="tenant" id="tenant" />
-                    <Label htmlFor="tenant">Tenant</Label>
-                  </div>
-                </RadioGroup>
+          {/* Step 1: Kirim OTP */}
+          {step === "login" && (
+            <form onSubmit={handleSendOtp} className="space-y-4">
+              <Input
+                type="text"
+                placeholder="Nama Lengkap"
+                value={fullname}
+                onChange={(e) => setFullname(e.target.value)}
+              />
+              <Input
+                type="email"
+                required
+                placeholder="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              <Button type="submit" className="w-full bg-[#B89445] text-white">
+                Kirim OTP
+              </Button>
+            </form>
+          )}
 
-                {/* Jurnalis: Select Keanggotaan */}
-                {role === "jurnalis" && (
-                  <div className="mb-4 space-y-4">
-                    <select
-                      required
-                      className="w-full border border-gray-300 rounded-md p-2 text-sm"
-                      value={membershipType}
-                      onChange={(e) => setMembershipType(e.target.value)}
-                    >
-                      <option value="">Pilih jenis keanggotaan</option>
-                      <option value="pwi">
-                        PWI (Persatuan Wartawan Indonesia)
-                      </option>
-                      <option value="ijti">
-                        IJTI (Ikatan Jurnalis Televisi Indonesia)
-                      </option>
-                      <option value="pfi">PFI (Pewarta Foto Indonesia)</option>
-                      <option value="aji">
-                        AJI (Asosiasi Jurnalis Indonesia)
-                      </option>
-                      <option value="lainnya">Identitas Lainnya</option>
-                    </select>
-
-                    {/* Nomor Sertifikasi */}
-                    <Input
-                      type="text"
-                      required
-                      placeholder="Nomor Sertifikasi Wartawan"
-                      value={certNumber}
-                      onChange={(e) => setCertNumber(e.target.value)}
-                    />
-                  </div>
-                )}
-
-                {/* Kontributor: Form Fields */}
-                {role === "kontributor" && (
-                  <div className="mb-4 space-y-4">
-                    <div className="grid grid-cols-2 gap-4">
-                      <Input
-                        type="text"
-                        required
-                        placeholder="First Name"
-                        value={firstNameKontributor}
-                        onChange={(e) => setFirstNameKontributor(e.target.value)}
-                      />
-                      <Input
-                        type="text"
-                        required
-                        placeholder="Last Name"
-                        value={lastNameKontributor}
-                        onChange={(e) => setLastNameKontributor(e.target.value)}
-                      />
-                    </div>
-                    
-                    <Input
-                      type="email"
-                      required
-                      placeholder="Email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                    />
-                    
-                    <Input
-                      type="tel"
-                      required
-                      placeholder="WhatsApp"
-                      value={whatsappKontributor}
-                      onChange={(e) => setWhatsappKontributor(e.target.value)}
-                    />
-                    
-                    <Input
-                      type="text"
-                      required
-                      placeholder="Nama Perusahaan"
-                      value={namaPerusahaan}
-                      onChange={(e) => setNamaPerusahaan(e.target.value)}
-                    />
-                    
-                    <select
-                      required
-                      className="w-full border border-gray-300 rounded-md p-2 text-sm"
-                      value={kategoriPerusahaan}
-                      onChange={(e) => setKategoriPerusahaan(e.target.value)}
-                    >
-                      <option value="">Pilih Kategori Perusahaan</option>
-                      <option value="kementerian">Kementerian</option>
-                      <option value="lembaga">Lembaga</option>
-                      <option value="pemerintah-daerah">Pemerintah Daerah</option>
-                      <option value="bumn">BUMN</option>
-                      <option value="lainnya">Lainnya</option>
-                    </select>
-                    
-                    <div className="relative">
-                      <Input
-                        type={isVisible ? "text" : "password"}
-                        required
-                        placeholder="Password"
-                        value={kontributorPassword}
-                        onChange={(e) => setKontributorPassword(e.target.value)}
-                        className="pr-10"
-                      />
-                      <button
-                        type="button"
-                        onClick={toggleVisibility}
-                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                      >
-                        {isVisible ? (
-                          <EyeSlashFilledIcon className="h-4 w-4" />
-                        ) : (
-                          <EyeFilledIcon className="h-4 w-4" />
-                        )}
-                      </button>
-                    </div>
-                    
-                    <div className="relative">
-                      <Input
-                        type={isVisibleSetup[1] ? "text" : "password"}
-                        required
-                        placeholder="Konfirmasi Password"
-                        value={confirmKontributorPassword}
-                        onChange={(e) => setConfirmKontributorPassword(e.target.value)}
-                        className="pr-10"
-                      />
-                      <button
-                        type="button"
-                        onClick={() => {
-                          const newVisibility = [...isVisibleSetup];
-                          newVisibility[1] = !newVisibility[1];
-                          setIsVisibleSetup(newVisibility);
-                        }}
-                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                      >
-                        {isVisibleSetup[1] ? (
-                          <EyeSlashFilledIcon className="h-4 w-4" />
-                        ) : (
-                          <EyeFilledIcon className="h-4 w-4" />
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                )}
-
-                {/* Tenant: Form Fields */}
-                {role === "tenant" && (
-                  <div className="mb-4 space-y-4">
-                    <div className="grid grid-cols-2 gap-4">
-                      <Input
-                        type="text"
-                        required
-                        placeholder="First Name"
-                        value={firstName}
-                        onChange={(e) => setFirstName(e.target.value)}
-                      />
-                      <Input
-                        type="text"
-                        required
-                        placeholder="Last Name"
-                        value={lastName}
-                        onChange={(e) => setLastName(e.target.value)}
-                      />
-                    </div>
-                    
-                    <Input
-                      type="email"
-                      required
-                      placeholder="Email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                    />
-                    
-                    <Input
-                      type="tel"
-                      required
-                      placeholder="WhatsApp"
-                      value={whatsapp}
-                      onChange={(e) => setWhatsapp(e.target.value)}
-                    />
-                    
-                    <Input
-                      type="text"
-                      required
-                      placeholder="Nama Tenant"
-                      value={namaTenant}
-                      onChange={(e) => setNamaTenant(e.target.value)}
-                    />
-                    
-                    <div className="relative">
-                      <Input
-                        type={isVisible ? "text" : "password"}
-                        required
-                        placeholder="Password"
-                        value={tenantPassword}
-                        onChange={(e) => setTenantPassword(e.target.value)}
-                        className="pr-10"
-                      />
-                      <button
-                        type="button"
-                        onClick={toggleVisibility}
-                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                      >
-                        {isVisible ? (
-                          <EyeSlashFilledIcon className="h-4 w-4" />
-                        ) : (
-                          <EyeFilledIcon className="h-4 w-4" />
-                        )}
-                      </button>
-                    </div>
-                    
-                    <div className="relative">
-                      <Input
-                        type={isVisibleSetup[1] ? "text" : "password"}
-                        required
-                        placeholder="Konfirmasi Password"
-                        value={confirmTenantPassword}
-                        onChange={(e) => setConfirmTenantPassword(e.target.value)}
-                        className="pr-10"
-                      />
-                      <button
-                        type="button"
-                        onClick={() => {
-                          const newVisibility = [...isVisibleSetup];
-                          newVisibility[1] = !newVisibility[1];
-                          setIsVisibleSetup(newVisibility);
-                        }}
-                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                      >
-                        {isVisibleSetup[1] ? (
-                          <EyeSlashFilledIcon className="h-4 w-4" />
-                        ) : (
-                          <EyeFilledIcon className="h-4 w-4" />
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                )}
-
-                {/* Email Field (Selalu Ada, tapi posisi bergantung role) */}
-                {role !== "tenant" && role !== "kontributor" && (
-                  <Input
-                    type="email"
-                    required
-                    placeholder="Email"
-                    className="mb-4"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
+          {/* Step 2: Verifikasi OTP */}
+          {step === "otp" && (
+            <form onSubmit={handleVerifyOtp} className="space-y-4 text-center">
+              <h3 className="text-base font-semibold">Masukkan OTP</h3>
+              <div className="flex justify-between mb-4">
+                {otp.map((value, index) => (
+                  <input
+                    key={index}
+                    id={`otp-${index}`}
+                    type="text"
+                    maxLength={1}
+                    value={value}
+                    onChange={(e) => handleOtpChange(index, e.target.value)}
+                    className="w-10 h-12 text-center border rounded-md"
                   />
-                )}
+                ))}
+              </div>
+              <Button type="submit" className="w-full bg-[#B89445] text-white">
+                Lanjut
+              </Button>
+            </form>
+          )}
 
-                {/* Note */}
-                <p className="text-xs text-gray-500 mb-4">
-                  Dengan mendaftar, saya telah menyetujui{" "}
-                  <a href="#" className="text-blue-600 underline">
-                    Syarat dan Ketentuan
-                  </a>{" "}
-                  serta{" "}
-                  <a href="#" className="text-blue-600 underline">
-                    Kebijakan Privasi
-                  </a>
-                </p>
-
-                {/* Submit */}
-                <Button
-                  type="submit"
-                  className="w-full bg-[#B89445] hover:bg-[#a1813d] text-white py-2 rounded-md text-base font-semibold"
-                >
-                  Kirim OTP
-                </Button>
-
-                {/* Link Login */}
-                <p className="text-center text-sm mt-4">
-                  Sudah punya akun?{" "}
-                  <a href="/login" className="text-[#007AFF] hover:underline">
-                    Login
-                  </a>
-                </p>
-              </form>
-            ) : (
-              <form
-                onSubmit={handleVerifyOtp}
-                className="w-full max-w-sm p-6 text-center ml-5 space-y-4"
+          {/* Step 3: Form Lengkap */}
+          {step === "form" && (
+            <form onSubmit={handleRegister} className="space-y-4">
+              <Input
+                type="text"
+                placeholder="Nama Lengkap"
+                value={fullname}
+                onChange={(e) => setFullname(e.target.value)}
+              />
+              <Input
+                type="text"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+              <Input
+                type="text"
+                placeholder="Nomor HP"
+                value={phoneNumber}
+                onChange={(e) => setPhoneNumber(e.target.value)}
+              />
+              <Input
+                type="text"
+                placeholder="Alamat"
+                value={address}
+                onChange={(e) => setAddress(e.target.value)}
+              />
+              <Input
+                type="date"
+                placeholder="Tanggal Lahir"
+                value={dateOfBirth}
+                onChange={(e) => setDateOfBirth(e.target.value)}
+              />
+              <select
+                className="w-full border rounded-md p-2"
+                value={genderType}
+                onChange={(e) => setGenderType(e.target.value)}
               >
-                <h3 className="text-base font-semibold text-gray-800">
-                  Masukkan Kode OTP
-                </h3>
-                <p className="text-sm text-gray-500">
-                  Silahkan cek inbox atau kotak spam pada email Anda.
-                </p>
-
-                <div className="flex justify-between mb-4">
-                  {otp.map((value, index) => (
-                    <input
-                      key={index}
-                      id={`otp-${index}`}
-                      type="text"
-                      inputMode="numeric"
-                      maxLength={1}
-                      value={value}
-                      onChange={(e) => handleOtpChange(index, e.target.value)}
-                      className="w-10 h-12 text-center border border-gray-300 rounded-md text-lg focus:outline-none focus:ring-2 focus:ring-[#B89445]"
-                    />
-                  ))}
-                </div>
-
-                <Button
-                  type="submit"
-                  className="w-full bg-[#B89445] hover:bg-[#a1813d] text-white py-2 rounded-md text-base font-semibold"
-                >
-                  Lanjut
-                </Button>
-
-                <p className="text-sm text-black mt-4 cursor-pointer hover:underline">
-                  Kirim Ulang OTP
-                </p>
-              </form>
-            )}
-          </div>
+                <option value="male">Laki-laki</option>
+                <option value="female">Perempuan</option>
+              </select>
+              <Input
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <Input
+                type="text"
+                placeholder="Jenis Pekerjaan"
+                value={workType}
+                onChange={(e) => setWorkType(e.target.value)}
+              />
+              <Button type="submit" className="w-full bg-green-600 text-white">
+                Daftar
+              </Button>
+            </form>
+          )}
         </div>
       </div>
     </div>
diff --git a/next.config.mjs b/next.config.mjs
index 9b9d832..9ce7634 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -98,6 +98,7 @@ const nextConfig = {
       { protocol: "https", hostname: "i.pravatar.cc" },
       { protocol: "https", hostname: "dev.mikulnews.com" },
       { protocol: "https", hostname: "netidhub.com" },
+      { protocol: "https", hostname: "kontenhumas.com" },
     ],
   },
 };
diff --git a/service/auth.ts b/service/auth.ts
index 0492ddf..31bdbf9 100644
--- a/service/auth.ts
+++ b/service/auth.ts
@@ -7,6 +7,31 @@ import {
   postAPIWithJson,
 } from "./http-config/http-interceptor-service";
 
+export interface CreateUserPayload {
+  address: string;
+  clientId: string;
+  dateOfBirth: string;
+  email: string;
+  fullName: string;
+  genderType: string;
+  identityGroup: string;
+  identityGroupNumber: string;
+  identityNumber: string;
+  identityType: string;
+  lastEducation: string;
+  password: string;
+  phoneNumber: string;
+  userLevelId: number;
+  userRoleId: number;
+  username: string;
+  workType: string;
+}
+
+export interface RequestOtpPayload {
+  email: string;
+  name: string;
+}
+
 export async function login(data: any) {
   const pathUrl = "signin";
   return httpPost(pathUrl, data);
@@ -119,10 +144,10 @@ export async function postRegistration(data: any) {
   return httpPost(url, data);
 }
 
-export async function requestOTP(data: any) {
-  const url = "public/users/otp-request";
-  return httpPostInterceptor(url, data);
-}
+// export async function requestOTP(data: any) {
+//   const url = "public/users/otp-request";
+//   return httpPostInterceptor(url, data);
+// }
 
 export async function verifyOTP(email: any, otp: any) {
   const url = `public/users/verify-otp?email=${email}&otp=${otp}`;
@@ -173,3 +198,13 @@ export async function getDataPersonil(nrp: any) {
   const url = `public/users/search-personil?nrp=${nrp}`;
   return httpGetInterceptor(url);
 }
+
+export async function createUser(data: CreateUserPayload) {
+  const url = "users";
+  return httpPost(url, data);
+}
+
+export async function requestOTP(data: { email: string; name: string }) {
+  const url = "users/otp-request"; 
+  return httpPostInterceptor(url, data);
+}
diff --git a/service/content/content.ts b/service/content/content.ts
index 1699654..703ed3d 100644
--- a/service/content/content.ts
+++ b/service/content/content.ts
@@ -286,7 +286,7 @@ export async function convertSPIT(data: any) {
 }
 
 export async function submitApproval(data: any) {
-  const url = "media/approval";
+  const url = "article-approval-flows/1/multi-branch-approve";
   return httpPostInterceptor(url, data);
 }