diff --git a/frontend/app/(auth)/dashboard/members/new/page.tsx b/frontend/app/(auth)/dashboard/members/new/page.tsx
deleted file mode 100644
index 33cc8b8..0000000
--- a/frontend/app/(auth)/dashboard/members/new/page.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-"use client";
-
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import useApiMutation from "@/hooks/use-api";
-import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select"
-
-const formSchema = z.object({
-	firstname: z.string().min(2, { message: "Prénom trop court." }),
-	lastname: z.string().min(2, { message: "Nom trop court." }),
-	role: z.enum(["admin", "user"], { message: "Rôle invalide." }),
-	phone: z
-		.string()
-		.max(10, { message: "Un numéro de téléphone à 10 chiffres." })
-		.optional(),
-	email: z.string().email({ message: "Email invalide." })
-});
-
-export default function CreateMemberForm() {
-	const {
-		trigger
-	} = useApiMutation(
-		"/users/new",
-		{ onSuccess: () => console.log("Member created") },
-		"POST",
-		true,
-		false
-	)
-
-	const form = useForm<z.infer<typeof formSchema>>({
-		resolver: zodResolver(formSchema),
-		defaultValues: {
-			firstname: "",
-			lastname: "",
-			role: "user",
-			phone: "",
-			email: "",
-		},
-	});
-
-	async function onSubmit(values: z.infer<typeof formSchema>) {
-		try {
-			const res = await trigger(values)
-			if (!res) throw new Error("The server hasn't responded.");
-			if (res.status === "Error") throw new Error(res.message);	
-		} catch (error) {
-			console.error("Form submission error", error);
-		}
-		console.log("submited");
-	}
-
-	return (
-		<div className="flex min-h-[60vh] h-full w-full items-center justify-center px-4">
-			<Card className="mx-auto max-w-md">
-				<CardHeader>
-					<CardTitle className="text-2xl">Création de membre</CardTitle>
-					<CardDescription>
-						Remplissez les différents champs pour créer un membre.
-						Un code sera envoyé par mail à l'utilisateur.
-						Il pourra ensuite modifier le mot de passe de son compte avec ce code.
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							className="space-y-8"
-						>
-							<div className="grid gap-4">
-								{/* Firstname Field */}
-								<FormField
-									control={form.control}
-									name="firstname"
-									render={({ field }) => (
-										<FormItem className="grid gap-2">
-											<FormLabel htmlFor="name">
-												Prénom
-											</FormLabel>
-											<FormControl>
-												<Input
-													id="firstname"
-													placeholder="John Doe"
-													type="text"
-													autoComplete="firstname"
-
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<div className="grid gap-4">
-									{/* Firstname Field */}
-									<FormField
-										control={form.control}
-										name="lastname"
-										render={({ field }) => (
-											<FormItem className="grid gap-2">
-												<FormLabel htmlFor="lastname">
-													Nom
-												</FormLabel>
-												<FormControl>
-													<Input
-														id="lastname"
-														placeholder="John Doe"
-														type="text"
-														autoComplete="lastname"
-
-														{...field}
-													/>
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									{/* Email Field */}
-									<FormField
-										control={form.control}
-										name="email"
-										render={({ field }) => (
-											<FormItem className="grid gap-2">
-												<FormLabel htmlFor="email">
-													Email
-												</FormLabel>
-												<FormControl>
-													<Input
-														id="email"
-														placeholder="johndoe@mail.com"
-														type="email"
-														autoComplete="email"
-
-														{...field}
-													/>
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<FormField
-										control={form.control}
-										name="role"
-										render={({ field }) => (
-											<FormItem className="grid gap-2">
-												<FormLabel htmlFor="role">
-													Role
-												</FormLabel>
-												<FormControl>
-													<Select 
-														value={field.value}
-														onValueChange={(value: string) => field.onChange(value)}>
-														<SelectTrigger className="w-[180px]">
-															<SelectValue placeholder="Select a role" />
-														</SelectTrigger>
-														<SelectContent>
-															<SelectGroup>
-																<SelectLabel>Role</SelectLabel>
-																<SelectItem value="admin">Administrateur</SelectItem>
-																<SelectItem value="user">Utilisateur</SelectItem>
-															</SelectGroup>
-														</SelectContent>
-													</Select>
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									{/* Phone Field */}
-									<FormField
-										control={form.control}
-										name="phone"
-										render={({ field }) => (
-											<FormItem className="grid gap-2">
-												<FormLabel htmlFor="phone">
-													Phone number
-												</FormLabel>
-												<FormControl>
-													<Input
-														id="phone"
-														placeholder="0648265441"
-														type="tel"
-														autoComplete="phone"
-
-														{...field}
-													/>
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<Button type="submit" className="w-full">
-										Add member
-									</Button>
-								</div>
-							</div>
-						</form>
-					</Form>
-				</CardContent>
-			</Card>
-		</div>
-	);
-}
diff --git a/frontend/components/app-sidebar.tsx b/frontend/components/app-sidebar.tsx
index 3efcdfb..06db639 100644
--- a/frontend/components/app-sidebar.tsx
+++ b/frontend/components/app-sidebar.tsx
@@ -58,10 +58,6 @@ const data = {
 					title: "Liste des membres",
 					url: "/dashboard/members",
 				},
-				{
-					title: "Création d'un membre",
-					url: "/dashboard/members/new",
-				},
 			],
 		},
 		{
diff --git a/frontend/components/member-dialog.tsx b/frontend/components/member-dialog.tsx
index 9539c55..730fb4c 100644
--- a/frontend/components/member-dialog.tsx
+++ b/frontend/components/member-dialog.tsx
@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
 	Form,
 	FormControl,
@@ -20,6 +19,15 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "./ui/select";
 
 const memberSchema = z.object({
 	userId: z.string().optional(),
@@ -94,51 +102,171 @@ export default function MemberDialog({
 				<DialogHeader>
 					<DialogTitle>
 						{member
-							? "Mis à jour du membre"
+							? "Mise à jour du membre"
 							: "Créer un nouveau membre"}
 					</DialogTitle>
 				</DialogHeader>
 				<Form {...form}>
 					<form
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="space-y-4"
+						className="space-y-8"
 					>
-						{(
-							[
-								"userId",
-								"firstname",
-								"lastname",
-								"email",
-								"password",
-								"phone",
-								"role",
-							] as const
-						).map((field) => (
+						<div className="grid gap-4">
+							{/* Firstname Field */}
 							<FormField
-								key={field}
 								control={form.control}
-								name={field}
+								name="firstname"
 								render={({ field }) => (
-									<FormItem>
-										<FormLabel>
-											{field.name
-												.charAt(0)
-												.toUpperCase() +
-												field.name.slice(1)}
+									<FormItem className="grid gap-2">
+										<FormLabel htmlFor="name">
+											Prénom
 										</FormLabel>
 										<FormControl>
 											<Input
+												id="firstname"
+												placeholder="John Doe"
+												type="text"
+												autoComplete="firstname"
 												{...field}
-												disabled={
-													field.name === "userId"
-												}
 											/>
 										</FormControl>
 										<FormMessage />
 									</FormItem>
 								)}
 							/>
-						))}
+							<div className="grid gap-4">
+								{/* Firstname Field */}
+								<FormField
+									control={form.control}
+									name="lastname"
+									render={({ field }) => (
+										<FormItem className="grid gap-2">
+											<FormLabel htmlFor="lastname">
+												Nom
+											</FormLabel>
+											<FormControl>
+												<Input
+													id="lastname"
+													placeholder="John Doe"
+													type="text"
+													autoComplete="lastname"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								{/* Email Field */}
+								<FormField
+									control={form.control}
+									name="email"
+									render={({ field }) => (
+										<FormItem className="grid gap-2">
+											<FormLabel htmlFor="email">
+												Email
+											</FormLabel>
+											<FormControl>
+												<Input
+													id="email"
+													placeholder="johndoe@mail.com"
+													type="email"
+													autoComplete="email webauthn"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								{/* Password Field */}
+								{!member?.userId && (
+									<FormField
+										control={form.control}
+										name="password"
+										render={({ field }) => (
+											<FormItem className="grid gap-2">
+												<FormLabel htmlFor="password">
+													Mot de passe
+												</FormLabel>
+												<FormControl>
+													<Input
+														id="password"
+														placeholder=""
+														type="password"
+														autoComplete="new-password webauthn"
+														{...field}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+
+								<FormField
+									control={form.control}
+									name="role"
+									render={({ field }) => (
+										<FormItem className="grid gap-2">
+											<FormLabel htmlFor="role">
+												Role
+											</FormLabel>
+											<FormControl>
+												<Select
+													value={field.value}
+													onValueChange={(
+														value: string,
+													) => field.onChange(value)}
+												>
+													<SelectTrigger className="w-[180px]">
+														<SelectValue placeholder="Séléctionner un rôle" />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectGroup>
+															<SelectLabel>
+																Role
+															</SelectLabel>
+															<SelectItem value="admin">
+																Administrateur
+															</SelectItem>
+															<SelectItem value="user">
+																Utilisateur
+															</SelectItem>
+														</SelectGroup>
+													</SelectContent>
+												</Select>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								{/* Phone Field */}
+								<FormField
+									control={form.control}
+									name="phone"
+									render={({ field }) => (
+										<FormItem className="grid gap-2">
+											<FormLabel htmlFor="phone">
+												Phone number
+											</FormLabel>
+											<FormControl>
+												<Input
+													id="phone"
+													placeholder="0648265441"
+													type="tel"
+													autoComplete="phone"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+						</div>
 						<DialogFooter>
 							<Button type="submit">
 								{member ? "Actualiser" : "Ajouter"}
diff --git a/frontend/components/members-table.tsx b/frontend/components/members-table.tsx
index 01d334b..dacb454 100644
--- a/frontend/components/members-table.tsx
+++ b/frontend/components/members-table.tsx
@@ -72,6 +72,7 @@ export default function MembersTable() {
 			// 	),
 			// );
 		} else {
+			delete savedMember.userId;
 			const res = await request<unknown>("/users/new", {
 				body: savedMember,
 				method: "POST",