diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx
index e1effa26..82013ce7 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx
@@ -10,6 +10,7 @@ const CategoryFormModal = ({ isOpen, onClose }) => {
   });
 
   const [submitting, setSubmitting] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState({});
 
   const updateField = (field, value) => {
     setFormData(prev => ({
@@ -20,6 +21,16 @@ const CategoryFormModal = ({ isOpen, onClose }) => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    // client-side validation
+    const errs = {};
+    if (!formData.name.trim()) errs.name = 'Category name is required';
+    else if (formData.name.trim().length < 2) errs.name = 'Minimum 2 characters';
+
+    if (Object.keys(errs).length) {
+      setFieldErrors(errs);
+      return;
+    }
+
     try {
       setSubmitting(true);
 
@@ -82,16 +93,22 @@ const CategoryFormModal = ({ isOpen, onClose }) => {
             <input
               type="text"
               value={formData.name}
-              onChange={(e) => updateField("name", e.target.value)}
-              className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
+              onChange={(e) => {
+                updateField("name", e.target.value);
+                setFieldErrors((p) => ({ ...p, name: undefined }));
+              }}
+              className={`w-full px-4 py-3 bg-gray-50 rounded-xl
                          focus:ring-2 focus:ring-blue-500 focus:border-transparent
                          focus:bg-white outline-none transition-all text-gray-800
-                         placeholder:text-gray-400"
+                         placeholder:text-gray-400 ${fieldErrors.name ? 'border-red-500' : 'border-gray-200'}`}
               placeholder="e.g. Starters"
-              required
+              aria-required="true"
+              aria-invalid={fieldErrors.name ? 'true' : 'false'}
+              aria-describedby={fieldErrors.name ? 'err-cat-name' : undefined}
               minLength={2}
               maxLength={50}
             />
+            {fieldErrors.name && <p id="err-cat-name" className="mt-1.5 text-xs text-red-500">{fieldErrors.name}</p>}
           </div>
 
           {/* Description */}
diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx
index ec410b39..f88cd1b7 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx
@@ -235,9 +235,10 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
                                placeholder:text-gray-400"
                     placeholder="e.g. Paneer Tikka, Chicken Biryani"
                     required
-                    aria-invalid={Boolean(errors.name)}
+                      aria-invalid={Boolean(errors.name)}
+                      aria-describedby={errors.name ? 'err-food-name' : undefined}
                   />
-                  {errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
+                    {errors.name && <p id="err-food-name" className="text-xs text-red-500">{errors.name}</p>}
                 </div>
 
                 {/* Price */}
@@ -263,9 +264,10 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
                       placeholder="250.00"
                       required
                       aria-invalid={Boolean(errors.price)}
+                      aria-describedby={errors.price ? 'err-food-price' : undefined}
                     />
                   </div>
-                  {errors.price && <p className="text-xs text-red-500">{errors.price}</p>}
+                  {errors.price && <p id="err-food-price" className="text-xs text-red-500">{errors.price}</p>}
                 </div>
               </div>
 
@@ -285,10 +287,11 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
                              placeholder:text-gray-400 resize-none"
                   placeholder="Describe the food item, ingredients, taste..."
                   aria-invalid={Boolean(errors.description)}
+                  aria-describedby={errors.description ? 'err-food-description' : undefined}
                 />
                 <div className="flex justify-between gap-3">
                   {errors.description ? (
-                    <p className="text-xs text-red-500">{errors.description}</p>
+                    <p id="err-food-description" className="text-xs text-red-500">{errors.description}</p>
                   ) : (
                     <span />
                   )}
@@ -314,7 +317,8 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
                                  focus:border-transparent focus:bg-white outline-none
                                  transition-all text-gray-800 appearance-none cursor-pointer"
                       required
-                      aria-invalid={Boolean(errors.categoryId)}
+                        aria-invalid={Boolean(errors.categoryId)}
+                        aria-describedby={errors.categoryId ? 'err-food-category' : undefined}
                     >
                       <option value="" disabled>
                         Select a category
@@ -333,7 +337,7 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
                       <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                     </svg>
                   </div>
-                  {errors.categoryId && <p className="text-xs text-red-500">{errors.categoryId}</p>}
+                  {errors.categoryId && <p id="err-food-category" className="text-xs text-red-500">{errors.categoryId}</p>}
                 </div>
 
                 {/* Image Upload */}
@@ -378,7 +382,7 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
                       className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
                     />
                   </label>
-                  {errors.imageFile && <p className="text-xs text-red-500">{errors.imageFile}</p>}
+                  {errors.imageFile && <p id="err-food-imagefile" className="text-xs text-red-500">{errors.imageFile}</p>}
                 </div>
               </div>
 
@@ -399,9 +403,10 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
                              placeholder:text-gray-400 disabled:opacity-60"
                   placeholder="https://example.com/food-image.jpg"
                   aria-invalid={Boolean(errors.imageUrl)}
+                  aria-describedby={errors.imageUrl ? 'err-food-imageurl' : undefined}
                 />
                 {errors.imageUrl ? (
-                  <p className="text-xs text-red-500">{errors.imageUrl}</p>
+                  <p id="err-food-imageurl" className="text-xs text-red-500">{errors.imageUrl}</p>
                 ) : (
                   <p className="text-xs text-gray-400">Use a URL when no image file is uploaded.</p>
                 )}
diff --git a/RestroHub-FrontEnd/src/components/admin/profile/profileComponents/PersonalInfoCard.jsx b/RestroHub-FrontEnd/src/components/admin/profile/profileComponents/PersonalInfoCard.jsx
index 468bc2a7..6942bc02 100644
--- a/RestroHub-FrontEnd/src/components/admin/profile/profileComponents/PersonalInfoCard.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/profile/profileComponents/PersonalInfoCard.jsx
@@ -35,6 +35,18 @@ const PersonalInfoCard = ({ profile, onSave }) => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    // client-side validation
+    const errs = {};
+    if (!formData.firstName.trim()) errs.firstName = 'First name is required';
+    if (!formData.phoneNumber.trim()) errs.phoneNumber = 'Phone number is required';
+    else if (!/^\+?[0-9\s-]{7,15}$/.test(formData.phoneNumber)) errs.phoneNumber = 'Enter a valid phone number';
+
+    if (Object.keys(errs).length) {
+      setSaving(false);
+      setFieldErrors(errs);
+      return;
+    }
+
     try {
       setSaving(true);
       if (onSave) {
@@ -81,6 +93,8 @@ const PersonalInfoCard = ({ profile, onSave }) => {
 
   const labelClass = 'mb-1.5 block text-sm font-medium text-gray-800';
 
+  const [fieldErrors, setFieldErrors] = useState({});
+
   // View Mode Row
   const InfoRow = ({ label, value }) => (
     <div>
@@ -135,11 +149,18 @@ const PersonalInfoCard = ({ profile, onSave }) => {
                 <input
                   type="text"
                   value={formData.firstName}
-                  onChange={(e) => updateField('firstName', e.target.value)}
-                  className={inputClass}
+                  onChange={(e) => {
+                    updateField('firstName', e.target.value);
+                    setFieldErrors((p) => ({ ...p, firstName: undefined }));
+                  }}
+                  className={`${inputClass} ${fieldErrors.firstName ? 'border-red-500' : 'border-gray-200'}`}
                   placeholder="First name"
                   required
+                  aria-required="true"
+                  aria-invalid={fieldErrors.firstName ? 'true' : 'false'}
+                  aria-describedby={fieldErrors.firstName ? 'err-personal-firstname' : undefined}
                 />
+                {fieldErrors.firstName && <p id="err-personal-firstname" className="mt-1 text-xs text-red-500">{fieldErrors.firstName}</p>}
               </div>
               <div>
                 <label className={labelClass}>Last Name</label>
@@ -170,11 +191,18 @@ const PersonalInfoCard = ({ profile, onSave }) => {
                 <input
                   type="tel"
                   value={formData.phoneNumber}
-                  onChange={(e) => updateField('phoneNumber', e.target.value)}
-                  className={inputClass}
+                  onChange={(e) => {
+                    updateField('phoneNumber', e.target.value);
+                    setFieldErrors((p) => ({ ...p, phoneNumber: undefined }));
+                  }}
+                  className={`${inputClass} ${fieldErrors.phoneNumber ? 'border-red-500' : 'border-gray-200'}`}
                   placeholder="9876543210"
                   required
+                  aria-required="true"
+                  aria-invalid={fieldErrors.phoneNumber ? 'true' : 'false'}
+                  aria-describedby={fieldErrors.phoneNumber ? 'err-personal-phone' : undefined}
                 />
+                {fieldErrors.phoneNumber && <p id="err-personal-phone" className="mt-1 text-xs text-red-500">{fieldErrors.phoneNumber}</p>}
               </div>
             </div>
 
diff --git a/RestroHub-FrontEnd/src/components/admin/profile/profileComponents/SecurityCard.jsx b/RestroHub-FrontEnd/src/components/admin/profile/profileComponents/SecurityCard.jsx
index ef99cddf..8f7cd378 100644
--- a/RestroHub-FrontEnd/src/components/admin/profile/profileComponents/SecurityCard.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/profile/profileComponents/SecurityCard.jsx
@@ -65,6 +65,9 @@ const SecurityCard = () => {
           className={`${inputClass} ${error ? 'border-red-300' : 'border-gray-200'}`}
           placeholder="••••••••"
           required
+          aria-required="true"
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={error ? `err-${field}` : undefined}
         />
         <button
           type="button"
@@ -75,7 +78,7 @@ const SecurityCard = () => {
         </button>
       </div>
       {error && (
-        <p className="mt-1 flex items-center gap-1 text-xs text-red-600">
+        <p id={`err-${field}`} className="mt-1 flex items-center gap-1 text-xs text-red-600">
           <AlertCircle className="h-3 w-3" /> {error}
         </p>
       )}
diff --git a/RestroHub-FrontEnd/src/components/admin/store/branch/BranchFormModal.jsx b/RestroHub-FrontEnd/src/components/admin/store/branch/BranchFormModal.jsx
index 3a342a45..a04d824c 100644
--- a/RestroHub-FrontEnd/src/components/admin/store/branch/BranchFormModal.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/store/branch/BranchFormModal.jsx
@@ -22,6 +22,7 @@ const BranchFormModal = ({ isOpen, onClose, editingBranch, restaurantId }) => {
   });
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
 
   // ========== POPULATE FORM ON EDIT ==========
   useEffect(() => {
@@ -61,6 +62,20 @@ const BranchFormModal = ({ isOpen, onClose, editingBranch, restaurantId }) => {
     e.preventDefault();
     setSubmitting(true);
     setError(null);
+    setFieldErrors({});
+
+    const errs = {};
+    if (!formData.name.trim()) errs.name = 'Branch name is required';
+    if (!formData.add1.trim()) errs.add1 = 'Address line 1 is required';
+    if (!formData.city.trim()) errs.city = 'City is required';
+    if (!formData.state.trim()) errs.state = 'State is required';
+    if (!formData.postalCode.trim()) errs.postalCode = 'Postal code is required';
+
+    if (Object.keys(errs).length) {
+      setFieldErrors(errs);
+      setSubmitting(false);
+      return;
+    }
 
     try {
       // Build payload matching BranchRequestDTO
@@ -161,16 +176,23 @@ const BranchFormModal = ({ isOpen, onClose, editingBranch, restaurantId }) => {
                   <input
                     type="text"
                     value={formData.name}
-                    onChange={(e) => updateField('name', e.target.value)}
-                    className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
+                    onChange={(e) => {
+                      updateField('name', e.target.value);
+                      setFieldErrors((p) => ({ ...p, name: undefined }));
+                    }}
+                    className={`w-full px-4 py-3 bg-gray-50 rounded-xl
                                focus:ring-2 focus:ring-blue-500 focus:border-transparent
                                focus:bg-white outline-none transition-all text-gray-800
-                               placeholder:text-gray-400"
+                               placeholder:text-gray-400 ${fieldErrors.name ? 'border-red-500' : 'border-gray-200'}`}
+                    aria-required="true"
+                    aria-invalid={fieldErrors.name ? 'true' : 'false'}
+                    aria-describedby={fieldErrors.name ? 'err-branch-name' : undefined}
                     placeholder="e.g., Main Branch, Downtown Outlet"
                     required
                     minLength={2}
                     maxLength={100}
                   />
+                  {fieldErrors.name && <p id="err-branch-name" className="mt-1.5 text-xs text-red-500">{fieldErrors.name}</p>}
                 </div>
 
                 {/* Description */}
@@ -211,15 +233,22 @@ const BranchFormModal = ({ isOpen, onClose, editingBranch, restaurantId }) => {
                   <input
                     type="text"
                     value={formData.add1}
-                    onChange={(e) => updateField('add1', e.target.value)}
-                    className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
+                    onChange={(e) => {
+                      updateField('add1', e.target.value);
+                      setFieldErrors((p) => ({ ...p, add1: undefined }));
+                    }}
+                    className={`w-full px-4 py-3 bg-gray-50 rounded-xl
                                focus:ring-2 focus:ring-blue-500 focus:border-transparent
                                focus:bg-white outline-none transition-all text-gray-800
-                               placeholder:text-gray-400"
+                               placeholder:text-gray-400 ${fieldErrors.add1 ? 'border-red-500' : 'border-gray-200'}`}
+                    aria-required="true"
+                    aria-invalid={fieldErrors.add1 ? 'true' : 'false'}
+                    aria-describedby={fieldErrors.add1 ? 'err-branch-add1' : undefined}
                     placeholder="Street address, building number"
                     required
                     maxLength={255}
                   />
+                  {fieldErrors.add1 && <p id="err-branch-add1" className="mt-1.5 text-xs text-red-500">{fieldErrors.add1}</p>}
                 </div>
 
                 {/* Address Line 2 */}
@@ -254,15 +283,22 @@ const BranchFormModal = ({ isOpen, onClose, editingBranch, restaurantId }) => {
                     <input
                       type="text"
                       value={formData.city}
-                      onChange={(e) => updateField('city', e.target.value)}
-                      className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
-                                 focus:ring-2 focus:ring-blue-500 focus:border-transparent
-                                 focus:bg-white outline-none transition-all text-gray-800
-                                 placeholder:text-gray-400"
+                        onChange={(e) => {
+                          updateField('city', e.target.value);
+                          setFieldErrors((p) => ({ ...p, city: undefined }));
+                        }}
+                        className={`w-full px-4 py-3 bg-gray-50 rounded-xl
+                                   focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                                   focus:bg-white outline-none transition-all text-gray-800
+                                   placeholder:text-gray-400 ${fieldErrors.city ? 'border-red-500' : 'border-gray-200'}`}
+                        aria-required="true"
+                        aria-invalid={fieldErrors.city ? 'true' : 'false'}
+                        aria-describedby={fieldErrors.city ? 'err-branch-city' : undefined}
                       placeholder="e.g., Mumbai"
                       required
                       maxLength={100}
                     />
+                     {fieldErrors.city && <p id="err-branch-city" className="mt-1.5 text-xs text-red-500">{fieldErrors.city}</p>}
                   </div>
 
                   {/* State */}
@@ -275,15 +311,22 @@ const BranchFormModal = ({ isOpen, onClose, editingBranch, restaurantId }) => {
                     <input
                       type="text"
                       value={formData.state}
-                      onChange={(e) => updateField('state', e.target.value)}
-                      className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
-                                 focus:ring-2 focus:ring-blue-500 focus:border-transparent
-                                 focus:bg-white outline-none transition-all text-gray-800
-                                 placeholder:text-gray-400"
+                        onChange={(e) => {
+                          updateField('state', e.target.value);
+                          setFieldErrors((p) => ({ ...p, state: undefined }));
+                        }}
+                        className={`w-full px-4 py-3 bg-gray-50 rounded-xl
+                                   focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                                   focus:bg-white outline-none transition-all text-gray-800
+                                   placeholder:text-gray-400 ${fieldErrors.state ? 'border-red-500' : 'border-gray-200'}`}
+                        aria-required="true"
+                        aria-invalid={fieldErrors.state ? 'true' : 'false'}
+                        aria-describedby={fieldErrors.state ? 'err-branch-state' : undefined}
                       placeholder="e.g., Maharashtra"
                       required
                       maxLength={100}
                     />
+                     {fieldErrors.state && <p id="err-branch-state" className="mt-1.5 text-xs text-red-500">{fieldErrors.state}</p>}
                   </div>
                 </div>
 
@@ -299,15 +342,22 @@ const BranchFormModal = ({ isOpen, onClose, editingBranch, restaurantId }) => {
                     <input
                       type="text"
                       value={formData.postalCode}
-                      onChange={(e) => updateField('postalCode', e.target.value)}
-                      className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
-                                 focus:ring-2 focus:ring-blue-500 focus:border-transparent
-                                 focus:bg-white outline-none transition-all text-gray-800
-                                 placeholder:text-gray-400"
+                        onChange={(e) => {
+                          updateField('postalCode', e.target.value);
+                          setFieldErrors((p) => ({ ...p, postalCode: undefined }));
+                        }}
+                        className={`w-full px-4 py-3 bg-gray-50 rounded-xl
+                                   focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                                   focus:bg-white outline-none transition-all text-gray-800
+                                   placeholder:text-gray-400 ${fieldErrors.postalCode ? 'border-red-500' : 'border-gray-200'}`}
+                        aria-required="true"
+                        aria-invalid={fieldErrors.postalCode ? 'true' : 'false'}
+                        aria-describedby={fieldErrors.postalCode ? 'err-branch-postal' : undefined}
                       placeholder="e.g., 400001"
                       required
                       maxLength={20}
                     />
+                     {fieldErrors.postalCode && <p id="err-branch-postal" className="mt-1.5 text-xs text-red-500">{fieldErrors.postalCode}</p>}
                   </div>
 
                   {/* Country */}
diff --git a/RestroHub-FrontEnd/src/components/admin/store/tables/TableFormModal.jsx b/RestroHub-FrontEnd/src/components/admin/store/tables/TableFormModal.jsx
index c44c2beb..3fa35e72 100644
--- a/RestroHub-FrontEnd/src/components/admin/store/tables/TableFormModal.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/store/tables/TableFormModal.jsx
@@ -12,6 +12,7 @@ const TableFormModal = ({ isOpen, onClose, onSaved, branchId, editingTable }) =>
   });
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
 
   useEffect(() => {
     if (editingTable) {
@@ -31,6 +32,18 @@ const TableFormModal = ({ isOpen, onClose, onSaved, branchId, editingTable }) =>
     e.preventDefault();
     setSubmitting(true);
     setError(null);
+    setFieldErrors({});
+
+    const errs = {};
+    if (!formData.number) errs.number = 'Table number is required';
+    if (!formData.capacity) errs.capacity = 'Seating capacity is required';
+    else if (Number(formData.capacity) <= 0) errs.capacity = 'Enter a valid capacity';
+
+    if (Object.keys(errs).length) {
+      setFieldErrors(errs);
+      setSubmitting(false);
+      return;
+    }
 
     try {
       const payload = {
@@ -113,11 +126,17 @@ const TableFormModal = ({ isOpen, onClose, onSaved, branchId, editingTable }) =>
                   type="number"
                   min="1"
                   value={formData.number}
-                  onChange={(e) => updateField('number', e.target.value)}
-                  className={inputClass}
+                  onChange={(e) => {
+                    updateField('number', e.target.value);
+                    setFieldErrors((p) => ({ ...p, number: undefined }));
+                  }}
+                  className={`${inputClass} ${fieldErrors.number ? 'border-red-500' : ''}`}
                   placeholder="9"
-                  required
+                  aria-required="true"
+                  aria-invalid={fieldErrors.number ? 'true' : 'false'}
+                  aria-describedby={fieldErrors.number ? 'err-table-number' : undefined}
                 />
+                {fieldErrors.number && <p id="err-table-number" className="mt-1.5 text-xs text-red-500">{fieldErrors.number}</p>}
               </div>
               <div>
                 <label className="mb-1.5 block text-sm font-medium text-gray-800">
@@ -127,11 +146,17 @@ const TableFormModal = ({ isOpen, onClose, onSaved, branchId, editingTable }) =>
                   type="number"
                   min="1"
                   value={formData.capacity}
-                  onChange={(e) => updateField('capacity', e.target.value)}
-                  className={inputClass}
+                  onChange={(e) => {
+                    updateField('capacity', e.target.value);
+                    setFieldErrors((p) => ({ ...p, capacity: undefined }));
+                  }}
+                  className={`${inputClass} ${fieldErrors.capacity ? 'border-red-500' : ''}`}
                   placeholder="4"
-                  required
+                  aria-required="true"
+                  aria-invalid={fieldErrors.capacity ? 'true' : 'false'}
+                  aria-describedby={fieldErrors.capacity ? 'err-table-capacity' : undefined}
                 />
+                {fieldErrors.capacity && <p id="err-table-capacity" className="mt-1.5 text-xs text-red-500">{fieldErrors.capacity}</p>}
               </div>
               <div>
                 <label className="mb-1.5 block text-sm font-medium text-gray-800">
diff --git a/RestroHub-FrontEnd/src/components/admin/upi/UPIFormModal.jsx b/RestroHub-FrontEnd/src/components/admin/upi/UPIFormModal.jsx
index de65fa8c..b08b8ec5 100644
--- a/RestroHub-FrontEnd/src/components/admin/upi/UPIFormModal.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/upi/UPIFormModal.jsx
@@ -5,11 +5,24 @@ import { Dialog } from '@headlessui/react';
 const UPIFormModal = ({ isOpen, onClose }) => {
   const [formData, setFormData] = useState({ name: '', upiId: '' });
   const [submitting, setSubmitting] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState({});
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    // client-side validation
+    const errs = {};
+    if (!formData.name.trim()) errs.name = 'Account name is required';
+    if (!formData.upiId.trim()) errs.upiId = 'UPI ID is required';
+    else if (!/^[\w.+-]+@[\w-]+$/.test(formData.upiId.trim())) errs.upiId = 'Enter a valid UPI ID';
+
+    if (Object.keys(errs).length) {
+      setFieldErrors(errs);
+      return;
+    }
+
     try {
       setSubmitting(true);
+      setFieldErrors({});
       // 🔌 await api.post('/api/upi-links', formData);
       await new Promise((r) => setTimeout(r, 500));
       console.log('Add UPI:', formData);
@@ -72,13 +85,17 @@ const UPIFormModal = ({ isOpen, onClose }) => {
                 <input
                   type="text"
                   value={formData.name}
-                  onChange={(e) =>
-                    setFormData({ ...formData, name: e.target.value })
-                  }
-                  className={inputClass}
+                  onChange={(e) => {
+                    setFormData({ ...formData, name: e.target.value });
+                    setFieldErrors((p) => ({ ...p, name: undefined }));
+                  }}
+                  className={`${fieldErrors.name ? 'border-red-500' : 'border-gray-200'} ${inputClass}`}
                   placeholder="e.g., Main Account"
-                  required
+                  aria-required="true"
+                  aria-invalid={fieldErrors.name ? 'true' : 'false'}
+                  aria-describedby={fieldErrors.name ? 'err-upi-name' : undefined}
                 />
+                {fieldErrors.name && <p id="err-upi-name" className="mt-1.5 text-xs text-red-500">{fieldErrors.name}</p>}
               </div>
 
               {/* UPI ID */}
@@ -89,13 +106,17 @@ const UPIFormModal = ({ isOpen, onClose }) => {
                 <input
                   type="text"
                   value={formData.upiId}
-                  onChange={(e) =>
-                    setFormData({ ...formData, upiId: e.target.value })
-                  }
-                  className={inputClass}
+                  onChange={(e) => {
+                    setFormData({ ...formData, upiId: e.target.value });
+                    setFieldErrors((p) => ({ ...p, upiId: undefined }));
+                  }}
+                  className={`${fieldErrors.upiId ? 'border-red-500' : 'border-gray-200'} ${inputClass}`}
                   placeholder="yourname@paytm"
-                  required
+                  aria-required="true"
+                  aria-invalid={fieldErrors.upiId ? 'true' : 'false'}
+                  aria-describedby={fieldErrors.upiId ? 'err-upi-id' : undefined}
                 />
+                {fieldErrors.upiId && <p id="err-upi-id" className="mt-1.5 text-xs text-red-500">{fieldErrors.upiId}</p>}
                 <p className="mt-1.5 flex items-start gap-1.5 text-xs text-gray-500">
                   <Info className="mt-0.5 h-3 w-3 shrink-0 text-gray-400" />
                   Enter your UPI ID from Paytm, PhonePe, GPay, etc.
diff --git a/RestroHub-FrontEnd/src/components/customer/ReservationsSection.jsx b/RestroHub-FrontEnd/src/components/customer/ReservationsSection.jsx
index c9f640fd..9bb9c1e3 100644
--- a/RestroHub-FrontEnd/src/components/customer/ReservationsSection.jsx
+++ b/RestroHub-FrontEnd/src/components/customer/ReservationsSection.jsx
@@ -22,6 +22,7 @@ const ReservationsSection = () => {
     const [submitted, setSubmitted] = useState(false);
     const [error, setError] = useState(null);
     const [confirmationNumber, setConfirmationNumber] = useState(null);
+    const [fieldErrors, setFieldErrors] = useState({});
 
     if (!siteData) return null;
 
@@ -37,6 +38,26 @@ const ReservationsSection = () => {
         e.preventDefault();
         setSubmitting(true);
         setError(null);
+        setFieldErrors({});
+
+        // Client-side validation
+        const errors = {};
+        if (!formData.name.trim()) errors.name = 'Name is required';
+        if (!formData.email.trim()) errors.email = 'Email is required';
+        else if (!/^\S+@\S+\.\S+$/.test(formData.email)) errors.email = 'Enter a valid email address';
+        if (!formData.phone.trim()) errors.phone = 'Phone number is required';
+        else if (!/^\+?[0-9\s-]{7,15}$/.test(formData.phone)) errors.phone = 'Enter a valid phone number';
+        if (!formData.date) errors.date = 'Select a date';
+        else if (new Date(formData.date) < new Date(getMinDate())) errors.date = 'Date cannot be in the past';
+        if (!formData.time) errors.time = 'Select a time slot';
+        if (!formData.guests) errors.guests = 'Select number of guests';
+
+        if (Object.keys(errors).length) {
+            setFieldErrors(errors);
+            setError('Please fix the highlighted fields and try again.');
+            setSubmitting(false);
+            return;
+        }
 
         try {
             const response = await ApiService.submitReservation(formData);
@@ -53,6 +74,7 @@ const ReservationsSection = () => {
                     guests: '',
                     requests: ''
                 });
+                setFieldErrors({});
             }
         } catch (err) {
             setError('Failed to submit reservation. Please try again.');
@@ -123,60 +145,117 @@ const ReservationsSection = () => {
                         )}
 
                         <div className="form-row">
-                            <input
-                                type="text"
-                                name="name"
-                                value={formData.name}
-                                onChange={handleChange}
-                                placeholder="Your Name *"
-                                required
-                                className="input"
-                            />
-                            <input
-                                type="email"
-                                name="email"
-                                value={formData.email}
-                                onChange={handleChange}
-                                placeholder="Email Address *"
-                                required
-                                className="input"
-                            />
+                            <div>
+                                <input
+                                    type="text"
+                                    name="name"
+                                    value={formData.name}
+                                    onChange={handleChange}
+                                    placeholder="Your Name *"
+                                    aria-required="true"
+                                    aria-invalid={fieldErrors.name ? "true" : "false"}
+                                    aria-describedby={fieldErrors.name ? "err-name" : undefined}
+                                    className={`${fieldErrors.name ? 'border-red-500' : ''} input`}
+                                />
+                                {fieldErrors.name && (
+                                    <p id="err-name" className="mt-1.5 text-xs text-red-500">{fieldErrors.name}</p>
+                                )}
+                            </div>
+
+                            <div>
+                                <input
+                                    type="email"
+                                    name="email"
+                                    value={formData.email}
+                                    onChange={handleChange}
+                                    placeholder="Email Address *"
+                                    aria-required="true"
+                                    aria-invalid={fieldErrors.email ? "true" : "false"}
+                                    aria-describedby={fieldErrors.email ? "err-email" : undefined}
+                                    className={`${fieldErrors.email ? 'border-red-500' : ''} input`}
+                                />
+                                {fieldErrors.email && (
+                                    <p id="err-email" className="mt-1.5 text-xs text-red-500">{fieldErrors.email}</p>
+                                )}
+                            </div>
+                        </div>
+
+                        <div className="form-row">
+                            <div>
+                                <input
+                                    type="tel"
+                                    name="phone"
+                                    value={formData.phone}
+                                    onChange={handleChange}
+                                    placeholder="Phone Number *"
+                                    aria-required="true"
+                                    aria-invalid={fieldErrors.phone ? "true" : "false"}
+                                    aria-describedby={fieldErrors.phone ? "err-phone" : undefined}
+                                    className={`${fieldErrors.phone ? 'border-red-500' : ''} input`}
+                                />
+                                {fieldErrors.phone && (
+                                    <p id="err-phone" className="mt-1.5 text-xs text-red-500">{fieldErrors.phone}</p>
+                                )}
+                            </div>
                         </div>
 
                         <div className="form-row form-row-3">
-                            <input
-                                type="date"
-                                name="date"
-                                value={formData.date}
-                                onChange={handleChange}
-                                min={getMinDate()}
-                                required
-                                className="input"
-                            />
-                            <select
-                                name="time"
-                                value={formData.time}
-                                onChange={handleChange}
-                                required
-                                className="input"
-                            >
-                                <option value="">Select Time *</option>
-                                {reservations.timeSlots.map((time, index) => (
-                                    <option key={index} value={time}>{time}</option>
-                                ))}
-                            </select>
-                            <select
-                                name="guests"
-                                value={formData.guests}
-                                onChange={handleChange}
-                                required
-                                className="input"
-                            >
-                                <option value="">Guests *</option>
-                                {reservations.guestOptions.map((option, index) => (
-                                    <option key={index} value={option}>{option}</option>
-                                ))}
-                            </select>
+                            <div>
+                                <input
+                                    type="date"
+                                    name="date"
+                                    value={formData.date}
+                                    onChange={handleChange}
+                                    min={getMinDate()}
+                                    aria-required="true"
+                                    aria-invalid={fieldErrors.date ? "true" : "false"}
+                                    aria-describedby={fieldErrors.date ? "err-date" : undefined}
+                                    className={`${fieldErrors.date ? 'border-red-500' : ''} input`}
+                                />
+                                {fieldErrors.date && (
+                                    <p id="err-date" className="mt-1.5 text-xs text-red-500">{fieldErrors.date}</p>
+                                )}
+                            </div>
+
+                            <div>
+                                <select
+                                    name="time"
+                                    value={formData.time}
+                                    onChange={handleChange}
+                                    aria-required="true"
+                                    aria-invalid={fieldErrors.time ? "true" : "false"}
+                                    aria-describedby={fieldErrors.time ? "err-time" : undefined}
+                                    className={`${fieldErrors.time ? 'border-red-500' : ''} input`}
+                                >
+                                    <option value="">Select Time *</option>
+                                    {reservations.timeSlots.map((time, index) => (
+                                        <option key={index} value={time}>{time}</option>
+                                    ))}
+                                </select>
+                                {fieldErrors.time && (
+                                    <p id="err-time" className="mt-1.5 text-xs text-red-500">{fieldErrors.time}</p>
+                                )}
+                            </div>
+
+                            <div>
+                                <select
+                                    name="guests"
+                                    value={formData.guests}
+                                    onChange={handleChange}
+                                    aria-required="true"
+                                    aria-invalid={fieldErrors.guests ? "true" : "false"}
+                                    aria-describedby={fieldErrors.guests ? "err-guests" : undefined}
+                                    className={`${fieldErrors.guests ? 'border-red-500' : ''} input`}
+                                >
+                                    <option value="">Guests *</option>
+                                    {reservations.guestOptions.map((option, index) => (
+                                        <option key={index} value={option}>{option}</option>
+                                    ))}
+                                </select>
+                                {fieldErrors.guests && (
+                                    <p id="err-guests" className="mt-1.5 text-xs text-red-500">{fieldErrors.guests}</p>
+                                )}
+                            </div>
                         </div>
 
                         <textarea
diff --git a/RestroHub-FrontEnd/src/pages/public/Login.jsx b/RestroHub-FrontEnd/src/pages/public/Login.jsx
index edf9e2ec..fb1003db 100644
--- a/RestroHub-FrontEnd/src/pages/public/Login.jsx
+++ b/RestroHub-FrontEnd/src/pages/public/Login.jsx
@@ -16,12 +16,9 @@ const API_BASE_URL =
 
 const validationSchema = Yup.object({
   username: Yup.string().required("Email or username is required"),
-  password: Yup.string()
-    .required("Password is required")
-    .matches(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?`~]).{8,}$/,
-      "Password must be at least 8 characters and include uppercase, lowercase, number, and special character"
-    ),
+  // Login should only require a password to be present; strict complexity
+  // rules are enforced at registration. Keep login validation permissive.
+  password: Yup.string().required("Password is required").min(6, "Password must be at least 6 characters"),
 });
 
 /* ──────────────────── SVG Icons (inlined) ──────────────────── */