diff --git a/src/router/index.ts b/src/router/index.ts
index 88d8c67..e39062d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
 const MainLayout = () => import("@/views/MainLayout.vue");
 const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue");
 const TestPage = () => import("@/modules/01_dashboard/views/test.vue");
+const loginMain = () => import("@/views/login.vue");
 
 import ModuleTransfer from "@/modules/02_transfer/router";
 import ModuleRetire from "@/modules/03_retire/router";
@@ -46,6 +47,7 @@ const router = createRouter({
             Key: [7],
           },
         },
+        
         ...ModuleTransfer,
         ...ModuleRetire,
         ...ModuleCheckin,
@@ -61,6 +63,15 @@ const router = createRouter({
         ...ModulePortfolio,
       ],
     },
+    {
+      path: "/login",
+      name: "loginMain",
+      component: loginMain,
+      meta: {
+        Auth: true,
+        Key: [7],
+      },
+    },
   ],
 });
 
diff --git a/src/style/keycloak-bg.png b/src/style/keycloak-bg.png
new file mode 100644
index 0000000..f6b0837
Binary files /dev/null and b/src/style/keycloak-bg.png differ
diff --git a/src/style/keycloak-logo-poc.png b/src/style/keycloak-logo-poc.png
new file mode 100644
index 0000000..f16aa38
Binary files /dev/null and b/src/style/keycloak-logo-poc.png differ
diff --git a/src/views/login.vue b/src/views/login.vue
new file mode 100644
index 0000000..7917556
--- /dev/null
+++ b/src/views/login.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const username = ref<string>("");
+const password = ref<string>("");
+const holdLogin = ref<boolean>(false);
+function onSubmit() {}
+</script>
+<template>
+  <div class="bg-image">
+    <div class="login-pf-page">
+      <div id="kc-logo">
+        <div id="myimage"></div>
+        <div class="text-logo">
+          ระบบ<span style="color: #02a998">บริหารทรัพยากรบุคคล</span>
+        </div>
+        <div class="subtext-logo">ของกรุงเทพมหานคร</div>
+      </div>
+
+      <div class="card-pf">
+        <div class="login-pf-header">
+          <h1 id="kc-page-title">เข้าใช้งานระบบ</h1>
+        </div>
+        <q-form
+          greedy
+          @submit.prevent
+          @validation-success="onSubmit"
+          style="max-width: 100%; min-width: 30%"
+        >
+          <div class="row">
+            <div class="col-12 form-group">
+              <label
+                for="username"
+                class="pf-c-form__label pf-c-form__label-text"
+                >ชื่อผู้ใช้งาน</label
+              >
+              <q-input
+                v-model="username"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
+              ></q-input>
+            </div>
+            <div class="col-12 form-group">
+              <label
+                for="username"
+                class="pf-c-form__label pf-c-form__label-text"
+                >รหัสผ่าน</label
+              >
+              <q-input
+                v-model="password"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="password"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผ่าน'}`,]"
+              ></q-input>
+            </div>
+            <div class="col-12 form-group">
+              <div class="row justify-between">
+                <div id="kc-form-options">
+                  <div class="row items-center">
+                    <input
+                      tabindex="3"
+                      id="rememberMe"
+                      name="rememberMe"
+                      type="checkbox"
+                    />
+                    <label class=""> ล็อคอินค้างไว้ </label>
+                  </div>
+                </div>
+                <div>
+                  <span
+                    ><a
+                      tabindex="5"
+                      href="/realms/bma-ehr/login-actions/reset-credentials?client_id=bma-ehr-vue3&amp;tab_id=gg77yQ7AeAI"
+                      class="link"
+                      >ลืมรหัสผ่าน</a
+                    ></span
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="col-12">
+              <q-btn
+                unelevated
+                color="teal-5"
+                class="full-width"
+                label="เข้าระบบ"
+                style="font-size: 16px; border-radius: 8px"
+                type="submit"
+              >
+              </q-btn>
+            </div>
+          </div>
+        </q-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.link {
+  text-decoration: none;
+  color: #cc0004;
+}
+
+.link:hover {
+  color: #ff0004;
+  text-decoration: underline;
+}
+.checkbox,
+.radio {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  margin: 1px 3px 0 0;
+  line-height: normal;
+}
+.checkbox label,
+.radio label {
+  min-height: 20px;
+  margin-bottom: 0;
+  font-weight: 400;
+  cursor: pointer;
+}
+.form-group {
+  margin-bottom: 15px;
+}
+#kc-content {
+  width: 100%;
+}
+#kc-content-wrapper {
+  margin-top: 20px;
+}
+#kc-form-options .checkbox {
+  margin-top: 0;
+  color: #72767b;
+}
+#kc-logo {
+  max-width: 25vw;
+  position: absolute;
+  margin-left: 5%;
+  /* margin-top: 5%; */
+  z-index: 1 !important;
+}
+.bg-image {
+  font-family: "Noto Sans Thai", sans-serif;
+  font-family: "Noto Sans Thai", sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: url(/src/style/keycloak-bg.png) no-repeat center center fixed;
+  background-size: cover;
+  height: 100vh;
+  font-size: 12px;
+  line-height: 1.66666667;
+  color: #363636;
+}
+
+.login-pf-page {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-top: 0px;
+}
+
+#myimage {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  object-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% !important;
+  background: white url(/src/style/keycloak-logo-poc.png) no-repeat center
+    center;
+  margin-bottom: 7%;
+}
+.text-logo {
+  color: white;
+  font-weight: 800;
+  font-size: 1.6rem;
+}
+
+.subtext-logo {
+  color: white;
+  font-weight: 200;
+  font-size: 1.4rem;
+}
+
+.card-pf {
+  margin: 0 auto;
+  box-shadow: 0 1px 1px rgba(3, 3, 3, 0.175);
+  padding: 20px;
+  max-width: 400px;
+  min-width: 30%;
+  /* border-top: 4px solid; */
+  position: relative;
+  z-index: 10 !important;
+  border-radius: 10px;
+  /* border-color: var(--pf-global--primary-color--100); */
+  background: #fff;
+  border-top: 2px solid transparent;
+}
+
+.login-pf-page .login-pf-header {
+  margin-bottom: 20px;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.login-pf-page .login-pf-header h1 {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: start;
+}
+
+h1#kc-page-title {
+  margin-top: 10px;
+  font-weight: 800;
+  font-size: 1.3rem;
+  line-height: 1.1;
+}
+
+.login-pf-page .login-pf-header h1 {
+  font-size: 16px;
+}
+.login-pf-page .login-pf-header h1 {
+  text-align: center;
+}
+@media (max-width: 767px) {
+  #kc-logo {
+    display: none;
+  }
+  .login-pf-page .login-pf-header {
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 768px) {
+  .login-pf-page .login-pf-header {
+    margin-bottom: 10px;
+  }
+  .login-pf-page .login-pf-header h1 {
+    font-size: 24px;
+  }
+  .login-pf-page .card-pf {
+    padding: 20px 40px 30px 40px;
+  }
+}
+</style>