diff --git a/src/pages/MainPage/Main.sass b/src/pages/MainPage/Main.sass
index 60c32a6..f08c623 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -25,7 +25,6 @@ h1
     position: relative
     display: flex
     gap: 5rem
-    
 
   &__list[data-orientation="horizontal"]
     align-items: center
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index 83570d5..db627da 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -8,7 +8,7 @@ import dayjs from 'dayjs'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
-const ID = import.meta.env.VITE_ID
+const ID = import.meta.env.VITE_HEADID
 
 export default () => {
   const [totalOp, setTotalOp] = createSignal(0)
@@ -81,14 +81,32 @@ export default () => {
   // }
 
   const approveHandler = async () => {
+    let signed: boolean = false
+    let forprinting: boolean = false
+
+    signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED')
+    if (signed) {
+      console.log('Signed')
+      forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT')
+    }
+    if (forprinting) {
+      console.log('For Printing')
+    }
+  }
+
+  const setNewStatus = async (status: string, tag: string, tagword: string) => {
     const today = new Date()
     const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
+    const statusid = parseInt(applicationId().toString())
 
-    for (let i = 0; i < applicationList().length; i++) {
+    try {
       await ofetch(API + 'post-newstatus-electrical', {
         method: 'POST',
-        body: { data: applicationId(), data2: formattedDate, data3: ID, data4: descriptionList()[i], data5: 'json' },
+        body: { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(ID) },
       })
+      return true
+    } catch {
+      return false
     }
   }
 
@@ -161,11 +179,37 @@ export default () => {
                 <Row>
                   <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
                 </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="occupancy">
                 <Row>
                   <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2>
                 </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>
@@ -236,7 +280,7 @@ export default () => {
 
                                 <Row gap={12} padding="2rem 0 0 0">
                                   <Button label="Cancel" edges="curved" design="bo-danger"></Button>
-                                  <Button label="Approve" edges="curved" design="bo-primary"></Button>
+                                  <Button label="Approve" edges="curved" design="bo-primary" onClick={approveHandler}></Button>
                                 </Row>
                               </Padding>
                             </ModalButton>