diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
index f11f176..e2d3318 100644
--- a/client/src/components/Header.jsx
+++ b/client/src/components/Header.jsx
@@ -24,7 +24,7 @@ import ThemeToggle from "./ThemeToggle";
 export default function Header() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
-  const { user, isAuthenticated } = useSelector(state => state.user);
+  const { user, isAuthenticated } = useSelector((state) => state.user);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -35,10 +35,10 @@ export default function Header() {
   }, []);
 
   const handleLogout = () => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('userData');
+    localStorage.removeItem("token");
+    localStorage.removeItem("userData");
     dispatch(logout());
-    navigate('/');
+    navigate("/");
   };
 
   useEffect(() => {
@@ -98,7 +98,7 @@ export default function Header() {
                 className="h-12 w-12 rounded-full shadow-lg"
               />
               <div className="leading-tight">
-                <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+                <h1 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
                   InfantCare
                 </h1>
                 <p className="text-xs text-gray-600 dark:text-gray-400">
@@ -108,7 +108,7 @@ export default function Header() {
             </Link>
 
             {/* Desktop Nav */}
-            <div className="hidden lg:flex items-center gap-2">
+            <div className="hidden lg:flex items-center gap-2 w-400">
               {navItems.map(({ to, label, icon }) => (
                 <NavLink
                   key={to}
@@ -139,7 +139,8 @@ export default function Header() {
                   <div className="flex items-center gap-2 px-3 py-1.5 bg-purple-50 rounded-full">
                     <UserCircle className="w-4 h-4 text-purple-600" />
                     <span className="text-sm font-medium text-purple-800">
-                      {user.name} ({user.role === 'doctor' ? 'Doctor' : 'Patient'})
+                      {user.name} (
+                      {user.role === "doctor" ? "Doctor" : "Patient"})
                     </span>
                   </div>
                   <button
@@ -224,7 +225,7 @@ export default function Header() {
                   {label}
                 </NavLink>
               ))}
-              
+
               {/* Theme Toggle in Mobile Menu */}
               <div className="flex items-center justify-center p-3 mt-4">
                 <ThemeToggle />
@@ -237,7 +238,8 @@ export default function Header() {
                   <div className="flex items-center gap-2 px-4 py-2 bg-purple-50 rounded-full mb-2">
                     <UserCircle className="w-4 h-4 text-purple-600" />
                     <span className="text-sm font-medium text-purple-800">
-                      {user.name} ({user.role === 'doctor' ? 'Doctor' : 'Patient'})
+                      {user.name} (
+                      {user.role === "doctor" ? "Doctor" : "Patient"})
                     </span>
                   </div>
                   <button
diff --git a/client/src/pages/Registration.jsx b/client/src/pages/Registration.jsx
index cf8c88d..7b1babe 100644
--- a/client/src/pages/Registration.jsx
+++ b/client/src/pages/Registration.jsx
@@ -1,24 +1,27 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
+import BabyImg from "./Baby.png"; 
 import {
-  User,
-  UserCheck,
   Mail,
   Lock,
+  Eye,
+  EyeOff,
+  User,
+  UserCheck,
   Phone,
   MapPin,
   Calendar,
-  Heart,
-  Eye,
-  EyeOff,
+  Baby,
+  ArrowRight,
+  AlertCircle,
   Check,
   X,
   Home,
+  Heart,
 } from "lucide-react";
-import { ToastContainer, toast } from "react-toastify";
-import axios from "axios";
 import { useNavigate } from "react-router-dom";
+import { Toaster, toast } from "react-hot-toast";
+import commnApiEndpoint from "../common/backendAPI.jsx";
 
-// Password Strength Indicator Component
 const PasswordStrengthIndicator = ({ password }) => {
   const requirements = [
     { test: (pwd) => pwd.length >= 8, label: "At least 8 characters" },
@@ -50,27 +53,34 @@ const PasswordStrengthIndicator = ({ password }) => {
     return "Strong";
   };
 
+  const getStrengthBarColor = () => {
+    if (strength <= 1) return "bg-red-500";
+    if (strength <= 2) return "bg-orange-500";
+    if (strength <= 3) return "bg-yellow-500";
+    if (strength <= 4) return "bg-blue-500";
+    return "bg-green-500";
+  };
+
   if (!password) return null;
 
   return (
-    <div className="mt-3 p-4 bg-gray-50 rounded-lg border border-gray-200">
+    <div className="mt-3 p-4 bg-indigo-50 rounded-lg border border-indigo-100">
       <div className="flex items-center justify-between mb-3">
-        <span className="text-sm font-medium text-gray-700">
+        <span className="text-sm font-medium text-indigo-800">
           Password Strength:
         </span>
         <span className={`text-sm font-semibold ${getStrengthColor()}`}>
           {getStrengthText()}
         </span>
       </div>
+
       <div className="w-full bg-gray-200 rounded-full h-2 mb-4">
         <div
-          className={`h-2 rounded-full transition-all duration-300 ${getStrengthColor().replace(
-            "text-",
-            "bg-"
-          )}`}
+          className={`h-2 rounded-full transition-all duration-300 ${getStrengthBarColor()}`}
           style={{ width: `${(strength / 5) * 100}%` }}
         ></div>
       </div>
+
       <div className="space-y-2">
         {requirements.map((req, index) => {
           const isMet = req.test(password);
@@ -81,7 +91,7 @@ const PasswordStrengthIndicator = ({ password }) => {
               ) : (
                 <X className="w-4 h-4 text-red-400 mr-2" />
               )}
-              <span className={isMet ? "text-green-700" : "text-gray-600"}>
+              <span className={isMet ? "text-green-700" : "text-indigo-800"}>
                 {req.label}
               </span>
             </div>
@@ -95,79 +105,128 @@ const PasswordStrengthIndicator = ({ password }) => {
 const InputField = ({
   icon: Icon,
   name,
-  type = "text",
+  type,
   placeholder,
   value,
   error,
+  isFocused,
+  showPassword,
+  onToggleShowPassword,
   onChange,
-  endIcon: EndIcon,
-  onEndIconClick,
-  ...props
-}) => (
-  <div className="relative">
-    <Icon className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-    <input
-      name={name}
-      type={type}
-      value={value || ""}
-      onChange={onChange}
-      placeholder={placeholder}
-      className={`w-full pl-12 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50 focus:bg-white ${
-        EndIcon ? "pr-12" : "pr-4"
-      }`}
-      {...props}
-    />
-    {EndIcon && (
-       <EndIcon
-          className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 cursor-pointer hover:text-gray-700"
-          onClick={onEndIconClick}
-        />
-    )}
-    {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
-  </div>
-);
+  onFocus,
+  onBlur,
+  showPasswordStrength = false,
+}) => {
+  return (
+    <div className="relative">
+      <Icon
+        className={`absolute left-4 top-4 w-5 h-5 transition-colors duration-300 ${
+          isFocused
+            ? "text-indigo-600"
+            : error
+            ? "text-red-500"
+            : "text-gray-400"
+        }`}
+      />
 
-const TextAreaField = ({
-  icon: Icon,
-  name,
+      <input
+        name={name}
+        type={type}
+        value={value}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        className={`w-full pl-12 pr-12 py-4 border-2 rounded-xl transition-all duration-300 bg-white ${
+          error
+            ? "border-red-300 focus:border-red-500 focus:ring-red-500/20"
+            : isFocused
+            ? "border-indigo-500 focus:border-indigo-600 focus:ring-indigo-500/20 shadow-lg"
+            : "border-gray-200 hover:border-gray-300"
+        } focus:outline-none focus:ring-4`}
+      />
+
+      {(name === "password" || name === "confirmPassword") && (
+        <button
+          type="button"
+          onClick={onToggleShowPassword}
+          className="absolute right-4 top-4 p-1 text-gray-400 hover:text-gray-600 transition-colors"
+        >
+          {showPassword ? (
+            <EyeOff className="w-5 h-5" />
+          ) : (
+            <Eye className="w-5 h-5" />
+          )}
+        </button>
+      )}
+
+      {error && (
+        <p className="mt-2 text-sm text-red-600 flex items-center animate-slideIn">
+          <AlertCircle className="w-4 h-4 mr-1" />
+          {error}
+        </p>
+      )}
+
+      {showPasswordStrength && name === "password" && (
+        <PasswordStrengthIndicator password={value} />
+      )}
+    </div>
+  );
+};
+
+const RoleCard = ({
   value,
-  onChange,
-  placeholder,
-  error,
-  ...props
+  icon: Icon,
+  title,
+  description,
+  isSelected,
+  onClick,
 }) => (
-  <div className="relative">
-    <Icon className="absolute left-4 top-4 w-5 h-5 text-gray-400" />
-    <textarea
-      name={name}
-      value={value || ""}
-      onChange={onChange}
-      placeholder={placeholder}
-      className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50 focus:bg-white resize-none"
-      rows="4"
-      {...props}
-    />
-    {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
+  <div
+    onClick={onClick}
+    className={`relative p-6 rounded-xl cursor-pointer transition-all duration-300 transform hover:scale-105 ${
+      isSelected
+        ? "bg-gradient-to-r from-indigo-500 to-purple-500 text-white shadow-lg"
+        : "bg-white border-2 border-gray-200 hover:border-indigo-300 hover:shadow-md"
+    }`}
+  >
+    <div className="flex items-center mb-3">
+      <div
+        className={`p-3 rounded-full ${
+          isSelected
+            ? "bg-white/20"
+            : "bg-gradient-to-r from-indigo-500 to-purple-500"
+        }`}
+      >
+        <Icon className={"w-6 h-6 text-white"} />
+      </div>
+      <h3
+        className={`ml-3 font-semibold ${
+          isSelected ? "text-white" : "text-gray-800"
+        }`}
+      >
+        {title}
+      </h3>
+    </div>
+    <p className={`text-sm ${isSelected ? "text-white/90" : "text-gray-600"}`}>
+      {description}
+    </p>
+
+    {isSelected && (
+      <div className="absolute top-3 right-3">
+        <div className="w-6 h-6 bg-white rounded-full flex items-center justify-center">
+          <div className="w-3 h-3 bg-indigo-500 rounded-full"></div>
+        </div>
+      </div>
+    )}
   </div>
 );
 
 export default function Registration() {
-  // Effect to load CSS dynamically
-  useEffect(() => {
-    const styleId = 'react-toastify-css';
-    if (!document.getElementById(styleId)) {
-        const link = document.createElement('link');
-        link.id = styleId;
-        link.rel = 'stylesheet';
-        link.href = 'https://cdn.jsdelivr.net/npm/react-toastify@9.1.3/dist/ReactToastify.min.css';
-        document.head.appendChild(link);
-    }
-  }, []);
-
   const [formData, setFormData] = useState({
     email: "",
     password: "",
-    confirmPassword: "", // New state for confirm password
+    confirmPassword: "",
     role: "PARENTS",
     kidName: "",
     dob: "",
@@ -181,13 +240,13 @@ export default function Registration() {
   const [errors, setErrors] = useState({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false); // State for confirm password visibility
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [focusedField, setFocusedField] = useState(null);
   const navigate = useNavigate();
 
   const validateForm = () => {
     const newErrors = {};
 
-    // Required fields
     if (!formData.email.trim()) {
       newErrors.email = "Email is required";
     } else if (
@@ -202,7 +261,6 @@ export default function Registration() {
       newErrors.password = "Password must be at least 8 characters";
     }
 
-    // New validation for confirm password
     if (!formData.confirmPassword.trim()) {
       newErrors.confirmPassword = "Please confirm your password";
     } else if (formData.password !== formData.confirmPassword) {
@@ -213,7 +271,6 @@ export default function Registration() {
       newErrors.role = "Role is required";
     }
 
-    // Role-specific validations
     if (formData.role === "PARENTS") {
       if (!formData.kidName.trim())
         newErrors.kidName = "Child's name is required";
@@ -230,231 +287,373 @@ export default function Registration() {
     return Object.keys(newErrors).length === 0;
   };
 
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-    if (errors[name]) {
-      setErrors((prev) => ({ ...prev, [name]: "" }));
-    }
-  };
-
   const handleSubmit = async (e) => {
     e.preventDefault();
-
-    if (!validateForm()) {
-      return;
-    }
+    if (!validateForm()) return;
 
     setIsSubmitting(true);
 
     try {
-      const { confirmPassword, ...dataToSend } = formData; // Exclude confirmPassword from submission
-      const response = await axios.post(
-        "http://localhost:5000/api/signup",
-        dataToSend
-      );
+      const { confirmPassword, ...dataToSend } = formData;
+
+      const response = await fetch(commnApiEndpoint.signup.url, {
+        method: commnApiEndpoint.signup.method,
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(dataToSend),
+      });
 
-      if (response.data.success) {
+      const data = await response.json();
+      console.log("Registration response:", data);
+
+      if (response.ok && data.success) {
         toast.success("Registration successful! Redirecting to login...");
         setTimeout(() => {
           navigate("/signin");
         }, 2000);
+      } else {
+        console.error("Registration failed:", data);
+        toast.error(data.message || "Registration failed. Please try again.");
       }
     } catch (error) {
       console.error("Registration error:", error);
-      toast.error(
-        error.response?.data?.message ||
-          "Registration failed. Please try again."
-      );
+      toast.error("Network error. Please check your connection and try again.");
     } finally {
       setIsSubmitting(false);
     }
   };
 
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    if (errors[name]) {
+      setErrors((prev) => ({ ...prev, [name]: "" }));
+    }
+  };
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center py-12 px-4">
-      <div className="w-full max-w-2xl">
-        <div className="text-center mb-8">
-          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mb-6 shadow-lg">
-            <Heart className="w-8 h-8 text-white" />
-          </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-2">
-            Create Your Account
-          </h1>
-          <p className="text-gray-600">
-            Join our community and start tracking your child's health journey
-          </p>
+    <>
+      <Toaster position="top-right" />
+      <div className="main-body flex">
+        {/* Left Section */}
+        <div className="w-2/5 h-screen fixed flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600">
+          <img
+            src={BabyImg}
+            alt="Baby"
+            className="max-w-xs md:max-w-sm lg:max-w-md"
+          />
         </div>
-        <div className="bg-white rounded-3xl shadow-xl p-8">
-          <form onSubmit={handleSubmit} className="space-y-6">
-            {/* Role Selection */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <button
-                type="button"
-                onClick={() =>
-                  handleChange({ target: { name: "role", value: "PARENTS" } })
-                }
-                className={`p-4 rounded-xl border-2 transition-all ${
-                  formData.role === "PARENTS"
-                    ? "border-blue-500 bg-blue-50"
-                    : "border-gray-200 hover:border-gray-300"
-                }`}
-              >
-                <Heart className="w-6 h-6 mx-auto mb-2" />
-                <span className="font-semibold">Parent</span>
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  handleChange({ target: { name: "role", value: "DOCTOR" } })
-                }
-                className={`p-4 rounded-xl border-2 transition-all ${
-                  formData.role === "DOCTOR"
-                    ? "border-purple-500 bg-purple-50"
-                    : "border-gray-200 hover:border-gray-300"
-                }`}
-              >
-                <UserCheck className="w-6 h-6 mx-auto mb-2" />
-                <span className="font-semibold">Doctor</span>
-              </button>
+
+        {/* Right Section */}
+        <div className="w-3/5 ml-[40%] bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center py-12 px-4">
+          <div className="w-1/2 max-w-2xl text-center">
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mb-6 shadow-lg">
+              <Heart className="w-8 h-8 text-white" />
             </div>
-            {/* Common Fields */}
-            <InputField
-              icon={Mail}
-              name="email"
-              type="email"
-              placeholder="Email Address"
-              value={formData.email}
-              onChange={handleChange}
-              error={errors.email}
-            />
-            <InputField
-              icon={Lock}
-              name="password"
-              type={showPassword ? "text" : "password"}
-              placeholder="Password"
-              value={formData.password}
-              onChange={handleChange}
-              error={errors.password}
-              endIcon={showPassword ? EyeOff : Eye}
-              onEndIconClick={() => setShowPassword(!showPassword)}
-            />
-             <InputField
-              icon={Lock}
-              name="confirmPassword"
-              type={showConfirmPassword ? "text" : "password"}
-              placeholder="Confirm Password"
-              value={formData.confirmPassword}
-              onChange={handleChange}
-              error={errors.confirmPassword}
-              endIcon={showConfirmPassword ? EyeOff : Eye}
-              onEndIconClick={() => setShowConfirmPassword(!showConfirmPassword)}
-            />
-
-            {formData.password && !errors.password && !errors.confirmPassword && (
-              <PasswordStrengthIndicator password={formData.password} />
-            )}
-            {/* Role-specific fields */}
-            {formData.role === "PARENTS" && (
-              <>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <InputField
-                    icon={Heart}
-                    name="kidName"
-                    placeholder="Child's Name"
-                    value={formData.kidName}
-                    onChange={handleChange}
-                    error={errors.kidName}
-                  />
-                  <InputField
-                    icon={Calendar}
-                    name="dob"
-                    type="date"
-                    value={formData.dob}
-                    onChange={handleChange}
-                    error={errors.dob}
-                  />
-                </div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-2">
+              Create Your Account
+            </h1>
+            <p className="text-gray-600">
+              Join our healthcare community and track your child's health
+              journey
+            </p>
+          </div>
+
+          <div className="bg-white rounded-3xl shadow-xl p-8 animate-slideUp w-full max-w-2xl">
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <label className="block text-sm font-medium text-gray-700 mb-3">
+                  Select Your Role
+                </label>
+
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <InputField
-                    icon={User}
-                    name="fatherName"
-                    placeholder="Father's Name"
-                    value={formData.fatherName}
-                    onChange={handleChange}
-                    error={errors.fatherName}
+                  <RoleCard
+                    value="PARENTS"
+                    icon={Baby}
+                    title="Parent"
+                    description="Track your child's health and development"
+                    isSelected={formData.role === "PARENTS"}
+                    onClick={() =>
+                      setFormData((prev) => ({ ...prev, role: "PARENTS" }))
+                    }
                   />
-                  <InputField
-                    icon={User}
-                    name="motherName"
-                    placeholder="Mother's Name"
-                    value={formData.motherName}
-                    onChange={handleChange}
-                    error={errors.motherName}
+
+                  <RoleCard
+                    value="DOCTOR"
+                    icon={UserCheck}
+                    title="Doctor"
+                    description="Professional dashboard for healthcare providers"
+                    isSelected={formData.role === "DOCTOR"}
+                    onClick={() =>
+                      setFormData((prev) => ({ ...prev, role: "DOCTOR" }))
+                    }
                   />
                 </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <InputField
+                  icon={Mail}
+                  name="email"
+                  type="email"
+                  placeholder="Email Address"
+                  value={formData.email}
+                  error={errors.email}
+                  isFocused={focusedField === "email"}
+                  onChange={handleChange}
+                  onFocus={() => setFocusedField("email")}
+                  onBlur={() => setFocusedField(null)}
+                />
+
                 <InputField
                   icon={Phone}
                   name="contactNumber"
+                  type="tel"
                   placeholder="Contact Number"
                   value={formData.contactNumber}
-                  onChange={handleChange}
                   error={errors.contactNumber}
+                  isFocused={focusedField === "contactNumber"}
+                  onChange={handleChange}
+                  onFocus={() => setFocusedField("contactNumber")}
+                  onBlur={() => setFocusedField(null)}
                 />
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                  <InputField
-                    icon={MapPin}
-                    name="city"
-                    placeholder="City"
-                    value={formData.city}
-                    onChange={handleChange}
-                    error={errors.city}
-                  />
-                  <InputField
-                    icon={MapPin}
-                    name="state"
-                    placeholder="State"
-                    value={formData.state}
-                    onChange={handleChange}
-                    error={errors.state}
-                  />
-                  <InputField
-                    icon={MapPin}
-                    name="postalCode"
-                    placeholder="Postal Code"
-                    value={formData.postalCode}
-                    onChange={handleChange}
-                    error={errors.postalCode}
-                  />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <InputField
+                  icon={Lock}
+                  name="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Password"
+                  value={formData.password}
+                  error={errors.password}
+                  isFocused={focusedField === "password"}
+                  showPassword={showPassword}
+                  onToggleShowPassword={() => setShowPassword(!showPassword)}
+                  onChange={handleChange}
+                  onFocus={() => setFocusedField("password")}
+                  onBlur={() => setFocusedField(null)}
+                  showPasswordStrength={true}
+                />
+
+                <InputField
+                  icon={Lock}
+                  name="confirmPassword"
+                  type={showConfirmPassword ? "text" : "password"}
+                  placeholder="Confirm Password"
+                  value={formData.confirmPassword}
+                  error={errors.confirmPassword}
+                  isFocused={focusedField === "confirmPassword"}
+                  showPassword={showConfirmPassword}
+                  onToggleShowPassword={() =>
+                    setShowConfirmPassword(!showConfirmPassword)
+                  }
+                  onChange={handleChange}
+                  onFocus={() => setFocusedField("confirmPassword")}
+                  onBlur={() => setFocusedField(null)}
+                />
+              </div>
+
+              {formData.role === "PARENTS" && (
+                <>
+                  <div className="border-t border-gray-200 pt-6">
+                    <h3 className="text-lg font-semibold text-indigo-800 mb-4">
+                      Child Information
+                    </h3>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <InputField
+                        icon={Baby}
+                        name="kidName"
+                        type="text"
+                        placeholder="Child's Name"
+                        value={formData.kidName}
+                        error={errors.kidName}
+                        isFocused={focusedField === "kidName"}
+                        onChange={handleChange}
+                        onFocus={() => setFocusedField("kidName")}
+                        onBlur={() => setFocusedField(null)}
+                      />
+
+                      <InputField
+                        icon={Calendar}
+                        name="dob"
+                        type="date"
+                        placeholder="Date of Birth"
+                        value={formData.dob}
+                        error={errors.dob}
+                        isFocused={focusedField === "dob"}
+                        onChange={handleChange}
+                        onFocus={() => setFocusedField("dob")}
+                        onBlur={() => setFocusedField(null)}
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                      <InputField
+                        icon={User}
+                        name="fatherName"
+                        type="text"
+                        placeholder="Father's Name"
+                        value={formData.fatherName}
+                        error={errors.fatherName}
+                        isFocused={focusedField === "fatherName"}
+                        onChange={handleChange}
+                        onFocus={() => setFocusedField("fatherName")}
+                        onBlur={() => setFocusedField(null)}
+                      />
+
+                      <InputField
+                        icon={User}
+                        name="motherName"
+                        type="text"
+                        placeholder="Mother's Name"
+                        value={formData.motherName}
+                        error={errors.motherName}
+                        isFocused={focusedField === "motherName"}
+                        onChange={handleChange}
+                        onFocus={() => setFocusedField("motherName")}
+                        onBlur={() => setFocusedField(null)}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="border-t border-gray-200 pt-6">
+                    <h3 className="text-lg font-semibold text-indigo-800 mb-4">
+                      Address Information
+                    </h3>
+
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <InputField
+                        icon={MapPin}
+                        name="city"
+                        type="text"
+                        placeholder="City"
+                        value={formData.city}
+                        error={errors.city}
+                        isFocused={focusedField === "city"}
+                        onChange={handleChange}
+                        onFocus={() => setFocusedField("city")}
+                        onBlur={() => setFocusedField(null)}
+                      />
+
+                      <InputField
+                        icon={MapPin}
+                        name="state"
+                        type="text"
+                        placeholder="State"
+                        value={formData.state}
+                        error={errors.state}
+                        isFocused={focusedField === "state"}
+                        onChange={handleChange}
+                        onFocus={() => setFocusedField("state")}
+                        onBlur={() => setFocusedField(null)}
+                      />
+
+                      <InputField
+                        icon={MapPin}
+                        name="postalCode"
+                        type="text"
+                        placeholder="Postal Code"
+                        value={formData.postalCode}
+                        error={errors.postalCode}
+                        isFocused={focusedField === "postalCode"}
+                        onChange={handleChange}
+                        onFocus={() => setFocusedField("postalCode")}
+                        onBlur={() => setFocusedField(null)}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+
+              <button
+                onClick={handleSubmit}
+                disabled={isSubmitting}
+                className={`w-full py-4 px-6 rounded-xl font-semibold text-white transition-all duration-300 transform ${
+                  isSubmitting
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 hover:scale-105 hover:shadow-xl active:scale-95"
+                } focus:outline-none focus:ring-4 focus:ring-indigo-500/50`}
+              >
+                <div className="flex items-center justify-center space-x-2">
+                  {isSubmitting ? (
+                    <>
+                      <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                      <span>Creating Account...</span>
+                    </>
+                  ) : (
+                    <>
+                      <span>Create Account</span>
+                      <ArrowRight className="w-5 h-5" />
+                    </>
+                  )}
                 </div>
-              </>
-            )}
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className={`w-full py-4 rounded-xl font-semibold text-white transition-all ${
-                isSubmitting
-                  ? "bg-gray-400 cursor-not-allowed"
-                  : "bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
-              }`}
-            >
-              {isSubmitting ? "Registering..." : "Create Account"}
-            </button>
-          </form>
-          <div className="text-center mt-8">
+              </button>
+            </div>
+          </div>
+
+          <div
+            className="text-center mt-8 animate-fadeIn"
+            style={{ animationDelay: "0.4s" }}
+          >
             <p className="text-gray-600">
               Already have an account?{" "}
-              <button
-                onClick={() => navigate("/signin")}
-                className="text-blue-600 hover:text-blue-800 font-medium"
+              <a
+                href="/signin"
+                className="text-indigo-600 hover:text-indigo-800 font-medium transition-colors duration-300"
               >
                 Sign in here
-              </button>
+              </a>
             </p>
           </div>
         </div>
-        <ToastContainer position="top-center" autoClose={3000} />
+
+        <div className="absolute top-20 left-10 w-20 h-20 bg-gradient-to-r from-indigo-400 to-purple-400 rounded-full opacity-20 animate-float"></div>
+        <div
+          className="absolute bottom-20 right-10 w-32 h-32 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-20 animate-float"
+          style={{ animationDelay: "2s" }}
+        ></div>
+
+        <style>{`
+          @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+          
+          @keyframes slideUp {
+            from { opacity: 0; transform: translateY(40px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+          
+          @keyframes slideIn {
+            from { opacity: 0; transform: translateX(-10px); }
+            to { opacity: 1; transform: translateX(0); }
+          }
+          
+          @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(180deg); }
+          }
+          
+          .animate-fadeIn {
+            animation: fadeIn 0.8s ease-out both;
+          }
+          
+          .animate-slideUp {
+            animation: slideUp 0.8s ease-out 0.2s both;
+          }
+          
+          .animate-slideIn {
+            animation: slideIn 0.3s ease-out;
+          }
+          
+          .animate-float {
+            animation: float 6s ease-in-out infinite;
+          }
+        `}</style>
       </div>
-    </div>
+    </>
   );
-}
\ No newline at end of file
+}