diff --git a/components/form/sign-up.tsx b/components/form/sign-up.tsx
index e4544ed..0990aed 100644
--- a/components/form/sign-up.tsx
+++ b/components/form/sign-up.tsx
@@ -16,6 +16,7 @@ import Swal from "sweetalert2";
 import { error } from "console";
 import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
 import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+import { registerTenant } from "@/service/auth";
 
 export default function SignUp() {
   const router = useRouter();
@@ -76,10 +77,19 @@ export default function SignUp() {
   const [kategoriPerusahaan, setKategoriPerusahaan] = useState("");
   const [kontributorPassword, setKontributorPassword] = useState("");
   const [confirmKontributorPassword, setConfirmKontributorPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [formErrors, setFormErrors] = useState<any>({});
 
   const handleSendOtp = (e: React.FormEvent) => {
     e.preventDefault();
-    // Kirim OTP ke email
+    
+    // If role is tenant, handle tenant registration directly
+    if (role === "tenant") {
+      handleTenantRegistration(e);
+      return;
+    }
+    
+    // For other roles, proceed with OTP flow
     setStep("otp");
   };
 
@@ -100,6 +110,124 @@ export default function SignUp() {
     if (value && nextInput) nextInput.focus();
   };
 
+  // Form validation functions
+  const validateEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const validatePhone = (phone: string) => {
+    const phoneRegex = /^[0-9+\-\s()]+$/;
+    return phoneRegex.test(phone) && phone.length >= 10;
+  };
+
+  const validatePassword = (password: string) => {
+    return password.length >= 8;
+  };
+
+  const validateTenantForm = () => {
+    const errors: any = {};
+
+    if (!firstName.trim()) {
+      errors.firstName = "First name is required";
+    }
+
+    if (!lastName.trim()) {
+      errors.lastName = "Last name is required";
+    }
+
+    if (!email.trim()) {
+      errors.email = "Email is required";
+    } else if (!validateEmail(email)) {
+      errors.email = "Please enter a valid email address";
+    }
+
+    if (!whatsapp.trim()) {
+      errors.whatsapp = "WhatsApp number is required";
+    } else if (!validatePhone(whatsapp)) {
+      errors.whatsapp = "Please enter a valid phone number";
+    }
+
+    if (!namaTenant.trim()) {
+      errors.namaTenant = "Tenant name is required";
+    }
+
+    if (!tenantPassword) {
+      errors.tenantPassword = "Password is required";
+    } else if (!validatePassword(tenantPassword)) {
+      errors.tenantPassword = "Password must be at least 8 characters";
+    }
+
+    if (!confirmTenantPassword) {
+      errors.confirmTenantPassword = "Please confirm your password";
+    } else if (tenantPassword !== confirmTenantPassword) {
+      errors.confirmTenantPassword = "Passwords do not match";
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleTenantRegistration = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!validateTenantForm()) {
+      return;
+    }
+
+    setIsLoading(true);
+    setFormErrors({});
+
+    try {
+      const registrationData = {
+        adminUser: {
+          address: "Jakarta", // Default address as per API requirement
+          email: email,
+          fullname: `${firstName} ${lastName}`,
+          password: tenantPassword,
+          phoneNumber: whatsapp,
+          username: `${firstName}-${lastName}` // Using firstName + lastName as username
+        },
+        client: {
+          clientType: "sub_client", // Hardcoded as per API requirement
+          name: namaTenant,
+          parentClientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead" // Hardcoded as per API requirement
+        }
+      };
+
+      const response = await registerTenant(registrationData);
+
+      if (response.error) {
+        MySwal.fire({
+          title: "Registration Failed",
+          text: response.message || "An error occurred during registration",
+          icon: "error",
+          confirmButtonText: "OK"
+        });
+      } else {
+        MySwal.fire({
+          title: "Registration Successful",
+          text: "Your tenant account has been created successfully!",
+          icon: "success",
+          confirmButtonText: "OK"
+        }).then(() => {
+          // Redirect to login page or dashboard
+          router.push("/auth");
+        });
+      }
+    } catch (error) {
+      console.error("Registration error:", error);
+      MySwal.fire({
+        title: "Registration Failed",
+        text: "An unexpected error occurred. Please try again.",
+        icon: "error",
+        confirmButtonText: "OK"
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div className="min-h-screen flex">
       {/* Left Side - Logo Section */}
@@ -318,45 +446,75 @@ export default function SignUp() {
                 {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="text"
+                          required
+                          placeholder="First Name"
+                          value={firstName}
+                          onChange={(e) => setFirstName(e.target.value)}
+                          className={formErrors.firstName ? "border-red-500" : ""}
+                        />
+                        {formErrors.firstName && (
+                          <p className="text-red-500 text-xs mt-1">{formErrors.firstName}</p>
+                        )}
+                      </div>
+                      <div>
+                        <Input
+                          type="text"
+                          required
+                          placeholder="Last Name"
+                          value={lastName}
+                          onChange={(e) => setLastName(e.target.value)}
+                          className={formErrors.lastName ? "border-red-500" : ""}
+                        />
+                        {formErrors.lastName && (
+                          <p className="text-red-500 text-xs mt-1">{formErrors.lastName}</p>
+                        )}
+                      </div>
                     </div>
                     
-                    <Input
-                      type="email"
-                      required
-                      placeholder="Email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                    />
+                    <div>
+                      <Input
+                        type="email"
+                        required
+                        placeholder="Email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className={formErrors.email ? "border-red-500" : ""}
+                      />
+                      {formErrors.email && (
+                        <p className="text-red-500 text-xs mt-1">{formErrors.email}</p>
+                      )}
+                    </div>
                     
-                    <Input
-                      type="tel"
-                      required
-                      placeholder="WhatsApp"
-                      value={whatsapp}
-                      onChange={(e) => setWhatsapp(e.target.value)}
-                    />
+                    <div>
+                      <Input
+                        type="tel"
+                        required
+                        placeholder="WhatsApp"
+                        value={whatsapp}
+                        onChange={(e) => setWhatsapp(e.target.value)}
+                        className={formErrors.whatsapp ? "border-red-500" : ""}
+                      />
+                      {formErrors.whatsapp && (
+                        <p className="text-red-500 text-xs mt-1">{formErrors.whatsapp}</p>
+                      )}
+                    </div>
                     
-                    <Input
-                      type="text"
-                      required
-                      placeholder="Nama Tenant"
-                      value={namaTenant}
-                      onChange={(e) => setNamaTenant(e.target.value)}
-                    />
+                    <div>
+                      <Input
+                        type="text"
+                        required
+                        placeholder="Nama Tenant"
+                        value={namaTenant}
+                        onChange={(e) => setNamaTenant(e.target.value)}
+                        className={formErrors.namaTenant ? "border-red-500" : ""}
+                      />
+                      {formErrors.namaTenant && (
+                        <p className="text-red-500 text-xs mt-1">{formErrors.namaTenant}</p>
+                      )}
+                    </div>
                     
                     <div className="relative">
                       <Input
@@ -365,7 +523,7 @@ export default function SignUp() {
                         placeholder="Password"
                         value={tenantPassword}
                         onChange={(e) => setTenantPassword(e.target.value)}
-                        className="pr-10"
+                        className={`pr-10 ${formErrors.tenantPassword ? "border-red-500" : ""}`}
                       />
                       <button
                         type="button"
@@ -378,6 +536,9 @@ export default function SignUp() {
                           <EyeFilledIcon className="h-4 w-4" />
                         )}
                       </button>
+                      {formErrors.tenantPassword && (
+                        <p className="text-red-500 text-xs mt-1">{formErrors.tenantPassword}</p>
+                      )}
                     </div>
                     
                     <div className="relative">
@@ -387,7 +548,7 @@ export default function SignUp() {
                         placeholder="Konfirmasi Password"
                         value={confirmTenantPassword}
                         onChange={(e) => setConfirmTenantPassword(e.target.value)}
-                        className="pr-10"
+                        className={`pr-10 ${formErrors.confirmTenantPassword ? "border-red-500" : ""}`}
                       />
                       <button
                         type="button"
@@ -404,6 +565,9 @@ export default function SignUp() {
                           <EyeFilledIcon className="h-4 w-4" />
                         )}
                       </button>
+                      {formErrors.confirmTenantPassword && (
+                        <p className="text-red-500 text-xs mt-1">{formErrors.confirmTenantPassword}</p>
+                      )}
                     </div>
                   </div>
                 )}
@@ -436,8 +600,16 @@ export default function SignUp() {
                 <Button
                   type="submit"
                   className="w-full bg-[#B89445] hover:bg-[#a1813d] text-white py-2 rounded-md text-base font-semibold"
+                  disabled={isLoading}
                 >
-                  Kirim OTP
+                  {isLoading ? (
+                    <div className="flex items-center justify-center">
+                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                      {role === "tenant" ? "Mendaftar..." : "Mengirim..."}
+                    </div>
+                  ) : (
+                    role === "tenant" ? "Daftar Tenant" : "Kirim OTP"
+                  )}
                 </Button>
 
                 {/* Link Login */}
diff --git a/service/auth.ts b/service/auth.ts
index 0492ddf..818e01d 100644
--- a/service/auth.ts
+++ b/service/auth.ts
@@ -173,3 +173,8 @@ export async function getDataPersonil(nrp: any) {
   const url = `public/users/search-personil?nrp=${nrp}`;
   return httpGetInterceptor(url);
 }
+
+export async function registerTenant(data: any) {
+  const url = "clients/with-user";
+  return httpPost(url, data);
+}
\ No newline at end of file