diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index afd92e8..8f2722a 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -5,12 +5,13 @@ import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
 import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
-import { checkConnection, getApi, getApiMulti } from '../../utils/functions'
+import { checkConnection, getApi, getApiMulti, postApi } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName } from '../../stores/employee'
 import { useNavigate } from '@solidjs/router'
 import { _applicationNo, _date, _optn, _name, _location, _type, _assessor, _feeList, _codeList, _amountList, _signatureAssessor, _signatureApprover, _assessorid, _approvedDate, _assessedDate } from '../../stores/pdfinfo'
 import { VsRefresh } from 'solid-icons/vs'
+import { BiRegularErrorAlt } from 'solid-icons/bi'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
@@ -21,7 +22,7 @@ const PUBLICIP = import.meta.env.VITE_PUBLICIP
 export default () => {
   const navigate = useNavigate()
 
-  const [totalOp, setTotalOp] = createSignal(0)
+  const [totalOp, setTotalOp] = createSignal('')
   const [assessor, setAssessor] = createSignal('')
   const [dateOp, setDateOp] = createSignal('')
   const [location, setLocation] = createSignal('')
@@ -50,6 +51,8 @@ export default () => {
   const [employeeId, setEmployeeId] = createSignal(0)
   const [employeeName, setEmployeeName] = createSignal('')
 
+  const [apology, setApology] = createSignal(false)
+
   const getListForApproval = async () => {
     const responseE = await getApiMulti('get-listopapproval-electrical')
     setApplicationListElectrical(responseE.result)
@@ -98,23 +101,24 @@ export default () => {
   }
 
   const getopdetails = async (division: string, applicationNo: string) => {
+    let op
     if (division === 'electrical') {
-      const op = await getApiMulti('get-opdetails-electrical', applicationNo)
-      setAssessor(op.result7[0])
-      setLocation(op.result5[0])
-      setType(op.result6[0])
-      setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
-      setApplicationId(op.result11[0])
-      setTotalOp(calculateTotal(op.result9))
+      op = await getApiMulti('get-opdetails-electrical', applicationNo)
     } else if (division === 'occupancy') {
-      const op = await getApiMulti('get-opdetails-occupancy', applicationNo)
-      setAssessor(op.result7[0])
-      setLocation(op.result5[0])
-      setType(op.result6[0])
-      setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
-      setApplicationId(op.result11[0])
-      setTotalOp(calculateTotal(op.result9))
+      op = await getApiMulti('get-opdetails-occupancy', applicationNo)
     }
+
+    setLocation(op.result[0])
+    setType(op.result2[0])
+    setAssessor(op.result3[0])
+    const total = calculateTotal(op.result4)
+    const formattedTotal = new Intl.NumberFormat('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(total)
+    setTotalOp(formattedTotal)
+    setDateOp(dayjs(op.result5[0]).format('MMMM DD, YYYY'))
+    setApplicationId(op.result6[0])
   }
 
   const calculateTotal = (list: number[]) => {
@@ -163,15 +167,15 @@ export default () => {
     }
 
     if (division === 'electrical') {
-      signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
-      const approvedid = await getIdByApplication(application)
-      updateDocflow(approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
+      signed = await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
+      const approvedid = await getIdByApplication(division, application)
+      updateDocflow(division, approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
       if (!signed) return
 
-      forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
+      forprinting = await setNewStatus(division, 'FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
       if (!forprinting) return
 
-      updateOrderofpayment = await updateOp()
+      updateOrderofpayment = await updateOp(division)
 
       if (updateOrderofpayment) {
         postTransaction()
@@ -180,43 +184,42 @@ export default () => {
         setApproved(true)
       }
     } else if (division === 'occupancy') {
-      signed = await setNewStatus('OCCUPANCY ORDER OF PAYMENT APPROVED AND SIGNED', '172', 'OCCOPAPPROVEDSIGNED', 1)
-      const approvedid = await getIdByApplication(application)
-      updateDocflow(approvedid, 'FOR OCCUPANCY RECOMMENDING APPROVAL')
+      signed = await setNewStatus(division, 'OCCUPANCY ORDER OF PAYMENT APPROVED AND SIGNED', '172', 'OCCOPAPPROVEDSIGNED', 1)
+      const approvedid = await getIdByApplication(division, application)
+      updateDocflow(division, approvedid, 'FOR OCCUPANCY RECOMMENDING APPROVAL')
       if (!signed) return
 
-      forprinting = await setNewStatus('APPROVED FOR PRINTING OF BUREAU OF FIRE AND ORDER OF PAYMENT', '23', 'OCORDEROFPAYMENT', 0)
+      forprinting = await setNewStatus(division, 'APPROVED FOR PRINTING OF BUREAU OF FIRE AND ORDER OF PAYMENT', '23', 'OCORDEROFPAYMENT', 0)
       if (!forprinting) return
 
-      updateOrderofpayment = await updateOp()
+      updateOrderofpayment = await updateOp(division)
+
+      if (updateOrderofpayment) {
+        postTransaction()
+        postPops(division, application)
+        setApprovedApplication(application)
+        setApproved(true)
+      }
     }
   }
 
-  const setNewStatus = async (status: string, tag: string, tagword: string, approved: number) => {
+  const setNewStatus = async (division: string, status: string, tag: string, tagword: string, approved: number) => {
     const today = new Date()
     const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
     const statusid = parseInt(applicationId().toString())
 
-    try {
-      await ofetch(API + 'post-newstatus-electrical', {
-        method: 'POST',
-        body: { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(approved.toString()), data7: parseInt(ID) },
-      })
-      return true
-    } catch {
-      return false
+    if (division === 'electrical') {
+      return await postApi('post-newstatus-electrical', { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(approved.toString()), data7: parseInt(ID) })
+    } else {
+      return await postApi('post-newstatus-occupancy', { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(approved.toString()), data7: parseInt(ID) })
     }
   }
 
-  const updateOp = async () => {
-    try {
-      await ofetch(API + 'update-opapproved-electrical', {
-        method: 'POST',
-        body: { data: parseInt(applicationId().toString()) },
-      })
-      return true
-    } catch {
-      return false
+  const updateOp = async (division: string) => {
+    if (division === 'electrical') {
+      return await postApi('update-opapproved-electrical', { data: parseInt(applicationId().toString()) })
+    } else {
+      return await postApi('update-opapproved-occupancy', { data: parseInt(applicationId().toString()) })
     }
   }
 
@@ -338,20 +341,22 @@ export default () => {
     })
   }
 
-  const updateDocflow = async (electricalid: number, status: string) => {
-    await ofetch(API + 'update-docflow-electrical', {
-      method: 'POST',
-      body: { data: parseInt(electricalid.toString()), data2: status },
-    })
+  const updateDocflow = async (division: string, applicationid: number, status: string) => {
+    if (division === 'electrical') {
+      await postApi('update-docflow-electrical', { data: parseInt(applicationid.toString()), data2: status })
+    } else if (division === 'occupancy') {
+      await postApi('update-docflow-occupancy', { data: parseInt(applicationid.toString()), data2: status })
+    }
   }
 
-  const getIdByApplication = async (applicationNo: string) => {
-    try {
-      const response = await getApi('get-idbyapplication-electrical', applicationNo)
-      return parseInt(response)
-    } catch {
-      return 0
+  const getIdByApplication = async (division: string, applicationNo: string) => {
+    let response
+    if (division === 'electrical') {
+      response = await getApi('get-idbyapplication-electrical', applicationNo)
+    } else if (division === 'occupancy') {
+      response = await getApi('get-idbyapplication-occupancy', applicationNo)
     }
+    return parseInt(response)
   }
 
   const refresh = async (division: string) => {
@@ -451,7 +456,7 @@ export default () => {
                 </Padding>
 
                 <Row>
-                  <table class="table">
+                  <table class="table__disabled">
                     <thead>
                       <tr>
                         <th>Application Number</th>
@@ -466,13 +471,15 @@ export default () => {
                           <td>{nameListOccupancy()[index]}</td>
 
                           <td>
-                            <ModalButton
-                              class="modal"
+                            <Button
+                              // class="modal"
                               label="Show Details"
                               design="bo-link"
                               background="#121e2acc"
                               color="#ffffffec"
-                              function={async () => {
+                              onClick={async () => {
+                                setApology(true)
+                                setErrorMessage('Modification of Occupancy Printing has not yet finished')
                                 await getopdetails('occupancy', item)
                               }}
                             >
@@ -508,7 +515,7 @@ export default () => {
                                   <section class="modal__row">
                                     <span class="modal__row__label">Total Fee:</span>
                                     <span class="modal__row__detail__price">
-                                      {PESO} {totalOp().toFixed(2)}
+                                      {PESO} {totalOp()}
                                     </span>
                                   </section>
                                 </Padding>
@@ -518,7 +525,7 @@ export default () => {
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
-                            </ModalButton>
+                            </Button>
                           </td>
                         </tr>
                       ))}
@@ -595,7 +602,7 @@ export default () => {
                                   <section class="modal__row">
                                     <span class="modal__row__label">Total Fee:</span>
                                     <span class="modal__row__detail__price">
-                                      {PESO} {totalOp().toFixed(2)}
+                                      {PESO} {totalOp()}
                                     </span>
                                   </section>
                                 </Padding>
@@ -683,6 +690,35 @@ export default () => {
           </Padding>
         </Modal>
       </div>
+
+      <div onClick={() => setApology(false)}>
+        <Modal trigger={apology()} background="#562020ff" color="#ffebebe6" opacity={0.8}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row gap={2}>
+                <BiRegularErrorAlt size={90} color="#ffebebe6" />
+                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
+                  <h2>Delayed Release of Feature</h2>
+                </Box>
+              </Row>
+
+              <Row>
+                <h3>{errorMessage()}</h3>
+              </Row>
+
+              <Row>
+                <Column gap={0.5}>
+                  <span>Occupancy Approval is delayed until Occupancy Printing is complete</span>
+                </Column>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }