diff --git a/src/pages/MainPage/Main.sass b/src/pages/MainPage/Main.sass
index e3a9cc8..60c32a6 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -24,6 +24,8 @@ h1
   &__list
     position: relative
     display: flex
+    gap: 5rem
+    
 
   &__list[data-orientation="horizontal"]
     align-items: center
@@ -34,29 +36,42 @@ h1
 
   &__indicator
     position: absolute
-    background-color: hsl(200 98% 39%)
+    background-color: color.adjust(vars.$background, $lightness: 20%)
     transition: all 250ms
 
   &__indicator[data-orientation="horizontal"]
     bottom: -1px
-    height: 2px
+    height: 3px
 
   &__indicator[data-orientation="vertical"]
     right: -1px
     width: 2px
 
   &__trigger
+    // display: inline-block
+    // padding: 8px 16px
+    // outline: none
+    // cursor: pointer
+    background-color: vars.$background
+    border: none
+    border-radius: 6px 6px 0 0
+    color: vars.$textColor
+    padding: 0.75rem 1.75rem
+    width: 10rem
+    text-align: center
+    text-decoration: none
     display: inline-block
-    padding: 8px 16px
-    outline: none
+    font-size: 1rem
+    font-weight: 500
     cursor: pointer
+    // transition: all 0.2s ease-out
 
   &__trigger:hover
-    background-color: hsl(0 0% 98%)
-    color: hsl(240 5% 34%)
+    background-color: color.adjust(vars.$background, $lightness: 20%)
+    // color: hsl(240 5% 34%)
 
   &__trigger:focus-visible
-    background-color: hsl(240 5% 96%)
+    // background-color: hsl(240 5% 96%)
 
 .tabs__trigger[data-disabled],
 .tabs__trigger[data-disabled]:hover
@@ -67,25 +82,40 @@ h1
   padding: 16px
 
 .table
-  width: 100%
+  width: 90%
   border-collapse: collapse
   margin: 2rem
 
   th, td
-    border: 1px solid vars.$tableBorderColor
+    // border: 1px solid vars.$tableBorderColor
     padding: 0.75rem
     text-align: left
-    font-size: 1.1rem
-
-  td:nth-child(1)
-    width: 12rem
-
-  td:nth-child(3)
-    width: 9rem
+    font-size: 1rem
 
   th
     background-color: vars.$tableHeaderBackground
-    color: white
+    color: vars.$textColor
+    padding: 1rem
+
+  th:nth-child(1)
+    text-align: center
+    border-radius: 1rem 0 0 0
+
+  th:nth-child(3)
+    border-radius: 0 1rem 0 0
+
+  td
+    background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
+
+  td:nth-child(1)
+    width: 10rem
+    text-align: center
+
+  td:nth-child(3)
+    width: 8.75rem
+
+  tbody tr:nth-child(even) 
+    background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)
 
 .modal
   font-weight: 500
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index c11faaf..83570d5 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -8,16 +8,24 @@ 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
 
 export default () => {
-  const [updatedList, setUpdatedList] = createSignal<string[]>([])
   const [totalOp, setTotalOp] = createSignal(0)
   const [assessor, setAssessor] = createSignal('')
-  const [approver, setApprover] = createSignal('')
   const [dateOp, setDateOp] = createSignal('')
-  const [client, setClient] = createSignal('')
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
+  const [applicationId, setApplicationId] = createSignal(0)
+  const [assessorId, setAssessorId] = createSignal(0)
+
+  const [gflgu, setGflgu] = createSignal<number[]>([])
+  const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
+  const [tfbo, setTfbo] = createSignal<number[]>([])
+
+  const [descriptionList, setDescriptionList] = createSignal<string[]>([])
+  const [amountList, setAmountList] = createSignal<string[]>([])
+  const [dateOpList, setDateOpList] = createSignal<string[]>([])
 
   const [applicationList, setApplicationList] = createSignal<string[]>([])
   const [nameList, setNameList] = createSignal<string[]>([])
@@ -41,9 +49,16 @@ export default () => {
     setAssessor(op.result7[0])
     setLocation(op.result5[0])
     setType(op.result6[0])
-    setDateOp(dayjs(op.result5[0]).format('MMMM DD, YYYY'))
-    setClient(displayFullname(op.result2[0], op.result3[0], op.result4[0]))
+    setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
+    // setClient(displayFullname(op.result2[0], op.result3[0], op.result4[0]))
+    setApplicationId(op.result11[0])
+    setAssessorId(op.result12[0])
     setTotalOp(calculateTotal(op.result9))
+
+    setDescriptionList(op.result8)
+    setAmountList(op.result9)
+    setDateOpList(op.result10)
+    calculateAmounts()
   }
 
   const calculateTotal = (list: number[]) => {
@@ -51,18 +66,55 @@ export default () => {
     return total
   }
 
-  const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
-    let result
-    if (firstname.length > 0) {
-      if (middleinitial.length > 0) {
-        result = `${firstname} ${middleinitial}. ${lastname}`
-      } else {
-        result = `${firstname} ${lastname}`
-      }
-    } else {
-      result = lastname
+  // const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
+  //   let result
+  //   if (firstname.length > 0) {
+  //     if (middleinitial.length > 0) {
+  //       result = `${firstname} ${middleinitial}. ${lastname}`
+  //     } else {
+  //       result = `${firstname} ${lastname}`
+  //     }
+  //   } else {
+  //     result = lastname
+  //   }
+  //   return result
+  // }
+
+  const approveHandler = async () => {
+    const today = new Date()
+    const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
+
+    for (let i = 0; i < applicationList().length; i++) {
+      await ofetch(API + 'post-newstatus-electrical', {
+        method: 'POST',
+        body: { data: applicationId(), data2: formattedDate, data3: ID, data4: descriptionList()[i], data5: 'json' },
+      })
     }
-    return result
+  }
+
+  const calculateAmounts = () => {
+    const amounts: string[] = amountList()
+    let gflguList: number[] = []
+    let gfdpwhList: number[] = []
+    let tfboList: number[] = []
+
+    for (let i = 0; i < amounts.length; i++) {
+      const gflgu = parseFloat(amounts[i]) * 0.8
+      const gfdpwh = parseFloat(amounts[i]) * 0.05
+      const tfbo = parseFloat(amounts[i]) * 0.15
+
+      const roundedGflgu = parseFloat(gflgu.toFixed(2))
+      const roundedGfdpwh = parseFloat(gfdpwh.toFixed(2))
+      const roundedTfbo = parseFloat(tfbo.toFixed(2))
+
+      gflguList.push(roundedGflgu)
+      gfdpwhList.push(roundedGfdpwh)
+      tfboList.push(roundedTfbo)
+    }
+
+    setGflgu(gflguList)
+    setGfdpwh(gfdpwhList)
+    setTfbo(tfboList)
   }
 
   onMount(async () => {
@@ -90,18 +142,21 @@ export default () => {
           </Row>
           <Row content="center">
             <Tabs aria-label="Main navigation" class="tabs">
-              <Tabs.List class="tabs__list">
-                <Tabs.Trigger class="tabs__trigger" value="building">
-                  Building
-                </Tabs.Trigger>
-                <Tabs.Trigger class="tabs__trigger" value="occupancy">
-                  Occupancy
-                </Tabs.Trigger>
-                <Tabs.Trigger class="tabs__trigger" value="electrical">
-                  Electrical
-                </Tabs.Trigger>
-                <Tabs.Indicator class="tabs__indicator" />
-              </Tabs.List>
+              <Row>
+                <Tabs.List class="tabs__list">
+                  <Tabs.Trigger class="tabs__trigger" value="building">
+                    Building
+                  </Tabs.Trigger>
+                  <Tabs.Trigger class="tabs__trigger" value="occupancy">
+                    Occupancy
+                  </Tabs.Trigger>
+                  <Tabs.Trigger class="tabs__trigger" value="electrical">
+                    Electrical
+                  </Tabs.Trigger>
+                  <Tabs.Indicator class="tabs__indicator" />
+                </Tabs.List>
+              </Row>
+
               <Tabs.Content class="tabs__content" value="building">
                 <Row>
                   <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
@@ -116,72 +171,81 @@ export default () => {
                 <Row>
                   <h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
                 </Row>
-                <table class="table">
-                  <thead>
-                    <tr>
-                      <th>Application Number</th>
-                      <th>Name</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {applicationList().map((item, index) => (
+
+                <Row>
+                  <table class="table">
+                    <thead>
                       <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(item)
-                            }}
-                          >
-                            <Padding top={0} left={2} right={2} bottom={0}>
-                              <Box curved thickness={1} padding="1rem">
-                                <span class="modal__application-number">{item}</span>
-                              </Box>
-                              <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">Total Fee:</span>
-                                <span class="modal__row__detail__price">
-                                  {PESO} {totalOp().toFixed(2)}
-                                </span>
-                              </section>
-
-                              <Row gap={12} padding="2rem 0 0 0">
-                                <Button label="Disapprove" edges="curved" design="bo-danger"></Button>
-                                <Button label="Approve" edges="curved" design="bo-primary"></Button>
-                              </Row>
-                            </Padding>
-                          </ModalButton>
-                        </td>
+                        <th>Application Number</th>
+                        <th>Name</th>
+                        <th style="text-align: center">Show Details</th>
                       </tr>
-                    ))}
-                  </tbody>
-                </table>
+                    </thead>
+                    <tbody>
+                      {applicationList().map((item, index) => (
+                        <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(item)
+                              }}
+                            >
+                              <Padding top={0} left={2} right={2} bottom={0}>
+                                <Box curved thickness={1} padding="1rem">
+                                  <span class="modal__application-number">{item}</span>
+                                </Box>
+                                <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().toFixed(2)}
+                                  </span>
+                                </section>
+
+                                <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>
+                                </Row>
+                              </Padding>
+                            </ModalButton>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </Row>
               </Tabs.Content>
             </Tabs>
           </Row>