diff --git a/src/pages/MainPage/Main.sass b/src/pages/MainPage/Main.sass
index 9ef822f..06e6db8 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -121,17 +121,17 @@ h1
   font-weight: 500
 
   &__application-number
-    padding: 1rem
-    // border: 1px solid #5882abdb
+    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
     font-size: 1rem
@@ -163,3 +163,8 @@ h1
     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 a7865a0..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()
   })
@@ -252,6 +269,7 @@ export default () => {
                             >
                               <Padding top={0} left={2} right={2} bottom={0}>
                                 <span class="modal__application-number">{item}</span>
+
                                 <Padding top={1} left={0} right={0} bottom={0}>
                                   <section class="modal__row">
                                     <span class="modal__row__label">Name of Applicant:</span>
@@ -287,7 +305,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={approveHandler}></Button>
+                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
                                   <span class="modal__cancel">To cancel click anywhere</span>
                                 </Row>
                               </Padding>
@@ -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>
     </>
   )
 }