diff --git a/.env b/.env
index 0e603ab..9744809 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,6 @@
 VITE_BACKEND=http://localhost:4320/api/
 # VITE_BACKEND=https://ocboapps.davaocity.gov.ph/esign-server/api/
 # VITE_BACKEND=http://192.168.7.163/server/api/
-
 VITE_HEAD=ARCH. KHASHAYAR L. TOGHYANI
 VITE_PESO=₱
 VITE_HEADID=276
diff --git a/backend/main.go b/backend/main.go
index 99ee6b2..57d8102 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -71,7 +71,7 @@ func connect() {
 
 	router.StaticFile("/", "static/index.html")
 	router.StaticFile("/esign.webp", "static/esign.webp")
-	router.StaticFile("/favicon.ico", "static/favicon.ico")
+	router.StaticFile("/favicon.png", "static/favicon.png")
 
 	// shield := "inquiry"
 
@@ -613,7 +613,7 @@ func connect() {
 			})
 
 		case "check-registered":
-			err := db.QueryRow("SELECT IFNULL(e.esignid, 0) AS result FROM esign e LEFT JOIN employee emp ON e.employeeid = emp.employeeid WHERE emp.employeename = ?", data).Scan(&result)
+			err := db.QueryRow("SELECT IFNULL(esignid, 0) AS result FROM esign WHERE employeeid = ?", data).Scan(&result)
 			if err != nil {
 				if err == sql.ErrNoRows {
 					result = "0"
diff --git a/backend/static/favicon.ico b/backend/static/favicon.ico
deleted file mode 100644
index d51d3c7..0000000
Binary files a/backend/static/favicon.ico and /dev/null differ
diff --git a/backend/static/index.html b/backend/static/index.html
index 3b83a19..63b3b54 100644
--- a/backend/static/index.html
+++ b/backend/static/index.html
@@ -6,7 +6,7 @@
     <meta name="name" content="OCBO e-Sign Server" />
     <meta name="description" content="Backend application for OCBO e-Sign" />
     <meta name="developer" content="Patrick Alvin Alcala" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>OCBO e-Sign Server</title>
     <style>
       body {
diff --git a/src/assets/images/background-mobile.png b/src/assets/images/background-mobile.png
deleted file mode 100644
index d9db44a..0000000
Binary files a/src/assets/images/background-mobile.png and /dev/null differ
diff --git a/src/assets/images/optimized/background-mobile.avif b/src/assets/images/optimized/background-mobile.avif
deleted file mode 100644
index 91310df..0000000
Binary files a/src/assets/images/optimized/background-mobile.avif and /dev/null differ
diff --git a/src/assets/images/optimized/background-mobile.webp b/src/assets/images/optimized/background-mobile.webp
deleted file mode 100644
index 5f5f0cd..0000000
Binary files a/src/assets/images/optimized/background-mobile.webp and /dev/null differ
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index 49247fd..255dd2a 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -8,14 +8,13 @@ interface Props {
   curved?: boolean
   padding?: string
   background?: string
-  width?: string
 }
 
 export default (props: Props) => {
   const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
 
   return (
-    <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding || 0}; background-color: ${props.background || 'none'}; width: ${props.width || 'auto'}`}>
+    <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding || 0}; background-color: ${props.background || 'none'}`}>
       {props.children}
     </section>
   )
diff --git a/src/components/Combobox/Combobox.sass b/src/components/Combobox/Combobox.sass
index 8f1eaf4..edeebd1 100644
--- a/src/components/Combobox/Combobox.sass
+++ b/src/components/Combobox/Combobox.sass
@@ -1,6 +1,7 @@
 .combobox__control
   display: inline-flex
   justify-content: space-between
+  width: 500px
   border-radius: 6px
   font-size: 16px
   line-height: 1
@@ -33,7 +34,7 @@
   width: 40rem
 
   &::placeholder
-    color: #a3bfd9d2
+    color: #517aa2d2
 
 .combobox__trigger
   appearance: none
@@ -70,13 +71,14 @@
   user-select: none
 
 .combobox__content
-  background-color: #0d131af4
+  background-color: #0d131ae0
   backdrop-filter: blur(8px)
   border-radius: 6px
   border: 1px solid hsl(240 6% 90%)
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
   transform-origin: var(--kb-combobox-content-transform-origin)
   animation: contentHide 250ms ease-in forwards
+  color: red
 
   &[data-expanded]
     animation: contentShow 250ms ease-out
@@ -111,7 +113,7 @@
 
   &[data-highlighted]
     outline: none
-    background-color: #37506df4
+    background-color: hsl(200 98% 39%)
     color: white
 
 .combobox__section
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index cb5fcc5..7733c92 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/src/components/Combobox/Combobox.tsx
@@ -8,7 +8,6 @@ interface Props {
   placeholder: string
   value: string
   onChange: (value: string | null) => void
-  width?: string
 }
 
 export default (props: Props) => {
@@ -29,7 +28,7 @@ export default (props: Props) => {
           </Combobox.Item>
         )}
       >
-        <Combobox.Control class="combobox__control" aria-label="Assessors" style={`width: ${props.width || '500px'}`}>
+        <Combobox.Control class="combobox__control" aria-label="Assessors">
           <Combobox.Input class="combobox__input" />
           <Combobox.Trigger class="combobox__trigger">
             <Combobox.Icon class="combobox__icon">
diff --git a/src/index.sass b/src/index.sass
index 4fbf6c4..46459c5 100644
--- a/src/index.sass
+++ b/src/index.sass
@@ -17,12 +17,6 @@
   background-attachment: fixed
   background-size: cover
 
-  @media only screen and (max-width: views.$mobile)
-    background-image: url('/src/assets/images/optimized/background-mobile.avif'), url('/src/assets/images/optimized/background-mobile.webp')
-    min-width: 100vw
-    min-height: 100vh
-    object-fit: fill
-
 .close-text
   padding: 3rem 0 0 0
   font-size: 0.75rem
diff --git a/src/pages/IndexPage/Index.tsx b/src/pages/IndexPage/Index.tsx
index 461a6a8..de94990 100644
--- a/src/pages/IndexPage/Index.tsx
+++ b/src/pages/IndexPage/Index.tsx
@@ -1,7 +1,7 @@
 import './Index.sass'
 import { Button, Page, Padding, Display, Row, Logo, Footer, Copyright, Column, Image, Box } from '../../components'
-import { getApi } from '../../utils/functions'
 import { onMount } from 'solid-js'
+import { ofetch } from 'ofetch'
 import ocboAvif from '../../assets/images/optimized/ocbologo.avif'
 import ocboWebp from '../../assets/images/optimized/ocbologo.webp'
 import patAvif from '../../assets/images/optimized/pat-alcala.avif'
@@ -9,20 +9,36 @@ import patWebp from '../../assets/images/optimized/pat-alcala.webp'
 import pageLogoAvif from '../../assets/images/optimized/esign.avif'
 import pageLogoWebp from '../../assets/images/optimized/esign.webp'
 
+const API = import.meta.env.VITE_BACKEND
 let assessorsNameList: string[]
 let registeredNameList: string[]
 
 export default () => {
   const getAssessors = async () => {
-    const assessors = await getApi('get-list-assessors')
-    assessorsNameList = [...assessors]
+    try {
+      const assessors = await ofetch(API + 'get-list-assessors', { parseResponse: JSON.parse })
+      assessorsNameList = [...assessors.result]
+    } catch (error) {
+      console.error(error)
+    }
     sessionStorage.setItem('assessors', JSON.stringify([...assessorsNameList]))
   }
 
   const getRegistered = async () => {
-    const registered = await getApi('get-list-registered')
-    registeredNameList = [...registered]
+    // let nameList: string[] = []
 
+    try {
+      const registered = await ofetch(API + 'get-list-registered', { parseResponse: JSON.parse })
+
+      // for (let i = 0; i < registered.result.length; i++) {
+      //   const name = await ofetch(API + 'get-employeename/' + registered.result[i], { parseResponse: JSON.parse })
+      //   nameList.push(name.result)
+      // }
+
+      registeredNameList = [...registered.result]
+    } catch (error) {
+      console.error(error)
+    }
     sessionStorage.setItem('registered', JSON.stringify([...registeredNameList]))
   }
 
@@ -143,9 +159,14 @@ export default () => {
 
         <Display mobile>
           <Column>
-            <Logo size={120} />
+            <Logo size={200} />
             <h1>OCBO e-Sign</h1>
-            <span>Please use OCBO e-Sign Mobile Version</span>
+            <Image avif={pageLogoAvif} webp={pageLogoWebp} size={200}></Image>
+
+            <section class="mobile-buttons">
+              <Button wide label="Login" edges="curved" design="bo-primary" to="/login" />
+              <Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
+            </section>
           </Column>
         </Display>
       </Page>
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
index 7f164c5..3c3db1b 100644
--- a/src/pages/LoginPage/Login.tsx
+++ b/src/pages/LoginPage/Login.tsx
@@ -1,13 +1,15 @@
 import './Login.sass'
-import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button, Modal, Column, Display } from '../../components'
+import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button, Modal, Column } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { createSignal, Show, createEffect } from 'solid-js'
+import { ofetch } from 'ofetch'
 import { SHA1, SHA3 } from 'crypto-js'
 import { useNavigate } from '@solidjs/router'
-import { checkConnection, getApi } from '../../utils/functions'
+import { checkConnection } from '../../utils/functions'
 import { _employeeId, _employeeName } from '../../stores/employee'
 
 export default () => {
+  const API = import.meta.env.VITE_BACKEND
   const APPROVERNAME = import.meta.env.VITE_HEAD
   const navigate = useNavigate()
   const assessors = JSON.parse(sessionStorage.getItem('registered')!)
@@ -27,18 +29,18 @@ export default () => {
       return
     }
 
-    const employeeid = await getApi('get-employeeid', name())
-    const dbpassword = await getApi('get-password', employeeid)
+    const employeeid = await ofetch(API + 'get-employeeid/' + name(), { parseResponse: JSON.parse })
+    const dbpassword = await ofetch(API + 'get-password/' + employeeid.result, { parseResponse: JSON.parse })
     const hashPassword = await securePassword()
 
-    if (dbpassword === '0') {
+    if (dbpassword.result === '0') {
       setErrorMessage('Not yet registered. Please proceed to Registration.')
     } else {
       setErrorMessage('Invalid Password, Try again.')
     }
 
-    if (dbpassword === hashPassword) {
-      _employeeId.set(employeeid)
+    if (dbpassword.result === hashPassword) {
+      _employeeId.set(employeeid.result)
       _employeeName.set(name())
       saveEmployee()
       setLoggedin(2)
@@ -81,83 +83,83 @@ export default () => {
   return (
     <>
       <Page alignment="column">
-        <Display desktop tablet>
-          <Padding left={4.75} right={4.75} top={0} bottom={0}>
-            <Row content="split">
-              <Link to="/">
-                <Row content="left" gap={2}>
-                  <Logo size={200} />
-                  <h1>OCBO e-Sign</h1>
-                </Row>
-              </Link>
-
-              <Link to="/">
-                <Row content="right">
-                  <IoChevronBack size={45} />
-                  <span class="back-button-text">Back</span>
-                </Row>
-              </Link>
-            </Row>
-
-            <Padding top={2} left={0} right={0} bottom={0}>
-              <Row>
-                <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
-                  <Row>
-                    <span class="box-title">Login</span>
-                  </Row>
-
-                  <Padding top={2} left={2} right={2} bottom={0}>
-                    <Row>
-                      <Radio data={roles} value={role()} onChange={setRole} gap={10} />
-                    </Row>
-                  </Padding>
-                  <h4>Name</h4>
-                  <Show when={role() !== 'Approver'}>
-                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
-                  </Show>
-                  <Show when={role() === 'Approver'}>
-                    <span class="approver-name">{APPROVERNAME}</span>
-                  </Show>
-                  <h4>Password</h4>
-                  <Input
-                    isPassword
-                    value={password()}
-                    onChange={setPassword}
-                    onKeyDown={(event: KeyboardEvent) => {
-                      if (event.key === 'Enter') login()
-                    }}
-                  />
-
-                  <Padding top={2} left={0} right={0} bottom={0}>
-                    <Show when={password() && name()}>
-                      <Row>
-                        <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
-                      </Row>
-                    </Show>
-
-                    <Show when={!password() && name()}>
-                      <Row>
-                        <span class="required">Required password</span>
-                      </Row>
-                    </Show>
-
-                    <Show when={!password() && !name()}>
-                      <Row>
-                        <span class="required">Required name and password</span>
-                      </Row>
-                    </Show>
-
-                    <Show when={password() && !name()}>
-                      <Row>
-                        <span class="required">Required name</span>
-                      </Row>
-                    </Show>
-                  </Padding>
-                </Box>
+        <Padding left={4.75} right={4.75} top={0} bottom={0}>
+          <Row content="split">
+            <Link to="/">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
               </Row>
-            </Padding>
+            </Link>
+
+            <Link to="/">
+              <Row content="right">
+                <IoChevronBack size={45} />
+                <span class="back-button-text">Back</span>
+              </Row>
+            </Link>
+          </Row>
+
+          <Padding top={2} left={0} right={0} bottom={0}>
+            <Row>
+              <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
+                {/* <section class="box"> */}
+                <Row>
+                  <span class="box-title">Login</span>
+                </Row>
+
+                <Padding top={2} left={2} right={2} bottom={0}>
+                  <Row>
+                    <Radio data={roles} value={role()} onChange={setRole} gap={10} />
+                  </Row>
+                </Padding>
+                <h4>Name</h4>
+                <Show when={role() !== 'Approver'}>
+                  <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
+                </Show>
+                <Show when={role() === 'Approver'}>
+                  <span class="approver-name">{APPROVERNAME}</span>
+                </Show>
+                <h4>Password</h4>
+                <Input
+                  isPassword
+                  value={password()}
+                  onChange={setPassword}
+                  onKeyDown={(event: KeyboardEvent) => {
+                    if (event.key === 'Enter') login()
+                  }}
+                />
+
+                <Padding top={2} left={0} right={0} bottom={0}>
+                  <Show when={password() && name()}>
+                    <Row>
+                      <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
+                    </Row>
+                  </Show>
+
+                  <Show when={!password() && name()}>
+                    <Row>
+                      <span class="required">Required password</span>
+                    </Row>
+                  </Show>
+
+                  <Show when={!password() && !name()}>
+                    <Row>
+                      <span class="required">Required name and password</span>
+                    </Row>
+                  </Show>
+
+                  <Show when={password() && !name()}>
+                    <Row>
+                      <span class="required">Required name</span>
+                    </Row>
+                  </Show>
+                </Padding>
+                {/* </section> */}
+              </Box>
+            </Row>
           </Padding>
-        </Display>
+        </Padding>
       </Page>
 
       <div onClick={navigateToRolePage}>
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index afd92e8..69e161e 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -5,7 +5,7 @@ import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
 import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
-import { checkConnection, getApi, getApiMulti } from '../../utils/functions'
+import { checkConnection, createPdf } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName } from '../../stores/employee'
 import { useNavigate } from '@solidjs/router'
@@ -51,18 +51,22 @@ export default () => {
   const [employeeName, setEmployeeName] = createSignal('')
 
   const getListForApproval = async () => {
-    const responseE = await getApiMulti('get-listopapproval-electrical')
-    setApplicationListElectrical(responseE.result)
-    setNameListElectrical(responseE.result2)
+    try {
+      const responseE = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
+      setApplicationListElectrical(responseE.result)
+      setNameListElectrical(responseE.result2)
 
-    const responseO = await getApiMulti('get-listopapproval-occupancy')
-    setApplicationListOccupancy(responseO.result)
-    setNameListOccupancy(responseO.result2)
+      const responseO = await ofetch(API + 'get-listopapproval-occupancy', { parseResponse: JSON.parse })
+      setApplicationListOccupancy(responseO.result)
+      setNameListOccupancy(responseO.result2)
+    } catch (error) {
+      console.error(error)
+    }
   }
 
   const getListForApprovalElectrical = async () => {
     try {
-      const responseE = await getApiMulti('get-listopapproval-electrical')
+      const responseE = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
       setApplicationListElectrical(responseE.result)
       setNameListElectrical(responseE.result2)
     } catch (error) {
@@ -72,7 +76,7 @@ export default () => {
 
   const getListForApprovalOccupancy = async () => {
     try {
-      const responseO = await getApiMulti('get-listopapproval-occupancy')
+      const responseO = await ofetch(API + 'get-listopapproval-occupancy', { parseResponse: JSON.parse })
       setApplicationListOccupancy(responseO.result)
       setNameListOccupancy(responseO.result2)
     } catch (error) {
@@ -99,7 +103,7 @@ export default () => {
 
   const getopdetails = async (division: string, applicationNo: string) => {
     if (division === 'electrical') {
-      const op = await getApiMulti('get-opdetails-electrical', applicationNo)
+      const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
       setAssessor(op.result7[0])
       setLocation(op.result5[0])
       setType(op.result6[0])
@@ -107,7 +111,7 @@ export default () => {
       setApplicationId(op.result11[0])
       setTotalOp(calculateTotal(op.result9))
     } else if (division === 'occupancy') {
-      const op = await getApiMulti('get-opdetails-occupancy', applicationNo)
+      const op = await ofetch(API + 'get-opdetails-occupancy/' + applicationNo, { parseResponse: JSON.parse })
       setAssessor(op.result7[0])
       setLocation(op.result5[0])
       setType(op.result6[0])
@@ -122,36 +126,7 @@ export default () => {
     return total
   }
 
-  // const approveHandler = async (application: string) => {
-  //   let signed: boolean = false
-  //   let forprinting: boolean = false
-  //   let updateOrderofpayment: boolean = false
-
-  //   setConnected(await checkConnection())
-  //   if (connected() === false) {
-  //     setErrorMessage('No Connection on Server')
-  //     return
-  //   }
-
-  //   signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
-  //   const approvedid = await getIdByApplication(application)
-  //   updateDocflow(approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
-  //   if (!signed) return
-
-  //   forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
-  //   if (!forprinting) return
-
-  //   updateOrderofpayment = await updateOp()
-
-  //   if (updateOrderofpayment) {
-  //     postTransaction()
-  //     postPops(application)
-  //     setApprovedApplication(application)
-  //     setApproved(true)
-  //   }
-  // }
-
-  const approveHandler = async (division: string, application: string) => {
+  const approveHandler = async (application: string) => {
     let signed: boolean = false
     let forprinting: boolean = false
     let updateOrderofpayment: boolean = false
@@ -162,33 +137,21 @@ export default () => {
       return
     }
 
-    if (division === 'electrical') {
-      signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
-      const approvedid = await getIdByApplication(application)
-      updateDocflow(approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
-      if (!signed) return
+    signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
+    const approvedid = await getIdByApplication(application)
+    updateDocflow(approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
+    if (!signed) return
 
-      forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
-      if (!forprinting) return
+    forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
+    if (!forprinting) return
 
-      updateOrderofpayment = await updateOp()
+    updateOrderofpayment = await updateOp()
 
-      if (updateOrderofpayment) {
-        postTransaction()
-        postPops(division, application)
-        setApprovedApplication(application)
-        setApproved(true)
-      }
-    } else if (division === 'occupancy') {
-      signed = await setNewStatus('OCCUPANCY ORDER OF PAYMENT APPROVED AND SIGNED', '172', 'OCCOPAPPROVEDSIGNED', 1)
-      const approvedid = await getIdByApplication(application)
-      updateDocflow(approvedid, 'FOR OCCUPANCY RECOMMENDING APPROVAL')
-      if (!signed) return
-
-      forprinting = await setNewStatus('APPROVED FOR PRINTING OF BUREAU OF FIRE AND ORDER OF PAYMENT', '23', 'OCORDEROFPAYMENT', 0)
-      if (!forprinting) return
-
-      updateOrderofpayment = await updateOp()
+    if (updateOrderofpayment) {
+      postTransaction()
+      postPops(application)
+      setApprovedApplication(application)
+      setApproved(true)
     }
   }
 
@@ -239,15 +202,10 @@ export default () => {
   //   _assessorid.set(employeeId())
   // }
 
-  const postPops = async (division: string, application: string) => {
-    let response
-
-    if (division === 'electrical') {
-      response = await getApiMulti('get-popsdetails-electrical', application)
-    } else if (division === 'occupancy') {
-      response = await getApiMulti('get-popsdetails-occupancy', application)
-    }
-
+  const postPops = async (application: string) => {
+    const applicationId = await ofetch(API + 'get-idbyapplication-electrical/' + application, { parseResponse: JSON.parse })
+    const response = await ofetch(API + 'get-popsdetails-electrical/' + applicationId.result, { parseResponse: JSON.parse })
+    // const applicationNo = response.result[0]
     const customerid = response.result2[0]
     const customerName = response.result3[0]
     const location = response.result4[0]
@@ -320,8 +278,9 @@ export default () => {
 
   const geteSignId = async () => {
     try {
-      const response = await getApi('get-esignid', ID)
-      return response
+      const response = await ofetch(API + 'get-esignid/' + ID, { parseResponse: JSON.parse })
+      const result = response.result
+      return result
     } catch {
       return 0
     }
@@ -331,7 +290,6 @@ export default () => {
     const id = await geteSignId()
     const today = new Date()
     const formatedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
-
     await ofetch(API + 'post-esigntransaction', {
       method: 'POST',
       body: { data: parseInt(id), data2: approvedApplication(), data3: formatedDate },
@@ -347,8 +305,9 @@ export default () => {
 
   const getIdByApplication = async (applicationNo: string) => {
     try {
-      const response = await getApi('get-idbyapplication-electrical', applicationNo)
-      return parseInt(response)
+      const response = await ofetch(API + 'get-idbyapplication-electrical/' + applicationNo, { parseResponse: JSON.parse })
+      const result = response.result
+      return parseInt(result)
     } catch {
       return 0
     }
@@ -514,7 +473,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler('occupancy', item)}></Button>
+                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
@@ -601,7 +560,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler('electrical', item)}></Button>
+                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
diff --git a/src/pages/RegisterPage/Register.tsx b/src/pages/RegisterPage/Register.tsx
index 30244eb..4d0d6b3 100644
--- a/src/pages/RegisterPage/Register.tsx
+++ b/src/pages/RegisterPage/Register.tsx
@@ -1,5 +1,5 @@
 import './Register.sass'
-import { Logo, Link, Page, Row, Padding, Combobox, Box, Button, Modal, Column, QR, Input, Display } from '../../components'
+import { Logo, Link, Page, Row, Padding, Combobox, Box, Button, Modal, Column, QR, Input } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { Show, createSignal, createEffect } from 'solid-js'
 import { ofetch } from 'ofetch'
@@ -7,7 +7,6 @@ import { SHA3, SHA1 } from 'crypto-js'
 import dayjs from 'dayjs'
 import { FileField } from '@kobalte/core/file-field'
 import { useNavigate } from '@solidjs/router'
-import { checkConnection, getApi } from '../../utils/functions'
 
 export default () => {
   const API = import.meta.env.VITE_BACKEND
@@ -20,30 +19,31 @@ export default () => {
   const [role, setRole] = createSignal('')
   const [name, setName] = createSignal('')
   const [password, setPassword] = createSignal('')
+  const [hashPassword, setHashPassword] = createSignal('')
+  const [id, setId] = createSignal<number>(0)
   const [signature, setSignature] = createSignal('')
   const [saved, setSaved] = createSignal(false)
   const [file, setFile] = createSignal<File[]>()
   const [base64image, setBase64image] = createSignal('')
   const [allow, setAllow] = createSignal(0)
-  const [connected, setConnected] = createSignal(true)
-  const [errorMessage, setErrorMessage] = createSignal('')
-
-  let globalId = 0
-  let globalHashPassword = ''
 
   const getEmployeeId = async (val: string) => {
-    setName(val)
-    const id = await getApi('get-employeeid', val)
-    globalId = parseInt(id)
-    await checkRegistered(val)
+    try {
+      setName(val)
+      const id = await ofetch(API + 'get-employeeid/' + val, { parseResponse: JSON.parse })
+      setId(parseInt(id.result))
+      await checkRegistered()
+    } catch {
+      setId(0)
+    }
   }
 
   const generateSignature = () => {
     if (role() === 'APPROVER') {
-      globalId = 276
+      setId(276)
       setName(APPROVERNAME)
     }
-    const hash = SHA3(globalId.toString())
+    const hash = SHA3(id().toString())
     setSignature(`Use OCBO e-Sign Validator - scanid=${hash.toString()}`)
 
     try {
@@ -56,12 +56,6 @@ export default () => {
   }
 
   const register = async () => {
-    setConnected(await checkConnection())
-    if (connected() === false) {
-      setErrorMessage('No Connection on Server')
-      return
-    }
-
     await securePassword()
     const blob = new Blob(file())
     const base64 = await convertBase64(blob)
@@ -69,7 +63,7 @@ export default () => {
 
     await ofetch(API + 'post-registration', {
       method: 'POST',
-      body: { data: globalId, data2: globalHashPassword, data3: signature(), data4: base64 },
+      body: { data: id(), data2: hashPassword(), data3: signature(), data4: base64 },
     })
   }
 
@@ -83,7 +77,7 @@ export default () => {
     const firstHashing = SHA1(password())
     const secondHashing = SHA3(firstHashing)
     const thirdHashing = SHA1(secondHashing)
-    globalHashPassword = thirdHashing.toString()
+    setHashPassword(thirdHashing.toString())
   }
 
   const convertBase64 = (blob: Blob) => {
@@ -94,10 +88,12 @@ export default () => {
     })
   }
 
-  const checkRegistered = async (name: string) => {
+  const checkRegistered = async () => {
+    const employeeid = id()
+
     try {
-      const registered = await getApi('check-registered', name)
-      if (registered > 0) {
+      const registered = await ofetch(API + 'check-registered/' + employeeid, { parseResponse: JSON.parse })
+      if (registered.result > 0) {
         setAllow(1)
       } else {
         setAllow(2)
@@ -110,9 +106,13 @@ export default () => {
   const getAssessors = async (): Promise<string[]> => {
     let assessorsNameList: string[] = []
 
-    const assessors = await getApi('get-list-assessors')
-    assessorsNameList = [...assessors]
-    return [...assessorsNameList]
+    try {
+      const assessors = await ofetch(API + 'get-list-assessors', { parseResponse: JSON.parse })
+      assessorsNameList = [...assessors.result]
+      return [...assessorsNameList]
+    } catch {
+      return []
+    }
   }
 
   const updateRegistered = async () => {
@@ -127,8 +127,8 @@ export default () => {
   createEffect(async () => {
     if (role() === 'APPROVER') {
       try {
-        const registered = await getApi('check-registered', APPROVERNAME)
-        if (registered > 0) {
+        const registered = await ofetch(API + 'check-registered/' + 276, { parseResponse: JSON.parse })
+        if (registered.result > 0) {
           setAllow(1)
         } else {
           setAllow(2)
@@ -142,168 +142,166 @@ export default () => {
   return (
     <>
       <Page alignment="column">
-        <Display desktop tablet>
-          <Padding left={4.75} right={4.75} top={0} bottom={0}>
-            <Row content="split">
-              <Link to="/">
-                <Row content="left" gap={2}>
-                  <Logo size={200} />
-                  <h1>OCBO e-Sign</h1>
+        <Padding left={4.75} right={4.75} top={0} bottom={0}>
+          <Row content="split">
+            <Link to="/">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+            </Link>
+
+            <Link to="/">
+              <Row content="right">
+                <IoChevronBack size={45} />
+                <span class="back-button-text">Back</span>
+              </Row>
+            </Link>
+          </Row>
+
+          <Padding top={2} left={0} right={0} bottom={0}>
+            <Row>
+              <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
+                <Row>
+                  <span class="box-title">Registration</span>
                 </Row>
-              </Link>
+                <h4>Role</h4>
+                <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
 
-              <Link to="/">
-                <Row content="right">
-                  <IoChevronBack size={45} />
-                  <span class="back-button-text">Back</span>
-                </Row>
-              </Link>
-            </Row>
-
-            <Padding top={2} left={0} right={0} bottom={0}>
-              <Row>
-                <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
-                  <Row>
-                    <span class="box-title">Registration</span>
-                  </Row>
-                  <h4>Role</h4>
-                  <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
-
-                  <Show when={role() === 'ASSESSOR'}>
-                    <h4>List of Assessors</h4>
-                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={(val) => getEmployeeId(val!)} />
-
-                    <Show when={allow() === 2}>
-                      <h4>Password</h4>
-                      <Input isPassword value={password()} onChange={setPassword}></Input>
-                      <h4>Upload Signature</h4>
-                      <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".jpg, .jpeg, .png, .webp, .avif">
-                        <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
-                        <FileField.HiddenInput />
-                        <FileField.ItemList class="filefield__itemList">
-                          {() => (
-                            <FileField.Item class="filefield__item">
-                              <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
-                              <FileField.ItemName class="filefield__itemName" />
-                              <FileField.ItemSize class="filefield__itemSize" />
-                              <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={() => setFile()}>
-                                Delete
-                              </FileField.ItemDeleteTrigger>
-                            </FileField.Item>
-                          )}
-                        </FileField.ItemList>
-                      </FileField>
-
-                      <Padding top={2} bottom={0} left={0} right={0}>
-                        <Show when={file() && password()}>
-                          <Show when={file() && password() && password().length >= 4}>
-                            <Row>
-                              <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide />
-                            </Row>
-                          </Show>
-
-                          <Show when={file() && password() && password().length < 4}>
-                            <Row>
-                              <span class="already-registered">Password too short</span>
-                            </Row>
-                          </Show>
-                        </Show>
-
-                        <Show when={!file() && !password()}>
-                          <Row>
-                            <span class="already-registered">Required password and signature</span>
-                          </Row>
-                        </Show>
-
-                        <Show when={file() && !password()}>
-                          <Row>
-                            <span class="already-registered">Required password</span>
-                          </Row>
-                        </Show>
-
-                        <Show when={!file() && password()}>
-                          <Row>
-                            <span class="already-registered">Required signature</span>
-                          </Row>
-                        </Show>
-                      </Padding>
-                    </Show>
-
-                    <Show when={allow() === 1}>
-                      <Padding top={2} bottom={0} left={0} right={0}>
-                        <Row>
-                          <span class="already-registered">Already Registered</span>
-                        </Row>
-                      </Padding>
-                    </Show>
-                  </Show>
-
-                  <Show when={role() === 'APPROVER'}>
-                    <h4>Name of Approver</h4>
-                    <span class="approver-name">{APPROVERNAME}</span>
+                <Show when={role() === 'ASSESSOR'}>
+                  <h4>List of Assessors</h4>
+                  <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={(val) => getEmployeeId(val!)} />
 
+                  <Show when={allow() === 2}>
                     <h4>Password</h4>
                     <Input isPassword value={password()} onChange={setPassword}></Input>
+                    <h4>Upload Signature</h4>
+                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".jpg, .jpeg, .png, .webp, .avif">
+                      <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
+                      <FileField.HiddenInput />
+                      <FileField.ItemList class="filefield__itemList">
+                        {() => (
+                          <FileField.Item class="filefield__item">
+                            <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
+                            <FileField.ItemName class="filefield__itemName" />
+                            <FileField.ItemSize class="filefield__itemSize" />
+                            <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={() => setFile()}>
+                              Delete
+                            </FileField.ItemDeleteTrigger>
+                          </FileField.Item>
+                        )}
+                      </FileField.ItemList>
+                    </FileField>
 
-                    <Show when={allow() === 2}>
-                      <h4>Upload Signature</h4>
-                      <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".png">
-                        <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
-                        <FileField.HiddenInput />
-                        <FileField.ItemList class="filefield__itemList">
-                          {() => (
-                            <FileField.Item class="filefield__item">
-                              <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
-                              <FileField.ItemName class="filefield__itemName" />
-                              <FileField.ItemSize class="filefield__itemSize" />
-                              <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={() => setFile()}>
-                                Delete
-                              </FileField.ItemDeleteTrigger>
-                            </FileField.Item>
-                          )}
-                        </FileField.ItemList>
-                      </FileField>
-
-                      <Padding top={2} bottom={0} left={0} right={0}>
-                        <Show when={file() && password()}>
+                    <Padding top={2} bottom={0} left={0} right={0}>
+                      <Show when={file() && password()}>
+                        <Show when={file() && password() && password().length >= 4}>
                           <Row>
                             <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide />
                           </Row>
                         </Show>
 
-                        <Show when={file() && !password()}>
+                        <Show when={file() && password() && password().length < 4}>
                           <Row>
-                            <span class="already-registered">Required password</span>
+                            <span class="already-registered">Password too short</span>
                           </Row>
                         </Show>
+                      </Show>
 
-                        <Show when={!file() && password()}>
-                          <Row>
-                            <span class="already-registered">Required signature</span>
-                          </Row>
-                        </Show>
-
-                        <Show when={!file() && !password()}>
-                          <Row>
-                            <span class="already-registered">Required password and signature</span>
-                          </Row>
-                        </Show>
-                      </Padding>
-                    </Show>
-
-                    <Show when={allow() === 1}>
-                      <Padding top={2} bottom={0} left={0} right={0}>
+                      <Show when={!file() && !password()}>
                         <Row>
-                          <span class="already-registered">Already Registered</span>
+                          <span class="already-registered">Required password and signature</span>
                         </Row>
-                      </Padding>
-                    </Show>
+                      </Show>
+
+                      <Show when={file() && !password()}>
+                        <Row>
+                          <span class="already-registered">Required password</span>
+                        </Row>
+                      </Show>
+
+                      <Show when={!file() && password()}>
+                        <Row>
+                          <span class="already-registered">Required signature</span>
+                        </Row>
+                      </Show>
+                    </Padding>
                   </Show>
-                </Box>
-              </Row>
-            </Padding>
+
+                  <Show when={allow() === 1}>
+                    <Padding top={2} bottom={0} left={0} right={0}>
+                      <Row>
+                        <span class="already-registered">Already Registered</span>
+                      </Row>
+                    </Padding>
+                  </Show>
+                </Show>
+
+                <Show when={role() === 'APPROVER'}>
+                  <h4>Name of Approver</h4>
+                  <span class="approver-name">{APPROVERNAME}</span>
+
+                  <h4>Password</h4>
+                  <Input isPassword value={password()} onChange={setPassword}></Input>
+
+                  <Show when={allow() === 2}>
+                    <h4>Upload Signature</h4>
+                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".png">
+                      <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
+                      <FileField.HiddenInput />
+                      <FileField.ItemList class="filefield__itemList">
+                        {() => (
+                          <FileField.Item class="filefield__item">
+                            <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
+                            <FileField.ItemName class="filefield__itemName" />
+                            <FileField.ItemSize class="filefield__itemSize" />
+                            <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={() => setFile()}>
+                              Delete
+                            </FileField.ItemDeleteTrigger>
+                          </FileField.Item>
+                        )}
+                      </FileField.ItemList>
+                    </FileField>
+
+                    <Padding top={2} bottom={0} left={0} right={0}>
+                      <Show when={file() && password()}>
+                        <Row>
+                          <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide />
+                        </Row>
+                      </Show>
+
+                      <Show when={file() && !password()}>
+                        <Row>
+                          <span class="already-registered">Required password</span>
+                        </Row>
+                      </Show>
+
+                      <Show when={!file() && password()}>
+                        <Row>
+                          <span class="already-registered">Required signature</span>
+                        </Row>
+                      </Show>
+
+                      <Show when={!file() && !password()}>
+                        <Row>
+                          <span class="already-registered">Required password and signature</span>
+                        </Row>
+                      </Show>
+                    </Padding>
+                  </Show>
+
+                  <Show when={allow() === 1}>
+                    <Padding top={2} bottom={0} left={0} right={0}>
+                      <Row>
+                        <span class="already-registered">Already Registered</span>
+                      </Row>
+                    </Padding>
+                  </Show>
+                </Show>
+              </Box>
+            </Row>
           </Padding>
-        </Display>
+        </Padding>
       </Page>
 
       <div onClick={gotoIndex}>
@@ -338,28 +336,6 @@ export default () => {
           </Padding>
         </Modal>
       </div>
-
-      <div onClick={() => setConnected(true)}>
-        <Modal trigger={connected() === false} background="#562020ff" color="#ffebebe6" opacity={0.8}>
-          <Padding top={1} bottom={1} left={4} right={4}>
-            <Column>
-              <Row>
-                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
-                  <h2>Connection Error</h2>
-                </Box>
-              </Row>
-
-              <Row>
-                <h3>{errorMessage()}</h3>
-              </Row>
-
-              <Row>
-                <span class="close-text">Click anywhere to close</span>
-              </Row>
-            </Column>
-          </Padding>
-        </Modal>
-      </div>
     </>
   )
 }
diff --git a/src/utils/db/supabase.js b/src/utils/db/supabase.js
new file mode 100644
index 0000000..46d1bfd
--- /dev/null
+++ b/src/utils/db/supabase.js
@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = import.meta.env.SUPABASE_URL
+const supabaseKey = import.meta.env.SUPABASE_KEY
+
+export const supabase = createClient(supabaseUrl, supabaseKey)
diff --git a/src/utils/functions/getApi.ts b/src/utils/functions/getApi.ts
index 30b4523..0211fa1 100644
--- a/src/utils/functions/getApi.ts
+++ b/src/utils/functions/getApi.ts
@@ -2,17 +2,12 @@ import { ofetch } from 'ofetch'
 
 const API = import.meta.env.VITE_BACKEND
 
-export default async (api: string, value?: any) => {
+export default async (api: string) => {
   try {
-    let fetch
-    if (!value) {
-      fetch = await ofetch(API + api, { parseResponse: JSON.parse })
-    } else {
-      fetch = await ofetch(API + `${api}/${value}`, { parseResponse: JSON.parse })
-    }
+    const fetch = await ofetch(API + api)
     const result = fetch.result
     return result
   } catch {
-    return []
+    return false
   }
 }
diff --git a/src/utils/functions/getApiMulti.ts b/src/utils/functions/getApiMulti.ts
deleted file mode 100644
index 69d1b3e..0000000
--- a/src/utils/functions/getApiMulti.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ofetch } from 'ofetch'
-
-const API = import.meta.env.VITE_BACKEND
-
-export default async (api: string, value?: any) => {
-  let fetch
-  try {
-    if (!value) {
-      fetch = await ofetch(API + api, { parseResponse: JSON.parse })
-    } else {
-      fetch = await ofetch(API + `${api}/${value}`, { parseResponse: JSON.parse })
-    }
-
-    return fetch
-  } catch {
-    return {}
-  }
-}
diff --git a/src/utils/functions/getMultiApi.ts b/src/utils/functions/getMultiApi.ts
new file mode 100644
index 0000000..695b81a
--- /dev/null
+++ b/src/utils/functions/getMultiApi.ts
@@ -0,0 +1,22 @@
+import { ofetch } from 'ofetch'
+
+const API = import.meta.env.VITE_BACKEND
+
+export default async (api: string) => {
+  try {
+    const fetchResponse = await ofetch(API + api)
+
+    const resultObject: Record<string, any> = {}
+
+    for (let i = 1; i <= 10; i++) {
+      const propertyName = `result${i}`
+      if (fetchResponse.hasOwnProperty(propertyName)) {
+        resultObject[propertyName] = fetchResponse[propertyName]
+      }
+    }
+
+    return resultObject
+  } catch {
+    return false
+  }
+}
diff --git a/src/utils/functions/index.ts b/src/utils/functions/index.ts
index d78b458..70ecba6 100644
--- a/src/utils/functions/index.ts
+++ b/src/utils/functions/index.ts
@@ -2,5 +2,4 @@ export { default as checkConnection } from './checkConnection'
 export { default as createPdf } from './createPdf'
 export { default as postApi } from './postApi'
 export { default as getApi } from './getApi'
-export { default as getApiMulti } from './getApiMulti'
 // export { default as generateFavicon } from './generateFavicon'