diff --git a/astro.config.mjs b/astro.config.mjs
new file mode 100644
index 0000000..bd17d8e
--- /dev/null
+++ b/astro.config.mjs
@@ -0,0 +1,30 @@
+// @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 ac5ff10..7153a17 100644
--- a/src/components/Modal/ModalButton.tsx
+++ b/src/components/Modal/ModalButton.tsx
@@ -14,16 +14,12 @@ interface Props {
   width?: number
   wide?: boolean
   class?: string
-  function?: () => Promise<void>
 }
 
 export default (props: Props) => {
   const [isOpen, setIsOpen] = createSignal(false)
 
-  const openHandler = async () => {
-    if (props.function) {
-      await props.function()
-    }
+  const openHandler = () => {
     setIsOpen(true)
   }
 
@@ -36,7 +32,6 @@ 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 e3a9cc8..787c898 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -116,7 +116,3 @@ 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 49b7943..f87ef00 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -18,43 +18,40 @@ export default () => {
   const [client, setClient] = createSignal('')
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
-
-  const [applicationList, setApplicationList] = createSignal<string[]>([])
-  const [nameList, setNameList] = createSignal<string[]>([])
+  const [applicationNo, setApplicationNo] = createSignal('')
 
   const getListForApproval = async () => {
     try {
       const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
-      setApplicationList(response.result)
-      setNameList(response.result2)
+      return response.result
     } 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()
@@ -62,11 +59,12 @@ export default () => {
     // await getApplicationById(listOfReadyForApprovalFiltered)
 
     // console.log(listOfReadyForApprovalFiltered)
-    await getListForApproval()
+    await getopdetails()
   }
 
-  const getopdetails = async (applicationNo: string) => {
-    const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
+  const getopdetails = async () => {
+    const op = await ofetch(API + 'get-opdetails-electrical/23512', { parseResponse: JSON.parse })
+    setApplicationNo(op.result[0])
     setAssessor(op.result7[0])
     setLocation(op.result5[0])
     setType(op.result6[0])
@@ -76,10 +74,33 @@ export default () => {
   }
 
   const calculateTotal = (list: number[]) => {
-    const total = list.map((item) => parseFloat(item.toString())).reduce((acc, curr) => acc + curr, 0)
+    let total = 0
+    for (let i = 0; i < list.length; i++) {
+      total += parseInt(list[i].toString())
+    }
     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) {
@@ -153,62 +174,50 @@ export default () => {
                     </tr>
                   </thead>
                   <tbody>
-                    {applicationList().map((item, index) => (
-                      <tr>
-                        <td>{item}</td>
-                        <td>{nameList()[index]}</td>
+                    <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>
 
-                        <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">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">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">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">
+                                {PESO} {totalOp().toFixed(2)}
+                              </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>
-                      </tr>
-                    ))}
+                            <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>
                   </tbody>
                 </table>
               </Tabs.Content>
diff --git a/src/utils/functions/generateFavicon.ts b/src/utils/functions/generateFavicon.ts
deleted file mode 100644
index 48c11a6..0000000
--- a/src/utils/functions/generateFavicon.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// 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
new file mode 100644
index 0000000..4b7924d
--- /dev/null
+++ b/src/utils/js/generateFavicon.js
@@ -0,0 +1,17 @@
+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