diff --git a/src/pages/LoginPage/Login.sass b/src/pages/LoginPage/Login.sass
index 49d9516..47a2250 100644
--- a/src/pages/LoginPage/Login.sass
+++ b/src/pages/LoginPage/Login.sass
@@ -7,7 +7,7 @@
 .approver-name
   font-size: 1.25rem
 
-.required
+.required-login
   padding: 1rem
   border-radius: 8px
   background-color: color.adjust(#0D64E4, $blackness: 20%)
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
index c4d2d0f..a2da05e 100644
--- a/src/pages/LoginPage/Login.tsx
+++ b/src/pages/LoginPage/Login.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from '@solidjs/router'
 import { IoChevronBack } from 'solid-icons/io'
 import { createEffect, createSignal } from 'solid-js'
 import { Show } from 'solid-js/web'
-import { Box, Button, Column, Combobox, Display, Input, Link, Logo, Modal, Padding, Page, Radio, Row } from '../../components'
+import { Box, Button, Column, Combobox, Display, Input, Link, Logo, Modal, Padding, Page, Radio, Row, Switch } from '../../components'
 import { _employeeId, _employeeName } from '../../stores/employee'
 import { checkConnection, getApi, securePassword } from '../../utils/functions'
 import './Login.sass'
@@ -19,6 +19,7 @@ export default () => {
   const [loggedin, setLoggedin] = createSignal(0)
   const [errorMessage, setErrorMessage] = createSignal('')
   const [connected, setConnected] = createSignal(true)
+  const [encryptionVersion, setEncryptionVersion] = createSignal('v1')
 
   const login = async () => {
     setConnected(await checkConnection())
@@ -29,7 +30,7 @@ export default () => {
 
     const employeeid = await getApi('get-employeeid', name())
     const dbpassword = await getApi('get-password', employeeid)
-    const hashPassword = await securePassword(password())
+    const hashPassword = await securePassword(password(), encryptionVersion())
 
     if (dbpassword === '0') {
       setErrorMessage('Not yet registered. Please proceed to Registration.')
@@ -105,6 +106,9 @@ export default () => {
                   <Row>
                     <span class="box-title">Login</span>
                   </Row>
+                  <Row content='right'>
+                    <Switch label={`Enc ${encryptionVersion()}`} checked={encryptionVersion() === 'v1' ? false : true} onChange={() => encryptionVersion() === 'v1' ? setEncryptionVersion('v2') : setEncryptionVersion('v1')} />
+                  </Row>
 
                   <Padding top={2} left={2} right={2} bottom={0}>
                     <Row>
@@ -137,19 +141,19 @@ export default () => {
 
                     <Show when={!password() && name()}>
                       <Row>
-                        <span class="required">Required password</span>
+                        <span class="required-login">Required password</span>
                       </Row>
                     </Show>
 
                     <Show when={!password() && !name()}>
                       <Row>
-                        <span class="required">Required name and password</span>
+                        <span class="required-login">Required name and password</span>
                       </Row>
                     </Show>
 
                     <Show when={password() && !name()}>
                       <Row>
-                        <span class="required">Required name</span>
+                        <span class="required-login">Required name</span>
                       </Row>
                     </Show>
                   </Padding>