diff --git a/src/pages/LoginPage/Login.sass b/src/pages/LoginPage/Login.sass
index e69de29..18216fd 100644
--- a/src/pages/LoginPage/Login.sass
+++ b/src/pages/LoginPage/Login.sass
@@ -0,0 +1,6 @@
+.box-title
+  font-size: 1.75rem
+  font-weight: 700
+
+.approver-name
+  font-size: 1.25rem
\ No newline at end of file
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
index 7bf8b10..dbe55dd 100644
--- a/src/pages/LoginPage/Login.tsx
+++ b/src/pages/LoginPage/Login.tsx
@@ -1,42 +1,101 @@
 import './Login.sass'
-import { Logo, Link, Page, Row, Padding, Form, Box } from '../../components'
+import { Logo, Link, Page, Row, Padding, Form, Box, Radio, Combobox, Input, Button, Modal } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
+import { createSignal, Show } from 'solid-js'
+import { ofetch } from 'ofetch'
+import { SHA1, SHA3 } from 'crypto-js'
+import { useNavigate } from '@solidjs/router'
 
 export default () => {
+  const API = import.meta.env.VITE_BACKEND
+  const APPROVERNAME = import.meta.env.VITE_HEAD
+  const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
+  const roles = ['Assessor', 'Approver']
+
+  const [role, setRole] = createSignal('')
+  const [name, setName] = createSignal('')
+  const [password, setPassword] = createSignal('')
+  const [matched, setMatched] = createSignal(false)
+
+  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()
+
+    console.log('dbpassword', dbpassword.result)
+    console.log('hashPassword', hashPassword)
+    console.log(dbpassword.result === hashPassword)
+
+    if (dbpassword.result === hashPassword) {
+      setMatched(true)
+      navigate('/')
+    }
+  }
+
+  const securePassword = async () => {
+    const firstHashing = SHA1(password())
+    const secondHashing = SHA3(firstHashing)
+    const thirdHashing = SHA1(secondHashing)
+
+    return thirdHashing.toString()
+  }
+
   return (
     <>
       <Page alignment="column">
-        <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} color="#2f465cd7">
-                <Row>
-                  <span class="box-title">Login</span>
-                </Row>
-                <Form>
-                  <h4>Role</h4>
-                </Form>
-              </Box>
+        <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} color="#2f465cd7" background="#04040642">
+              <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 value={password()} onChange={setPassword}></Input>
+
+              <Padding top={2} left={0} right={0} bottom={0}>
+                <Row>
+                  <Button edges="curved" design="bo-primary" label="Login" wide onClick={login}></Button>
+                </Row>
+              </Padding>
+            </Box>
+          </Row>
         </Padding>
       </Page>
+
+      <Modal trigger={matched()} background="#ffffffff" color="#000000e4" opacity={0.5}>
+        <h1>1</h1>
+      </Modal>
     </>
   )
 }