diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index ac4a37e1..bcc0bd9a 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -52,7 +52,6 @@ const defaultFormData = {
   firstName: '',
   userRole: '',
   userType: '',
-  keycloakId: '',
   profileImage: null,
   birthDate: null,
   responsibleArea: '',
@@ -97,7 +96,6 @@ const formData = ref<UserCreate>({
   firstName: '',
   userRole: '',
   userType: '',
-  keycloakId: '',
   profileImage: null,
   birthDate: null,
   responsibleArea: '',
@@ -108,6 +106,18 @@ const inputFile = document.createElement('input');
 inputFile.type = 'file';
 inputFile.accept = 'image/*';
 
+const reader = new FileReader();
+
+reader.addEventListener('load', () => {
+  if (typeof reader.result === 'string') {
+    urlProfile.value = reader.result;
+  }
+});
+
+watch(profileFile, () => {
+  if (profileFile.value) reader.readAsDataURL(profileFile.value);
+});
+
 inputFile.addEventListener('change', (e) => {
   profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
 });
@@ -119,16 +129,6 @@ const selectorList = [
   { label: 'AGENCY', count: 0 },
 ];
 
-async function createKeycloak() {
-  const res = await api.post('/keycloak/user', {
-    lastName: formData.value.lastNameEN,
-    firstName: formData.value.firstNameEN,
-    password: username.value,
-    username: username.value,
-  });
-  return res.data;
-}
-
 async function openDialog(idEdit?: string) {
   modal.value = true;
   userStore.userOption.brOpts = [];
@@ -166,7 +166,6 @@ async function openDialog(idEdit?: string) {
         firstName: foundUser.firstName,
         userRole: foundUser.userRole,
         userType: foundUser.userType,
-        keycloakId: foundUser.keycloakId,
         responsibleArea: foundUser.responsibleArea,
         licenseExpireDate:
           (foundUser.licenseExpireDate &&
@@ -226,7 +225,6 @@ async function onSubmit() {
       message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
       action: async () => {
         const formDataEdit = { ...formData.value };
-        delete formDataEdit.keycloakId;
         await userStore.editById(userId.value, formDataEdit);
         onClose();
         userStore.fetchList({ includeBranch: true });
@@ -241,12 +239,9 @@ async function onSubmit() {
       persistent: true,
       message: 'คุณต้องการเพิ่มบุคลากร ใช่หรือไม่',
       action: async () => {
-        formData.value.keycloakId = await createKeycloak();
-        if (formData.value.keycloakId) {
-          const result = await userStore.create(formData.value);
-          if (result) {
-            await branchStore.addUser(brId.value, result.id);
-          }
+        const result = await userStore.create(formData.value);
+        if (result) {
+          await branchStore.addUser(brId.value, result.id);
         }
         onClose();
         userStore.fetchList({ includeBranch: true });
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 19f3381a..ec036312 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -36,7 +36,6 @@ export type User = {
   lastName: string;
   firstNameEN: string;
   firstName: string;
-  keycloakId: string;
   id: string;
   profileImageUrl: string;
   code: string;
@@ -71,7 +70,6 @@ export type UserCreate = {
   firstName: string;
   userRole: string;
   userType: string;
-  keycloakId?: string;
   profileImage?: File | null; // required but not strict
   birthDate?: Date | null;
   responsibleArea: string;
@@ -116,4 +114,4 @@ export type Option = {
 export type RoleData = {
   id: string;
   name: string;
-}
+};