diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index 6bb37cd..69e161e 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -37,8 +37,10 @@ export default () => {
   // const [amountList, setAmountList] = createSignal<string[]>([])
   // const [dateOpList, setDateOpList] = createSignal<string[]>([])
 
-  const [applicationList, setApplicationList] = createSignal<string[]>([])
-  const [nameList, setNameList] = createSignal<string[]>([])
+  const [applicationListElectrical, setApplicationListElectrical] = createSignal<string[]>([])
+  const [nameListElectrical, setNameListElectrical] = createSignal<string[]>([])
+  const [applicationListOccupancy, setApplicationListOccupancy] = createSignal<string[]>([])
+  const [nameListOccupancy, setNameListOccupancy] = createSignal<string[]>([])
 
   const [errorMessage, setErrorMessage] = createSignal('')
   const [connected, setConnected] = createSignal(true)
@@ -50,38 +52,73 @@ export default () => {
 
   const getListForApproval = async () => {
     try {
-      const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
-      setApplicationList(response.result)
-      setNameList(response.result2)
+      const responseE = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
+      setApplicationListElectrical(responseE.result)
+      setNameListElectrical(responseE.result2)
+
+      const responseO = await ofetch(API + 'get-listopapproval-occupancy', { parseResponse: JSON.parse })
+      setApplicationListOccupancy(responseO.result)
+      setNameListOccupancy(responseO.result2)
     } catch (error) {
       console.error(error)
     }
   }
 
-  const load = async () => {
+  const getListForApprovalElectrical = async () => {
+    try {
+      const responseE = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
+      setApplicationListElectrical(responseE.result)
+      setNameListElectrical(responseE.result2)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const getListForApprovalOccupancy = async () => {
+    try {
+      const responseO = await ofetch(API + 'get-listopapproval-occupancy', { parseResponse: JSON.parse })
+      setApplicationListOccupancy(responseO.result)
+      setNameListOccupancy(responseO.result2)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const load = async (division: string) => {
     setConnected(await checkConnection())
     if (connected() === false) {
       setErrorMessage('Could not gather list of applicaitons')
       return
     }
 
-    await getListForApproval()
+    if (division === 'electrical') {
+      await getListForApprovalElectrical()
+    }
+    if (division === 'occupancy') {
+      await getListForApprovalOccupancy()
+    } else {
+      await getListForApproval()
+    }
   }
 
-  const getopdetails = async (applicationNo: string) => {
-    const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
-    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])
-    // setAssessorId(op.result12[0])
-    setTotalOp(calculateTotal(op.result9))
-
-    // setDescriptionList(op.result8)
-    // setAmountList(op.result9)
-    // setDateOpList(op.result10)
-    // calculateAmounts()
+  const getopdetails = async (division: string, applicationNo: string) => {
+    if (division === 'electrical') {
+      const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
+      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))
+    } else if (division === 'occupancy') {
+      const op = await ofetch(API + 'get-opdetails-occupancy/' + applicationNo, { parseResponse: JSON.parse })
+      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))
+    }
   }
 
   const calculateTotal = (list: number[]) => {
@@ -217,11 +254,7 @@ export default () => {
 
   const closeNotification = async () => {
     setApproved(false)
-    await load()
-  }
-
-  const openPDF = () => {
-    createPdf()
+    await load('all')
   }
 
   const removeEmployee = () => {
@@ -280,8 +313,14 @@ export default () => {
     }
   }
 
-  const refresh = async () => {
-    await load()
+  const refresh = async (division: string) => {
+    if (division === 'electrical') {
+      await load('electrical')
+    } else if (division === 'occupancy') {
+      await load('occupancy')
+    } else {
+      await load('all')
+    }
   }
 
   const logout = async () => {
@@ -293,7 +332,7 @@ export default () => {
     const logged = await checkLogged()
 
     if (logged) {
-      await load()
+      await load('all')
     }
   })
 
@@ -361,33 +400,12 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="occupancy">
                 <Row>
-                  {/* <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2> */}
-                  <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
-                    <h2>Under Development</h2>
-                  </Box>
-                </Row>
-
-                <Row>
-                  <table class="table">
-                    <thead>
-                      {/* <tr>
-                        <th>Application Number</th>
-                        <th>Name</th>
-                        <th style="text-align: center">Show Details</th>
-                      </tr> */}
-                    </thead>
-                    <tbody></tbody>
-                  </table>
-                </Row>
-              </Tabs.Content>
-              <Tabs.Content class="tabs__content" value="electrical">
-                <Row>
-                  <h2 onClick={openPDF}>List of Ready to Approve and Sign in Electrical Order of Payments</h2>
+                  <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2>
                 </Row>
 
                 <Padding top={0} bottom={0} right={10} left={0}>
                   <Row content="right">
-                    <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={refresh}></Button>
+                    <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={() => refresh('occupancy')}></Button>
                   </Row>
                 </Padding>
 
@@ -401,10 +419,10 @@ export default () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {applicationList().map((item, index) => (
+                      {applicationListOccupancy().map((item, index) => (
                         <tr>
                           <td>{item}</td>
-                          <td>{nameList()[index]}</td>
+                          <td>{nameListOccupancy()[index]}</td>
 
                           <td>
                             <ModalButton
@@ -414,7 +432,7 @@ export default () => {
                               background="#121e2acc"
                               color="#ffffffec"
                               function={async () => {
-                                await getopdetails(item)
+                                await getopdetails('occupancy', item)
                               }}
                             >
                               <Padding top={0} left={2} right={2} bottom={0}>
@@ -423,7 +441,94 @@ export default () => {
                                 <Padding top={1} left={0} right={0} bottom={0}>
                                   <section class="modal__row">
                                     <span class="modal__row__label">Name of Applicant:</span>
-                                    <span class="modal__row__detail">{nameList()[index]}</span>
+                                    <span class="modal__row__detail">{nameListOccupancy()[index]}</span>
+                                  </section>
+
+                                  <section class="modal__row">
+                                    <span class="modal__row__label">Location:</span>
+                                    <span class="modal__row__detail">{location()}</span>
+                                  </section>
+
+                                  <section class="modal__row">
+                                    <span class="modal__row__label">Type:</span>
+                                    <span class="modal__row__detail">{type().toUpperCase()}</span>
+                                  </section>
+
+                                  <section class="modal__row">
+                                    <span class="modal__row__label">Assessed By:</span>
+                                    <span class="modal__row__detail">{assessor()}</span>
+                                  </section>
+
+                                  <section class="modal__row">
+                                    <span class="modal__row__label">Date Assessed:</span>
+                                    <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
+                                  </section>
+
+                                  <section class="modal__row">
+                                    <span class="modal__row__label">Total Fee:</span>
+                                    <span class="modal__row__detail__price">
+                                      {PESO} {totalOp().toFixed(2)}
+                                    </span>
+                                  </section>
+                                </Padding>
+
+                                <Row padding="2rem 0 0 0">
+                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
+                                  <span class="modal__cancel">Click anywhere to cancel</span>
+                                </Row>
+                              </Padding>
+                            </ModalButton>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </Row>
+              </Tabs.Content>
+              <Tabs.Content class="tabs__content" value="electrical">
+                <Row>
+                  <h2>List of Ready to Approve and Sign in Electrical Order of Payments</h2>
+                </Row>
+
+                <Padding top={0} bottom={0} right={10} left={0}>
+                  <Row content="right">
+                    <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={() => refresh('electrical')}></Button>
+                  </Row>
+                </Padding>
+
+                <Row>
+                  <table class="table">
+                    <thead>
+                      <tr>
+                        <th>Application Number</th>
+                        <th>Name</th>
+                        <th style="text-align: center">Show Details</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {applicationListElectrical().map((item, index) => (
+                        <tr>
+                          <td>{item}</td>
+                          <td>{nameListElectrical()[index]}</td>
+
+                          <td>
+                            <ModalButton
+                              class="modal"
+                              label="Show Details"
+                              design="bo-link"
+                              background="#121e2acc"
+                              color="#ffffffec"
+                              function={async () => {
+                                await getopdetails('electrical', item)
+                              }}
+                            >
+                              <Padding top={0} left={2} right={2} bottom={0}>
+                                <span class="modal__application-number">{item}</span>
+
+                                <Padding top={1} left={0} right={0} bottom={0}>
+                                  <section class="modal__row">
+                                    <span class="modal__row__label">Name of Applicant:</span>
+                                    <span class="modal__row__detail">{nameListElectrical()[index]}</span>
                                   </section>
 
                                   <section class="modal__row">