diff --git a/astro.config.mjs b/astro.config.mjs
deleted file mode 100644
index bd17d8e..0000000
--- a/astro.config.mjs
+++ /dev/null
@@ -1,30 +0,0 @@
-// @ts-check
-import { defineConfig } from 'astro/config'
-import solidJs from '@astrojs/solid-js'
-import compressor from 'astro-compressor'
-import robotsTxt from '@itsmatteomanf/astro-robots-txt'
-import purgecss from 'astro-purgecss'
-
-export default defineConfig({
-  output: 'static',
-  prefetch: true,
-  integrations: [
-    solidJs(),
-    compressor({ gzip: false, brotli: true }),
-    robotsTxt(),
-    purgecss({
-      fontFace: true,
-      variables: true,
-    }),
-  ],
-  vite: {
-    css: {
-      transformer: 'lightningcss',
-    },
-  },
-  build: {
-    assets: '_fwt',
-    inlineStylesheets: 'never',
-  },
-  site: 'http://localhost:4321',
-})
diff --git a/src/components/Modal/ModalButton.tsx b/src/components/Modal/ModalButton.tsx
index 7153a17..ac5ff10 100644
--- a/src/components/Modal/ModalButton.tsx
+++ b/src/components/Modal/ModalButton.tsx
@@ -14,12 +14,16 @@ interface Props {
   width?: number
   wide?: boolean
   class?: string
+  function?: () => Promise<void>
 }
 
 export default (props: Props) => {
   const [isOpen, setIsOpen] = createSignal(false)
 
-  const openHandler = () => {
+  const openHandler = async () => {
+    if (props.function) {
+      await props.function()
+    }
     setIsOpen(true)
   }
 
@@ -32,6 +36,7 @@ export default (props: Props) => {
       <Show when={!isOpen()}>
         <Button label={props.label} edges={props.edges} design={props.design} onClick={openHandler} />
       </Show>
+
       <Show when={isOpen()}>
         <div class="modal" onClick={closeHandler}>
           <Show when={props.border}>
diff --git a/src/pages/MainPage/Main.sass b/src/pages/MainPage/Main.sass
index 787c898..e3a9cc8 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -116,3 +116,7 @@ h1
 
     &__detail
       font-size: 1rem
+
+      &__price
+        font-size: 1.75rem
+        font-weight: 700
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index f87ef00..49b7943 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -18,40 +18,43 @@ export default () => {
   const [client, setClient] = createSignal('')
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
-  const [applicationNo, setApplicationNo] = createSignal('')
+
+  const [applicationList, setApplicationList] = createSignal<string[]>([])
+  const [nameList, setNameList] = createSignal<string[]>([])
 
   const getListForApproval = async () => {
     try {
       const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
-      return response.result
+      setApplicationList(response.result)
+      setNameList(response.result2)
     } catch (error) {
       console.error(error)
     }
   }
 
-  const getListOfReadyForApprovalFiltered = async (list: number[]) => {
-    let newList: number[] = []
+  // const getListOfReadyForApprovalFiltered = async (list: number[]) => {
+  //   let newList: number[] = []
 
-    for (let i = 0; i < list.length; i++) {
-      const response = await ofetch(API + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
-      if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
-        newList.push(list[i])
-      }
-    }
+  //   for (let i = 0; i < list.length; i++) {
+  //     const response = await ofetch(API + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
+  //     if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
+  //       newList.push(list[i])
+  //     }
+  //   }
 
-    return [...newList]
-  }
+  //   return [...newList]
+  // }
 
-  const getApplicationById = async (list: number[]) => {
-    let applicationList: string[] = []
+  // const getApplicationById = async (list: number[]) => {
+  //   let applicationList: string[] = []
 
-    for (let i = 0; i < list.length; i++) {
-      const response = await ofetch(API + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
-      applicationList.push(response.result)
-    }
+  //   for (let i = 0; i < list.length; i++) {
+  //     const response = await ofetch(API + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
+  //     applicationList.push(response.result)
+  //   }
 
-    setUpdatedList([...applicationList])
-  }
+  //   setUpdatedList([...applicationList])
+  // }
 
   const load = async () => {
     // const listForApproval = await getListForApproval()
@@ -59,12 +62,11 @@ export default () => {
     // await getApplicationById(listOfReadyForApprovalFiltered)
 
     // console.log(listOfReadyForApprovalFiltered)
-    await getopdetails()
+    await getListForApproval()
   }
 
-  const getopdetails = async () => {
-    const op = await ofetch(API + 'get-opdetails-electrical/23512', { parseResponse: JSON.parse })
-    setApplicationNo(op.result[0])
+  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])
@@ -74,33 +76,10 @@ export default () => {
   }
 
   const calculateTotal = (list: number[]) => {
-    let total = 0
-    for (let i = 0; i < list.length; i++) {
-      total += parseInt(list[i].toString())
-    }
+    const total = list.map((item) => parseFloat(item.toString())).reduce((acc, curr) => acc + curr, 0)
     return total
   }
 
-  const getEmployeeName = async (id: string) => {
-    try {
-      const response = await ofetch(API + 'get-employeename/' + id, { parseResponse: JSON.parse })
-      const result = response.result
-      return result
-    } catch {
-      return ''
-    }
-  }
-
-  const getPaymentName = async (id: string) => {
-    try {
-      const response = await ofetch(API + 'get-paymentname/' + id, { parseResponse: JSON.parse })
-      const result = response.result
-      return result
-    } catch {
-      return ''
-    }
-  }
-
   const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
     let result
     if (firstname.length > 0) {
@@ -174,50 +153,62 @@ export default () => {
                     </tr>
                   </thead>
                   <tbody>
-                    <tr>
-                      <td>111</td>
-                      <td>11</td>
-                      <td>
-                        <ModalButton class="modal" label="Show Details" design="bo-link" background="#121e2acc" color="#ffffffec">
-                          <Padding top={0} left={2} right={2} bottom={0}>
-                            <Box curved thickness={1} padding="1rem">
-                              <span class="modal__application-number">{applicationNo()}</span>
-                            </Box>
-                            <section class="modal__row">
-                              <span class="modal__row__label">Name of Applicant:</span>
-                              <span class="modal__row__detail">{client()}</span>
-                            </section>
+                    {applicationList().map((item, index) => (
+                      <tr>
+                        <td>{item}</td>
+                        <td>{nameList()[index]}</td>
 
-                            <section class="modal__row">
-                              <span class="modal__row__label">Location:</span>
-                              <span class="modal__row__detail">{location()}</span>
-                            </section>
+                        <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">Type:</span>
-                              <span class="modal__row__detail">{type().toUpperCase()}</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">Assessed By:</span>
-                              <span class="modal__row__detail">{assessor()}</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">Total Fee:</span>
-                              <span class="modal__row__detail">
-                                {PESO} {totalOp().toFixed(2)}
-                              </span>
-                            </section>
+                              <section class="modal__row">
+                                <span class="modal__row__label">Assessed By:</span>
+                                <span class="modal__row__detail">{assessor()}</span>
+                              </section>
 
-                            <Row gap={1} padding="1rem 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>
-                    </tr>
+                              <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>
+                      </tr>
+                    ))}
                   </tbody>
                 </table>
               </Tabs.Content>
diff --git a/src/utils/functions/generateFavicon.ts b/src/utils/functions/generateFavicon.ts
new file mode 100644
index 0000000..48c11a6
--- /dev/null
+++ b/src/utils/functions/generateFavicon.ts
@@ -0,0 +1,17 @@
+// import sharp from 'sharp'
+
+// import * as path from 'path'
+
+// const generateFavicon = async () => {
+//   const inputSrc = 'src/assets/images/logo.png'
+//   const faviconPath = path.join(__dirname, '../public/favicon.png')
+
+//   try {
+//     await sharp(inputSrc).png({ quality: 90 }).resize(50).toFile(faviconPath)
+//     console.log('Favicon generated successfully')
+//   } catch (error) {
+//     console.error('Error generating favicon:', error)
+//   }
+// }
+
+// export default generateFavicon
diff --git a/src/utils/js/generateFavicon.js b/src/utils/js/generateFavicon.js
deleted file mode 100644
index 4b7924d..0000000
--- a/src/utils/js/generateFavicon.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import sharp from 'sharp'
-
-const path = require('path')
-
-const generateFavicon = async () => {
-  const inputSrc = 'src/assets/images/logo.png'
-  const faviconPath = path.join(__dirname, '../public/favicon.png')
-
-  try {
-    await sharp(inputSrc).png({ quality: 90 }).resize(50).toFile(faviconPath)
-    console.log('Favicon generated successfully')
-  } catch (error) {
-    console.error('Error generating favicon:', error)
-  }
-}
-
-export default generateFavicon