diff --git a/backend/main.go b/backend/main.go
index 5b692b6..8757460 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -158,26 +158,6 @@ 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,
-			})
-
 		}
 	})
 
@@ -486,7 +466,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 {
@@ -500,17 +480,6 @@ 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 c91b46c..a695cab 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -7,27 +7,24 @@ interface Props {
   color?: string
   border?: string
   opacity?: number
-  trigger: boolean
 }
 
 export default (props: Props) => {
   return (
     <>
-      <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>
+      <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>
+        <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>
     </>
   )
 }
diff --git a/src/index.sass b/src/index.sass
index 329dc78..65b2f13 100644
--- a/src/index.sass
+++ b/src/index.sass
@@ -15,11 +15,6 @@
   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 f97052b..208f9bb 100644
--- a/src/pages/IndexPage/Index.tsx
+++ b/src/pages/IndexPage/Index.tsx
@@ -1,11 +1,10 @@
 import './Index.sass'
-import { Button, Page, Padding, Display, Row, Logo } from '../../components'
+import { Button, Page, Padding, Display, Row, Logo, Column, Box } 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 () => {
@@ -18,27 +17,8 @@ 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 (
@@ -58,6 +38,24 @@ 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 7f19f1f..2598a44 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, Modal, Column } from '../../components'
+import { Logo, Link, Page, Row, Padding, Box, Radio, Combobox, Input, Button } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { createSignal, Show, createEffect } from 'solid-js'
 import { ofetch } from 'ofetch'
@@ -9,31 +9,22 @@ 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 [loggedin, setLoggedin] = createSignal(0)
-  const [errorMessage, setErrorMessage] = createSignal('')
+
+  const navigate = useNavigate()
 
   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) {
-      setLoggedin(2)
-    } else {
-      setLoggedin(1)
+      navigate('/notification')
     }
   }
 
@@ -45,10 +36,6 @@ export default () => {
     return thirdHashing.toString()
   }
 
-  const gotoMain = () => {
-    navigate('/main')
-  }
-
   createEffect(() => {
     if (role() === 'Approver') setName(APPROVERNAME)
     else if (role() !== 'Approver' && name() === APPROVERNAME) setName('')
@@ -125,46 +112,6 @@ 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 7804287..e4f1a10 100644
--- a/src/pages/RegisterPage/Register.sass
+++ b/src/pages/RegisterPage/Register.sass
@@ -29,11 +29,6 @@
   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 b1cbda5..72632b2 100644
--- a/src/pages/RegisterPage/Register.tsx
+++ b/src/pages/RegisterPage/Register.tsx
@@ -6,7 +6,6 @@ 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
@@ -14,8 +13,6 @@ 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('')
@@ -49,7 +46,6 @@ export default () => {
     try {
       register()
       setSaved(true)
-      updateRegistered()
     } catch {
       setSaved(false)
     }
@@ -103,27 +99,6 @@ 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 {
@@ -235,7 +210,7 @@ export default () => {
 
                   <Show when={allow() === 2}>
                     <h4>Upload Signature</h4>
-                    <FileField class="filefield" maxFiles={1} onFileAccept={(data) => setFile(data)} accept=".png">
+                    <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">
@@ -281,38 +256,30 @@ export default () => {
         </Padding>
       </Page>
 
-      <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>
+      <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>
 
-              <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>
+            <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>
     </>
   )
 }