diff --git a/apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx b/apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx
index 05531b1..8708684 100644
--- a/apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx
+++ b/apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx
@@ -62,6 +62,11 @@ export default function UserFormModal() {
 			photoProfileUrl: "",
 			password: "",
 			roles: [] as string[],
+			companyName: "",
+			position: "",
+			workExperience: "",
+			address: "",
+			phoneNumber: "",
 		},
 	});
 
@@ -81,6 +86,11 @@ export default function UserFormModal() {
 			username: data.username,
 			password: "",
 			roles: data.roles.map((v) => v.id), //only extract the id
+			companyName: data.companyName ?? "",
+			position: data.position ?? "",
+			workExperience: data.workExperience ?? "",
+			address: data.address ?? "",
+			phoneNumber: data.phoneNumber ?? "",
 		});
 
 		form.setErrors({});
@@ -127,9 +137,14 @@ export default function UserFormModal() {
 					email: values.email,
 					name: values.name,
 					password: values.password,
-					roles: JSON.stringify(values.roles),
+					roles: values.roles,
 					isEnabled: "true",
 					username: values.username,
+					companyName: values.email,
+					position: values.position,
+					workExperience: values.workExperience,
+					address: values.address,
+					phoneNumber: values.phoneNumber,
 				},
 			});
 		} else {
@@ -140,9 +155,14 @@ export default function UserFormModal() {
 					email: values.email,
 					name: values.name,
 					password: values.password,
-					roles: JSON.stringify(values.roles),
+					roles: values.roles,
 					isEnabled: "true",
 					username: values.username,
+					companyName: values.companyName,
+					position: values.position,
+					workExperience: values.workExperience,
+					address: values.address,
+					phoneNumber: values.phoneNumber,
 				},
 			});
 		}
@@ -192,7 +212,7 @@ export default function UserFormModal() {
 					</Center>
 				</Stack>
 
-				{createInputComponents({
+				{/* {createInputComponents({
 					disableAll: mutation.isPending,
 					readonlyAll: formType === "detail",
 					inputs: [
@@ -237,6 +257,79 @@ export default function UserFormModal() {
 							error: form.errors.roles,
 						},
 					],
+				})} */}
+
+				{createInputComponents({
+					disableAll: mutation.isPending,
+					readonlyAll: formType === "detail",
+					inputs: [
+						{
+							type: "text",
+							readOnly: true,
+							variant: "filled",
+							...form.getInputProps("id"),
+							hidden: !form.values.id,
+						},
+						{
+							type: "text",
+							label: "Name",
+							...form.getInputProps("name"),
+						},
+						{
+							type: "text",
+							label: "Position",
+							...form.getInputProps("position"),
+						},
+						{
+							type: "text",
+							label: "Work Experience",
+							...form.getInputProps("workExperience"),
+						},
+						{
+							type: "text",
+							label: "Email",
+							...form.getInputProps("email"),
+						},
+						{
+							type: "text",
+							label: "Company Name",
+							...form.getInputProps("companyName"),
+						},
+						{
+							type: "text",
+							label: "Address",
+							...form.getInputProps("address"),
+						},
+						{
+							type: "text",
+							label: "Phone Number",
+							...form.getInputProps("phoneNumber"),
+						},
+						
+						{
+							type: "multi-select",
+							label: "Roles",
+							value: form.values.roles,
+							onChange: (values) =>
+								form.setFieldValue("roles", values),
+							data: rolesQuery.data?.map((role) => ({
+								value: role.id,
+								label: role.name,
+							})),
+							error: form.errors.roles,
+						},
+						{
+							type: "text",
+							label: "Username",
+							...form.getInputProps("username"),
+						},
+						{
+							type: "password",
+							label: "Password",
+							hidden: formType !== "create",
+							...form.getInputProps("password"),
+						},
+					],
 				})}
 
 				{/* Buttons */}
diff --git a/apps/frontend/src/modules/usersManagement/queries/userQueries.ts b/apps/frontend/src/modules/usersManagement/queries/userQueries.ts
index 02da504..2093488 100644
--- a/apps/frontend/src/modules/usersManagement/queries/userQueries.ts
+++ b/apps/frontend/src/modules/usersManagement/queries/userQueries.ts
@@ -34,26 +34,26 @@ export const getUserByIdQueryOptions = (userId: string | undefined) =>
 	});
 
 export const createUser = async (
-	form: InferRequestType<typeof client.users.$post>["form"]
+	json: InferRequestType<typeof client.users.$post>["json"]
 ) => {
 	return await fetchRPC(
 		client.users.$post({
-			form,
+			json,
 		})
 	);
 };
 
 export const updateUser = async (
-	form: InferRequestType<(typeof client.users)[":id"]["$patch"]>["form"] & {
+	json: InferRequestType<(typeof client.users)[":id"]["$patch"]>["json"] & {
 		id: string;
 	}
 ) => {
 	return await fetchRPC(
 		client.users[":id"].$patch({
 			param: {
-				id: form.id,
+				id: json.id,
 			},
-			form,
+			json,
 		})
 	);
 };
diff --git a/apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx
index 27399e7..66c8eb0 100644
--- a/apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx
@@ -17,6 +17,42 @@ type DataType = ExtractQueryDataType<typeof userQueryOptions>;
 
 const columnHelper = createColumnHelper<DataType>();
 
+// Fungsi untuk mengelompokkan pengguna berdasarkan perusahaan
+const groupUsersByCompany = (data: DataType[]) => {
+    const companyMap = new Map<string, {
+        companyName: string;
+        users: { id: string; name: string; username: string; email: string; role: string }[];
+    }>();
+
+    data.forEach((item) => {
+        const companyName = item.company || "Unknown Company";
+
+        if (!companyMap.has(companyName)) {
+            companyMap.set(companyName, {
+                companyName,
+                users: [{
+                    id: item.id,
+                    name: item.name,
+                    username: item.username,
+                    email: item.email ?? "",
+                    role: item.roles.join(", ") // assuming roles is an array
+                }],
+            });
+        } else {
+            const existingCompany = companyMap.get(companyName);
+            existingCompany?.users.push({
+                id: item.id,
+                name: item.name,
+                username: item.username,
+                email: item.email ?? "",
+                role: item.roles.join(", "), // assuming roles is an array
+            });
+        }
+    });
+
+    return Array.from(companyMap.values());
+};
+
 export default function UsersPage() {
 	return (
 		<PageTemplate
@@ -46,20 +82,17 @@ export default function UsersPage() {
 					header: "Company",
 					cell: (props) => props.row.original.company,
 				}),
-				columnHelper.display({
-					header: "role",
-					cell: (props) => props.row.original.roles,
-				}),
 
-				// columnHelper.display({
-				// 	header: "Status",
-				// 	cell: (props) =>
-				// 		props.row.original.isEnabled ? (
-				// 			<Badge color="green">Active</Badge>
-				// 		) : (
-				// 			<Badge color="red">Inactive</Badge>
-				// 		),
-				// }),
+				columnHelper.display({
+					header: "Roles",
+					cell: (props) => {
+						const roles = props.row.original.roles; // Ambil array roles dari data
+						if (roles && roles.length > 0) {
+							return roles.map(role => role.name).join(", ");
+						}
+						return <div>No roles assigned</div>; // Jika tidak ada roles
+					},
+				}),				
 
 				columnHelper.display({
 					header: "Actions",
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
index 2d6bad5..6c9655b 100644
--- a/apps/frontend/vite.config.ts
+++ b/apps/frontend/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
 	plugins: [react(), TanStackRouterVite()],
 	resolve: {
 		alias: {
-			"@": path.resolve(__dirname,"/src"),
+			"@": path.resolve(__dirname,"src"),
 		},
 	},
 });