diff --git a/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx b/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
index d1e0ab5..94624d2 100644
--- a/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
+++ b/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
@@ -29,11 +29,13 @@ const ValidationReview = () => {
   const { id } = useParams();
   const [isRejectOpen, setIsRejectOpen] = React.useState(false);
   const [rejectReason, setRejectReason] = React.useState('');
+  const [showRejectError, setShowRejectError] = React.useState(false);
   const [loading, setLoading] = React.useState(true);
   const [actionLoading, setActionLoading] = React.useState(false);
   const [error, setError] = React.useState(null);
   const [submissionData, setSubmissionData] = React.useState(null);
   const [quarterPeriods, setQuarterPeriods] = React.useState(null);
+  const [isApproveOpen, setIsApproveOpen] = React.useState(false);
 
   React.useEffect(() => {
     const fetchSubmission = async () => {
@@ -81,6 +83,7 @@ const ValidationReview = () => {
   }, [id]);
 
   const handleApprove = async () => {
+    setIsApproveOpen(false);
     if (actionLoading) return;
 
     setActionLoading(true);
@@ -116,9 +119,10 @@ const ValidationReview = () => {
     if (actionLoading) return;
 
     if (!rejectReason.trim()) {
-      alert('Please provide a reason for rejection.');
+      setShowRejectError(true);
       return;
     }
+    setShowRejectError(false);
 
     setActionLoading(true);
     try {
@@ -316,7 +320,7 @@ const ValidationReview = () => {
       <div className="max-w-[1280px] mx-auto px-4 py-6 space-y-6">
         <nav className="flex items-center gap-2 text-sm text-[#8F9299] mb-6">
           <Link to="/admin/validations" className="flex items-center gap-2 text-[#232528] hover:underline">
-            Manage Submissions <img src={caretUpSrc} alt="" className="h-3 w-3 rotate-90" />
+            Manage Submissions <img src={caretUpSrc} alt="" className="h-3 w-3 " />
           </Link>
           <span className="text-[#7A7F87] font-medium">View Submission</span>
         </nav>
@@ -378,226 +382,220 @@ const ValidationReview = () => {
           </div>
         </section>
 
-        {productDetails.length > 0 ? (
-  <div className={`grid gap-4 ${productDetails.length === 1 ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2'}`}>
-    {productDetails.map((product, idx) => (
+{submissionData?.products?.length > 0 ? (
+  <div
+    className={`grid gap-4 ${
+      submissionData.products.length === 1
+        ? 'grid-cols-1'
+        : 'grid-cols-1 lg:grid-cols-2'
+    }`}
+  >
+    {submissionData.products.map((product, idx) => (
       <section
-        key={product.code + idx}
+        key={product.id || idx}
         className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB] space-y-5"
       >
+        {/* Header Section */}
         <div className="flex flex-wrap items-center justify-between">
           <div className="text-sm font-semibold text-[#232528]">
-            Product: <span className="font-normal">{product.code} - {product.name}</span>
+            Product:{' '}
+            <span className="font-normal">
+              {product?.product?.hs_code} - {product?.product?.product_name}
+            </span>
           </div>
           <div className="flex flex-wrap items-center gap-2">
             <span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
-              Submitted By: <strong>{product.submittedBy}</strong>
+              Submitted By: <strong>System</strong>
             </span>
             <span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
-              Unit: <strong>{product.unit}</strong>
+              Unit: <strong>{product?.unit?.uom || 'units'}</strong>
             </span>
             <span className="px-2 py-[2px] border border-[#D0D5DD] rounded-md text-xs">
-              Capacity: <strong>{product.capacity}</strong>
+              Capacity: <strong>{product?.annual_installed_capacity}</strong>
             </span>
           </div>
         </div>
 
+        {/* Table Section */}
         <div className="overflow-x-auto rounded-[12px] border border-[#E5E7EB]">
-  <table className="min-w-full text-sm text-left border-collapse">
-    <thead>
-      <tr>
-        <th
-          rowSpan="2"
-          className="bg-[#F2ECCF] text-[#92722A] px-4 py-3 text-xs font-semibold uppercase align-middle border-r border-[#E5E7EB]"
-        >
-          Metric
-        </th>
-        <th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
-          {quarterPeriods?.previous_quarter}-{quarterPeriods?.previous_year} (Previous Quarter)
-        </th>
-        <th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
-          {quarterPeriods?.current_quarter}-{quarterPeriods?.current_year} (Current Quarter)
-        </th>
-        <th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center">
-          {quarterPeriods?.forecast_quarter}-{quarterPeriods?.forecast_year} (Next Quarter)
-        </th>
-      </tr>
+          <table className="min-w-full text-sm text-left border-collapse">
+            <thead>
+              <tr>
+                <th
+                  rowSpan="2"
+                  className="bg-[#F2ECCF] text-[#92722A] px-4 py-3 text-xs font-semibold uppercase align-middle border-r border-[#E5E7EB]"
+                >
+                  Metric
+                </th>
+                <th
+                  colSpan="3"
+                  className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center"
+                >
+                  {quarterPeriods?.previous_quarter}-{quarterPeriods?.previous_year}{' '}
+                  (Previous Quarter)
+                </th>
+                <th
+                  colSpan="3"
+                  className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center"
+                >
+                  {quarterPeriods?.current_quarter}-{quarterPeriods?.current_year}{' '}
+                  (Current Quarter)
+                </th>
+                <th
+                  colSpan="3"
+                  className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center"
+                >
+                  {quarterPeriods?.forecast_quarter}-{quarterPeriods?.forecast_year}{' '}
+                  (Next Quarter)
+                </th>
+              </tr>
 
-      <tr>
-        <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">{quarterPeriods?.current_month?.current_period_one}</th>
-        <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">{quarterPeriods?.current_month?.current_period_two}</th>
-        <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">{quarterPeriods?.current_month?.current_period_three}</th>
+              <tr>
+                <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">
+                  {quarterPeriods?.previous_month?.previous_period_one}
+                </th>
+                <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">
+                  {quarterPeriods?.previous_month?.previous_period_two}
+                </th>
+                <th className="bg-[#F4F8FF] px-4 py-2 font-medium text-[#286CFF]">
+                  {quarterPeriods?.previous_month?.previous_period_three}
+                </th>
 
-        <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">{quarterPeriods?.forecast_month?.forecast_period_one}</th>
-        <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">{quarterPeriods?.forecast_month?.forecast_period_two}</th>
-        <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">{quarterPeriods?.forecast_month?.forecast_period_three}</th>
+                <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">
+                  {quarterPeriods?.current_month?.current_period_one}
+                </th>
+                <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">
+                  {quarterPeriods?.current_month?.current_period_two}
+                </th>
+                <th className="bg-[#F3FAF4] px-4 py-2 font-medium text-[#2F663C]">
+                  {quarterPeriods?.current_month?.current_period_three}
+                </th>
 
-        <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">{quarterPeriods?.previous_month?.previous_period_one}</th>
-        <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">{quarterPeriods?.previous_month?.previous_period_two}</th>
-        <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">{quarterPeriods?.previous_month?.previous_period_three}</th>
-      </tr>
-    </thead>
+                <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">
+                  {quarterPeriods?.forecast_month?.forecast_period_one}
+                </th>
+                <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">
+                  {quarterPeriods?.forecast_month?.forecast_period_two}
+                </th>
+                <th className="bg-[#FFF6EC] px-4 py-2 font-medium text-[#F29F0E]">
+                  {quarterPeriods?.forecast_month?.forecast_period_three}
+                </th>
+              </tr>
+            </thead>
 
-    <tbody>
-      {submissionData?.products?.map((product, idx) => (
-        <React.Fragment key={idx}>
-          {/* Quantity Row */}
-          <tr className="border-t border-[#E5E7EB]">
-            <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
-              Quantity ({product.unit?.uom || 'units'})
-            </td>
-            {/* Previous Quarter Quantities */}
-            <td className="px-4 py-3 text-[#232528]">
-              {product.previous_quantity_period_one || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.previous_quantity_period_two || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.previous_quantity_period_three || '0'}
-            </td>
-            
-            {/* Current Quarter Quantities */}
-            <td className="px-4 py-3 text-[#232528]">
-              {product.current_quantity_period_one || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.current_quantity_period_two || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.current_quantity_period_three || '0'}
-            </td>
-            
-            {/* Forecast Quarter Quantities */}
-            <td className="px-4 py-3 text-[#232528]">
-              {product.forecast_quantity_period_one || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.forecast_quantity_period_two || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.forecast_quantity_period_three || '0'}
-            </td>
-          </tr>
+            <tbody>
+              {/* Quantity Row */}
+              <tr className="border-t border-[#E5E7EB]">
+                <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
+                  Quantity ({product?.unit?.uom || 'units'})
+                </td>
+                <td className="px-4 py-3">{product.previous_quantity_period_one || '0'}</td>
+                <td className="px-4 py-3">{product.previous_quantity_period_two || '0'}</td>
+                <td className="px-4 py-3">{product.previous_quantity_period_three || '0'}</td>
 
-          {/* Cost Row */}
-          <tr className="border-t border-[#E5E7EB]">
-            <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
-              Cost (AED)
-            </td>
-            {/* Previous Quarter Costs */}
-            <td className="px-4 py-3 text-[#232528]">
-              {product.previous_cost_period_one || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.previous_cost_period_two || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.previous_cost_period_three || '0'}
-            </td>
-            
-            {/* Current Quarter Costs */}
-            <td className="px-4 py-3 text-[#232528]">
-              {product.current_cost_period_one || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.current_cost_period_two || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.current_cost_period_three || '0'}
-            </td>
-            
-            {/* Forecast Quarter Costs */}
-            <td className="px-4 py-3 text-[#232528]">
-              {product.forecast_cost_period_one || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.forecast_cost_period_two || '0'}
-            </td>
-            <td className="px-4 py-3 text-[#232528]">
-              {product.forecast_cost_period_three || '0'}
-            </td>
-          </tr>
-          
-          {/* Remarks Row (if exists) */}
-          {product.remarks && (
-            <tr className="border-t border-[#E5E7EB] bg-gray-100">
-              <td className="px-4 py-3 font-medium text-[#232528]">
-                Remarks
-              </td>
-              <td colSpan="9" className="px-4 py-3 text-[#232528]">
-                {product.remarks}
-              </td>
-            </tr>
-          )}
-          
-          {/* Current Quarter Reason Row */}
-          <tr className="border-t border-[#E5E7EB]">
-            <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
-              Reason (Current)
-            </td>
-            <td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
-            <td colSpan="3" className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium rounded-md">
-              {product.variation_reason?.reason || 'No reason provided'}
-              {product.other_variation_reason && (
-                <div className="text-xs mt-1">Note: {product.other_variation_reason}</div>
-              )}
-            </td>
-            <td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
-          </tr>
+                <td className="px-4 py-3">{product.current_quantity_period_one || '0'}</td>
+                <td className="px-4 py-3">{product.current_quantity_period_two || '0'}</td>
+                <td className="px-4 py-3">{product.current_quantity_period_three || '0'}</td>
 
-          {/* Forecast Quarter Reason Row */}
-          <tr className="border-t border-[#E5E7EB]">
-            <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
-              Reason (Forecast)
-            </td>
-            <td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
-            <td colSpan="3" className="px-4 py-3 text-center text-[#6B7280]">--</td>
-            <td colSpan="3" className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium rounded-md">
-              {product.zero_target_reason?.reason || 'No reason provided'}
-              {product.other_zero_target_reason && (
-                <div className="text-xs mt-1">Note: {product.other_zero_target_reason}</div>
-              )}
-            </td>
-          </tr>
-        </React.Fragment>
-      ))}
-    </tbody>
-  </table>
-  
-  <div className="mt-4">
-    {/* <p>
-      <span className="text-[#16A34A] font-semibold">Green ▲</span> indicates upward trend;{' '}
-      <span className="text-[#DC2626] font-semibold">Red ▼</span> indicates downward trend compared to previous month or quarter
-    </p> */}
-    <p className="mt-3 text-sm text-[#4B5563]">
-      <strong className="font-semibold text-[#232528]">Remarks:</strong> NA
-    </p>
+                <td className="px-4 py-3">{product.forecast_quantity_period_one || '0'}</td>
+                <td className="px-4 py-3">{product.forecast_quantity_period_two || '0'}</td>
+                <td className="px-4 py-3">{product.forecast_quantity_period_three || '0'}</td>
+              </tr>
+
+              {/* Cost Row */}
+              <tr className="border-t border-[#E5E7EB]">
+                <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
+                  Cost (AED)
+                </td>
+                <td className="px-4 py-3">{product.previous_cost_period_one || '0'}</td>
+                <td className="px-4 py-3">{product.previous_cost_period_two || '0'}</td>
+                <td className="px-4 py-3">{product.previous_cost_period_three || '0'}</td>
+
+                <td className="px-4 py-3">{product.current_cost_period_one || '0'}</td>
+                <td className="px-4 py-3">{product.current_cost_period_two || '0'}</td>
+                <td className="px-4 py-3">{product.current_cost_period_three || '0'}</td>
+
+                <td className="px-4 py-3">{product.forecast_cost_period_one || '0'}</td>
+                <td className="px-4 py-3">{product.forecast_cost_period_two || '0'}</td>
+                <td className="px-4 py-3">{product.forecast_cost_period_three || '0'}</td>
+              </tr>
+
+              {/* Reason (Current) */}
+              <tr className="border-t border-[#E5E7EB]">
+                <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
+                  Reason (Current)
+                </td>
+                <td colSpan="3" className="text-center text-[#6B7280]">
+                  --
+                </td>
+                <td
+                  colSpan="3"
+                  className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium rounded-md"
+                >
+                  {product?.variation_reason?.reason || 'No reason provided'}
+                  {product.other_variation_reason && (
+                    <div className="text-xs mt-1">
+                      Note: {product.other_variation_reason}
+                    </div>
+                  )}
+                </td>
+                <td colSpan="3" className="text-center text-[#6B7280]">
+                  --
+                </td>
+              </tr>
+
+              {/* Reason (Forecast) */}
+              <tr className="border-t border-[#E5E7EB]">
+                <td className="bg-[#FFFCF2] px-4 py-3 font-medium text-[#232528]">
+                  Reason (Forecast)
+                </td>
+                <td colSpan="3" className="text-center text-[#6B7280]">
+                  --
+                </td>
+                <td colSpan="3" className="text-center text-[#6B7280]">
+                  --
+                </td>
+                <td
+                  colSpan="3"
+                  className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium rounded-md"
+                >
+                  {product?.zero_target_reason?.reason || 'No reason provided'}
+                  {product.other_zero_target_reason && (
+                    <div className="text-xs mt-1">
+                      Note: {product.other_zero_target_reason}
+                    </div>
+                  )}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div className="mt-3 text-sm text-[#4B5563]">
+            <strong className="font-semibold text-[#232528]">Remarks:</strong>{' '}
+            {product.remarks || 'NA'}
+          </div>
+
+          <div className="mt-3">
+            <label className="block text-sm font-semibold mb-1 text-[#232528]">
+              Admin Remarks
+            </label>
+            <textarea
+              rows="2"
+              className="w-full rounded-[10px] border border-[#D1D5DB] bg-[#FFFCF2] px-4 py-2 text-sm text-[#232528] focus:ring-2 focus:ring-[#92722A] focus:outline-none"
+              placeholder="Please enter remarks here"
+            ></textarea>
+          </div>
+        </div>
+      </section>
+    ))}
   </div>
-
-  <div className="mt-3">
-    <label className="block text-sm font-semibold mb-1 text-[#232528]">Admin Remarks</label>
-    <textarea
-      rows="2"
-      className="w-full rounded-[10px] border border-[#D1D5DB] bg-[#FFFCF2] px-4 py-2 text-sm text-[#232528] focus:ring-2 focus:ring-[#92722A] focus:outline-none"
-      placeholder="Please enter remarks here"
-    ></textarea>
-    <div className="mt-1 flex justify-end">
-      {/* <p className="text-xs text-[#6B7280] italic inline-flex items-center gap-1">
-        <span>Please refer to the screenshot</span>
-      </p> */}
-    </div>
-  </div>
-</div>
-</section>
-))}
-</div>
 ) : (
   <div className="rounded-lg bg-amber-50 border border-amber-200 p-6 text-center">
     <p className="text-amber-800">No products found for this submission.</p>
   </div>
 )}
 
+
         {actionType !== 'view' && (
           <section className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB]">
             <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -643,23 +641,35 @@ const ValidationReview = () => {
                 ×
               </button>
             </div>
-            <div className="space-y-3 px-6 py-5">
-              <label className="flex flex-col gap-2 text-sm font-semibold text-[#232528]">
-                Reason
+            <div className="p-6">
+              <p className="text-sm text-gray-600 leading-6 mb-2">
+                You're about to return <span className="font-medium text-gray-900">{submissionData?.establishment?.factory_name || 'this establishment'}</span>'s <span className="font-medium text-gray-900">{submissionData?.quarter} {submissionData?.year}</span> submission for correction.
+              </p>
+              <p className="text-sm text-gray-600 leading-6 mb-3">
+                The status will change to Rejected and the establishment can resubmit within the survey window.
+              </p>
+              <div className="mb-0">
+                <label htmlFor="rejectReason" className="block text-sm font-medium text-gray-700 mb-2">
+                  Reason for rejection: <span className="text-red-500">*</span>
+                </label>
                 <textarea
+                  id="rejectReason"
                   rows={4}
-                  className="w-full rounded-[10px] border border-[#D1D5DB] bg-[#FFFCF2] px-4 py-3 text-sm text-[#232528] placeholder:text-[#9CA3AF] focus:outline-none focus:ring-2 focus:ring-[#92722A]"
-                  placeholder="Enter the reason for rejection..."
+                  className={`w-full px-3 py-2 border ${showRejectError && !rejectReason.trim() ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#92722A] focus:border-[#92722A] text-sm`}
+                  placeholder="Please provide a reason for rejection"
                   value={rejectReason}
-                  onChange={(event) => setRejectReason(event.target.value)}
+                  onChange={(e) => setRejectReason(e.target.value)}
                   disabled={actionLoading}
                 />
-              </label>
+                {showRejectError && !rejectReason.trim() && (
+                  <p className="mt-1 text-sm text-red-600">This field is required</p>
+                )}
+              </div>
             </div>
             <div className="flex items-center justify-end gap-3 border-t border-[#E5E7EB] px-6 py-4">
               <button
                 type="button"
-                className="inline-flex h-10 items-center justify-center rounded-[10px] border border-[#C3C6CB] bg-white px-4 text-sm font-medium text-[#5F646D] transition-colors hover:bg-[#F7F7F7] disabled:opacity-50 disabled:cursor-not-allowed"
+                className="inline-flex h-10 items-center justify-center rounded-[10px] border border-[#92722A] bg-white px-4 text-sm font-medium text-[#92722A] transition-colors hover:bg-[#F7F7F7] disabled:opacity-50 disabled:cursor-not-allowed"
                 onClick={() => {
                   setIsRejectOpen(false);
                   setRejectReason('');
@@ -681,30 +691,8 @@ const ValidationReview = () => {
         </div>
       )}
 
-      {/* Fixed bottom action bar */}
-      <div className="fixed bottom-0 left-0 right-0 border-t border-[#E5E7EB] bg-white py-4 px-6 shadow-[0_-4px_12px_rgba(0,0,0,0.05)]">
-        <div className="mx-auto flex max-w-[1280px] justify-end gap-4">
-          <button
-            type="button"
-            className="inline-flex h-11 items-center justify-center rounded-[10px] border border-[#B52520] px-3 text-sm font-semibold text-[#B52520] transition-colors hover:bg-[#FEE2E2] disabled:opacity-50 disabled:cursor-not-allowed"
-            onClick={() => setIsRejectOpen(true)}
-            disabled={actionLoading || submissionData?.status === 'Rejected'}
-          >
-            {submissionData?.status === 'Rejected' ? 'Already Rejected' : 'Reject'}
-          </button>
-          <button
-            type="button"
-            className="inline-flex h-11 items-center justify-center rounded-[10px] bg-[#92722A] px-6 text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] disabled:opacity-50 disabled:cursor-not-allowed"
-            onClick={handleApprove}
-            disabled={actionLoading || submissionData?.status === 'Approved'}
-          >
-            {actionLoading ? 'Processing...' : submissionData?.status === 'Approved' ? 'Already Approved' : 'Approve'}
-          </button>
-        </div>
-      </div>
-
-      {/* Fixed bottom action bar */}
-      <div className="fixed bottom-0 left-0 right-0 border-t border-[#E5E7EB] bg-white py-4 px-6 shadow-[0_-4px_12px_rgba(0,0,0,0.05)]">
+      {/* Action buttons moved to the main content area */}
+      <div className="border-t border-[#E5E7EB] bg-white pt-2 pb-4 px-6 max-w-[1240px] mx-auto">
         <div className="mx-auto flex max-w-[1280px] justify-end gap-4">
           <button
             type="button"
@@ -717,13 +705,49 @@ const ValidationReview = () => {
           <button
             type="button"
             className="inline-flex h-11 items-center justify-center rounded-[10px] bg-[#92722A] px-6 text-sm font-semibold text-white transition-colors hover:bg-[#B68A35] disabled:opacity-50 disabled:cursor-not-allowed"
-            onClick={handleApprove}
+            onClick={() => setIsApproveOpen(true)}
             disabled={actionLoading || submissionData?.status === 'Approved'}
           >
             {actionLoading ? 'Processing...' : submissionData?.status === 'Approved' ? 'Already Approved' : 'Approve'}
           </button>
         </div>
       </div>
+
+      {/* Approval Confirmation Dialog */}
+      {isApproveOpen && (
+        <div className="fixed inset-0 flex items-center justify-center z-50 p-4 bg-black/30">
+          <div className="bg-white rounded-lg w-full max-w-lg border border-gray-200 shadow-lg">
+            <div className="flex items-center justify-between h-12 p-4 border-b border-gray-200">
+              <h3 className="text-base font-medium text-gray-900">Approve this submission?</h3>
+            </div>
+            <div className="p-4">
+            <p className="mb-4 text-gray-600 text-sm">
+              You're about to approve <span className="font-medium"><b>{submissionData?.establishment?.factory_name|| 'this establishment'}</b></span> for <span className="font-medium"><b>{submissionData?.quarter} {submissionData?.year}</b></span>.
+              <br /><br />
+              This will lock the record for the establishment.
+            </p>
+            <div className="flex justify-end gap-3 mt-6">
+              <button
+                type="button"
+                className="rounded-md border border-gray-300 bg-[#92722A] px-4 py-2 text-sm font-medium text-[#92722A] hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                onClick={() => setIsApproveOpen(false)}
+                disabled={actionLoading}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="inline-flex items-center rounded-md border border-transparent bg-[#92722A] px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-[#B68A35] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
+                onClick={handleApprove}
+                disabled={actionLoading}
+              >
+                {actionLoading ? 'Processing...' : 'Approve'}
+              </button>
+            </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };