diff --git a/backend/main.go b/backend/main.go
index 8757460..5b692b6 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -158,6 +158,26 @@ func connect() {
 				"result2": array2,
 			})
 
+		case "get-list-registered":
+			array := []string{}
+
+			results, err := db.Query("SELECT IFNULL(employeeid, 0) AS result FROM esign WHERE employeeid <> ?", 276)
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+			}
+			for results.Next() {
+				err = results.Scan(&result)
+				if err != nil {
+					c.AbortWithError(http.StatusBadRequest, err)
+					c.String(http.StatusBadRequest, err.Error())
+				}
+				array = append(array, result)
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result": array,
+			})
+
 		}
 	})
 
@@ -466,7 +486,7 @@ func connect() {
 				"result": result,
 			})
 
-      case "get-password":
+		case "get-password":
 			err := db.QueryRow("SELECT IFNULL(password, '') AS result FROM esign WHERE employeeid = ?", data).Scan(&result)
 			if err != nil {
 				if err == sql.ErrNoRows {
@@ -480,6 +500,17 @@ func connect() {
 			c.JSON(http.StatusOK, gin.H{
 				"result": result,
 			})
+
+    case "get-employeename":
+			err := db.QueryRow("SELECT IFNULL(employeename, '') AS result FROM employee WHERE employeeid = ?", data).Scan(&result)
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result": result,
+			})
+
 		}
 	})
 
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index a695cab..c91b46c 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -7,24 +7,27 @@ interface Props {
   color?: string
   border?: string
   opacity?: number
+  trigger: boolean
 }
 
 export default (props: Props) => {
   return (
     <>
-      <div class="modal">
-        <Show when={props.border}>
-          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}>
-            {props.children}
-          </div>
-        </Show>
+      <Show when={props.trigger}>
+        <div class="modal">
+          <Show when={props.border}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}>
+              {props.children}
+            </div>
+          </Show>
 
-        <Show when={!props.border}>
-          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
-            {props.children}
-          </div>
-        </Show>
-      </div>
+          <Show when={!props.border}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+              {props.children}
+            </div>
+          </Show>
+        </div>
+      </Show>
     </>
   )
 }
diff --git a/src/index.sass b/src/index.sass
index 65b2f13..329dc78 100644
--- a/src/index.sass
+++ b/src/index.sass
@@ -15,6 +15,11 @@
   z-index: -1
   opacity: 1
 
+.close-text
+  padding: 3rem 0 0 0
+  font-size: 0.75rem
+  font-weight: 500
+
 .inter
   @extend .body
   font-family: fonts.$Inter
diff --git a/src/pages/IndexPage/Index.tsx b/src/pages/IndexPage/Index.tsx
index 208f9bb..f97052b 100644
--- a/src/pages/IndexPage/Index.tsx
+++ b/src/pages/IndexPage/Index.tsx
@@ -1,10 +1,11 @@
 import './Index.sass'
-import { Button, Page, Padding, Display, Row, Logo, Column, Box } from '../../components'
+import { Button, Page, Padding, Display, Row, Logo } from '../../components'
 import { onMount } from 'solid-js'
 import { ofetch } from 'ofetch'
 
 const API = import.meta.env.VITE_BACKEND
 let assessorsNameList: string[]
+let registeredNameList: string[]
 
 export default () => {
   const getAssessors = async () => {
@@ -17,8 +18,27 @@ export default () => {
     sessionStorage.setItem('assessors', JSON.stringify([...assessorsNameList]))
   }
 
+  const getRegistered = async () => {
+    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 = [...nameList]
+    } catch (error) {
+      console.error(error)
+    }
+    sessionStorage.setItem('registered', JSON.stringify([...registeredNameList]))
+  }
+
   onMount(async () => {
     await getAssessors()
+    await getRegistered()
   })
 
   return (
@@ -38,24 +58,6 @@ export default () => {
               </Row>
             </Row>
           </Display>
-
-          <Display mobile>
-            <Column content="center">
-              <Logo size={120} />
-              <h1>OCBO e-Sign</h1>
-
-              <Button label="Register" edges="curved" to="/main" />
-            </Column>
-          </Display>
-
-          <Row content="spaced">
-            <Box thickness={1} curved>
-              <h2>Assessor</h2>
-            </Box>
-            <Box thickness={1} curved>
-              <h2>Approver</h2>
-            </Box>
-          </Row>
         </Padding>
       </Page>
     </>
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
index 2598a44..7f19f1f 100644
--- a/src/pages/LoginPage/Login.tsx
+++ b/src/pages/LoginPage/Login.tsx
@@ -1,5 +1,5 @@
 import './Login.sass'
-import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button } 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'
@@ -9,22 +9,31 @@ import { useNavigate } from '@solidjs/router'
 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')!)
   const roles = ['Assessor', 'Approver']
 
   const [role, setRole] = createSignal('Assessor')
   const [name, setName] = createSignal('')
   const [password, setPassword] = createSignal('')
-
-  const navigate = useNavigate()
+  const [loggedin, setLoggedin] = createSignal(0)
+  const [errorMessage, setErrorMessage] = createSignal('')
 
   const login = async () => {
     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.result === '0') {
+      setErrorMessage('Not yet registered. Please proceed to Registration.')
+    } else {
+      setErrorMessage('Invalid Password, Try again.')
+    }
+
     if (dbpassword.result === hashPassword) {
-      navigate('/notification')
+      setLoggedin(2)
+    } else {
+      setLoggedin(1)
     }
   }
 
@@ -36,6 +45,10 @@ export default () => {
     return thirdHashing.toString()
   }
 
+  const gotoMain = () => {
+    navigate('/main')
+  }
+
   createEffect(() => {
     if (role() === 'Approver') setName(APPROVERNAME)
     else if (role() !== 'Approver' && name() === APPROVERNAME) setName('')
@@ -112,6 +125,46 @@ export default () => {
           </Row>
         </Padding>
       </Page>
+
+      <div onClick={gotoMain}>
+        <Modal trigger={loggedin() === 2} background="#18412aff" color="#ffffffe4" opacity={0.6}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="white" padding={1}>
+                  <h2>Login Successful</h2>
+                </Box>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
+
+      <div onClick={() => setLoggedin(0)}>
+        <Modal trigger={loggedin() === 1} background="#562020ff" color="#ffffffe4" opacity={0.6}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="white" padding={1}>
+                  <h2>Login Failed</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/pages/RegisterPage/Register.sass b/src/pages/RegisterPage/Register.sass
index e4f1a10..7804287 100644
--- a/src/pages/RegisterPage/Register.sass
+++ b/src/pages/RegisterPage/Register.sass
@@ -29,6 +29,11 @@
   width: 100%
   text-align: center
 
+.sub-message
+  padding: 3rem 0 0 0 
+  font-size: 0.75rem
+  font-weight: 500
+
 .filefield
   display: flex
   flex-direction: column
diff --git a/src/pages/RegisterPage/Register.tsx b/src/pages/RegisterPage/Register.tsx
index 72632b2..b1cbda5 100644
--- a/src/pages/RegisterPage/Register.tsx
+++ b/src/pages/RegisterPage/Register.tsx
@@ -6,6 +6,7 @@ import { ofetch } from 'ofetch'
 import { SHA3, SHA1 } from 'crypto-js'
 import dayjs from 'dayjs'
 import { FileField } from '@kobalte/core/file-field'
+import { useNavigate } from '@solidjs/router'
 
 export default () => {
   const API = import.meta.env.VITE_BACKEND
@@ -13,6 +14,8 @@ export default () => {
   const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
   const roles = ['ASSESSOR', 'APPROVER']
 
+  const navigate = useNavigate()
+
   const [role, setRole] = createSignal('')
   const [name, setName] = createSignal('')
   const [password, setPassword] = createSignal('')
@@ -46,6 +49,7 @@ export default () => {
     try {
       register()
       setSaved(true)
+      updateRegistered()
     } catch {
       setSaved(false)
     }
@@ -99,6 +103,27 @@ export default () => {
     }
   }
 
+  const getAssessors = async (): Promise<string[]> => {
+    let assessorsNameList: string[] = []
+
+    try {
+      const assessors = await ofetch(API + 'get-list-assessors', { parseResponse: JSON.parse })
+      assessorsNameList = [...assessors.result]
+      return [...assessorsNameList]
+    } catch {
+      return []
+    }
+  }
+
+  const updateRegistered = async () => {
+    const registered = await getAssessors()
+    sessionStorage.setItem('assessors', JSON.stringify([...registered]))
+  }
+
+  const gotoIndex = () => {
+    navigate('/')
+  }
+
   createEffect(async () => {
     if (role() === 'APPROVER') {
       try {
@@ -210,7 +235,7 @@ export default () => {
 
                   <Show when={allow() === 2}>
                     <h4>Upload Signature</h4>
-                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".jpg, .jpeg, .png, .webp, .avif">
+                    <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">
@@ -256,30 +281,38 @@ export default () => {
         </Padding>
       </Page>
 
-      <Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.6}>
-        <Padding top={1} bottom={1} left={4} right={4}>
-          <Column>
-            <Row>
-              <h2>e-Sign Registration Completed</h2>
-            </Row>
-            <Row>
-              <h3>Your Digital Signature</h3>
-            </Row>
+      <div onClick={gotoIndex}>
+        <Modal trigger={saved()} background="#ffffffff" color="#000000e4" opacity={0.6}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="black" padding={1}>
+                  <h2>e-Sign Registration Completed</h2>
+                </Box>
+              </Row>
+              <Row>
+                <h3>Representation of your digital signature</h3>
+              </Row>
 
-            <Row gap={1}>
-              <QR value={signature()} width={10} />
-              <section class="digital-sign-details">
-                <div>
-                  <img class="digital-sign-details__image" src={base64image()} alt="Image of signature" />
-                </div>
-                <span>Digitally signed by:</span>
-                <span>{name()}</span>
-                <span>Date: {getDate()}</span>
-              </section>
-            </Row>
-          </Column>
-        </Padding>
-      </Modal>
+              <Row gap={1}>
+                <QR value={signature()} width={10} />
+                <section class="digital-sign-details">
+                  <div>
+                    <img class="digital-sign-details__image" src={base64image()} alt="Image of signature" />
+                  </div>
+                  <span>Digitally signed by:</span>
+                  <span>{name()}</span>
+                  <span>Date: {getDate()}</span>
+                </section>
+              </Row>
+
+              <Row>
+                <span class="sub-message">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }