diff --git a/backend/main.go b/backend/main.go
index 45a02be..25761e0 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -205,6 +205,35 @@ func connect() {
 				"result2": array2,
 			})
 
+		case "get-listopprinting-building":
+			var result2 string
+
+			array := []string{}
+			array2 := []string{}
+
+			results, err := db.Query(`SELECT IFNULL(r.applicationNo, '') AS result, IF(c.firstName IS NULL OR c.firstName = '', c.lastName, CONCAT(c.firstName, ' ', IF(c.middleInitial IS NULL OR c.middleInitial = '', '', CONCAT(c.middleInitial, '. ')), c.lastName) ) AS result2
+                                FROM receiving r JOIN customer c ON r.customerid = c.customerid JOIN ref_occupancy_type rot ON r.ref_occupancy_typeid = rot.ref_occupancy_typeid JOIN ref_occupancy ro ON rot.ref_occupancyid = ro.ref_occupancyid JOIN docflowtxn d ON r.receivingid = d.receivingid
+                                WHERE d.remarks = "FOR ORDER OF PAYMENT PRINT" AND d.is_approve = 0 ORDER BY r.applicationNo ASC LIMIT 10`)
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+				return
+			}
+			for results.Next() {
+				err = results.Scan(&result, &result2)
+				if err != nil {
+					c.AbortWithError(http.StatusBadRequest, err)
+					c.String(http.StatusBadRequest, err.Error())
+					return
+				}
+				array = append(array, result)
+				array2 = append(array2, result2)
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result":  array,
+				"result2": array2,
+			})
+
 		case "get-listopprinting-occupancy":
 			var result2 string
 
diff --git a/src/pages/AssessorPage/Assessor.tsx b/src/pages/AssessorPage/Assessor.tsx
index bea34cc..2e1ea32 100644
--- a/src/pages/AssessorPage/Assessor.tsx
+++ b/src/pages/AssessorPage/Assessor.tsx
@@ -2,7 +2,8 @@ import './Assessor.sass'
 import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link, Modal, Column, Box, Input } from '../../components'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
-import { onMount, createSignal, Show, createEffect } from 'solid-js'
+import { onMount, createSignal, createEffect } from 'solid-js'
+import { Show } from 'solid-js/web'
 import dayjs from 'dayjs'
 import { checkConnection, createPdfOccupancy, createPdfElectrical } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
@@ -27,6 +28,13 @@ export default () => {
   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 [applicationListBuilding, setApplicationListBuilding] = createSignal<string[]>([])
+  const [nameListBuilding, setNameListBuilding] = createSignal<string[]>([])
+
   const [errorMessage, setErrorMessage] = createSignal('')
   const [connected, setConnected] = createSignal(true)
   const [printed, setPrinted] = createSignal(false)
@@ -202,12 +210,31 @@ export default () => {
         const filteredApplications = response.result.filter((item: string) => item.includes(filter()))
         const filteredIndices = response.result.map((item: string, index: number) => (item.includes(filter()) ? index : -1)).filter((index: number) => index !== -1)
         const filteredNames = filteredIndices.map((index: number) => response.result2[index])
-        setApplicationList(filteredApplications)
-        setNameList(filteredNames)
+
+        if (division === 'electrical') {
+          setApplicationListElectrical(filteredApplications)
+          setNameListElectrical(filteredNames)
+        } else if (division === 'occupancy') {
+          setApplicationListOccupancy(filteredApplications)
+          setNameListOccupancy(filteredNames)
+        } else {
+          setApplicationlistBuilding(filteredApplications)
+          setNameListBuilding(filteredNames)
+        }
         return
       }
-      setApplicationList(response.result)
-      setNameList(response.result2)
+     
+      if (division === 'electrical') {
+        setApplicationListElectrical(response.result)
+        setNameListElectrical(response.result2)
+      } else if (division === 'occupancy') {
+        setApplicationListOccupancy(response.result)
+        setNameListOccupancy(response.result2)
+      } else {
+        setApplicationListBuilding(response.result)
+        setNameListBuilding(response.result2)
+      }
+
     } catch (error) {
       console.error(error)
     }
@@ -379,22 +406,21 @@ export default () => {
       await checkDivision()
       if (isBuilding()) await getListForPrinting('building')
       if (isOccupancy()) await getListForPrinting('occupancy')
-      if (isElectrical()) await getListForPrinting('electrical')
+      //   if (isElectrical()) await getListForPrinting('electrical')
     }
   })
 
-  createEffect(async () => {
-    if (filter() !== '') {
-      console.log('empty')
-      if (isBuilding()) await getListForPrinting('building')
-      if (isOccupancy()) await getListForPrinting('occupancy')
-      if (isElectrical()) await getListForPrinting('electrical')
-    } else if (filter() === '') {
-      if (isBuilding()) await getListForPrinting('building')
-      if (isOccupancy()) await getListForPrinting('occupancy')
-      if (isElectrical()) await getListForPrinting('electrical')
-    }
-  })
+  // createEffect(async () => {
+  //   if (filter() !== '') {
+  //     if (isBuilding()) await getListForPrinting('building')
+  //     if (isOccupancy()) await getListForPrinting('occupancy')
+  //     if (isElectrical()) await getListForPrinting('electrical')
+  //   } else if (filter() === '') {
+  //     if (isBuilding()) await getListForPrinting('building')
+  //     if (isOccupancy()) await getListForPrinting('occupancy')
+  //     if (isElectrical()) await getListForPrinting('electrical')
+  //   }
+  // })
 
   return (
     <>
@@ -448,32 +474,97 @@ export default () => {
 
               <Tabs.Content class="tabs__content" value="building">
                 <Row>
-                  {/* <h2>List of Ready to Approve and Sign Building Order of Payments</h2> */}
-                  <Padding top={2} bottom={0} left={0} right={0}>
-                    <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
-                      <h2>Under Development</h2>
-                    </Box>
-                  </Padding>
+                  <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
                 </Row>
 
+                <Padding top={0} bottom={0} right={10} left={10}>
+                  <Row content="split">
+                    <Input value={filter()} onChange={setFilter} placeholder="Filter Application Number" />
+                    <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={refresh}></Button>
+                  </Row>
+                </Padding>
+
                 <Row>
                   <table class="table">
                     <thead>
-                      {/* <tr>
+                      <tr>
                         <th>Application Number</th>
                         <th>Name</th>
                         <th style="text-align: center">Show Details</th>
-                      </tr> */}
+                      </tr>
                     </thead>
-                    <tbody></tbody>
+                    <tbody>
+                      {applicationListBuilding().map((item: string, index: number) => (
+                        <tr>
+                          <td>{item}</td>
+                          <td>{nameList()[index]}</td>
+
+                          <td>
+                            <ModalButton
+                              class="modal"
+                              label="Show Details"
+                              design="bo-link"
+                              background="#121e2acc"
+                              color="#ffffffec"
+                              function={async () => {
+                                await getopdetails('building', 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">{nameList()[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().toLocaleString('en-US', {
+                                        minimumFractionDigits: 2,
+                                      })}
+                                    </span>
+                                  </section>
+                                </Padding>
+
+                                <Row padding="2rem 0 0 0">
+                                  <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('building', 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="occupancy">
                 <Row>
-                  {/* <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
-                    <h2>Under Development</h2>
-                  </Box> */}{' '}
                   <h2>List of Ready to Print in Occupancy Order of Payments</h2>
                 </Row>
 
@@ -494,7 +585,7 @@ export default () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {applicationList().map((item, index) => (
+                      {applicationListOccupancy().map((item: string, index: number) => (
                         <tr>
                           <td>{item}</td>
                           <td>{nameList()[index]}</td>
@@ -585,7 +676,7 @@ export default () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {applicationList().map((item, index) => (
+                      {applicationListElectrical().map((item: string, index: number) => (
                         <tr>
                           <td>{item}</td>
                           <td>{nameList()[index]}</td>
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index 727e2c4..a18044b 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -403,7 +403,7 @@ export default () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {applicationListOccupancy().map((item, index) => (
+                      {applicationListOccupancy().map((item: string, index: number) => (
                         <tr>
                           <td>{item}</td>
                           <td>{nameListOccupancy()[index]}</td>
@@ -492,7 +492,7 @@ export default () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {applicationListElectrical().map((item, index) => (
+                      {applicationListElectrical().map((item: string, index: number) => (
                         <tr>
                           <td>{item}</td>
                           <td>{nameListElectrical()[index]}</td>