diff --git a/.gitignore b/.gitignore
index a547bf3..198a888 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,10 +7,11 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# dependencies
 node_modules
+
 dist
 dist-ssr
-*.local
 
 # Editor directories and files
 .vscode/*
@@ -22,3 +23,17 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# environment variables
+.env
+
+# jetbrains setting folder
+.idea/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
index dc45db4..46e82d0 100644
--- a/src/layouts/Layout.tsx
+++ b/src/layouts/Layout.tsx
@@ -18,6 +18,10 @@ const routes = [
     path: '/register',
     component: lazy(() => import('../pages/RegisterPage/Register.tsx')),
   },
+  {
+    path: '/login',
+    component: lazy(() => import('../pages/LoginPage/Login.tsx')),
+  },
 ]
 
 render(() => <Router>{routes}</Router>, root!)
diff --git a/src/pages/IndexPage/Index.tsx b/src/pages/IndexPage/Index.tsx
index 2e1f1ff..961f300 100644
--- a/src/pages/IndexPage/Index.tsx
+++ b/src/pages/IndexPage/Index.tsx
@@ -33,7 +33,7 @@ export default () => {
               </Row>
 
               <Row content="left" gap={1}>
-                <Button label="Login" edges="curved" design="bo-link" />
+                <Button label="Login" edges="curved" design="bo-link" to='/login'/>
                 <Button label="Register" edges="curved" design="bo-primary" to="/register" />
               </Row>
             </Row>
diff --git a/src/pages/LoginPage/Login.sass b/src/pages/LoginPage/Login.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/LoginPage/Login.tsx b/src/pages/LoginPage/Login.tsx
new file mode 100644
index 0000000..5d48c95
--- /dev/null
+++ b/src/pages/LoginPage/Login.tsx
@@ -0,0 +1,42 @@
+import './Login.sass'
+import { Logo, Link, Page, Row, Padding, Form, Box } from '../../components'
+import { IoChevronBack } from 'solid-icons/io'
+
+export default () => {
+  return (
+    <>
+      <Page alignment="column">
+        <Padding left={4.75} right={4.75}>
+          <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}>
+            <Row>
+              <Box curved thickness={2} padding={2} color="#2f465cd7">
+                <Row>
+                  <span class="box-title">Login</span>
+                </Row>
+                <Form>
+                  <h4>Role</h4>
+                </Form>
+              </Box>
+            </Row>
+          </Padding>
+        </Padding>
+      </Page>
+    </>
+  )
+}