diff --git a/backend/main.go b/backend/main.go
index 1590083..b0b0cce 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -717,5 +717,45 @@ func connect() {
 
 	})
 
+	router.POST("/api/update-op-electrical", func(c *gin.Context) {
+		type UpdateOpData struct {
+			Data int `json:"data"`
+		}
+		var updateOpData UpdateOpData
+		if err := c.ShouldBindJSON(&updateOpData); err != nil {
+			c.String(http.StatusBadRequest, "Invalid request body")
+			return
+		}
+
+		c.Writer.Header().Set("X-XSS-Protection", "1; mode=block")
+		c.Writer.Header().Set("X-Content-Type-Options", "nosniff")
+		c.Writer.Header().Set("X-DNS-Prefetch-Control", "off")
+		c.Writer.Header().Set("X-Frame-Options", "DENY")
+		c.Writer.Header().Set("X-Download-Options", "noopen")
+		c.Writer.Header().Set("Referrer-Policy", "no-referrer")
+
+		dbpost, err := db.Prepare("UPDATE electrical_orderofpayment_new SET is_approve = 1 WHERE electricalid = ? AND for_approval = 1 AND is_release = 0 AND is_paid = 0 AND popstransmitted = 0")
+		if err != nil {
+			panic(err.Error())
+		}
+		defer dbpost.Close()
+
+		exec, err := dbpost.Exec(updateOpData.Data)
+		if err != nil {
+			panic(err.Error())
+		}
+
+		affect, err := exec.RowsAffected()
+		if err != nil {
+			panic(err.Error())
+		}
+
+		if affect > 0 {
+			c.String(http.StatusOK, "Success on Updating Order of Payment")
+		} else {
+			c.String(http.StatusInternalServerError, "Failed on Updating Order of Payment")
+		}
+	})
+
 	router.Run(":4320")
 }
diff --git a/src/assets/images/esign.png b/src/assets/images/esign.png
new file mode 100644
index 0000000..ce781c6
Binary files /dev/null and b/src/assets/images/esign.png differ
diff --git a/src/assets/images/optimized/esign.avif b/src/assets/images/optimized/esign.avif
new file mode 100644
index 0000000..6f8de2d
Binary files /dev/null and b/src/assets/images/optimized/esign.avif differ
diff --git a/src/assets/images/optimized/esign.webp b/src/assets/images/optimized/esign.webp
new file mode 100644
index 0000000..8932145
Binary files /dev/null and b/src/assets/images/optimized/esign.webp differ
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index 021edb7..588505d 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -98,6 +98,7 @@ export default () => {
   const approveHandler = async (application: string) => {
     let signed: boolean = false
     let forprinting: boolean = false
+    let updateOrderofpayment: boolean = false
 
     setConnected(await checkConnection())
     if (connected() === false) {
@@ -109,8 +110,11 @@ export default () => {
     if (!signed) return
 
     forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT')
+    if (!forprinting) return
 
-    if (forprinting) {
+    updateOrderofpayment = await updateOp()
+
+    if (updateOrderofpayment) {
       setApprovedApplication(application)
       setApproved(true)
     }
@@ -132,6 +136,18 @@ export default () => {
     }
   }
 
+  const updateOp = async () => {
+    try {
+      await ofetch(API + 'update-op-electrical', {
+        method: 'POST',
+        body: { data: parseInt(applicationId().toString()) },
+      })
+      return true
+    } catch {
+      return false
+    }
+  }
+
   const calculateAmounts = () => {
     const amounts: string[] = amountList()
     let gflguList: number[] = []
diff --git a/src/utils/functions/displayFullname.ts b/src/utils/functions/displayFullname.ts
new file mode 100644
index 0000000..15ef005
--- /dev/null
+++ b/src/utils/functions/displayFullname.ts
@@ -0,0 +1,13 @@
+export default (firstname: string, middleinitial: string, lastname: string) => {
+  let result
+  if (firstname.length > 0) {
+    if (middleinitial.length > 0) {
+      result = `${firstname} ${middleinitial}. ${lastname}`
+    } else {
+      result = `${firstname} ${lastname}`
+    }
+  } else {
+    result = lastname
+  }
+  return result
+}