diff --git a/src/assets/images/optimized/background.png b/src/assets/images/optimized/background.png
deleted file mode 100644
index e8e5404..0000000
Binary files a/src/assets/images/optimized/background.png and /dev/null differ
diff --git a/src/pages/MainPage/Main.sass b/src/pages/MainPage/Main.sass
index f08c623..06e6db8 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -84,6 +84,7 @@ h1
   width: 90%
   border-collapse: collapse
   margin: 2rem
+  box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
 
   th, td
     // border: 1px solid vars.$tableBorderColor
@@ -120,12 +121,16 @@ h1
   font-weight: 500
 
   &__application-number
+    padding: 1rem 0
+    border-radius: 8px
     font-size: 1.75rem
-    font-weight: 700
+    font-weight: 800
     display: flex
     flex-direction: column
     flex-wrap: wrap
     align-items: center
+    background: #16212C
+    box-shadow: 8px 8px 28px #0d141b, -8px -8px 28px #1f2e3d
 
   &__name
     padding: 1rem 0 0 0
@@ -138,7 +143,11 @@ h1
     justify-content: flex-start
     align-items: flex-start
     gap: 0.5rem
-    padding: 2rem 0 0 0
+    padding: 1.25rem 1rem
+    // box-shadow: 5px 5px 10px #10171f, -5px -5px 10px #1c2b39
+    // border: 1px solid white
+    // border-radius: 8px
+    // margin: 0.5rem
 
     &__label
       font-size: 0.75rem
@@ -149,3 +158,13 @@ h1
       &__price
         font-size: 1.75rem
         font-weight: 700
+
+  &__cancel
+    font-size: 0.75rem
+    padding: 0.5rem 0 0 0
+    font-weight: 400
+
+.approval
+  font-size: 1.75rem
+  font-weight: 700
+  padding: 0.5rem 1rem
\ No newline at end of file
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index b037982..3395366 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -1,11 +1,12 @@
 import './Main.sass'
-import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button } from '../../components/'
+import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column } from '../../components/'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
 import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
 import { checkConnection } from '../../utils/functions'
+import { FaSolidThumbsUp } from 'solid-icons/fa'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
@@ -33,6 +34,8 @@ export default () => {
 
   const [errorMessage, setErrorMessage] = createSignal('')
   const [connected, setConnected] = createSignal(true)
+  const [approved, setApproved] = createSignal(false)
+  const [approvedApplication, setApprovedApplication] = createSignal('')
 
   const getListForApproval = async () => {
     try {
@@ -90,15 +93,24 @@ export default () => {
   //   return result
   // }
 
-  const approveHandler = async () => {
+  const approveHandler = async (application: string) => {
     let signed: boolean = false
     let forprinting: boolean = false
 
-    signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED')
-    if (signed) {
-      forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT')
+    setConnected(await checkConnection())
+    if (connected() === false) {
+      setErrorMessage('No Connection on Server')
+      return
     }
+
+    signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED')
+    if (!signed) return
+
+    forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT')
+
     if (forprinting) {
+      setApprovedApplication(application)
+      setApproved(true)
     }
   }
 
@@ -143,6 +155,11 @@ export default () => {
     setTfbo(tfboList)
   }
 
+  const closeNotification = async () => {
+    setApproved(false)
+    await load()
+  }
+
   onMount(async () => {
     await load()
   })
@@ -251,44 +268,45 @@ export default () => {
                               }}
                             >
                               <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>
+                                <span class="modal__application-number">{item}</span>
 
-                                <section class="modal__row">
-                                  <span class="modal__row__label">Location:</span>
-                                  <span class="modal__row__detail">{location()}</span>
-                                </section>
+                                <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">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">Date Assessed:</span>
-                                  <span class="modal__row__detail">{dateOp().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>
+                                  <section class="modal__row">
+                                    <span class="modal__row__label">Date Assessed:</span>
+                                    <span class="modal__row__detail">{dateOp().toUpperCase()}</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" onClick={approveHandler}></Button>
+                                  <section class="modal__row">
+                                    <span class="modal__row__label">Total Fee:</span>
+                                    <span class="modal__row__detail__price">
+                                      {PESO} {totalOp().toFixed(2)}
+                                    </span>
+                                  </section>
+                                </Padding>
+
+                                <Row padding="2rem 0 0 0">
+                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
+                                  <span class="modal__cancel">To cancel click anywhere</span>
                                 </Row>
                               </Padding>
                             </ModalButton>
@@ -303,6 +321,50 @@ export default () => {
           </Row>
         </Padding>
       </Page>
+
+      <div onClick={() => setApproved(false)}>
+        <Modal trigger={approved()} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
+          <Padding top={1} bottom={1} left={2} right={2}>
+            <Column>
+              <Row gap={4}>
+                <FaSolidThumbsUp size={75} />
+                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
+                  <span class="approval">Approved</span>
+                </Box>
+              </Row>
+              <Row padding="2rem 0 0 0">
+                <h2>{approvedApplication()}</h2>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to proceed</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
+
+      <div onClick={closeNotification}>
+        <Modal trigger={approved()} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
+          <Padding top={1} bottom={1} left={2} right={2}>
+            <Column>
+              <Row gap={4}>
+                <FaSolidThumbsUp size={75} />
+                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
+                  <span class="approval">Approved</span>
+                </Box>
+              </Row>
+              <Row padding="2rem 0 0 0">
+                <h2>{approvedApplication()}</h2>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to proceed</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }