From 7da4bf9f2b728d72a5e981670001c094af04f409 Mon Sep 17 00:00:00 2001
From: hamzaobed7 <hamazobed@gmail.com>
Date: Wed, 5 Aug 2026 23:27:34 +0300
Subject: [PATCH]  fixed owner and customer  register make reuseable component
 and completed it

---
 app/HelperFunction/UploadImage.js             |  20 +
 app/auth/choose-role/error.js                 |   2 +-
 app/auth/choose-role/page.js                  |   2 +
 app/components/{ => Animation}/Background.js  |   0
 .../Animation/HeaderLoginAnimation.js         |  70 +++
 .../Animation/OwnerPageAnimation.js           |  26 +
 app/components/HavAccount.js                  |  17 +
 .../LoginComponent/CreateNewAccount.js        |  17 +
 app/components/LoginComponent/HeaderLogin.js  |  45 ++
 app/components/LoginComponent/Login.jsx       | 127 ++++
 app/components/LoginComponent/LoginForm.js    | 124 ++++
 app/components/LoginComponent/OtpComponent.js | 145 +++++
 .../LoginComponent/PolicyAndPrivecy.js        |  21 +
 app/components/LoginComponent/Tabs.js         |  36 ++
 .../OwnerComponents/ButtomStepOne.js          |  25 +
 .../OwnerComponents/ButtomStepTwo.js          |  27 +
 app/components/OwnerComponents/FormOwner.js   |   6 +
 .../OwnerComponents/HeaderOfForm.js           |  44 ++
 .../OwnerComponents/HeaderOfSteps.js          |  28 +
 app/components/OwnerComponents/OtpDialog.js   | 104 ++++
 app/components/OwnerComponents/Owner.js       | 170 ++++++
 .../OwnerComponents/OwnerFormStepOne.js       | 271 ++++++++
 .../OwnerComponents/OwnerFormStepTwo.js       |  12 +
 app/components/OwnerComponents/PolicyAgree.js |  31 +
 app/components/OwnerComponents/UploadImage.js |  85 +++
 app/components/home/HomeClient.jsx            |   2 -
 app/login/error.js                            |   2 +-
 app/login/page.js                             | 578 +-----------------
 app/register/owner/error.js                   |  12 +-
 app/register/owner/page.js                    | 570 +----------------
 app/register/tenant/page.js                   | 407 ++----------
 app/services/AuthService.js                   |  68 ++-
 app/utils/api.js                              |   8 +-
 app/validations/OwnerValidatoin.js            |  54 ++
 public/NotUsed.txt                            | 169 +++++
 35 files changed, 1815 insertions(+), 1510 deletions(-)
 create mode 100644 app/HelperFunction/UploadImage.js
 rename app/components/{ => Animation}/Background.js (100%)
 create mode 100644 app/components/Animation/HeaderLoginAnimation.js
 create mode 100644 app/components/Animation/OwnerPageAnimation.js
 create mode 100644 app/components/HavAccount.js
 create mode 100644 app/components/LoginComponent/CreateNewAccount.js
 create mode 100644 app/components/LoginComponent/HeaderLogin.js
 create mode 100644 app/components/LoginComponent/Login.jsx
 create mode 100644 app/components/LoginComponent/LoginForm.js
 create mode 100644 app/components/LoginComponent/OtpComponent.js
 create mode 100644 app/components/LoginComponent/PolicyAndPrivecy.js
 create mode 100644 app/components/LoginComponent/Tabs.js
 create mode 100644 app/components/OwnerComponents/ButtomStepOne.js
 create mode 100644 app/components/OwnerComponents/ButtomStepTwo.js
 create mode 100644 app/components/OwnerComponents/FormOwner.js
 create mode 100644 app/components/OwnerComponents/HeaderOfForm.js
 create mode 100644 app/components/OwnerComponents/HeaderOfSteps.js
 create mode 100644 app/components/OwnerComponents/OtpDialog.js
 create mode 100644 app/components/OwnerComponents/Owner.js
 create mode 100644 app/components/OwnerComponents/OwnerFormStepOne.js
 create mode 100644 app/components/OwnerComponents/OwnerFormStepTwo.js
 create mode 100644 app/components/OwnerComponents/PolicyAgree.js
 create mode 100644 app/components/OwnerComponents/UploadImage.js
 create mode 100644 app/validations/OwnerValidatoin.js
 create mode 100644 public/NotUsed.txt

diff --git a/app/HelperFunction/UploadImage.js b/app/HelperFunction/UploadImage.js
new file mode 100644
index 0000000..83e5b60
--- /dev/null
+++ b/app/HelperFunction/UploadImage.js
@@ -0,0 +1,20 @@
+import toast from "react-hot-toast";
+
+export const handleImageUpload = (side, file,t,setIdImagePreviews,setIdImages) => {
+  if (!file) return;
+  if (!file.type.startsWith("image/")) {
+    toast.error(t("register.selectValidImage"));
+    return;
+  }
+  if (file.size > 5 * 1024 * 1024) {
+    toast.error(t("register.imageSizeLimit"));
+    return;
+  }
+  const reader = new FileReader();
+  reader.onloadend = () => {
+    setIdImagePreviews((prev) => ({ ...prev, [side]: reader.result }));
+  };
+  reader.readAsDataURL(file);
+  setIdImages((prev) => ({ ...prev, [side]: file }));
+  toast.success(t("register.imageUploadSuccess"), { style: { background: "#dcfce7", color: "#166534" } });
+};
diff --git a/app/auth/choose-role/error.js b/app/auth/choose-role/error.js
index a88abe0..cef795b 100644
--- a/app/auth/choose-role/error.js
+++ b/app/auth/choose-role/error.js
@@ -6,7 +6,7 @@ import Link from 'next/link';
 
 export default function Error({ error, reset }) {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
       <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="text-center max-w-md">
         <div className="w-20 h-20 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
           <AlertTriangle className="w-10 h-10 text-red-500" />
diff --git a/app/auth/choose-role/page.js b/app/auth/choose-role/page.js
index 026d4bd..aa65557 100644
--- a/app/auth/choose-role/page.js
+++ b/app/auth/choose-role/page.js
@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { Home, Building, Briefcase, ArrowLeft } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import InteractiveBackground from '@/app/components/Animation/Background';
 
 export default function ChooseRolePage() {
   const { t, i18n } = useTranslation();
@@ -38,6 +39,7 @@ export default function ChooseRolePage() {
 
   return (
     <div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen  flex items-center justify-center p-4 relative overflow-hidden">
+     <InteractiveBackground/>
       <div className="absolute inset-0 overflow-hidden">
         {[...Array(20)].map((_, i) => (
           <motion.div
diff --git a/app/components/Background.js b/app/components/Animation/Background.js
similarity index 100%
rename from app/components/Background.js
rename to app/components/Animation/Background.js
diff --git a/app/components/Animation/HeaderLoginAnimation.js b/app/components/Animation/HeaderLoginAnimation.js
new file mode 100644
index 0000000..0eefa3a
--- /dev/null
+++ b/app/components/Animation/HeaderLoginAnimation.js
@@ -0,0 +1,70 @@
+import { motion } from "framer-motion";
+export const particles = Array.from({ length: 20 }, (_, i) => ({
+  id: i,
+  x: Math.random() * 100,
+  y: Math.random() * 100,
+  size: Math.random() * 3 + 1,
+  duration: Math.random() * 15 + 10,
+  delay: Math.random() * 5,
+}));
+
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1, delayChildren: 0.2 },
+  },
+};
+
+export const itemVariants = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: { type: "spring", stiffness: 100 },
+  },
+};
+
+export default function HeaderAnimation() {
+  return (
+    <>
+      <div className="absolute inset-0 overflow-hidden">
+        {particles.map((p) => (
+          <motion.div
+            key={p.id}
+            className="absolute rounded-full bg-amber-500/20"
+            style={{
+              left: `${p.x}%`,
+              top: `${p.y}%`,
+              width: p.size,
+              height: p.size,
+            }}
+            animate={{
+              y: [0, -20, 0],
+              x: [0, 10, -10, 0],
+              opacity: [0.2, 0.4, 0.2],
+            }}
+            transition={{
+              duration: p.duration,
+              repeat: Infinity,
+              delay: p.delay,
+              ease: "linear",
+            }}
+          />
+        ))}
+      </div>
+
+      {/* Glow orbs */}
+      <motion.div
+        className="absolute top-20 left-20 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl"
+        animate={{ scale: [1, 1.2, 1], x: [0, 30, 0], y: [0, -20, 0] }}
+        transition={{ duration: 12, repeat: Infinity }}
+      />
+      <motion.div
+        className="absolute bottom-20 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"
+        animate={{ scale: [1, 1.3, 1], x: [0, -30, 0], y: [0, 20, 0] }}
+        transition={{ duration: 15, repeat: Infinity }}
+      />
+    </>
+  );
+}
diff --git a/app/components/Animation/OwnerPageAnimation.js b/app/components/Animation/OwnerPageAnimation.js
new file mode 100644
index 0000000..b17cfd3
--- /dev/null
+++ b/app/components/Animation/OwnerPageAnimation.js
@@ -0,0 +1,26 @@
+export const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 },
+};
+export const staggerContainer = {
+  animate: { transition: { staggerChildren: 0.1 } },
+};
+import React from "react";
+
+export const BackgroundElements = () => {
+  const circles = [
+    { style: { top: "20%", right: "20%", width: "256px", height: "256px" }, className: "bg-amber-500/5" },
+    { style: { bottom: "10%", left: "20%", width: "320px", height: "320px" }, className: "bg-blue-500/5" },
+     { style: { bottom: "40%", left: "10%", width: "320px", height: "320px" }, className: "bg-blue-500/5" },
+      { style: { bottom: "60%", left: "60%", width: "320px", height: "320px" }, className: "bg-blue-500/5" }
+  ];
+
+  return (
+    <>
+      {circles.map((circle, index) => (
+        <div key={index} style={circle.style} className={`absolute rounded-full pointer-events-none ${circle.className}`} />
+      ))}
+    </>
+  );
+};
diff --git a/app/components/HavAccount.js b/app/components/HavAccount.js
new file mode 100644
index 0000000..96b451e
--- /dev/null
+++ b/app/components/HavAccount.js
@@ -0,0 +1,17 @@
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { fadeInUp } from "./Animation/OwnerPageAnimation";
+import Link from "next/link";
+export default function HavAccount() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <motion.p variants={fadeInUp} className="text-center text-gray-400 mt-4">
+        {t("register.haveAccount")}
+        <Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">
+          {t("register.loginLink")}
+        </Link>
+      </motion.p>
+    </>
+  );
+}
diff --git a/app/components/LoginComponent/CreateNewAccount.js b/app/components/LoginComponent/CreateNewAccount.js
new file mode 100644
index 0000000..d95908c
--- /dev/null
+++ b/app/components/LoginComponent/CreateNewAccount.js
@@ -0,0 +1,17 @@
+import { motion } from 'framer-motion';
+import { itemVariants } from '../Animation/HeaderLoginAnimation';
+import Link from 'next/link';
+import { useTranslation } from 'react-i18next';
+export default function CreateNewAccount() {
+const {t}=useTranslation()
+  return (
+    <>
+      <motion.p variants={itemVariants} className="text-center text-gray-400 mt-6">
+        {t("noAccount")}{" "}
+        <Link href="/auth/choose-role" className="text-amber-400 hover:text-amber-300 font-medium transition-colors">
+          {t("createNewAccount")}
+        </Link>
+      </motion.p>
+    </>
+  );
+}
diff --git a/app/components/LoginComponent/HeaderLogin.js b/app/components/LoginComponent/HeaderLogin.js
new file mode 100644
index 0000000..ce372a8
--- /dev/null
+++ b/app/components/LoginComponent/HeaderLogin.js
@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+import { itemVariants } from "../Animation/HeaderLoginAnimation";
+import { ArrowLeft, KeyRound,Home } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+//Back Link
+export function BackLink() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <motion.div variants={itemVariants} className="absolute -top-16 left-0">
+        <Link href="/" className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
+          <motion.div whileHover={{ x: -5 }} transition={{ type: "spring", stiffness: 400 }}>
+            <ArrowLeft className="w-4 h-4" />
+          </motion.div>
+          <span>{t("backToHome")}</span>
+        </Link>
+      </motion.div>
+    </>
+  );
+}
+
+export function HeaderForm({ step }) {
+    const { t } = useTranslation();
+  return (
+    <>
+      <div className="bg-gradient-to-r from-amber-700 to-amber-400 p-8 text-center relative overflow-hidden">
+        <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }} className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
+        <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3, type: "spring" }} className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full" />
+
+        <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }} className="relative z-10">
+          <motion.div
+            animate={{ rotate: [0, 10, -10, 0] }}
+            transition={{ duration: 2, repeat: Infinity }}
+            className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
+          >
+            {step === "otp" ? <KeyRound className="w-10 h-10 text-white" /> : <Home className="w-10 h-10 text-white" />}
+          </motion.div>
+          <h1 className="text-3xl font-bold text-white mb-2">SweetHome</h1>
+          <p className="text-amber-100">{step === "otp" ? t("enterOTP") : t("welcomeBack")}</p>
+        </motion.div>
+      </div>
+    </>
+  );
+}
diff --git a/app/components/LoginComponent/Login.jsx b/app/components/LoginComponent/Login.jsx
new file mode 100644
index 0000000..16cee72
--- /dev/null
+++ b/app/components/LoginComponent/Login.jsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { motion, AnimatePresence } from "framer-motion";
+import toast, { Toaster } from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import AuthService from "../../services/AuthService";
+import InteractiveBackground from "../Animation/Background"
+import { BackLink, HeaderForm } from "./HeaderLogin";
+import HeaderAnimation, { containerVariants, itemVariants } from "../Animation/HeaderLoginAnimation";
+import TabsLogin from "./Tabs";
+import LoginForm from "./LoginForm";
+import CreateNewAccount from "./CreateNewAccount";
+import PolicyAndPrivecy from "./PolicyAndPrivecy";
+import OtpComponent from "./OtpComponent";
+
+export default function Login() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const [step, setStep] = useState("login");
+  const [loginMethod, setLoginMethod] = useState("email");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [formData, setFormData] = useState({
+    credential: "", //email or phoneNumber
+    password: "",
+    rememberMe: false,
+  });
+  const [errors, setErrors] = useState({});
+  const validateForm = () => {
+    const newErrors = {};
+    if (!formData.credential) {
+      newErrors.credential = loginMethod === "email" ? t("emailRequired") : t("phoneRequired");
+    }
+    if (!formData.password) {
+      newErrors.password = t("passwordRequired");
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    if (!validateForm()) return;
+    setIsLoading(true);
+    setErrors({});
+    try {
+      const response = await AuthService.login({
+        loginMethod,
+        credential: formData.credential,
+        password: formData.password,
+      });
+      switch (response.type) {
+        case "SUCCESS":
+          toast.success(t("loginSuccess"));
+          router.push("/");
+          break;
+        case "OTP_REQUIRED":
+          toast(t("otpRequired"));
+          setStep("otp");
+          break;
+        default:
+          toast.error("Login failed the email or password is wrong ");
+      }
+    } catch (err) {
+      console.error("[Login] Error:", err);
+      toast.error(err.message || t("connectionError"), {
+        style: { background: "#fee2e2", color: "#991b1b" },
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Auto-detect login method from input
+  const handleCredentialChange = (value) => {
+    setFormData({ ...formData, credential: value });
+    if (errors.credential) setErrors({ ...errors, credential: null });
+  };
+
+  const handelTabs = (type) => {
+    setLoginMethod(type);
+    setFormData({ ...formData, credential: "" });
+  };
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
+      <Toaster position="top-center" reverseOrder={false} />
+      <InteractiveBackground />
+      {/* Particles */}
+      <HeaderAnimation />
+      <motion.div variants={containerVariants} initial="hidden" animate="visible" className="relative w-full max-w-md z-10">
+        {/* Back link */}
+        <BackLink />
+        <motion.div variants={itemVariants} className="bg-white/10 backdrop-blur-2xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">
+          {/* Header */}
+          <HeaderForm step={step} />
+          <div className="p-8">
+            <AnimatePresence mode="wait">
+              {step === "login" ? (
+                <motion.form key="login" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 20 }} onSubmit={handleLogin} className="space-y-6">
+                  {/* Login method tabs */}
+                  <TabsLogin loginMethod={loginMethod} handelTabs={handelTabs} />
+                  {/* Form Login */}
+                  <LoginForm
+                    loginMethod={loginMethod}
+                    errors={errors}
+                    formData={formData}
+                    isLoading={isLoading}
+                    isSuccess={isSuccess}
+                    setFormData={setFormData}
+                    handleCredentialChange={handleCredentialChange}
+                  />
+                </motion.form>
+              ) : (
+                // /* OTP Verification Step */
+                <OtpComponent isLoading={isLoading} setIsLoading={setIsLoading} isSuccess={isSuccess} setIsSuccess={setIsSuccess} loginMethod={loginMethod} formData={formData} setStep={setStep} />
+              )}
+            </AnimatePresence>
+            <CreateNewAccount />
+          </div>
+        </motion.div>
+        <PolicyAndPrivecy />
+      </motion.div>
+    </div>
+  );
+}
diff --git a/app/components/LoginComponent/LoginForm.js b/app/components/LoginComponent/LoginForm.js
new file mode 100644
index 0000000..3c2ec1d
--- /dev/null
+++ b/app/components/LoginComponent/LoginForm.js
@@ -0,0 +1,124 @@
+import { EyeOff, Mail, Phone, Eye, LogIn, Lock, Loader2, CheckCircle } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function LoginForm({ loginMethod, errors, formData, isLoading, isSuccess, setFormData, handleCredentialChange }) {
+  const { t } = useTranslation();
+  const [showPassword, setShowPassword] = useState(false);
+  return (
+    <>
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">{loginMethod === "email" ? t("emailLabel") : t("phoneLabel")}</label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            {loginMethod === "email" ? (
+              <Mail className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+            ) : (
+              <Phone className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+            )}
+          </div>
+          <input
+            type="text"
+            // type={loginMethod === 'email' ? 'email' : 'tel'}
+            value={formData.credential}
+            onChange={(e) => handleCredentialChange(e.target.value)}
+            className={`w-full pr-12 pl-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
+              errors.credential ? "border-red-500" : "border-gray-700"
+            }`}
+            placeholder={loginMethod === "email" ? t("emailPlaceholder") : t("phonePlaceholder")}
+            dir="ltr"
+          />
+        </div>
+        {errors.credential && (
+          <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1">
+            {errors.credential}
+          </motion.p>
+        )}
+      </div>
+
+      {/* Password */}
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">{t("password")}</label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <Lock className={`w-5 h-5 transition-colors ${errors.password ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+          </div>
+          <input
+            type={showPassword ? "text" : "password"}
+            value={formData.password}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                password: e.target.value,
+              });
+              if (errors.password) setErrors({ ...errors, password: null });
+            }}
+            className={`w-full pr-12 pl-12 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
+              errors.password ? "border-red-500" : "border-gray-700"
+            }`}
+            placeholder={t("passwordPlaceholder")}
+          />
+          <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
+            {showPassword ? <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300 transition-colors" /> : <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300 transition-colors" />}
+          </button>
+        </div>
+        {errors.password && (
+          <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1">
+            {errors.password}
+          </motion.p>
+        )}
+      </div>
+
+      {/* Remember + Forgot */}
+      <div className="flex items-center justify-between">
+        <label className="flex items-center gap-2 cursor-pointer group">
+          <input
+            type="checkbox"
+            checked={formData.rememberMe}
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                rememberMe: e.target.checked,
+              })
+            }
+            className="w-4 h-4 rounded border-gray-600 bg-white/5 text-amber-500 focus:ring-amber-500 focus:ring-offset-0"
+          />
+          <span className="text-sm text-gray-400 group-hover:text-white transition-colors">{t("rememberMe")}</span>
+        </label>
+        <Link href="/forgot-password" className="text-sm text-amber-400 hover:text-amber-300 transition-colors">
+          {t("forgotPassword")}
+        </Link>
+      </div>
+
+      {/* Submit */}
+      <motion.button
+        type="submit"
+        disabled={isLoading || isSuccess}
+        className="relative w-full bg-gradient-to-r from-amber-500 to-amber-600 text-white py-4 rounded-xl font-bold text-lg overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed"
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+      >
+        <span className="relative z-10 flex items-center justify-center gap-2">
+          {isLoading ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              {t("loggingIn")}{" "}
+            </>
+          ) : isSuccess ? (
+            <>
+              <CheckCircle className="w-5 h-5" /> {t("success")}{" "}
+            </>
+          ) : (
+            <>
+              {" "}
+              <LogIn className="w-5 h-5" />
+              {t("login")}
+            </>
+          )}
+        </span>
+      </motion.button>
+    </>
+  );
+}
diff --git a/app/components/LoginComponent/OtpComponent.js b/app/components/LoginComponent/OtpComponent.js
new file mode 100644
index 0000000..e233033
--- /dev/null
+++ b/app/components/LoginComponent/OtpComponent.js
@@ -0,0 +1,145 @@
+"use client";
+
+import { CheckCircle, KeyRound, Loader2, Shield } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import { sendEmailOTP, sendPhoneOTP, verifyEmail, verifyPhone, getOwnerByUserId, getCustomerByUserId } from "@/app/utils/api";
+import AuthService from "@/app/services/AuthService";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+
+export default function OtpComponent({ isLoading, setIsLoading, isSuccess, setIsSuccess, loginMethod, formData, setStep }) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const [otpCode, setOtpCode] = useState("");
+  const [otpError, setOtpError] = useState("");
+  const handleVerifyOTP = async (e) => {
+    e.preventDefault();
+    if (!otpCode || otpCode.length < 4) {
+      setOtpError(t("otpRequired"));
+      return;
+    }
+    setIsLoading(true);
+    setOtpError("");
+    try {
+      const verifyFn = loginMethod === "email" ? verifyEmail : verifyPhone;
+      const result = await verifyFn(otpCode);
+      if (result?.ok) {
+        try {
+          await AuthService.cacheCurrentUser(getOwnerByUserId, getCustomerByUserId);
+          console.log("Decoded:", AuthService.decodeToken());
+          console.log("User:", AuthService.getUser());
+        } catch (err) {
+          console.warn("Failed to cache user", err);
+        }
+      }
+      setIsSuccess(true);
+      toast.success(t("verifySuccess"));
+      setTimeout(() => {
+        router.push("/");
+      }, 1500);
+    } catch (err) {
+      console.error("[OTP] Error:", err);
+      setOtpError(err.message || t("verifyError"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const resendOTP = async () => {
+    try {
+      if (loginMethod === "email") {
+        await sendEmailOTP();
+      } else {
+        await sendPhoneOTP();
+      }
+      toast.success(t("resendSuccess"), {
+        style: { background: "#dcfce7", color: "#166534" },
+      });
+    } catch (err) {
+      console.error("[OTP] Resend failed:", err);
+      toast.error(t("resendFailed"));
+    }
+  };
+
+  return (
+    <motion.form key="otp" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} onSubmit={handleVerifyOTP} className="space-y-6">
+      <div className="text-center mb-4">
+        <Shield className="w-12 h-12 text-amber-500 mx-auto mb-3" />
+        <p className="text-amber-300 text-sm">
+          {t("sendOTPTo")}{" "}
+          <span className="text-amber-50 font-medium" dir="ltr">
+            {formData?.credential}
+          </span>
+        </p>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">{t("otpLabel")}</label>
+        <input
+          type="text"
+          value={otpCode}
+          onChange={(e) => {
+            setOtpCode(e.target.value);
+            if (otpError) setOtpError("");
+          }}
+          className={`w-full px-4 py-4 bg-gray-800 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white text-center text-2xl tracking-[0.5em] placeholder-gray-500 transition-all ${
+            otpError ? "border-red-500" : "border-gray-700"
+          }`}
+          placeholder="______"
+          maxLength={6}
+          dir="ltr"
+        />
+        {otpError && (
+          <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1 text-center">
+            {otpError}
+          </motion.p>
+        )}
+      </div>
+
+      <motion.button
+        type="submit"
+        disabled={isLoading || isSuccess}
+        className="relative w-full bg-gradient-to-r from-amber-500 to-amber-600 text-white py-4 rounded-xl font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed"
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+      >
+        <span className="flex items-center justify-center gap-2">
+          {isLoading ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              {t("verifying")}
+            </>
+          ) : isSuccess ? (
+            <>
+              <CheckCircle className="w-5 h-5" />
+              {t("success")}
+            </>
+          ) : (
+            <>
+              <KeyRound className="w-5 h-5" />
+              {t("verify")}
+            </>
+          )}
+        </span>
+      </motion.button>
+
+      <div className="flex items-center justify-between text-sm">
+        <button
+          type="button"
+          onClick={() => {
+            setStep("login");
+            setOtpCode("");
+            setOtpError("");
+          }}
+          className="text-gray-400 hover:text-white transition-colors"
+        >
+          ← {t("back")}
+        </button>
+        <button type="button" onClick={resendOTP} className="text-amber-400 hover:text-amber-300 transition-colors">
+          {t("resendCode")}
+        </button>
+      </div>
+    </motion.form>
+  );
+}
diff --git a/app/components/LoginComponent/PolicyAndPrivecy.js b/app/components/LoginComponent/PolicyAndPrivecy.js
new file mode 100644
index 0000000..b54a67b
--- /dev/null
+++ b/app/components/LoginComponent/PolicyAndPrivecy.js
@@ -0,0 +1,21 @@
+import { motion } from "framer-motion";
+import { itemVariants } from "../Animation/HeaderLoginAnimation";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+export default function PolicyAndPrivecy() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <motion.p variants={itemVariants} className="text-center text-gray-500 text-xs mt-4">
+        {t("agreeTerms")}{" "}
+        <Link href="/terms" className="text-amber-400 hover:text-amber-300 transition-colors">
+          {t("termsOfUse")}
+        </Link>{" "}
+        {t("and")}{" "}
+        <Link href="/privacy" className="text-amber-400 hover:text-amber-300 transition-colors">
+          {t("privacyPolicy")}
+        </Link>
+      </motion.p>
+    </>
+  );
+}
diff --git a/app/components/LoginComponent/Tabs.js b/app/components/LoginComponent/Tabs.js
new file mode 100644
index 0000000..4eb3abb
--- /dev/null
+++ b/app/components/LoginComponent/Tabs.js
@@ -0,0 +1,36 @@
+import { Mail, Phone } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export default function TabsLogin({ loginMethod, handelTabs }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="flex gap-2 bg-white/5 p-1 rounded-xl">
+        <button
+          type="button"
+          onClick={() => {
+            handelTabs("email");
+          }}
+          className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
+            loginMethod === "email" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
+          }`}
+        >
+          <Mail className="w-4 h-4" />
+          {t("emailMethod")}
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            handelTabs("phone");
+          }}
+          className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
+            loginMethod === "phone" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
+          }`}
+        >
+          <Phone className="w-4 h-4" />
+          {t("phoneMethod")}
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/app/components/OwnerComponents/ButtomStepOne.js b/app/components/OwnerComponents/ButtomStepOne.js
new file mode 100644
index 0000000..20ffbaa
--- /dev/null
+++ b/app/components/OwnerComponents/ButtomStepOne.js
@@ -0,0 +1,25 @@
+import { useRouter } from "next/navigation";
+import { useTranslation } from "react-i18next";
+export default function ButtomStepOne({ type }) {
+  const router = useRouter();
+  const { t } = useTranslation();
+  return (
+    <>
+      <>
+        <button
+          type="button"
+          onClick={() => router.push("/auth/choose-role")}
+          className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors"
+        >
+          {t("register.cancel")}
+        </button>
+        <button
+          type="submit"
+          className={`flex-1 bg-gradient-to-r ${type === "owner" ? "  from-amber-500 to-amber-600" : " from-blue-500 to-blue-600"}  text-white py-3 px-4 rounded-xl font-medium ${type === "onwer" ? "hover:from-amber-600 hover:to-amber-700" : "hover:from-blue-600 hover:to-blue-700"}  transition-all`}
+        >
+          {t("register.next")}
+        </button>
+      </>
+    </>
+  );
+}
diff --git a/app/components/OwnerComponents/ButtomStepTwo.js b/app/components/OwnerComponents/ButtomStepTwo.js
new file mode 100644
index 0000000..17e1f72
--- /dev/null
+++ b/app/components/OwnerComponents/ButtomStepTwo.js
@@ -0,0 +1,27 @@
+import { Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export default function ButtomStepTwo({ setStep, isLoading, formData, type }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <button type="button" onClick={() => setStep(1)} className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors">
+        {t("register.previous")}
+      </button>
+      <button
+        type="submit"
+        disabled={isLoading || !formData.agreeTerms}
+        className={`flex-1 bg-gradient-to-r${type === "owner" ? "  from-amber-500 to-amber-600" : " from-blue-500 to-blue-600"}  text-amber-50 py-3 px-4 rounded-xl font-medium${type === "onwer" ? "hover:from-amber-600 hover:to-amber-700" : "hover:from-blue-600 hover:to-blue-700"} transition-all disabled:opacity-50 disabled:cursor-not-allowed`}
+      >
+        {isLoading ? (
+          <div className="flex items-center justify-center gap-2">
+            <Loader2 className="w-5 h-5 animate-spin" />
+            <span>{t("register.registering")}</span>
+          </div>
+        ) : (
+          t("register.createAccount")
+        )}
+      </button>
+    </>
+  );
+}
diff --git a/app/components/OwnerComponents/FormOwner.js b/app/components/OwnerComponents/FormOwner.js
new file mode 100644
index 0000000..9371dd4
--- /dev/null
+++ b/app/components/OwnerComponents/FormOwner.js
@@ -0,0 +1,6 @@
+
+export default function FormOwner(){
+    return(<>
+    
+    </>)
+}
\ No newline at end of file
diff --git a/app/components/OwnerComponents/HeaderOfForm.js b/app/components/OwnerComponents/HeaderOfForm.js
new file mode 100644
index 0000000..25bef45
--- /dev/null
+++ b/app/components/OwnerComponents/HeaderOfForm.js
@@ -0,0 +1,44 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import { Building, Home } from "lucide-react";
+
+const data = [
+  {
+    colors: "from-amber-500 to-amber-600",
+    titleKey: "register.owner.step1Title",
+    title2Key: "register.owner.step1bTitle",
+    descKey: "register.owner.step1Desc",
+    desc2Key: "register.owner.step1bDesc",
+    icon: <Building className="w-10 h-10 text-white" />,
+  },
+  {
+    colors: "from-blue-500 to-blue-600",
+    titleKey: "register.tenant.step1Title",
+    title2Key: "register.tenant.step2Title",
+    descKey: "register.tenant.step1Desc",
+    desc2Key: "register.tenant.step2Desc",
+    icon: <Home className="w-10 h-10 text-white" />,
+  },
+];
+export default function HeaderOfForm({ step = 1, num = 0 }) {
+  const { t } = useTranslation();
+  const currentData = data[num] || data[0];
+  return (
+    <div className={`bg-gradient-to-r ${currentData.colors} p-8 text-center relative overflow-hidden`}>
+      <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }} className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
+      <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="relative z-10">
+        <motion.div
+          animate={{ rotate: [0, 10, -10, 0] }}
+          transition={{ duration: 2, repeat: Infinity }}
+          className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
+        >
+          {data[num].icon}
+        </motion.div>
+        <h1 className="text-3xl font-bold text-white mb-2">{t(step === 1 ? t(currentData.titleKey) : t(currentData.title2Key))}</h1>
+        <p className="text-amber-100">{t(step === 1 ? t(currentData.descKey) : t(currentData.desc2Key))}</p>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/app/components/OwnerComponents/HeaderOfSteps.js b/app/components/OwnerComponents/HeaderOfSteps.js
new file mode 100644
index 0000000..38427dd
--- /dev/null
+++ b/app/components/OwnerComponents/HeaderOfSteps.js
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ArrowLeft } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export default function HeaderOfSteps({ step, colors, numberStep }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <Link href="/auth/choose-role" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
+            <motion.div whileHover={{ x: -5 }}>
+              <ArrowLeft className="w-4 h-4" />
+            </motion.div>
+            <span>{t("forgotPassword.backToLogin")}</span>
+          </Link>
+          <span className="text-sm text-gray-200">{t("register.stepOf2", { step: step })}</span>
+        </div>
+        <div className="flex gap-2">
+          {numberStep.map((s) => (
+            <motion.div key={s} className={`h-2 flex-1 rounded-full ${step >= s ? colors : "bg-gray-800"}`} animate={{ scaleX: step >= s ? 1 : 0.5 }} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/components/OwnerComponents/OtpDialog.js b/app/components/OwnerComponents/OtpDialog.js
new file mode 100644
index 0000000..5e488b3
--- /dev/null
+++ b/app/components/OwnerComponents/OtpDialog.js
@@ -0,0 +1,104 @@
+import { KeyRound, Loader2, Shield } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import toast, { Toaster } from "react-hot-toast";
+import { sendEmailOTP, verifyEmail } from "@/app/utils/api";
+import AuthService from "@/app/services/AuthService";
+import { useRouter } from "next/navigation";
+export default function OtpDialog({ formData, setShowOtpModal, type }) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [otpCode, setOtpCode] = useState("");
+  const handleVerifyOTP = async () => {
+    if (!otpCode || otpCode.length < 4) {
+      toast.error(t("register.otpRequired"));
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const res = await verifyEmail(otpCode);
+      if (res.status === 200) {
+        AuthService.deleteToken();
+        toast.success(res.message || t("register.emailVerified"));
+        setShowOtpModal(false);
+        setTimeout(() => router.push("/login"), 1500);
+      } else {
+        toast.error(res.message || res.data?.message || t("accountVerification.otpInvalid"));
+      }
+    } catch (err) {
+      toast.error(err.message || t("register.verificationError"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleResendOTP = async () => {
+    setIsLoading(true);
+    try {
+      await sendEmailOTP();
+      toast.success(t("register.newOtpSent"));
+    } catch (err) {
+      toast.error(t("register.resendOtpFailed"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+        <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} className="bg-gray-900 border border-white/10 rounded-2xl w-full max-w-md p-6 shadow-2xl">
+          <div className="text-center mb-6">
+            <div className="w-16 h-16 bg-amber-500/20 rounded-full flex items-center justify-center mx-auto mb-3">
+              <Shield className={`w-8 h-8 ${type === "owner" ? "text-amber-500" : "text-blue-500"} `} />
+            </div>
+            <h2 className="text-xl font-bold text-white">{t("register.otpTitle")}</h2>
+            <p className="text-gray-400 text-sm mt-1">{t("register.otpSentTo")}</p>
+            <p className={`${type === "owner" ? "text-amber-500" : "text-blue-500"} font-medium text-sm`}>{formData.email}</p>
+          </div>
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-300 mb-2">{t("register.otpLabel")}</label>
+            <div className="relative">
+              <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                <KeyRound className="w-5 h-5 text-gray-400" />
+              </div>
+              <input
+                type="text"
+                value={otpCode}
+                maxLength={6}
+                onChange={(e) => setOtpCode(e.target.value)}
+                className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 text-white text-center tracking-[0.5em] text-xl"
+                placeholder="------"
+              />
+            </div>
+          </div>
+          <div className="flex gap-3">
+            <button
+              onClick={handleVerifyOTP}
+              disabled={isLoading || !otpCode}
+              className={`flex-1 bg-gradient-to-r ${type === "owner" ? "from-amber-500 to-amber-600" : "from-blue-500 to-blue-600"} text-white py-3 rounded-xl font-medium ${type === "owner" ? "hover:from-amber-600 hover:to-amber-700" : "hover:from-blue-600 hover:to-blue-700"} disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2`}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  <span>{t("register.verifying")}</span>
+                </>
+              ) : (
+                t("register.verify")
+              )}
+            </button>
+          </div>
+          <button
+            onClick={handleResendOTP}
+            disabled={isLoading}
+            className={`w-full text-center ${type === "owner" ? "text-amber-400 hover:text-amber-300" : "text-blue-400 hover:text-blue-300"}  text-sm mt-3 disabled:opacity-50`}
+          >
+            {t("register.resendOtp")}
+          </button>
+        </motion.div>
+      </motion.div>
+    </>
+  );
+}
diff --git a/app/components/OwnerComponents/Owner.js b/app/components/OwnerComponents/Owner.js
new file mode 100644
index 0000000..52d8daa
--- /dev/null
+++ b/app/components/OwnerComponents/Owner.js
@@ -0,0 +1,170 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import toast, { Toaster } from "react-hot-toast";
+import { addOwner, loginWithEmail } from "../../utils/api";
+import AuthService from "../../services/AuthService";
+import { OwnerType } from "../../enums";
+import OtpDialog from "./OtpDialog";
+import HeaderOfSteps from "./HeaderOfSteps";
+import HeaderOfForm from "./HeaderOfForm";
+import { BackgroundElements, fadeInUp, staggerContainer } from "../Animation/OwnerPageAnimation";
+import { validateStep1, validateStep2 } from "../../validations/OwnerValidatoin";
+import OwnerFormStepOne from "./OwnerFormStepOne";
+import ButtomStepOne from "./ButtomStepOne";
+import ButtomStepTwo from "./ButtomStepTwo";
+import OwnerFormStepTwo from "./OwnerFormStepTwo";
+import InteractiveBackground from "../Animation/Background";
+
+export default function Owner() {
+  const { t } = useTranslation();
+  const [step, setStep] = useState(1);
+  const [showOtpModal, setShowOtpModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    whatsapp: "",
+    phone2: "",
+    nationalNumber: "",
+    password: "",
+    confirmPassword: "",
+    ownerType: OwnerType.PERSON,
+    agreeTerms: false,
+  });
+  const [idImages, setIdImages] = useState({ front: null, back: null, license: null });
+  const [idImagePreviews, setIdImagePreviews] = useState({ front: "", back: "", license: "" });
+  const [errors, setErrors] = useState({});
+
+  const isCompany = Number(formData.ownerType) === OwnerType.REAL_ESTATE_AGENCY;
+
+  const handleNextStep = () => {
+    if (validateStep1(formData, setErrors, t)) {
+      setStep(2);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    } else {
+      toast.error(t("validation.correctErrors"));
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validateStep2(idImages, setErrors, t)) {
+      toast.error(t("register.completeRequiredImages"));
+      return;
+    }
+    if (!formData.agreeTerms) {
+      toast.error(t("validation.agreeToTerms"));
+      return;
+    }
+    setIsLoading(true);
+    const payload = {
+      firstName: formData.firstName,
+      lastName: formData.lastName,
+      email: formData.email,
+      phoneNumber: formData.phone || "",
+      whatsAppNumber: formData.whatsapp,
+      phone: formData.phone2,
+      nationalNumber: formData.nationalNumber,
+      password: formData.password,
+      ownerType: formData.ownerType,
+    };
+
+    try {
+      const licenseImage = isCompany ? idImages.license : null;
+      const res = await addOwner(payload, idImages.front, idImages.back);
+      if (res.status === 200 || res.ok) {
+        toast.success(res.message || t("register.accountCreated"), { duration: 4000 });
+        const loginRes = await loginWithEmail(formData.email, formData.password);
+        if (loginRes.status === 206) {
+          const otpToken = loginRes.data;
+          if (otpToken) AuthService.addToken(otpToken);
+          toast(loginRes.message || t("register.otpSentEmail"), { icon: "📧" });
+          setShowOtpModal(true);
+        } else if (loginRes.status === 200) {
+          const loginToken = loginRes.data;
+          if (loginToken) AuthService.addToken(loginToken);
+          toast.success(loginRes.message || t("register.loginSuccess"));
+        }
+      } else {
+        toast.error(res.data[0].message || res.data?.message);
+      }
+    } catch (err) {
+      toast.error(err.message || t("register.registrationError"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <div className="min-h-screen  flex items-center justify-center p-4 relative overflow-hidden">
+      <Toaster position="top-center" reverseOrder={false} />
+      <div className="absolute inset-0 overflow-hidden">
+        <BackgroundElements />
+        <InteractiveBackground />
+      </div>
+      <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} className="relative z-10 w-full max-w-2xl">
+        <HeaderOfSteps step={step} numberStep={[1, 2]} colors={"bg-amber-500"} />
+        <motion.div
+          key={step}
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -20 }}
+          transition={{ duration: 0.3 }}
+          className="bg-white/5 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden"
+        >
+          <HeaderOfForm step={step} num={0} />
+          <div className="p-8">
+            <motion.form
+              variants={staggerContainer}
+              initial="initial"
+              animate="animate"
+              onSubmit={
+                step === 1
+                  ? (e) => {
+                      e.preventDefault();
+                      handleNextStep();
+                    }
+                  : handleSubmit
+              }
+              className="space-y-6"
+            >
+              {step === 1 && (
+                <OwnerFormStepOne
+                  setErrors={setErrors}
+                  setFormData={setFormData}
+                  formData={formData}
+                  errors={errors}
+                  isCompany={isCompany}
+                  setIdImagePreviews={setIdImagePreviews}
+                  setIdImages={setIdImages}
+                  type={"owner"}
+                />
+              )}
+              {step === 2 && (
+                <>
+                  <OwnerFormStepTwo idImagePreviews={idImagePreviews} errors={errors} setIdImagePreviews={setIdImagePreviews} setIdImages={setIdImages} setFormData={setFormData} formData={formData} />
+                </>
+              )}
+              <motion.div variants={fadeInUp} className="flex gap-3 pt-4">
+                {step === 1 ? (
+                  <>
+                    <ButtomStepOne type={"owner"} />
+                  </>
+                ) : (
+                  <>
+                    <ButtomStepTwo formData={formData} isLoading={isLoading} setStep={setStep} type={"owner"} />
+                  </>
+                )}
+              </motion.div>
+            </motion.form>
+          </div>
+        </motion.div>
+      </motion.div>
+      <AnimatePresence>{showOtpModal && <OtpDialog formData={formData} setShowOtpModal={setShowOtpModal} type={"owner"} />}</AnimatePresence>
+    </div>
+  );
+}
diff --git a/app/components/OwnerComponents/OwnerFormStepOne.js b/app/components/OwnerComponents/OwnerFormStepOne.js
new file mode 100644
index 0000000..642518f
--- /dev/null
+++ b/app/components/OwnerComponents/OwnerFormStepOne.js
@@ -0,0 +1,271 @@
+import { useTranslation } from "react-i18next";
+import { fadeInUp } from "../Animation/OwnerPageAnimation";
+import { motion, AnimatePresence } from "framer-motion";
+import { User, Mail, Phone, Lock, Eye, EyeOff, MessageCircle, Camera, X, CheckCircle, XCircle } from "lucide-react";
+import { CustomerTypeLabels, OwnerTypeLabels } from "@/app/enums";
+import { useRef, useState } from "react";
+import { handleImageUpload } from "@/app/HelperFunction/UploadImage";
+import UploadImage from "./UploadImage";
+
+export default function OwnerFormStepOne({ formData, errors, setFormData, setErrors, isCompany, idImagePreviews, setIdImagePreviews, setIdImages, type }) {
+  const { t } = useTranslation();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const fileInputLicenseRef = useRef(null);
+  return (
+    <>
+      <motion.div variants={fadeInUp} className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-300 mb-2">
+            {t("register.firstName")} <span className="text-red-500">*</span>
+          </label>
+          <div className="relative group">
+            <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+              <User className={`w-5 h-5 ${errors.firstName ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+            </div>
+            <input
+              type="text"
+              value={formData.firstName}
+              onChange={(e) => {
+                setFormData({ ...formData, firstName: e.target.value });
+                setErrors({ ...errors, firstName: null });
+              }}
+              className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.firstName ? "border-red-500" : "border-gray-700"}`}
+              placeholder={t("register.firstName")}
+            />
+          </div>
+          {errors.firstName && <p className="text-red-500 text-sm mt-1">{errors.firstName}</p>}
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-300 mb-2">
+            {t("register.lastName")} <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="text"
+            value={formData.lastName}
+            onChange={(e) => {
+              setFormData({ ...formData, lastName: e.target.value });
+              setErrors({ ...errors, lastName: null });
+            }}
+            className={`w-full px-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.lastName ? "border-red-500" : "border-gray-700"}`}
+            placeholder={t("register.lastName")}
+          />
+          {errors.lastName && <p className="text-red-500 text-sm mt-1">{errors.lastName}</p>}
+        </div>
+      </motion.div>
+
+      <motion.div variants={fadeInUp}>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          {t("register.email")} <span className="text-red-500">*</span>
+        </label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <Mail className={`w-5 h-5 ${errors.email ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+          </div>
+          <input
+            type="email"
+            value={formData.email}
+            onChange={(e) => {
+              setFormData({ ...formData, email: e.target.value });
+              setErrors({ ...errors, email: null });
+            }}
+            className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.email ? "border-red-500" : "border-gray-700"}`}
+            placeholder={t("register.emailPlaceholder")}
+          />
+        </div>
+        {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
+      </motion.div>
+
+      <motion.div variants={fadeInUp}>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          {t("register.phone")} <span className="text-gray-500">({t("register.optional")})</span>
+        </label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <Phone className="w-5 h-5 text-gray-400 group-focus-within:text-amber-500" />
+          </div>
+          <input
+            type="tel"
+            value={formData.phone}
+            onChange={(e) => {
+              setFormData({ ...formData, phone: e.target.value });
+              setErrors({ ...errors, phone: null });
+            }}
+            className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all"
+            placeholder={t("register.phoneOptionalPlaceholder")}
+          />
+        </div>
+        {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
+      </motion.div>
+
+      <motion.div variants={fadeInUp}>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          {t("register.whatsapp")} <span className="text-red-500">*</span>
+        </label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <MessageCircle className={`w-5 h-5 ${errors.whatsapp ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+          </div>
+          <input
+            type="tel"
+            value={formData.whatsapp}
+            onChange={(e) => {
+              setFormData({ ...formData, whatsapp: e.target.value });
+              setErrors({ ...errors, whatsapp: null });
+            }}
+            className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.whatsapp ? "border-red-500" : "border-gray-700"}`}
+            placeholder={t("register.whatsappPlaceholder")}
+          />
+        </div>
+        {errors.whatsapp && <p className="text-red-500 text-sm mt-1">{errors.whatsapp}</p>}
+      </motion.div>
+
+      <motion.div variants={fadeInUp}>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          {t("register.phoneSecondary")} <span className="text-red-500">*</span>
+        </label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <Phone className={`w-5 h-5 ${errors.phone2 ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+          </div>
+          <input
+            type="tel"
+            value={formData.phone2}
+            onChange={(e) => {
+              setFormData({ ...formData, phone2: e.target.value });
+              setErrors({ ...errors, phone2: null });
+            }}
+            className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.phone2 ? "border-red-500" : "border-gray-700"}`}
+            placeholder={t("register.phoneSecondaryPlaceholder")}
+            maxLength={7}
+          />
+        </div>
+        {errors.phone2 && <p className="text-red-500 text-sm mt-1">{errors.phone2}</p>}
+      </motion.div>
+
+      <motion.div variants={fadeInUp}>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          {t("register.nationalNumber")} <span className="text-red-500">*</span>
+        </label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <User className={`w-5 h-5 ${errors.nationalNumber ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+          </div>
+          <input
+            type="text"
+            value={formData.nationalNumber}
+            onChange={(e) => {
+              setFormData({ ...formData, nationalNumber: e.target.value });
+              setErrors({ ...errors, nationalNumber: null });
+            }}
+            className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.nationalNumber ? "border-red-500" : "border-gray-700"}`}
+            placeholder={t("register.nationalNumberPlaceholder")}
+          />
+        </div>
+        {errors.nationalNumber && <p className="text-red-500 text-sm mt-1">{errors.nationalNumber}</p>}
+      </motion.div>
+
+      <motion.div variants={fadeInUp}>
+        {type === "owner" ? (
+          <>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              {t("register.ownerType")} <span className="text-red-500">*</span>
+            </label>
+            <select
+              value={formData.ownerType.toString()}
+              onChange={(e) => {
+                const selectedType = parseInt(e.target.value, 10);
+                setFormData((prev) => ({ ...prev, ownerType: selectedType }));
+              }}
+              className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent appearance-none text-gray-900 cursor-pointer"
+            >
+              {Object.entries(OwnerTypeLabels).map(([value, label]) => (
+                <option key={value} value={value} className="bg-gray-900 ">
+                  {label}
+                </option>
+              ))}
+            </select>
+          </>
+        ) : (
+          <>
+            <motion.div variants={fadeInUp}>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                {t("register.customerType")} <span className="text-red-500">*</span>
+              </label>
+              <select
+                value={formData.customerType}
+                onChange={(e) => setFormData({ ...formData, customerType: e.target.value })}
+                className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white appearance-none cursor-pointer"
+              >
+                {Object.entries(CustomerTypeLabels).map(([value, label]) => (
+                  <option key={value} value={value} className="bg-gray-900 text-white">
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </motion.div>
+          </>
+        )}
+      </motion.div>
+
+      <AnimatePresence>
+        {isCompany && <UploadImage idImagePreviews={idImagePreviews} type={"license"} errors={errors.license} setIdImagePreviews={setIdImagePreviews} setIdImages={setIdImages} />}
+      </AnimatePresence>
+
+      <motion.div variants={fadeInUp}>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          {t("register.password")} <span className="text-red-500">*</span>
+        </label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <Lock className={`w-5 h-5 ${errors.password ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+          </div>
+          <input
+            type={showPassword ? "text" : "password"}
+            value={formData.password}
+            onChange={(e) => {
+              setFormData({ ...formData, password: e.target.value });
+              setErrors({ ...errors, password: null });
+            }}
+            className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.password ? "border-red-500" : "border-gray-700"}`}
+            placeholder={t("register.passwordPlaceholder")}
+          />
+          <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
+            {showPassword ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
+          </button>
+        </div>
+        {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
+      </motion.div>
+
+      <motion.div variants={fadeInUp}>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          {t("register.confirmPassword")} <span className="text-red-500">*</span>
+        </label>
+        <div className="relative group">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <Lock className={`w-5 h-5 ${errors.confirmPassword ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
+          </div>
+          <input
+            type={showConfirmPassword ? "text" : "password"}
+            value={formData.confirmPassword}
+            onChange={(e) => {
+              setFormData({ ...formData, confirmPassword: e.target.value });
+              setErrors({ ...errors, confirmPassword: null });
+            }}
+            className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.confirmPassword ? "border-red-500" : "border-gray-700"}`}
+            placeholder={t("register.confirmPasswordPlaceholder")}
+          />
+          <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
+            {showConfirmPassword ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
+          </button>
+          {formData.confirmPassword && (
+            <div className="absolute inset-y-0 left-12 flex items-center">
+              {formData.password === formData.confirmPassword ? <CheckCircle className="w-5 h-5 text-green-500" /> : <XCircle className="w-5 h-5 text-red-500" />}
+            </div>
+          )}
+        </div>
+        {errors.confirmPassword && <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>}
+      </motion.div>
+    </>
+  );
+}
diff --git a/app/components/OwnerComponents/OwnerFormStepTwo.js b/app/components/OwnerComponents/OwnerFormStepTwo.js
new file mode 100644
index 0000000..c000f3a
--- /dev/null
+++ b/app/components/OwnerComponents/OwnerFormStepTwo.js
@@ -0,0 +1,12 @@
+import Policy from "./PolicyAgree";
+import UploadImage from "./UploadImage";
+export default function OwnerFormStepTwo({idImagePreviews,errors,setIdImagePreviews,setIdImages,setFormData,formData}) {
+   
+  return (
+    <>
+      <UploadImage  idImagePreviews={idImagePreviews} type={"front"} errors={errors.front} setIdImagePreviews={setIdImagePreviews} setIdImages={setIdImages} />
+      <UploadImage  idImagePreviews={idImagePreviews} type={"back"} errors={errors.back} setIdImagePreviews={setIdImagePreviews} setIdImages={setIdImages} />
+      <Policy setFormData={setFormData} formData={formData} type={"owner"} />
+    </>
+  );
+}
diff --git a/app/components/OwnerComponents/PolicyAgree.js b/app/components/OwnerComponents/PolicyAgree.js
new file mode 100644
index 0000000..9699202
--- /dev/null
+++ b/app/components/OwnerComponents/PolicyAgree.js
@@ -0,0 +1,31 @@
+import { motion } from "framer-motion";
+import { fadeInUp } from "../Animation/OwnerPageAnimation";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+export default function Policy({ formData, setFormData, type }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <motion.div variants={fadeInUp} className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          id="terms"
+          checked={formData.agreeTerms}
+          onChange={(e) => setFormData({ ...formData, agreeTerms: e.target.checked })}
+          className={`w-4 h-4 rounded border-gray-600 bg-white/5 ${type === "owner" ? `text-amber-500 focus:ring-amber-500` : ` text-blue-500 focus:ring-blue-500`} `}
+          required
+        />
+        <label htmlFor="terms" className="text-sm text-gray-300">
+          {t("register.agreeTerms")}{" "}
+          <Link href="/terms" className={`${type === "owner" ? `text-amber-500 focus:ring-amber-500` : ` text-blue-500 focus:ring-blue-500`}`}>
+            {t("register.termsOfUse")}
+          </Link>{" "}
+          {t("register.and")}{" "}
+          <Link href="/privacy"  className={`${type === "owner" ? `text-amber-500 focus:ring-amber-500` : ` text-blue-500 focus:ring-blue-500`}`}>
+            {t("register.privacyPolicy")}
+          </Link>
+        </label>
+      </motion.div>
+    </>
+  );
+}
diff --git a/app/components/OwnerComponents/UploadImage.js b/app/components/OwnerComponents/UploadImage.js
new file mode 100644
index 0000000..23780ac
--- /dev/null
+++ b/app/components/OwnerComponents/UploadImage.js
@@ -0,0 +1,85 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { fadeInUp } from "../Animation/OwnerPageAnimation";
+import { handleImageUpload } from "@/app/HelperFunction/UploadImage";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { Camera, X } from "lucide-react";
+import { useRef } from "react";
+
+export default function UploadImage({ idImagePreviews, type, errors, setIdImagePreviews, setIdImages }) {
+  const { t } = useTranslation();
+  const fileInputRef = useRef(null);
+  const currentPreview = idImagePreviews?.[type];
+  const handleRemoveImage = (e) => {
+    e.stopPropagation();
+    setIdImages((prev) => ({ ...prev, [type]: null }));
+    setIdImagePreviews((prev) => ({ ...prev, [type]: "" }));
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const getLabel = () => {
+    switch (type) {
+      case "front":
+        return t("register.owner.frontIdLabel");
+      case "back":
+        return t("register.owner.backIdLabel");
+      case "license":
+        return t("register.owner.licenseImageLabel");
+      default:
+        return "";
+    }
+  };
+
+  const getClickText = () => {
+    return type === "license" ? t("register.owner.clickUploadLicense") : t("register.owner.clickUploadImage");
+  };
+
+  const getAltText = () => {
+    switch (type) {
+      case "front":
+        return t("register.uploadFrontAlt");
+      case "back":
+        return t("register.uploadBackAlt");
+      case "license":
+        return t("register.uploadLicenseAlt");
+      default:
+        return "Preview Image";
+    }
+  };
+
+  return (
+    <motion.div variants={fadeInUp} key={`${type}-upload-step`}>
+      <label className="block text-sm font-medium text-gray-300 mb-2">
+        {getLabel()} {type === "license" ? <span className="text-gray-400">({t("register.optional")})</span> : <span className="text-red-500">*</span>}
+      </label>
+      {type === "license" && <div className="mb-2 text-xs text-gray-400">{t("register.owner.licenseHint")}</div>}
+      <div
+        onClick={() => fileInputRef.current?.click()}
+        className={`relative border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all ${
+          currentPreview ? "border-green-500 bg-green-500/10" : errors ? "border-red-500 bg-red-500/10" : "border-gray-700 hover:border-amber-500 hover:bg-white/5"
+        }`}
+      >
+        <input ref={fileInputRef} type="file" accept="image/*" onChange={(e) => handleImageUpload(type, e.target.files?.[0], t, setIdImagePreviews, setIdImages)} className="hidden" />
+        {currentPreview ? (
+          <div className="relative">
+            <Image src={currentPreview} alt={getAltText()} width={200} height={120} className="mx-auto rounded-lg object-cover" />
+            <button type="button" onClick={handleRemoveImage} className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors">
+              <X className="w-4 h-4 text-white" />
+            </button>
+          </div>
+        ) : (
+          <>
+            <Camera className="w-12 h-12 text-gray-500 mx-auto mb-3" />
+            <p className="text-gray-400">{getClickText()}</p>
+            <p className="text-xs text-gray-500 mt-2">JPEG, PNG, JPG • {t("register.upTo5MB")}</p>
+          </>
+        )}
+      </div>
+      {errors && <p className="text-red-500 text-sm mt-1">{errors}</p>}
+    </motion.div>
+  );
+}
diff --git a/app/components/home/HomeClient.jsx b/app/components/home/HomeClient.jsx
index 1841fef..20269a5 100644
--- a/app/components/home/HomeClient.jsx
+++ b/app/components/home/HomeClient.jsx
@@ -14,10 +14,8 @@ export default function HomeClient() {
   const mapSectionRef = useRef(null);
   const [showMap, setShowMap] = useState(false);
   const [isScrolling, setIsScrolling] = useState(false);
-
   const { filteredProperties, applyFilters, resetFilters } = useApplyFilters();
   const { name, isOwner, isAuthenticated, role } = useAuth();
-  console.log(isOwner, name, isAuthenticated, role);
   const handleSearch = (filters) => {
     applyFilters(filters);
     if (!showMap) {
diff --git a/app/login/error.js b/app/login/error.js
index a88abe0..cef795b 100644
--- a/app/login/error.js
+++ b/app/login/error.js
@@ -6,7 +6,7 @@ import Link from 'next/link';
 
 export default function Error({ error, reset }) {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
       <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="text-center max-w-md">
         <div className="w-20 h-20 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
           <AlertTriangle className="w-10 h-10 text-red-500" />
diff --git a/app/login/page.js b/app/login/page.js
index 4158f11..63b9acb 100644
--- a/app/login/page.js
+++ b/app/login/page.js
@@ -1,574 +1,8 @@
-"use client";
-
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { motion, AnimatePresence } from "framer-motion";
-import toast, { Toaster } from "react-hot-toast";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { Mail, Lock, Eye, EyeOff, ArrowLeft, LogIn, CheckCircle, Loader2, Home, Shield, Phone, KeyRound } from "lucide-react";
-import { loginWithEmail, loginWithPhone, sendEmailOTP, sendPhoneOTP, verifyEmail, verifyPhone, getOwnerByUserId, getCustomerByUserId } from "../utils/api";
-import AuthService from "../services/AuthService";
-import Background from "../components/Background";
-
+import Login from "../components/LoginComponent/Login";
+export const metadata = {
+  title: "صفحة تسجيل الدخول ",
+  describtion: "صفحة تسجيل الدخول في Sweet Home",
+};
 export default function LoginPage() {
-  const router = useRouter();
-  const { t } = useTranslation();
-
-  // Step: 'login' | 'otp'
-  const [step, setStep] = useState("login");
-  const [loginMethod, setLoginMethod] = useState("email"); // 'email' | 'phone'
-  const [showPassword, setShowPassword] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSuccess, setIsSuccess] = useState(false);
-
-  const [formData, setFormData] = useState({
-    credential: "",
-    password: "",
-    rememberMe: false,
-  });
-
-  const [otpCode, setOtpCode] = useState("");
-  const [otpError, setOtpError] = useState("");
-  const [errors, setErrors] = useState({});
-
-  const validateForm = () => {
-    const newErrors = {};
-    if (!formData.credential) {
-      newErrors.credential = loginMethod === "email" ? t("emailRequired") : t("phoneRequired");
-      // } else if (loginMethod === 'email' && !isEmail(formData.credential)) {
-      //   newErrors.credential = 'البريد الإلكتروني غير صالح';
-      // } else if (loginMethod === 'phone' && !isPhoneNumber(formData.credential)) {
-      newErrors.credential = t("phoneInvalid");
-    }
-
-    if (!formData.password) {
-      newErrors.password = t("passwordRequired");
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleLogin = async (e) => {
-    e.preventDefault();
-    if (!validateForm()) return;
-
-    setIsLoading(true);
-    setErrors({});
-
-    try {
-      const loginFn = loginMethod === "email" ? loginWithEmail : loginWithPhone;
-
-      const result = await loginFn(formData.credential, formData.password);
-
-      if (result.status === 200) {
-        const token = typeof result.data === "string" ? result.data : result.data?.token || result.data?.accessToken;
-        AuthService.addToken(token);
-
-        // Fetch user profile to get full name
-        const authUser = AuthService.getUser();
-        if (authUser?.id) {
-          try {
-            const isOwner = AuthService.isOwner();
-            const fetchFn = isOwner ? getOwnerByUserId : getCustomerByUserId;
-            const profile = await fetchFn(authUser.id);
-            if (profile) {
-              AuthService.cacheUser({
-                name: profile.fullName || profile.name || `${profile.firstName || ""} ${profile.lastName || ""}`.trim(),
-                email: profile.email || authUser.email,
-                phone: profile.phone || profile.phoneNumber || authUser.phone,
-              });
-            }
-          } catch (err) {
-            console.warn("[Login] Failed to fetch profile:", err);
-          }
-        }
-
-        const userRole = AuthService.isOwner() ? "owner" : "customer";
-
-        setIsSuccess(true);
-        toast.success(t("loginSuccess"), {
-          style: { background: "#dcfce7", color: "#166534" },
-        });
-
-        setTimeout(() => {
-          router.push("/");
-        }, 1500);
-      } else if (result.status === 206) {
-        const tempToken = typeof result.data === "string" ? result.data : result.data?.token || result.data?.accessToken;
-        if (tempToken) {
-          AuthService.addToken(tempToken);
-        }
-        toast(t("otpRequired"), {
-          icon: "🔐",
-          style: { background: "#fef3c7", color: "#92400e" },
-        });
-
-        // Send OTP
-        try {
-          if (loginMethod === "email") {
-            await sendEmailOTP();
-          } else {
-            await sendPhoneOTP();
-          }
-        } catch (otpErr) {
-          console.warn("[Login] OTP send failed, proceeding anyway:", otpErr);
-        }
-
-        setStep("otp");
-      } else if (result.status >= 500) {
-        console.error("[Login] Server error:", result.status, result.data);
-        toast.error(t("serverError"), {
-          style: { background: "#fee2e2", color: "#991b1b" },
-        });
-      } else if (result.status === 404) {
-        console.error("[Login] API endpoint not found:", result.status);
-        toast.error(t("apiNotFound"), {
-          style: { background: "#fee2e2", color: "#991b1b" },
-        });
-      } else if (result.status === 429) {
-        toast.error(t("tooManyRequests"), {
-          style: { background: "#fee2e2", color: "#991b1b" },
-        });
-      } else {
-        console.error("[Login] Unexpected status:", result.status, result.data);
-        toast.error(result.data?.message || result.data || t("invalidCredentials"), {
-          style: { background: "#fee2e2", color: "#991b1b" },
-        });
-      }
-    } catch (err) {
-      console.error("[Login] Error:", err);
-      toast.error(err.message || t("connectionError"), {
-        style: { background: "#fee2e2", color: "#991b1b" },
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleVerifyOTP = async (e) => {
-    e.preventDefault();
-    if (!otpCode || otpCode.length < 4) {
-      setOtpError(t("otpRequired"));
-      return;
-    }
-
-    setIsLoading(true);
-    setOtpError("");
-
-    try {
-      const verifyFn = loginMethod === "email" ? verifyEmail : verifyPhone;
-
-      const result = await verifyFn(otpCode);
-
-      if (result.ok) {
-        const finalToken = typeof result.data === "string" ? result.data : result.data?.token || result.data?.accessToken;
-        if (finalToken && typeof finalToken === "string") {
-          AuthService.addToken(finalToken);
-        }
-
-        setIsSuccess(true);
-        toast.success(t("verifySuccess"), {
-          style: { background: "#dcfce7", color: "#166534" },
-        });
-
-        setTimeout(() => {
-          router.push("/");
-        }, 1500);
-      } else {
-        console.error("[OTP] Verification failed:", result.data);
-        setOtpError(result.data?.message || t("wrongOTP"));
-      }
-    } catch (err) {
-      console.error("[OTP] Error:", err);
-      setOtpError(err.message || t("verifyError"));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const resendOTP = async () => {
-    try {
-      if (loginMethod === "email") {
-        await sendEmailOTP();
-      } else {
-        await sendPhoneOTP();
-      }
-      toast.success(t("resendSuccess"), {
-        style: { background: "#dcfce7", color: "#166534" },
-      });
-    } catch (err) {
-      console.error("[OTP] Resend failed:", err);
-      toast.error(t("resendFailed"));
-    }
-  };
-
-  // Auto-detect login method from input
-  const handleCredentialChange = (value) => {
-    setFormData({ ...formData, credential: value });
-    if (errors.credential) setErrors({ ...errors, credential: null });
-
-    // Auto-switch method
-    // if (isEmail(value)) {
-    //   setLoginMethod('email');
-    // } else if (isPhoneNumber(value)) {
-    //   setLoginMethod('phone');
-    // }
-  };
-
-  const particles = Array.from({ length: 20 }, (_, i) => ({
-    id: i,
-    x: Math.random() * 100,
-    y: Math.random() * 100,
-    size: Math.random() * 3 + 1,
-    duration: Math.random() * 15 + 10,
-    delay: Math.random() * 5,
-  }));
-
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { y: 20, opacity: 0 },
-    visible: {
-      y: 0,
-      opacity: 1,
-      transition: { type: "spring", stiffness: 100 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br  flex items-center justify-center p-4 relative overflow-hidden">
-      <Toaster position="top-center" reverseOrder={false} />
-      <Background />
-      {/* Particles */}
-      <div className="absolute inset-0 overflow-hidden">
-        {particles.map((p) => (
-          <motion.div
-            key={p.id}
-            className="absolute rounded-full bg-amber-500/20"
-            style={{
-              left: `${p.x}%`,
-              top: `${p.y}%`,
-              width: p.size,
-              height: p.size,
-            }}
-            animate={{
-              y: [0, -20, 0],
-              x: [0, 10, -10, 0],
-              opacity: [0.2, 0.4, 0.2],
-            }}
-            transition={{
-              duration: p.duration,
-              repeat: Infinity,
-              delay: p.delay,
-              ease: "linear",
-            }}
-          />
-        ))}
-      </div>
-
-      {/* Glow orbs */}
-      <motion.div
-        className="absolute top-20 left-20 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl"
-        animate={{ scale: [1, 1.2, 1], x: [0, 30, 0], y: [0, -20, 0] }}
-        transition={{ duration: 12, repeat: Infinity }}
-      />
-      <motion.div
-        className="absolute bottom-20 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"
-        animate={{ scale: [1, 1.3, 1], x: [0, -30, 0], y: [0, 20, 0] }}
-        transition={{ duration: 15, repeat: Infinity }}
-      />
-
-      <motion.div variants={containerVariants} initial="hidden" animate="visible" className="relative w-full max-w-md z-10">
-        {/* Back link */}
-        <motion.div variants={itemVariants} className="absolute -top-16 left-0">
-          <Link href="/" className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
-            <motion.div whileHover={{ x: -5 }} transition={{ type: "spring", stiffness: 400 }}>
-              <ArrowLeft className="w-4 h-4" />
-            </motion.div>
-            <span>{t("backToHome")}</span>
-          </Link>
-        </motion.div>
-
-        <motion.div variants={itemVariants} className="bg-white/10 backdrop-blur-2xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">
-          {/* Header */}
-          <div className="bg-gradient-to-r from-amber-500 to-amber-600 p-8 text-center relative overflow-hidden">
-            <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }} className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
-            <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3, type: "spring" }} className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full" />
-
-            <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }} className="relative z-10">
-              <motion.div
-                animate={{ rotate: [0, 10, -10, 0] }}
-                transition={{ duration: 2, repeat: Infinity }}
-                className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
-              >
-                {step === "otp" ? <KeyRound className="w-10 h-10 text-white" /> : <Home className="w-10 h-10 text-white" />}
-              </motion.div>
-              <h1 className="text-3xl font-bold text-white mb-2">SweetHome</h1>
-              <p className="text-amber-100">{step === "otp" ? t("enterOTP") : t("welcomeBack")}</p>
-            </motion.div>
-          </div>
-
-          <div className="p-8">
-            <AnimatePresence mode="wait">
-              {step === "login" ? (
-                <motion.form key="login" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 20 }} onSubmit={handleLogin} className="space-y-6">
-                  {/* Login method tabs */}
-                  <div className="flex gap-2 bg-white/5 p-1 rounded-xl">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setLoginMethod("email");
-                        setFormData({ ...formData, credential: "" });
-                      }}
-                      className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
-                        loginMethod === "email" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
-                      }`}
-                    >
-                      <Mail className="w-4 h-4" />
-                      {t("emailMethod")}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setLoginMethod("phone");
-                        setFormData({ ...formData, credential: "" });
-                      }}
-                      className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
-                        loginMethod === "phone" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
-                      }`}
-                    >
-                      <Phone className="w-4 h-4" />
-                      {t("phoneMethod")}
-                    </button>
-                  </div>
-
-                  {/* Credential input */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{loginMethod === "email" ? t("emailLabel") : t("phoneLabel")}</label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        {loginMethod === "email" ? (
-                          <Mail className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
-                        ) : (
-                          <Phone className={`w-5 h-5 transition-colors ${errors.credential ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
-                        )}
-                      </div>
-                      <input
-                        type="text"
-                        // type={loginMethod === 'email' ? 'email' : 'tel'}
-                        value={formData.credential}
-                        onChange={(e) => handleCredentialChange(e.target.value)}
-                        className={`w-full pr-12 pl-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
-                          errors.credential ? "border-red-500" : "border-gray-700"
-                        }`}
-                        placeholder={loginMethod === "email" ? t("emailPlaceholder") : t("phonePlaceholder")}
-                        dir="ltr"
-                      />
-                    </div>
-                    {errors.credential && (
-                      <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1">
-                        {errors.credential}
-                      </motion.p>
-                    )}
-                  </div>
-
-                  {/* Password */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t("password")}</label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Lock className={`w-5 h-5 transition-colors ${errors.password ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
-                      </div>
-                      <input
-                        type={showPassword ? "text" : "password"}
-                        value={formData.password}
-                        onChange={(e) => {
-                          setFormData({
-                            ...formData,
-                            password: e.target.value,
-                          });
-                          if (errors.password) setErrors({ ...errors, password: null });
-                        }}
-                        className={`w-full pr-12 pl-12 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${
-                          errors.password ? "border-red-500" : "border-gray-700"
-                        }`}
-                        placeholder={t("passwordPlaceholder")}
-                      />
-                      <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
-                        {showPassword ? (
-                          <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300 transition-colors" />
-                        ) : (
-                          <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300 transition-colors" />
-                        )}
-                      </button>
-                    </div>
-                    {errors.password && (
-                      <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1">
-                        {errors.password}
-                      </motion.p>
-                    )}
-                  </div>
-
-                  {/* Remember + Forgot */}
-                  <div className="flex items-center justify-between">
-                    <label className="flex items-center gap-2 cursor-pointer group">
-                      <input
-                        type="checkbox"
-                        checked={formData.rememberMe}
-                        onChange={(e) =>
-                          setFormData({
-                            ...formData,
-                            rememberMe: e.target.checked,
-                          })
-                        }
-                        className="w-4 h-4 rounded border-gray-600 bg-white/5 text-amber-500 focus:ring-amber-500 focus:ring-offset-0"
-                      />
-                      <span className="text-sm text-gray-400 group-hover:text-white transition-colors">{t("rememberMe")}</span>
-                    </label>
-                    <Link href="/forgot-password" className="text-sm text-amber-400 hover:text-amber-300 transition-colors">
-                      {t("forgotPassword")}
-                    </Link>
-                  </div>
-
-                  {/* Submit */}
-                  <motion.button
-                    type="submit"
-                    disabled={isLoading || isSuccess}
-                    className="relative w-full bg-gradient-to-r from-amber-500 to-amber-600 text-white py-4 rounded-xl font-bold text-lg overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed"
-                    whileHover={{ scale: 1.02 }}
-                    whileTap={{ scale: 0.98 }}
-                  >
-                    <span className="relative z-10 flex items-center justify-center gap-2">
-                      {isLoading ? (
-                        <>
-                          <Loader2 className="w-5 h-5 animate-spin" />
-                          {t("loggingIn")}
-                        </>
-                      ) : isSuccess ? (
-                        <>
-                          <CheckCircle className="w-5 h-5" />
-                          {t("success")}
-                        </>
-                      ) : (
-                        <>
-                          <LogIn className="w-5 h-5" />
-                          {t("login")}
-                        </>
-                      )}
-                    </span>
-                  </motion.button>
-                </motion.form>
-              ) : (
-                /* OTP Verification Step */
-                <motion.form key="otp" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} onSubmit={handleVerifyOTP} className="space-y-6">
-                  <div className="text-center mb-4">
-                    <Shield className="w-12 h-12 text-amber-500 mx-auto mb-3" />
-                    <p className="text-gray-300 text-sm">
-                      {t("sendOTPTo")}{" "}
-                      <span className="text-white font-medium" dir="ltr">
-                        {formData.credential}
-                      </span>
-                    </p>
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t("otpLabel")}</label>
-                    <input
-                      type="text"
-                      value={otpCode}
-                      onChange={(e) => {
-                        setOtpCode(e.target.value);
-                        if (otpError) setOtpError("");
-                      }}
-                      className={`w-full px-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white text-center text-2xl tracking-[0.5em] placeholder-gray-500 transition-all ${
-                        otpError ? "border-red-500" : "border-gray-700"
-                      }`}
-                      placeholder="______"
-                      maxLength={6}
-                      dir="ltr"
-                    />
-                    {otpError && (
-                      <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1 text-center">
-                        {otpError}
-                      </motion.p>
-                    )}
-                  </div>
-
-                  <motion.button
-                    type="submit"
-                    disabled={isLoading || isSuccess}
-                    className="relative w-full bg-gradient-to-r from-amber-500 to-amber-600 text-white py-4 rounded-xl font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed"
-                    whileHover={{ scale: 1.02 }}
-                    whileTap={{ scale: 0.98 }}
-                  >
-                    <span className="flex items-center justify-center gap-2">
-                      {isLoading ? (
-                        <>
-                          <Loader2 className="w-5 h-5 animate-spin" />
-                          {t("verifying")}
-                        </>
-                      ) : isSuccess ? (
-                        <>
-                          <CheckCircle className="w-5 h-5" />
-                          {t("success")}
-                        </>
-                      ) : (
-                        <>
-                          <KeyRound className="w-5 h-5" />
-                          {t("verify")}
-                        </>
-                      )}
-                    </span>
-                  </motion.button>
-
-                  <div className="flex items-center justify-between text-sm">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setStep("login");
-                        setOtpCode("");
-                        setOtpError("");
-                      }}
-                      className="text-gray-400 hover:text-white transition-colors"
-                    >
-                      ← {t("back")}
-                    </button>
-                    <button type="button" onClick={resendOTP} className="text-amber-400 hover:text-amber-300 transition-colors">
-                      {t("resendCode")}
-                    </button>
-                  </div>
-                </motion.form>
-              )}
-            </AnimatePresence>
-
-            <motion.p variants={itemVariants} className="text-center text-gray-400 mt-6">
-              {t("noAccount")}{" "}
-              <Link href="/auth/choose-role" className="text-amber-400 hover:text-amber-300 font-medium transition-colors">
-                {t("createNewAccount")}
-              </Link>
-            </motion.p>
-          </div>
-        </motion.div>
-
-        <motion.p variants={itemVariants} className="text-center text-gray-500 text-xs mt-4">
-          {t("agreeTerms")}{" "}
-          <Link href="/terms" className="text-amber-400 hover:text-amber-300 transition-colors">
-            {t("termsOfUse")}
-          </Link>{" "}
-          {t("and")}{" "}
-          <Link href="/privacy" className="text-amber-400 hover:text-amber-300 transition-colors">
-            {t("privacyPolicy")}
-          </Link>
-        </motion.p>
-      </motion.div>
-    </div>
-  );
+  return <Login />;
 }
diff --git a/app/register/owner/error.js b/app/register/owner/error.js
index a88abe0..b1859ff 100644
--- a/app/register/owner/error.js
+++ b/app/register/owner/error.js
@@ -1,17 +1,17 @@
-'use client';
+"use client";
 
-import { motion } from 'framer-motion';
-import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
-import Link from 'next/link';
+import { motion } from "framer-motion";
+import { AlertTriangle, RefreshCw, Home } from "lucide-react";
+import Link from "next/link";
 
 export default function Error({ error, reset }) {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4">
+    <div className="min-h-screen  flex items-center justify-center p-4">
       <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="text-center max-w-md">
         <div className="w-20 h-20 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
           <AlertTriangle className="w-10 h-10 text-red-500" />
         </div>
-        <h2 className="text-2xl font-bold text-white mb-2">حدث خطأ</h2>
+        <h2 className="text-2xl font-bold text-amber-50 mb-2">حدث خطأ</h2>
         <p className="text-gray-400 mb-8">نعتذر، حدث خطأ أثناء تحميل الصفحة</p>
         <div className="flex gap-3 justify-center">
           <button onClick={reset} className="flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors">
diff --git a/app/register/owner/page.js b/app/register/owner/page.js
index de39c68..890c3c4 100644
--- a/app/register/owner/page.js
+++ b/app/register/owner/page.js
@@ -1,566 +1,12 @@
-'use client';
-
-import { useState, useRef, useMemo } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import Image from 'next/image';
-import { useTranslation } from 'react-i18next';
-import {
-  User, Mail, Phone, Lock, Eye, EyeOff, MessageCircle,
-  Camera, X, CheckCircle, XCircle, ArrowLeft, Building,
-  Loader2, Shield, KeyRound, FileText
-} from 'lucide-react';
-import toast, { Toaster } from 'react-hot-toast';
-import { addOwner, loginWithEmail, sendEmailOTP, verifyEmail } from '../../utils/api';
-import AuthService from '../../services/AuthService';
-import { OwnerType, OwnerTypeLabels } from '../../enums';
-
+import Owner from "@/app/components/OwnerComponents/Owner";
+export const metadata = {
+  title: "انشاء حساب صاحب عقار",
+  description: "انشاء حساب والتسجيل ك صاحب عقار",
+};
 export default function OwnerRegisterPage() {
-  const router = useRouter();
-  const { t } = useTranslation();
-  const [step, setStep] = useState(1);
-  const [showOtpModal, setShowOtpModal] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    whatsapp: '',
-    phone2: '',
-    nationalNumber: '',
-    password: '',
-    confirmPassword: '',
-    ownerType: OwnerType.PERSON,
-    agreeTerms: false
-  });
-
-  const [idImages, setIdImages] = useState({ front: null, back: null, license: null });
-  const [idImagePreviews, setIdImagePreviews] = useState({ front: '', back: '', license: '' });
-  const [otpCode, setOtpCode] = useState('');
-  const [errors, setErrors] = useState({});
-
-  const fileInputFrontRef = useRef(null);
-  const fileInputBackRef = useRef(null);
-  const fileInputLicenseRef = useRef(null);
-
-  const isCompany = Number(formData.ownerType) === OwnerType.REAL_ESTATE_AGENCY;
-
-  const handleImageUpload = (side, file) => {
-    if (!file) return;
-    if (!file.type.startsWith('image/')) {
-      toast.error(t('register.selectValidImage'));
-      return;
-    }
-    if (file.size > 5 * 1024 * 1024) {
-      toast.error(t('register.imageSizeLimit'));
-      return;
-    }
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setIdImagePreviews(prev => ({ ...prev, [side]: reader.result }));
-    };
-    reader.readAsDataURL(file);
-    setIdImages(prev => ({ ...prev, [side]: file }));
-    toast.success(t('register.imageUploadSuccess'), { style: { background: '#dcfce7', color: '#166534' } });
-  };
-
-  const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-  const validatePhone = (phone) => /^(09|05)[0-9]{8}$/.test(phone);
-
-  const validateStep1 = () => {
-    const newErrors = {};
-    if (!formData.firstName) newErrors.firstName = t('register.firstNameRequired');
-    if (!formData.lastName) newErrors.lastName = t('register.lastNameRequired');
-    if (!formData.email) newErrors.email = t('register.emailRequired');
-    else if (!validateEmail(formData.email)) newErrors.email = t('register.emailInvalid');
-    if (!formData.phone) newErrors.phone = t('register.phoneRequired');
-    else if (!validatePhone(formData.phone)) newErrors.phone = t('register.phoneInvalid') + ` (${t('register.phoneMustStartWith')} 09/05)`;
-    if (!formData.whatsapp) newErrors.whatsapp = t('register.whatsappRequired');
-    else if (!validatePhone(formData.whatsapp)) newErrors.whatsapp = t('register.phoneInvalid') + ` (${t('register.phoneMustStartWith')} 09/05)`;
-    if (!formData.password) newErrors.password = t('register.passwordRequired');
-    else if (formData.password.length < 6) newErrors.password = t('validation.passwordMinLength');
-    if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = t('validation.passwordsMatch');
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const validateStep2 = () => {
-    const newErrors = {};
-    if (!idImages.front) newErrors.front = t('register.frontIdRequired');
-    if (!idImages.back) newErrors.back = t('register.backIdRequired');
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleNextStep = () => {
-    if (validateStep1()) {
-      setStep(2);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    } else {
-      toast.error(t('validation.correctErrors'));
-    }
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!validateStep2()) {
-      toast.error(t('register.completeRequiredImages'));
-      return;
-    }
-    if (!formData.agreeTerms) {
-      toast.error(t('validation.agreeToTerms'));
-      return;
-    }
-
-    setIsLoading(true);
-    const payload = {
-      firstName: formData.firstName,
-      lastName: formData.lastName,
-      email: formData.email,
-      phoneNumber: formData.phone || '',
-      whatsAppNumber: formData.whatsapp,
-      phone: formData.phone2,
-      nationalNumber: formData.nationalNumber,
-      password: formData.password,
-      ownerType: formData.ownerType,
-    };
-
-    try {
-      const licenseImage = isCompany ? idImages.license : null;
-      const res = await addOwner(payload, idImages.front, idImages.back, licenseImage);
-      if (res.status === 200 || res.ok) {
-        const tempToken = res.data;
-        if (tempToken) AuthService.addToken(tempToken);
-        toast.success(res.message || t('register.accountCreated'), { duration: 4000 });
-
-        const loginRes = await loginWithEmail(formData.email, formData.password);
-        if (loginRes.status === 206) {
-          const otpToken = loginRes.data;
-          if (otpToken) AuthService.addToken(otpToken);
-          toast(loginRes.message || t('register.otpSentEmail'), { icon: '📧' });
-          setShowOtpModal(true);
-        } else if (loginRes.status === 200) {
-          const loginToken = loginRes.data;
-          if (loginToken) AuthService.addToken(loginToken);
-          toast.success(loginRes.message || t('register.loginSuccess'));
-          router.push('/');
-        }
-      } else {
-        toast.error(res.message || res.data?.message || t('register.accountCreationFailed'));
-      }
-    } catch (err) {
-      toast.error(err.message || t('register.registrationError'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleVerifyOTP = async () => {
-    if (!otpCode || otpCode.length < 4) {
-      toast.error(t('register.otpRequired'));
-      return;
-    }
-    setIsLoading(true);
-    try {
-      const res = await verifyEmail(otpCode);
-      if (res.status === 200) {
-        AuthService.deleteToken();
-        toast.success(res.message || t('register.emailVerified'));
-        setShowOtpModal(false);
-        setTimeout(() => router.push('/login'), 1500);
-      } else {
-        toast.error(res.message || res.data?.message || t('accountVerification.otpInvalid'));
-      }
-    } catch (err) {
-      toast.error(err.message || t('register.verificationError'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleResendOTP = async () => {
-    setIsLoading(true);
-    try {
-      await sendEmailOTP();
-      toast.success(t('register.newOtpSent'));
-    } catch (err) {
-      toast.error(t('register.resendOtpFailed'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const fadeInUp = {
-    initial: { opacity: 0, y: 20 },
-    animate: { opacity: 1, y: 0 },
-    transition: { duration: 0.5 }
-  };
-
-  const staggerContainer = {
-    animate: { transition: { staggerChildren: 0.1 } }
-  };
-
-  const backgroundElements = useMemo(() => {
-    const circles = [
-      { style: { top: '20%', right: '20%', width: '256px', height: '256px' }, className: 'bg-amber-500/5' },
-      { style: { bottom: '20%', left: '20%', width: '320px', height: '320px' }, className: 'bg-blue-500/5' },
-      { style: { top: '50%', left: '50%', width: '384px', height: '384px', transform: 'translate(-50%, -50%)' }, className: 'bg-purple-500/5' },
-    ];
-    const dots = Array.from({ length: 10 }).map((_, i) => ({
-      left: `${5 + i * 10}%`,
-      top: `${10 + (i * 7) % 80}%`,
-      size: `${80 + (i % 5) * 15}px`
-    }));
-    return (
-      <>
-        {circles.map((circle, i) => (
-          <div key={`circle-${i}`} className={`absolute rounded-full ${circle.className}`} style={circle.style} />
-        ))}
-        {dots.map((dot, i) => (
-          <div key={`dot-${i}`} className="absolute rounded-full bg-amber-500/10" style={{ left: dot.left, top: dot.top, width: dot.size, height: dot.size }} />
-        ))}
-      </>
-    );
-  }, []);
-
   return (
-    <div className="min-h-screen bg-gradient-to-br  flex items-center justify-center p-4 relative overflow-hidden">
-      <Toaster position="top-center" reverseOrder={false} />
-      <div className="absolute inset-0 overflow-hidden">{backgroundElements}</div>
-
-      <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }}
-        className="relative z-10 w-full max-w-2xl">
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <Link href="/auth/choose-role" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
-              <motion.div whileHover={{ x: -5 }}><ArrowLeft className="w-4 h-4" /></motion.div>
-              <span>{t('forgotPassword.backToLogin')}</span>
-            </Link>
-            <span className="text-sm text-gray-400">{t('register.stepOf2', { step: step })}</span>
-          </div>
-          <div className="flex gap-2">
-            {[1, 2].map((s) => (
-              <motion.div key={s} className={`h-2 flex-1 rounded-full ${step >= s ? 'bg-amber-500' : 'bg-gray-700'}`} animate={{ scaleX: step >= s ? 1 : 0.5 }} />
-            ))}
-          </div>
-        </div>
-
-        <motion.div key={step} initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} transition={{ duration: 0.3 }}
-          className="bg-white/5 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">
-          <div className="bg-gradient-to-r from-amber-500 to-amber-600 p-8 text-center relative overflow-hidden">
-            <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }}
-              className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
-            <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="relative z-10">
-              <motion.div animate={{ rotate: [0, 10, -10, 0] }} transition={{ duration: 2, repeat: Infinity }}
-                className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm">
-                <Building className="w-10 h-10 text-white" />
-              </motion.div>
-              <h1 className="text-3xl font-bold text-white mb-2">{step === 1 ? t('register.owner.step1Title') : t('register.owner.step1bTitle')}</h1>
-              <p className="text-amber-100">{step === 1 ? t('register.owner.step1Desc') : t('register.owner.step1bDesc')}</p>
-            </motion.div>
-          </div>
-
-          <div className="p-8">
-            <motion.form variants={staggerContainer} initial="initial" animate="animate"
-              onSubmit={step === 1 ? (e) => { e.preventDefault(); handleNextStep(); } : handleSubmit}
-              className="space-y-6">
-              {step === 1 && (
-                <>
-                  <motion.div variants={fadeInUp} className="grid grid-cols-2 gap-3">
-                    <div>
-                      <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.firstName')} <span className="text-red-500">*</span></label>
-                      <div className="relative group">
-                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                          <User className={`w-5 h-5 ${errors.firstName ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
-                        </div>
-                        <input type="text" value={formData.firstName}
-                          onChange={(e) => { setFormData({...formData, firstName: e.target.value}); setErrors({...errors, firstName: null}); }}
-                          className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.firstName ? 'border-red-500' : 'border-gray-700'}`}
-                          placeholder={t('register.firstName')} />
-                      </div>
-                      {errors.firstName && <p className="text-red-500 text-sm mt-1">{errors.firstName}</p>}
-                    </div>
-                    <div>
-                      <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.lastName')} <span className="text-red-500">*</span></label>
-                      <input type="text" value={formData.lastName}
-                        onChange={(e) => { setFormData({...formData, lastName: e.target.value}); setErrors({...errors, lastName: null}); }}
-                        className={`w-full px-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.lastName ? 'border-red-500' : 'border-gray-700'}`}
-                        placeholder={t('register.lastName')} />
-                      {errors.lastName && <p className="text-red-500 text-sm mt-1">{errors.lastName}</p>}
-                    </div>
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.email')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Mail className={`w-5 h-5 ${errors.email ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
-                      </div>
-                      <input type="email" value={formData.email}
-                        onChange={(e) => { setFormData({...formData, email: e.target.value}); setErrors({...errors, email: null}); }}
-                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.email ? 'border-red-500' : 'border-gray-700'}`}
-                        placeholder={t('register.emailPlaceholder')} />
-                    </div>
-                    {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.phone')} <span className="text-gray-500">({t('register.optional')})</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Phone className="w-5 h-5 text-gray-400 group-focus-within:text-amber-500" />
-                      </div>
-                      <input type="tel" value={formData.phone}
-                        onChange={(e) => { setFormData({...formData, phone: e.target.value}); setErrors({...errors, phone: null}); }}
-                        className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all"
-                        placeholder={t('register.phoneOptionalPlaceholder')} />
-                    </div>
-                    {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.whatsapp')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <MessageCircle className={`w-5 h-5 ${errors.whatsapp ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
-                      </div>
-                      <input type="tel" value={formData.whatsapp}
-                        onChange={(e) => { setFormData({...formData, whatsapp: e.target.value}); setErrors({...errors, whatsapp: null}); }}
-                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.whatsapp ? 'border-red-500' : 'border-gray-700'}`}
-                        placeholder={t('register.whatsappPlaceholder')} />
-                    </div>
-                    {errors.whatsapp && <p className="text-red-500 text-sm mt-1">{errors.whatsapp}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.phoneSecondary')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Phone className={`w-5 h-5 ${errors.phone2 ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
-                      </div>
-                      <input type="tel" value={formData.phone2}
-                        onChange={(e) => { setFormData({...formData, phone2: e.target.value}); setErrors({...errors, phone2: null}); }}
-                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.phone2 ? 'border-red-500' : 'border-gray-700'}`}
-                        placeholder={t('register.phoneSecondaryPlaceholder')} maxLength={7} />
-                    </div>
-                    {errors.phone2 && <p className="text-red-500 text-sm mt-1">{errors.phone2}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.nationalNumber')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <User className={`w-5 h-5 ${errors.nationalNumber ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
-                      </div>
-                      <input type="text" value={formData.nationalNumber}
-                        onChange={(e) => { setFormData({...formData, nationalNumber: e.target.value}); setErrors({...errors, nationalNumber: null}); }}
-                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.nationalNumber ? 'border-red-500' : 'border-gray-700'}`}
-                        placeholder={t('register.nationalNumberPlaceholder')} />
-                    </div>
-                    {errors.nationalNumber && <p className="text-red-500 text-sm mt-1">{errors.nationalNumber}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.ownerType')} <span className="text-red-500">*</span></label>
-                    <select value={formData.ownerType.toString()}
-                      onChange={(e) => {
-                        const selectedType = parseInt(e.target.value, 10);
-                        setFormData((prev) => ({ ...prev, ownerType: selectedType }));
-                      }}
-                      className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white appearance-none cursor-pointer">
-                      {Object.entries(OwnerTypeLabels).map(([value, label]) => (
-                        <option key={value} value={value} className="bg-gray-900 text-white">{label}</option>
-                      ))}
-                    </select>
-                  </motion.div>
-
-                  <AnimatePresence>
-                    {isCompany && (
-                      <motion.div
-                        key="license-upload-step1"
-                        initial={{ opacity: 0, y: -10 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{ opacity: 0, y: -10 }}
-                        transition={{ duration: 0.2 }}
-                      >
-                        <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.owner.licenseImageLabel')} <span className="text-gray-400">({t('register.optional')})</span></label>
-                        <div className="mb-2 text-xs text-gray-400">{t('register.owner.licenseHint')}</div>
-                        <div onClick={() => fileInputLicenseRef.current?.click()}
-                          className={`relative border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all ${idImagePreviews.license ? 'border-green-500 bg-green-500/10' : 'border-gray-700 hover:border-amber-500 hover:bg-white/5'}`}>
-                          <input ref={fileInputLicenseRef} type="file" accept="image/*" onChange={(e) => handleImageUpload('license', e.target.files?.[0])} className="hidden" />
-                          {idImagePreviews.license ? (
-                            <div className="relative">
-                              <Image src={idImagePreviews.license} alt={t('register.uploadLicenseAlt')} width={200} height={120} className="mx-auto rounded-lg object-cover" />
-                              <button onClick={(e) => { e.stopPropagation(); setIdImages(prev => ({...prev, license: null})); setIdImagePreviews(prev => ({...prev, license: ''})); }}
-                                className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center hover:bg-red-600">
-                                <X className="w-4 h-4 text-white" />
-                              </button>
-                            </div>
-                          ) : (<><Camera className="w-12 h-12 text-gray-500 mx-auto mb-3" /><p className="text-gray-400">{t('register.owner.clickUploadLicense')}</p><p className="text-xs text-gray-500 mt-2">JPEG, PNG, JPG • {t('register.upTo5MB')}</p></>)}
-                        </div>
-                      </motion.div>
-                    )}
-                  </AnimatePresence>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.password')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Lock className={`w-5 h-5 ${errors.password ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
-                      </div>
-                      <input type={showPassword ? "text" : "password"} value={formData.password}
-                        onChange={(e) => { setFormData({...formData, password: e.target.value}); setErrors({...errors, password: null}); }}
-                        className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.password ? 'border-red-500' : 'border-gray-700'}`}
-                        placeholder={t('register.passwordPlaceholder')} />
-                      <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
-                        {showPassword ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
-                      </button>
-                    </div>
-                    {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.confirmPassword')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Lock className={`w-5 h-5 ${errors.confirmPassword ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
-                      </div>
-                      <input type={showConfirmPassword ? "text" : "password"} value={formData.confirmPassword}
-                        onChange={(e) => { setFormData({...formData, confirmPassword: e.target.value}); setErrors({...errors, confirmPassword: null}); }}
-                        className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.confirmPassword ? 'border-red-500' : 'border-gray-700'}`}
-                        placeholder={t('register.confirmPasswordPlaceholder')} />
-                      <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
-                        {showConfirmPassword ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
-                      </button>
-                      {formData.confirmPassword && (
-                        <div className="absolute inset-y-0 left-12 flex items-center">
-                          {formData.password === formData.confirmPassword ? <CheckCircle className="w-5 h-5 text-green-500" /> : <XCircle className="w-5 h-5 text-red-500" />}
-                        </div>
-                      )}
-                    </div>
-                    {errors.confirmPassword && <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>}
-                  </motion.div>
-                </>
-              )}
-
-              {step === 2 && (
-                <>
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.owner.frontIdLabel')} <span className="text-red-500">*</span></label>
-                    <div onClick={() => fileInputFrontRef.current?.click()}
-                      className={`relative border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all ${idImagePreviews.front ? 'border-green-500 bg-green-500/10' : errors.front ? 'border-red-500 bg-red-500/10' : 'border-gray-700 hover:border-amber-500 hover:bg-white/5'}`}>
-                      <input ref={fileInputFrontRef} type="file" accept="image/*" onChange={(e) => handleImageUpload('front', e.target.files?.[0])} className="hidden" />
-                      {idImagePreviews.front ? (
-                        <div className="relative">
-                          <Image src={idImagePreviews.front} alt={t('register.uploadFrontAlt')} width={200} height={120} className="mx-auto rounded-lg object-cover" />
-                          <button onClick={(e) => { e.stopPropagation(); setIdImages(prev => ({...prev, front: null})); setIdImagePreviews(prev => ({...prev, front: ''})); }}
-                            className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center hover:bg-red-600">
-                            <X className="w-4 h-4 text-white" />
-                          </button>
-                        </div>
-                      ) : (<><Camera className="w-12 h-12 text-gray-500 mx-auto mb-3" /><p className="text-gray-400">{t('register.owner.clickUploadImage')}</p><p className="text-xs text-gray-500 mt-2">JPEG, PNG, JPG • {t('register.upTo5MB')}</p></>)}
-                    </div>
-                    {errors.front && <p className="text-red-500 text-sm mt-1">{errors.front}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.owner.backIdLabel')} <span className="text-red-500">*</span></label>
-                    <div onClick={() => fileInputBackRef.current?.click()}
-                      className={`relative border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all ${idImagePreviews.back ? 'border-green-500 bg-green-500/10' : errors.back ? 'border-red-500 bg-red-500/10' : 'border-gray-700 hover:border-amber-500 hover:bg-white/5'}`}>
-                      <input ref={fileInputBackRef} type="file" accept="image/*" onChange={(e) => handleImageUpload('back', e.target.files?.[0])} className="hidden" />
-                      {idImagePreviews.back ? (
-                        <div className="relative">
-                          <Image src={idImagePreviews.back} alt={t('register.uploadBackAlt')} width={200} height={120} className="mx-auto rounded-lg object-cover" />
-                          <button onClick={(e) => { e.stopPropagation(); setIdImages(prev => ({...prev, back: null})); setIdImagePreviews(prev => ({...prev, back: ''})); }}
-                            className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center hover:bg-red-600">
-                            <X className="w-4 h-4 text-white" />
-                          </button>
-                        </div>
-                      ) : (<><Camera className="w-12 h-12 text-gray-500 mx-auto mb-3" /><p className="text-gray-400">{t('register.owner.clickUploadImage')}</p><p className="text-xs text-gray-500 mt-2">JPEG, PNG, JPG • {t('register.upTo5MB')}</p></>)}
-                    </div>
-                    {errors.back && <p className="text-red-500 text-sm mt-1">{errors.back}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp} className="flex items-center gap-2">
-                    <input type="checkbox" id="terms" checked={formData.agreeTerms}
-                      onChange={(e) => setFormData({...formData, agreeTerms: e.target.checked})}
-                      className="w-4 h-4 rounded border-gray-600 bg-white/5 text-amber-500 focus:ring-amber-500" required />
-                    <label htmlFor="terms" className="text-sm text-gray-300">
-                      {t('register.agreeTerms')} <Link href="/terms" className="text-amber-400 hover:text-amber-300">{t('register.termsOfUse')}</Link> {t('register.and')} <Link href="/privacy" className="text-amber-400 hover:text-amber-300">{t('register.privacyPolicy')}</Link>
-                    </label>
-                  </motion.div>
-                </>
-              )}
-
-              <motion.div variants={fadeInUp} className="flex gap-3 pt-4">
-                {step === 1 ? (
-                  <>
-                    <button type="button" onClick={() => router.push('/auth/choose-role')}
-                      className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors">{t('register.cancel')}</button>
-                    <button type="submit"
-                      className="flex-1 bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 rounded-xl font-medium hover:from-amber-600 hover:to-amber-700 transition-all">{t('register.next')}</button>
-                  </>
-                ) : (
-                  <>
-                    <button type="button" onClick={() => setStep(1)}
-                      className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors">{t('register.previous')}</button>
-                    <button type="submit" disabled={isLoading || !formData.agreeTerms}
-                      className="flex-1 bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 rounded-xl font-medium hover:from-amber-600 hover:to-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
-                      {isLoading ? (<div className="flex items-center justify-center gap-2"><Loader2 className="w-5 h-5 animate-spin" /><span>{t('register.registering')}</span></div>) : t('register.createAccount')}
-                    </button>
-                  </>
-                )}
-              </motion.div>
-            </motion.form>
-          </div>
-        </motion.div>
-      </motion.div>
-
-      <AnimatePresence>
-        {showOtpModal && (
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-            <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }}
-              className="bg-gray-900 border border-white/10 rounded-2xl w-full max-w-md p-6 shadow-2xl">
-              <div className="text-center mb-6">
-                <div className="w-16 h-16 bg-amber-500/20 rounded-full flex items-center justify-center mx-auto mb-3">
-                  <Shield className="w-8 h-8 text-amber-500" />
-                </div>
-                <h2 className="text-xl font-bold text-white">{t('register.otpTitle')}</h2>
-                <p className="text-gray-400 text-sm mt-1">{t('register.otpSentTo')}</p>
-                <p className="text-amber-400 font-medium text-sm">{formData.email}</p>
-              </div>
-              <div className="mb-6">
-                <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.otpLabel')}</label>
-                <div className="relative">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <KeyRound className="w-5 h-5 text-gray-400" />
-                  </div>
-                  <input type="text" value={otpCode} maxLength={6}
-                    onChange={(e) => setOtpCode(e.target.value)}
-                    className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 text-white text-center tracking-[0.5em] text-xl"
-                    placeholder="------" />
-                </div>
-              </div>
-              <div className="flex gap-3">
-                <button onClick={handleVerifyOTP} disabled={isLoading || !otpCode}
-                  className="flex-1 bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 rounded-xl font-medium hover:from-amber-600 hover:to-amber-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
-                  {isLoading ? <><Loader2 className="w-5 h-5 animate-spin" /><span>{t('register.verifying')}</span></> : t('register.verify')}
-                </button>
-              </div>
-              <button onClick={handleResendOTP} disabled={isLoading}
-                className="w-full text-center text-amber-400 hover:text-amber-300 text-sm mt-3 disabled:opacity-50">
-                {t('register.resendOtp')}
-              </button>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+    <>
+      <Owner />
+    </>
   );
 }
diff --git a/app/register/tenant/page.js b/app/register/tenant/page.js
index 08d4bb2..d795c12 100644
--- a/app/register/tenant/page.js
+++ b/app/register/tenant/page.js
@@ -1,87 +1,60 @@
+"use client";
 
-'use client';
-
-import { useState, useEffect, useMemo } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { useTranslation } from 'react-i18next';
-import {
-  User, Mail, Phone, Lock, Eye, EyeOff,
-  CheckCircle, XCircle, ArrowLeft, Home, Loader2,
-  Shield, KeyRound
-} from 'lucide-react';
-import toast, { Toaster } from 'react-hot-toast';
-import { addCustomer, loginWithEmail, sendEmailOTP, verifyEmail } from '../../utils/api';
-import AuthService from '../../services/AuthService';
-import { CustomerType, CustomerTypeLabels } from '../../enums';
-
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import toast, { Toaster } from "react-hot-toast";
+import { addCustomer, loginWithEmail } from "../../utils/api";
+import AuthService from "../../services/AuthService";
+import { CustomerType } from "../../enums";
+import { fadeInUp } from "../../components/Animation/OwnerPageAnimation";
+import { staggerContainer } from "../../components/Animation/OwnerPageAnimation";
+import InteractiveBackground from "@/app/components/Animation/Background";
+import HeaderOfSteps from "@/app/components/OwnerComponents/HeaderOfSteps";
+import HeaderOfForm from "@/app/components/OwnerComponents/HeaderOfForm";
+import OwnerFormStepOne from "@/app/components/OwnerComponents/OwnerFormStepOne";
+import Policy from "@/app/components/OwnerComponents/PolicyAgree";
+import ButtomStepOne from "@/app/components/OwnerComponents/ButtomStepOne";
+import ButtomStepTwo from "@/app/components/OwnerComponents/ButtomStepTwo";
+import HavAccount from "@/app/components/HavAccount";
+import OtpDialog from "@/app/components/OwnerComponents/OtpDialog";
+import { validateStep1 } from "@/app/validations/OwnerValidatoin";
 export default function TenantRegisterPage() {
-  const router = useRouter();
   const { t } = useTranslation();
   const [step, setStep] = useState(1);
   const [showOtpModal, setShowOtpModal] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-
   const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    whatsapp: '',
-    phone2: '',
-    nationalNumber: '',
-    password: '',
-    confirmPassword: '',
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    whatsapp: "",
+    phone2: "",
+    nationalNumber: "",
+    password: "",
+    confirmPassword: "",
     customerType: CustomerType.PERSONAL,
-    agreeTerms: false
+    agreeTerms: false,
   });
-
-  const [otpCode, setOtpCode] = useState('');
   const [errors, setErrors] = useState({});
 
-  const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-  const validatePhone = (phone) => /^(09|05)[0-9]{8}$/.test(phone);
-
-  const validateStep1 = () => {
-    const newErrors = {};
-    if (!formData.firstName) newErrors.firstName = t('register.firstNameRequired');
-    if (!formData.lastName) newErrors.lastName = t('register.lastNameRequired');
-    if (!formData.email) newErrors.email = t('register.emailRequired');
-    else if (!validateEmail(formData.email)) newErrors.email = t('register.emailInvalid');
-    if (!formData.phone) newErrors.phone = t('register.phoneRequired');
-    else if (!validatePhone(formData.phone)) newErrors.phone = t('register.phoneInvalid') + ` (${t('register.phoneMustStartWith')} 09/05)`;
-    if (!formData.password) newErrors.password = t('register.passwordRequired');
-    else if (formData.password.length < 6) newErrors.password = t('validation.passwordMinLength');
-    if (!formData.whatsapp) newErrors.whatsapp = t('register.whatsappRequired');
-    if (!formData.phone2 || formData.phone2.length !== 7) newErrors.phone2 = t('validation.phone7Digits');
-    if (!formData.nationalNumber) newErrors.nationalNumber = t('register.nationalNumberRequired');
-    if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = t('validation.passwordsMatch');
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
   const handleNextStep = () => {
-    if (validateStep1()) {
+    if (validateStep1(formData, setErrors, t)) {
       setStep(2);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+      window.scrollTo({ top: 0, behavior: "smooth" });
     } else {
-      toast.error(t('validation.correctErrors'));
+      toast.error(t("validation.correctErrors"));
     }
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
     if (!formData.agreeTerms) {
-      toast.error(t('validation.agreeToTerms'));
+      toast.error(t("validation.agreeToTerms"));
       return;
     }
-
     setIsLoading(true);
-
     const payload = {
       firstName: formData.firstName,
       lastName: formData.lastName,
@@ -93,327 +66,61 @@ export default function TenantRegisterPage() {
       password: formData.password,
       customerType: formData.customerType,
     };
-
     try {
       const res = await addCustomer(payload, null, null);
-
       if (res.status === 200 || res.ok) {
-        const tempToken = res.data;
-        if (tempToken) {
-          AuthService.addToken(tempToken);
-        }
-
         const apiMessage = res.message || res.data?.message;
-        toast.success(apiMessage || t('register.accountCreated'), { duration: 4000 });
-
+        toast.success(apiMessage || t("register.accountCreated"), { duration: 4000 });
         const loginRes = await loginWithEmail(formData.email, formData.password);
         if (loginRes.status === 206) {
           const otpToken = loginRes.data;
           if (otpToken) AuthService.addToken(otpToken);
-          toast(loginRes.message || t('register.otpSentEmail'), { icon: '📧' });
+          toast(loginRes.message || t("register.otpSentEmail"), { icon: "📧" });
           setShowOtpModal(true);
         } else if (loginRes.status === 200) {
           const loginToken = loginRes.data;
           if (loginToken) AuthService.addToken(loginToken);
-          toast.success(loginRes.message || t('register.loginSuccess'));
-          router.push('/');
+          toast.success(loginRes.message || t("register.loginSuccess"));
         }
       } else {
-        const errMsg = res.message || res.data?.message || t('register.accountCreationFailed');
+        const errMsg = res.message || res.data?.message || t("register.accountCreationFailed");
         toast.error(errMsg);
       }
     } catch (err) {
-      toast.error(err.message || t('register.registrationError'));
+      toast.error(err.message || t("register.registrationError"));
     } finally {
       setIsLoading(false);
     }
   };
-
-  const handleVerifyOTP = async () => {
-    if (!otpCode || otpCode.length < 4) {
-      toast.error(t('register.otpRequired'));
-      return;
-    }
-    setIsLoading(true);
-    try {
-      const res = await verifyEmail(otpCode);
-      if (res.status === 200) {
-        AuthService.deleteToken();
-        toast.success(res.message || t('register.emailVerified'));
-        setShowOtpModal(false);
-        setTimeout(() => router.push('/login'), 1500);
-      } else {
-        toast.error(res.message || res.data?.message || t('accountVerification.otpInvalid'));
-      }
-    } catch (err) {
-      toast.error(err.message || t('register.verificationError'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleResendOTP = async () => {
-    setIsLoading(true);
-    try {
-      await sendEmailOTP();
-      toast.success(t('register.newOtpSent'));
-    } catch (err) {
-      toast.error(t('register.resendOtpFailed'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const fadeInUp = {
-    initial: { opacity: 0, y: 20 },
-    animate: { opacity: 1, y: 0 },
-    transition: { duration: 0.5 }
-  };
-
-  const staggerContainer = {
-    animate: { transition: { staggerChildren: 0.1 } }
-  };
-
-  const backgroundElements = useMemo(() => {
-    const circles = [
-      { style: { top: '20%', right: '20%', width: '256px', height: '256px' }, className: 'bg-blue-500/10' },
-      { style: { bottom: '20%', left: '20%', width: '320px', height: '320px' }, className: 'bg-blue-500/10' },
-      { style: { top: '50%', left: '50%', width: '384px', height: '384px', transform: 'translate(-50%, -50%)' }, className: 'bg-blue-500/10' },
-    ];
-    const dots = [
-      { left: '5%', top: '10%', size: '120px' },
-      { left: '15%', top: '70%', size: '80px' },
-      { left: '25%', top: '30%', size: '150px' },
-      { left: '35%', top: '85%', size: '100px' },
-      { left: '45%', top: '15%', size: '90px' },
-      { left: '55%', top: '60%', size: '130px' },
-      { left: '65%', top: '40%', size: '70px' },
-      { left: '75%', top: '80%', size: '110px' },
-      { left: '85%', top: '20%', size: '140px' },
-      { left: '95%', top: '50%', size: '85px' },
-    ];
-    return (
-      <>
-        {circles.map((circle, i) => (
-          <div key={`circle-${i}`} className={`absolute rounded-full ${circle.className}`} style={circle.style} />
-        ))}
-        {dots.map((dot, i) => (
-          <div key={`dot-${i}`} className="absolute rounded-full bg-blue-500/10" style={{ left: dot.left, top: dot.top, width: dot.size, height: dot.size }} />
-        ))}
-      </>
-    );
-  }, []);
-
   return (
-    <div className="min-h-screen bg-gradient-to-br flex items-center justify-center p-4 relative overflow-hidden">
+    <div className="min-h-screen  flex items-center justify-center p-4 relative overflow-hidden">
       <Toaster position="top-center" reverseOrder={false} />
-      <div className="absolute inset-0 overflow-hidden">{backgroundElements}</div>
-
+      <div className="absolute inset-0 overflow-hidden">
+        <InteractiveBackground />{" "}
+      </div>
       <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} className="relative z-10 w-full max-w-md">
-        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="mb-8">
-          <Link href="/auth/choose-role" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
-            <motion.div whileHover={{ x: -5 }}><ArrowLeft className="w-4 h-4" /></motion.div>
-            <span>{t('forgotPassword.backToLogin')}</span>
-          </Link>
-        </motion.div>
-
-        <div className="mb-6 flex gap-2">
-          {[1, 2].map((s) => (
-            <motion.div key={s} className={`h-2 flex-1 rounded-full ${step >= s ? 'bg-blue-500' : 'bg-gray-700'}`} animate={{ scaleX: step >= s ? 1 : 0.5 }} />
-          ))}
-        </div>
-
+        <HeaderOfSteps step={step} colors={"bg-blue-500"} numberStep={[1, 2]} />
         <div className="bg-white/5 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">
-          <div className="bg-gradient-to-r from-blue-500 to-blue-600 p-8 text-center relative overflow-hidden">
-            <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }} className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
-            <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="relative z-10">
-              <motion.div animate={{ rotate: [0, 10, -10, 0] }} transition={{ duration: 2, repeat: Infinity }} className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm">
-                <Home className="w-10 h-10 text-white" />
-              </motion.div>
-              <h1 className="text-3xl font-bold text-white mb-2">{step === 1 ? t('register.tenant.step1Title') : t('register.tenant.step2Title')}</h1>
-              <p className="text-blue-100">{step === 1 ? t('register.tenant.step1Desc') : t('register.tenant.step2Desc')}</p>
-            </motion.div>
-          </div>
-
+          <HeaderOfForm num={1} step={step} />
           <div className="p-8">
-            <motion.form variants={staggerContainer} initial="initial" animate="animate" onSubmit={step === 1 ? (e) => { e.preventDefault(); handleNextStep(); } : handleSubmit} className="space-y-6">
-              {step === 1 && (
-                <>
-                  <motion.div variants={fadeInUp} className="grid grid-cols-2 gap-3">
-                    <div>
-                      <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.firstName')} <span className="text-red-500">*</span></label>
-                      <div className="relative group">
-                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                          <User className={`w-5 h-5 ${errors.firstName ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
-                        </div>
-                        <input type="text" value={formData.firstName} onChange={(e) => { setFormData({...formData, firstName: e.target.value}); setErrors({...errors, firstName: null}); }} className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.firstName ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.firstName')} />
-                      </div>
-                      {errors.firstName && <p className="text-red-500 text-sm mt-1">{errors.firstName}</p>}
-                    </div>
-                    <div>
-                      <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.lastName')} <span className="text-red-500">*</span></label>
-                      <input type="text" value={formData.lastName} onChange={(e) => { setFormData({...formData, lastName: e.target.value}); setErrors({...errors, lastName: null}); }} className={`w-full px-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.lastName ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.lastName')} />
-                      {errors.lastName && <p className="text-red-500 text-sm mt-1">{errors.lastName}</p>}
-                    </div>
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.email')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Mail className={`w-5 h-5 ${errors.email ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
-                      </div>
-                      <input type="email" value={formData.email} onChange={(e) => { setFormData({...formData, email: e.target.value}); setErrors({...errors, email: null}); }} className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.email ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.emailPlaceholder')} />
-                    </div>
-                    {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.phone')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Phone className={`w-5 h-5 ${errors.phone ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
-                      </div>
-                      <input type="tel" value={formData.phone} onChange={(e) => { setFormData({...formData, phone: e.target.value}); setErrors({...errors, phone: null}); }} className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.phone ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.phonePlaceholder')} />
-                    </div>
-                    {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.whatsapp')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Phone className={`w-5 h-5 ${errors.whatsapp ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
-                      </div>
-                      <input type="tel" value={formData.whatsapp} onChange={(e) => { setFormData({...formData, whatsapp: e.target.value}); setErrors({...errors, whatsapp: null}); }} className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.whatsapp ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.whatsappPlaceholder')} />
-                    </div>
-                    {errors.whatsapp && <p className="text-red-500 text-sm mt-1">{errors.whatsapp}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.phoneSecondary')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Phone className={`w-5 h-5 ${errors.phone2 ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
-                      </div>
-                      <input type="tel" value={formData.phone2} onChange={(e) => { setFormData({...formData, phone2: e.target.value}); setErrors({...errors, phone2: null}); }} className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.phone2 ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.phoneSecondaryPlaceholder')} maxLength={7} />
-                    </div>
-                    {errors.phone2 && <p className="text-red-500 text-sm mt-1">{errors.phone2}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.nationalNumber')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <User className={`w-5 h-5 ${errors.nationalNumber ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
-                      </div>
-                      <input type="text" value={formData.nationalNumber} onChange={(e) => { setFormData({...formData, nationalNumber: e.target.value}); setErrors({...errors, nationalNumber: null}); }} className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.nationalNumber ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.nationalNumberPlaceholder')} />
-                    </div>
-                    {errors.nationalNumber && <p className="text-red-500 text-sm mt-1">{errors.nationalNumber}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.customerType')} <span className="text-red-500">*</span></label>
-                    <select value={formData.customerType} onChange={(e) => setFormData({...formData, customerType: e.target.value})} className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white appearance-none cursor-pointer">
-                      {Object.entries(CustomerTypeLabels).map(([value, label]) => (<option key={value} value={value} className="bg-gray-900 text-white">{label}</option>))}
-                    </select>
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.password')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Lock className={`w-5 h-5 ${errors.password ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
-                      </div>
-                      <input type={showPassword ? "text" : "password"} value={formData.password} onChange={(e) => { setFormData({...formData, password: e.target.value}); setErrors({...errors, password: null}); }} className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.password ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.passwordPlaceholder')} />
-                      <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
-                        {showPassword ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
-                      </button>
-                    </div>
-                    {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
-                  </motion.div>
-
-                  <motion.div variants={fadeInUp}>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.confirmPassword')} <span className="text-red-500">*</span></label>
-                    <div className="relative group">
-                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                        <Lock className={`w-5 h-5 ${errors.confirmPassword ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
-                      </div>
-                      <input type={showConfirmPassword ? "text" : "password"} value={formData.confirmPassword} onChange={(e) => { setFormData({...formData, confirmPassword: e.target.value}); setErrors({...errors, confirmPassword: null}); }} className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.confirmPassword ? 'border-red-500' : 'border-gray-700'}`} placeholder={t('register.confirmPasswordPlaceholder')} />
-                      <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
-                        {showConfirmPassword ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
-                      </button>
-                      {formData.confirmPassword && (<div className="absolute inset-y-0 left-12 flex items-center">{formData.password === formData.confirmPassword ? <CheckCircle className="w-5 h-5 text-green-500" /> : <XCircle className="w-5 h-5 text-red-500" />}</div>)}
-                    </div>
-                    {errors.confirmPassword && <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>}
-                  </motion.div>
-                </>
-              )}
-
-              {step === 2 && (
-                <>
-                  <motion.div variants={fadeInUp} className="flex items-center gap-2">
-                    <input type="checkbox" id="terms" checked={formData.agreeTerms} onChange={(e) => setFormData({...formData, agreeTerms: e.target.checked})} className="w-4 h-4 rounded border-gray-600 bg-white/5 text-blue-500 focus:ring-blue-500" required />
-                    <label htmlFor="terms" className="text-sm text-gray-300">
-                      {t('register.agreeTerms')} <Link href="/terms" className="text-blue-400 hover:text-blue-300">{t('register.termsOfUse')}</Link> {t('register.and')} <Link href="/privacy" className="text-blue-400 hover:text-blue-300">{t('register.privacyPolicy')}</Link>
-                    </label>
-                  </motion.div>
-                </>
-              )}
-
+            <motion.form
+              variants={staggerContainer}
+              initial="initial"
+              animate="animate"
+              onSubmit={ step === 1? (e) => { e.preventDefault(); handleNextStep();  }: handleSubmit  }
+              className="space-y-6"
+            >
+              {step === 1 && <OwnerFormStepOne setErrors={setErrors} setFormData={setFormData} formData={formData} errors={errors} type={"customer"} />}
+              {step === 2 && <Policy formData={formData} setFormData={setFormData} type={"customer"} />}
               <motion.div variants={fadeInUp} className="flex gap-3 pt-4">
-                {step === 1 ? (
-                  <>
-                    <button type="button" onClick={() => router.push('/auth/choose-role')} className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors">{t('register.cancel')}</button>
-                    <button type="submit" className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 transition-all">{t('register.next')}</button>
-                  </>
-                ) : (
-                  <>
-                    <button type="button" onClick={() => setStep(1)} className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors">{t('register.previous')}</button>
-                    <button type="submit" disabled={isLoading || !formData.agreeTerms} className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
-                      {isLoading ? (<div className="flex items-center justify-center gap-2"><Loader2 className="w-5 h-5 animate-spin" /><span>{t('register.registering')}</span></div>) : t('register.createAccount')}
-                    </button>
-                  </>
-                )}
+                {step === 1 ? <ButtomStepOne type={"custoemr"} /> : <ButtomStepTwo formData={formData} setFormData={setFormData} isLoading={isLoading} type={"type"} />}
               </motion.div>
-
-              {step === 1 && (
-                <motion.p variants={fadeInUp} className="text-center text-gray-400 mt-4">
-                  {t('register.haveAccount')} <Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">{t('register.loginLink')}</Link>
-                </motion.p>
-              )}
+              {step === 1 && <HavAccount />}
             </motion.form>
           </div>
         </div>
       </motion.div>
-
-      <AnimatePresence>
-        {showOtpModal && (
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-            <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} className="bg-gray-900 border border-white/10 rounded-2xl w-full max-w-md p-6 shadow-2xl">
-              <div className="text-center mb-6">
-                <div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-3"><Shield className="w-8 h-8 text-blue-500" /></div>
-                <h2 className="text-xl font-bold text-white">{t('register.otpTitle')}</h2>
-                <p className="text-gray-400 text-sm mt-1">{t('register.otpSentTo')}</p>
-                <p className="text-blue-400 font-medium text-sm">{formData.email}</p>
-              </div>
-              <div className="mb-6">
-                <label className="block text-sm font-medium text-gray-300 mb-2">{t('register.otpLabel')}</label>
-                <div className="relative">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"><KeyRound className="w-5 h-5 text-gray-400" /></div>
-                  <input type="text" value={otpCode} maxLength={6} onChange={(e) => setOtpCode(e.target.value)} className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-white text-center tracking-[0.5em] text-xl" placeholder="------" />
-                </div>
-              </div>
-              <div className="flex gap-3">
-                <button onClick={handleVerifyOTP} disabled={isLoading || !otpCode} className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
-                  {isLoading ? <><Loader2 className="w-5 h-5 animate-spin" /><span>{t('register.verifying')}</span></> : t('register.verify')}
-                </button>
-              </div>
-              <button onClick={handleResendOTP} disabled={isLoading} className="w-full text-center text-blue-400 hover:text-blue-300 text-sm mt-3 disabled:opacity-50">{t('register.resendOtp')}</button>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <AnimatePresence>{showOtpModal && <OtpDialog formData={formData} setShowOtpModal={setShowOtpModal} type={"customer"} />}</AnimatePresence>
     </div>
   );
 }
diff --git a/app/services/AuthService.js b/app/services/AuthService.js
index 35d8d6f..4de5b6e 100644
--- a/app/services/AuthService.js
+++ b/app/services/AuthService.js
@@ -1,4 +1,5 @@
 import Cookies from "js-cookie";
+import { getCustomerByUserId, getOwnerByUserId, loginWithEmail, loginWithPhone } from "../utils/api";
 /**
  * AuthService
  * Manages authentication tokens and user role detection via JWT decoding.
@@ -39,19 +40,21 @@ const AuthService = Object.freeze({
     if (typeof window === "undefined") return null;
     return Cookies.get(TOKEN_KEY);
   },
-
   deleteToken() {
-    localStorage.removeItem(USER_KEY);
+    Cookies.remove(USER_KEY);
     Cookies.remove(TOKEN_KEY);
   },
-
   /**
    * Cache full user profile (from API)
    * @param {object} user — { name, email, phone, ... }
    */
   cacheUser(user) {
-    if (!user) return;
-    localStorage.setItem(USER_KEY, JSON.stringify(user));
+    Cookies.set(USER_KEY, JSON.stringify(user), {
+      expires: 7,
+      secure: true,
+      sameSite: "lax",
+      path: "/",
+    });
   },
 
   /**
@@ -59,8 +62,12 @@ const AuthService = Object.freeze({
    * @returns {object|null}
    */
   getCachedUser() {
+    const user = Cookies.get(USER_KEY);
+
+    if (!user) return null;
+
     try {
-      return JSON.parse(localStorage.getItem(USER_KEY));
+      return JSON.parse(user);
     } catch {
       return null;
     }
@@ -88,7 +95,6 @@ const AuthService = Object.freeze({
   getUser() {
     const payload = this.decodeToken();
     if (!payload) return null;
-
     const cached = this.getCachedUser();
 
     return {
@@ -96,7 +102,7 @@ const AuthService = Object.freeze({
       name: cached?.name || payload["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name"] || null,
       email: cached?.email || payload["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress"] || null,
       phone: cached?.phone || payload["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/mobilephone"] || null,
-      roles: this.getRoles(),
+      roles: cached?.roles,
     };
   },
 
@@ -107,7 +113,6 @@ const AuthService = Object.freeze({
   getUserId() {
     const user = this.getUser();
     if (!user?.id) return null;
-
     const parsedId = Number(user.id);
     return Number.isFinite(parsedId) ? parsedId : user.id;
   },
@@ -124,7 +129,21 @@ const AuthService = Object.freeze({
     if (typeof roles === "string") return [roles];
     return [];
   },
+  async cacheCurrentUser(getOwnerByUserId, getCustomerByUserId) {
+    const authUser = this.getUser();
+    if (!authUser?.id) {
+      return;
+    }
 
+    const fetchFn = this.isOwner() ? getOwnerByUserId : getCustomerByUserId;
+    const profile = await fetchFn(authUser.id);
+    this.cacheUser({
+      name: profile.firstName + profile.lastName,
+      email: profile.email,
+      phone: profile.phoneNumber,
+      roles: this.getRoles(),
+    });
+  },
   /**
    * User has Owner role
    * @returns {boolean}
@@ -164,6 +183,37 @@ const AuthService = Object.freeze({
   isAuthenticated() {
     return !!this.getToken();
   },
+
+  async login({ loginMethod, credential, password }) {
+    const loginFn = loginMethod === "email" ? loginWithEmail : loginWithPhone;
+    const result = await loginFn(credential, password);
+    switch (result.status) {
+      case 200: {
+        const token = typeof result.data === "string" ? result.data : result.data.token;
+        this.addToken(token);
+        await this.cacheCurrentUser(getOwnerByUserId, getCustomerByUserId);
+        return {
+          type: "SUCCESS",
+        };
+      }
+
+      case 206: {
+        const token = typeof result.data === "string" ? result.data : result.data.token;
+        this.addToken(token);
+        if (loginMethod === "email") await sendEmailOTP();
+        else await sendPhoneOTP();
+        return {
+          type: "OTP_REQUIRED",
+        };
+      }
+
+      default:
+        return {
+          type: "ERROR",
+          result,
+        };
+    }
+  },
 });
 
 export default AuthService;
diff --git a/app/utils/api.js b/app/utils/api.js
index 693ffe4..aeb0e7a 100644
--- a/app/utils/api.js
+++ b/app/utils/api.js
@@ -1,6 +1,4 @@
-import { Toast } from "flowbite-react";
 import AuthService from "../services/AuthService";
-
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || "https://45.93.137.91.nip.io/api";
 const REPORT_API_BASE = process.env.NEXT_PUBLIC_REPORT_API_URL || "http://45.93.137.91/api";
 
@@ -82,7 +80,6 @@ async function apiFetch(endpoint, options = {}) {
     }
   } catch (error) {
     if (error instanceof TypeError && error.message === "Failed to fetch") {
-     
       throw new Error(`تعذر الاتصال بالخادم. تحقق من اتصالك بالإنترنت أو حاول مرة أخرى لاحقاً. (${API_BASE}${endpoint})`);
     }
     throw error;
@@ -419,7 +416,6 @@ export async function uploadPicture(file) {
 
 async function multipartAuthFetch(endpoint, formData) {
   const token = AuthService.getToken();
-
   const res = await fetch(`${API_BASE}${endpoint}`, {
     method: "POST",
     headers: {
@@ -450,7 +446,7 @@ async function multipartAuthFetch(endpoint, formData) {
   };
 }
 
-export async function addOwner(data, frontImage = null, backImage = null, licenseImage = null) {
+export async function addOwner(data, frontImage = null, backImage = null) {
   const formData = new FormData();
 
   formData.append("FirstName", data.firstName || data.FirstName || "");
@@ -471,8 +467,6 @@ export async function addOwner(data, frontImage = null, backImage = null, licens
 
   if (frontImage) formData.append("FrontIdCarImagePath", frontImage);
   if (backImage) formData.append("RearIdCarImagePath", backImage);
-  if (licenseImage) formData.append("LicenseImagePath", licenseImage);
-
   return multipartAuthFetch("/Owner/Add", formData);
 }
 
diff --git a/app/validations/OwnerValidatoin.js b/app/validations/OwnerValidatoin.js
new file mode 100644
index 0000000..4010043
--- /dev/null
+++ b/app/validations/OwnerValidatoin.js
@@ -0,0 +1,54 @@
+// utils/registerValidation.js
+
+const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email?.trim());
+
+// يدعم الأرقام مع البادئات اختياريًا
+const validatePhone = (phone) => /^(09|05)[0-9]{8}$/.test(phone?.trim());
+
+export const validateStep1 = (formData, setErrors, t) => {
+  const newErrors = {};
+
+  if (!formData.firstName?.trim()) newErrors.firstName = t("register.firstNameRequired");
+  if (!formData.lastName?.trim()) newErrors.lastName = t("register.lastNameRequired");
+
+  if (!formData.email?.trim()) {
+    newErrors.email = t("register.emailRequired");
+  } else if (!validateEmail(formData.email)) {
+    newErrors.email = t("register.emailInvalid");
+  }
+
+  if (!formData.phone?.trim()) {
+    newErrors.phone = t("register.phoneRequired");
+  } else if (!validatePhone(formData.phone)) {
+    newErrors.phone = `${t("register.phoneInvalid")} (${t("register.phoneMustStartWith")} 09/05)`;
+  }
+
+  if (!formData.whatsapp?.trim()) {
+    newErrors.whatsapp = t("register.whatsappRequired");
+  } else if (!validatePhone(formData.whatsapp)) {
+    newErrors.whatsapp = `${t("register.phoneInvalid")} (${t("register.phoneMustStartWith")} 09/05)`;
+  }
+
+  if (!formData.password) {
+    newErrors.password = t("register.passwordRequired");
+  } else if (formData.password.length < 6) {
+    newErrors.password = t("validation.passwordMinLength");
+  }
+
+  if (formData.password !== formData.confirmPassword) {
+    newErrors.confirmPassword = t("validation.passwordsMatch");
+  }
+
+  setErrors(newErrors);
+  return Object.keys(newErrors).length === 0;
+};
+
+export const validateStep2 = (idImages, setErrors, t) => {
+  const newErrors = {};
+
+  if (!idImages?.front) newErrors.front = t("register.frontIdRequired");
+  if (!idImages?.back) newErrors.back = t("register.backIdRequired");
+
+  setErrors(newErrors);
+  return Object.keys(newErrors).length === 0;
+};
diff --git a/public/NotUsed.txt b/public/NotUsed.txt
new file mode 100644
index 0000000..904ad1a
--- /dev/null
+++ b/public/NotUsed.txt
@@ -0,0 +1,169 @@
+: (
+                // /* OTP Verification Step */
+                // <motion.form key="otp" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} onSubmit={handleVerifyOTP} className="space-y-6">
+                //   <div className="text-center mb-4">
+                //     <Shield className="w-12 h-12 text-amber-500 mx-auto mb-3" />
+                //     <p className="text-gray-300 text-sm">
+                //       {t("sendOTPTo")}{" "}
+                //       <span className="text-white font-medium" dir="ltr">
+                //         {formData.credential}
+                //       </span>
+                //     </p>
+                //   </div>
+
+                //   <div>
+                //     <label className="block text-sm font-medium text-gray-300 mb-2">{t("otpLabel")}</label>
+                //     <input
+                //       type="text"
+                //       value={otpCode}
+                //       onChange={(e) => {
+                //         setOtpCode(e.target.value);
+                //         if (otpError) setOtpError("");
+                //       }}
+                //       className={`w-full px-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white text-center text-2xl tracking-[0.5em] placeholder-gray-500 transition-all ${
+                //         otpError ? "border-red-500" : "border-gray-700"
+                //       }`}
+                //       placeholder="______"
+                //       maxLength={6}
+                //       dir="ltr"
+                //     />
+                //     {otpError && (
+                //       <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1 text-center">
+                //         {otpError}
+                //       </motion.p>
+                //     )}
+                //   </div>
+
+                //   <motion.button
+                //     type="submit"
+                //     disabled={isLoading || isSuccess}
+                //     className="relative w-full bg-gradient-to-r from-amber-500 to-amber-600 text-white py-4 rounded-xl font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                //     whileHover={{ scale: 1.02 }}
+                //     whileTap={{ scale: 0.98 }}
+                //   >
+                //     <span className="flex items-center justify-center gap-2">
+                //       {isLoading ? (
+                //         <>
+                //           <Loader2 className="w-5 h-5 animate-spin" />
+                //           {t("verifying")}
+                //         </>
+                //       ) : isSuccess ? (
+                //         <>
+                //           <CheckCircle className="w-5 h-5" />
+                //           {t("success")}
+                //         </>
+                //       ) : (
+                //         <>
+                //           <KeyRound className="w-5 h-5" />
+                //           {t("verify")}
+                //         </>
+                //       )}
+                //     </span>
+                //   </motion.button>
+
+                //   <div className="flex items-center justify-between text-sm">
+                //     <button
+                //       type="button"
+                //       onClick={() => {
+                //         setStep("login");
+                //         setOtpCode("");
+                //         setOtpError("");
+                //       }}
+                //       className="text-gray-400 hover:text-white transition-colors"
+                //     >
+                //       ← {t("back")}
+                //     </button>
+                //     <button type="button" onClick={resendOTP} className="text-amber-400 hover:text-amber-300 transition-colors">
+                //       {t("resendCode")}
+                //     </button>
+                //   </div>
+                // </motion.form>
+                <></>
+            //  )}
+
+
+
+
+
+            // Send OTP
+        try {
+          if (loginMethod === "email") {
+            await sendEmailOTP();
+          } else {
+            await sendPhoneOTP();
+          }
+        } catch (otpErr) {
+          console.warn("[Login] OTP send failed, proceeding anyway:", otpErr);
+        }
+
+        setStep("otp");
+      } else if (result.status >= 500) {
+        console.error("[Login] Server error:", result.status, result.data);
+        toast.error(t("serverError"), {
+          style: { background: "#fee2e2", color: "#991b1b" },
+        });
+      } else if (result.status === 404) {
+        console.error("[Login] API endpoint not found:", result.status);
+        toast.error(t("apiNotFound"), {
+          style: { background: "#fee2e2", color: "#991b1b" },
+        });
+      } else if (result.status === 429) {
+        toast.error(t("tooManyRequests"), {
+          style: { background: "#fee2e2", color: "#991b1b" },
+        });
+      } else {
+        console.error("[Login] Unexpected status:", result.status, result.data);
+        toast.error(result.data?.message || result.data || t("invalidCredentials"), {
+          style: { background: "#fee2e2", color: "#991b1b" },
+        });
+      }
+    } catch (err) {
+      console.error("[Login] Error:", err);
+      toast.error(err.message || t("connectionError"), {
+        style: { background: "#fee2e2", color: "#991b1b" },
+      });
+         toast(t("otpRequired"), {
+          icon: "🔐",
+          style: { background: "#fef3c7", color: "#92400e" },
+        });
+
+        // Send OTP
+        try {
+          if (loginMethod === "email") {
+            await sendEmailOTP();
+          } else {
+            await sendPhoneOTP();
+          }
+        } catch (otpErr) {
+          console.warn("[Login] OTP send failed, proceeding anyway:", otpErr);
+        }
+
+        setStep("otp");
+      } else if (result.status >= 500) {
+        console.error("[Login] Server error:", result.status, result.data);
+        toast.error(t("serverError"), {
+          style: { background: "#fee2e2", color: "#991b1b" },
+        });
+      } else if (result.status === 404) {
+        console.error("[Login] API endpoint not found:", result.status);
+        toast.error(t("apiNotFound"), {
+          style: { background: "#fee2e2", color: "#991b1b" },
+        });
+      } else if (result.status === 429) {
+        toast.error(t("tooManyRequests"), {
+          style: { background: "#fee2e2", color: "#991b1b" },
+        });
+      } else {
+        console.error("[Login] Unexpected status:", result.status, result.data);
+        toast.error(result.data?.message || result.data || t("invalidCredentials"), {
+          style: { background: "#fee2e2", color: "#991b1b" },
+        });
+      }
+    } catch (err) {
+      console.error("[Login] Error:", err);
+      toast.error(err.message || t("connectionError"), {
+        style: { background: "#fee2e2", color: "#991b1b" },
+      });
+    } finally {
+      setIsLoading(false);
+    }
\ No newline at end of file