diff --git a/alimento-nextjs/app/(PublicRoutes)/Auth/Customer/SignIn/page.tsx b/alimento-nextjs/app/(PublicRoutes)/Auth/Customer/SignIn/page.tsx
new file mode 100644
index 0000000..0915ac9
--- /dev/null
+++ b/alimento-nextjs/app/(PublicRoutes)/Auth/Customer/SignIn/page.tsx
@@ -0,0 +1,112 @@
+"use client";
+import { useState, FormEvent } from "react";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import Image from "next/image";
+import signinImage from "../../../../../public/signin.png";
+
+const SignInPage: React.FC = () => {
+    const [email, setEmail] = useState<string>("");
+    const [isSignUp, setIsSignUp] = useState<boolean>(false);
+
+    const handleSendOTP = (e: FormEvent) => {
+        e.preventDefault();
+
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            toast.error("Please enter a valid email address.");
+            return;
+        }
+
+        console.log("OTP sent to:", email);
+        toast.success("OTP sent to your email!");
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-pink-200 to-pink-400">
+            <ToastContainer
+                position="top-center"
+                autoClose={5000}
+                hideProgressBar
+                newestOnTop
+                closeOnClick
+                rtl={false}
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+                className="mt-16"
+            />
+            <div className="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 bg-white shadow-lg rounded-lg overflow-hidden transform transition duration-500 ease-in-out hover:scale-105">
+                <div className="hidden md:flex items-center justify-center bg-blue-50 p-6">
+                    <Image
+                        src={signinImage}
+                        alt="Signup Illustration"
+                        layout="responsive"
+                        width={350}
+                        height={350}
+                        className="rounded-lg"
+                    />
+                </div>
+                <div className="p-8 md:p-10 flex flex-col justify-center bg-white">
+                    <h2 className="text-3xl font-semibold text-center text-blue-700 mb-3">
+                        {isSignUp ? "Sign Up" : "Sign In"}
+                    </h2>
+                    <p className="text-center text-gray-600 mb-6">
+                        Enter your email to{" "}
+                        {isSignUp ? "create an account" : "receive an OTP"}
+                    </p>
+                    <form className="space-y-6" onSubmit={handleSendOTP}>
+                        <div>
+                            <label
+                                htmlFor="email"
+                                className="block text-sm font-medium text-blue-600 mb-1"
+                            >
+                                Email
+                            </label>
+                            <input
+                                type="email"
+                                id="email"
+                                placeholder="yourname@example.com"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                className="w-full px-4 py-2 rounded-md bg-blue-50 border border-blue-200 text-blue-900 focus:ring-2 focus:ring-blue-400"
+                                required
+                            />
+                        </div>
+
+                        <div>
+                            <button
+                                type="submit"
+                                className="w-full py-2 bg-gradient-to-r from-green-500 to-blue-500 hover:from-blue-500 hover:to-green-500 text-white rounded-md font-semibold transition"
+                            >
+                                Send OTP
+                            </button>
+                        </div>
+                    </form>
+                    <div className="text-center mt-4 space-y-2">
+                        <p className="text-sm">
+                            <a
+                                href="#"
+                                className="text-blue-600 hover:underline"
+                            >
+                                Forgot Password?
+                            </a>
+                        </p>
+                        <p className="text-sm text-black">
+                            Don’t have an account?{" "}
+                            <a
+                                href="#"
+                                onClick={() => setIsSignUp(true)}
+                                className="text-green-500 hover:underline"
+                            >
+                                Sign Up
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SignInPage;
diff --git a/alimento-nextjs/app/(PublicRoutes)/Auth/Customer/SignUp/page.tsx b/alimento-nextjs/app/(PublicRoutes)/Auth/Customer/SignUp/page.tsx
new file mode 100644
index 0000000..3302c5f
--- /dev/null
+++ b/alimento-nextjs/app/(PublicRoutes)/Auth/Customer/SignUp/page.tsx
@@ -0,0 +1,143 @@
+"use client"; // This should be the first line
+
+import { useState } from "react";
+import { useRouter } from "next/navigation"; // Use the correct import based on your Next.js version
+import { toast, ToastContainer } from "react-toastify";
+import Image from "next/image";
+import signinImage from "../../../../../public/signin.png";
+
+const SignUpPage: React.FC = () => {
+    const router = useRouter(); // Safe to call useRouter here
+    const [email, setEmail] = useState<string>("");
+    const [firstName, setFirstName] = useState<string>("");
+    const [otp, setOTP] = useState<string>("");
+
+    const handleSignUp = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (!firstName || !email || !otp) {
+            toast.error("All fields are required.");
+            return;
+        }
+
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            toast.error("Please enter a valid email address.");
+            return;
+        }
+
+        console.log("User Data:", { firstName, email, otp });
+        toast.success("Form submitted successfully!");
+
+        router.push("/verify-email");
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-pink-200 to-pink-400">
+            <ToastContainer
+                position="top-center"
+                autoClose={5000}
+                hideProgressBar
+                newestOnTop
+                closeOnClick
+                rtl={false}
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+                className="mt-16"
+            />
+            <div className="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 bg-white shadow-lg rounded-lg overflow-hidden transform transition duration-500 ease-in-out hover:scale-105">
+                <div className="p-10 flex flex-col justify-center">
+                    <h2 className="text-4xl font-bold text-center text-blue-600 mb-4">
+                        Join Us Today!
+                    </h2>
+                    <p className="text-center text-gray-600 mb-8">
+                        Create your account to get started
+                    </p>
+                    <form className="space-y-4" onSubmit={handleSignUp}>
+                        <div>
+                            <label
+                                htmlFor="firstName"
+                                className="block text-sm font-medium text-blue-600"
+                            >
+                                First Name
+                            </label>
+                            <input
+                                type="text"
+                                id="firstName"
+                                placeholder="John"
+                                value={firstName}
+                                onChange={(e) => setFirstName(e.target.value)}
+                                className="w-full px-4 py-2 mt-1 rounded-md bg-blue-100 text-blue-800 focus:ring focus:ring-blue-400"
+                                required
+                            />
+                        </div>
+                        <div>
+                            <label
+                                htmlFor="email"
+                                className="block text-sm font-medium text-blue-600"
+                            >
+                                Email
+                            </label>
+                            <input
+                                type="email"
+                                id="email"
+                                placeholder="john@example.com"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                className="w-full px-4 py-2 mt-1 rounded-md bg-blue-100 text-blue-800 focus:ring focus:ring-blue-400"
+                                required
+                            />
+                        </div>
+                        <div>
+                            <label
+                                htmlFor="otp"
+                                className="block text-sm font-medium text-blue-600"
+                            >
+                                OTP
+                            </label>
+                            <input
+                                type="text"
+                                id="otp"
+                                placeholder="Enter your OTP"
+                                value={otp}
+                                onChange={(e) => setOTP(e.target.value)}
+                                className="w-full px-4 py-2 mt-1 rounded-md bg-blue-100 text-blue-800 focus:ring focus:ring-blue-400"
+                                required
+                            />
+                        </div>
+                        <div>
+                            <button
+                                type="submit"
+                                className="w-full py-2 bg-gradient-to-r from-green-500 to-blue-500 hover:from-blue-500 hover:to-green-500 text-white rounded-md font-bold"
+                            >
+                                Sign Up
+                            </button>
+                        </div>
+                    </form>
+                    <p className="text-center text-sm mt-4 text-black">
+                        Already have an account?{" "}
+                        <a
+                            href="/login"
+                            className="text-blue-500 hover:underline"
+                        >
+                            Log In
+                        </a>
+                    </p>
+                </div>
+                <div className="hidden md:flex items-center justify-center bg-blue-50 p-6">
+                    <Image
+                        src={signinImage}
+                        alt="Signup Illustration"
+                        layout="responsive"
+                        width={350}
+                        height={350}
+                        className="rounded-lg"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SignUpPage;
diff --git a/alimento-nextjs/package.json b/alimento-nextjs/package.json
index 0d05b25..a933e96 100644
--- a/alimento-nextjs/package.json
+++ b/alimento-nextjs/package.json
@@ -24,6 +24,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-hot-toast": "^2.4.1",
+    "react-toastify": "^10.0.6",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
diff --git a/alimento-nextjs/public/signin.png b/alimento-nextjs/public/signin.png
new file mode 100644
index 0000000..bba8050
Binary files /dev/null and b/alimento-nextjs/public/signin.png differ