diff --git a/frontend/src/components/ui/Card/KVCard.tsx b/frontend/src/components/ui/Card/KVCard.tsx
index e69de29..e1bffcc 100644
--- a/frontend/src/components/ui/Card/KVCard.tsx
+++ b/frontend/src/components/ui/Card/KVCard.tsx
@@ -0,0 +1,17 @@
+import { Icon } from "@iconify/react";
+
+interface KVCardProps {
+    icon?: string;
+    myKey: string;
+    value: string;
+}
+
+export const KVCard = ({icon, myKey, value}: KVCardProps) => {
+    return (
+        <div className={"py-4 px-6 bg-[#ebefff] rounded-lg h-full"}>
+            {icon && <Icon className={"size-6 text-blue-500"} icon={icon}/>}
+            <p className={"text-sm mt-2 mb-1"}>{myKey}</p>
+            <p className={"font-semibold"}>{value}</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/TabsBar.tsx b/frontend/src/components/ui/TabsBar.tsx
index e69de29..d5503a4 100644
--- a/frontend/src/components/ui/TabsBar.tsx
+++ b/frontend/src/components/ui/TabsBar.tsx
@@ -0,0 +1,68 @@
+import { Link, type LinkProps } from "react-router";
+import { type ReactNode } from "react";
+
+type Tab<T> = {
+    label: string;
+    value: T;
+    to?: LinkProps["to"];
+}
+
+interface TabsBarProps<T extends string> {
+    variant?: "underline" | "segmented";
+    items: Tab<T>[];
+    current: T;
+    onChange?: (value: T) => void;
+    children?: ReactNode;
+}
+
+
+export const TabsBar = <T extends string>({
+                                              items,
+                                              onChange,
+                                              current,
+                                              children,
+                                              variant = "segmented"
+                                          }: TabsBarProps<T>) => {
+
+    let tabsClass = "";
+    let tabItemClass = "";
+    let tabItemActiveClass = "";
+
+    switch (variant) {
+        case 'segmented':
+            tabsClass = "bg-[#e5e5e5] rounded-md";
+            tabItemClass = "rounded-lg px-4 py-2 md:py-3 md:px-6"
+            tabItemActiveClass = "bg-white";
+            break;
+        case 'underline':
+            tabsClass = "pt-3 bg-white";
+            tabItemClass = "pb-3 mr-3.5 text-sm text-gray-500"
+            tabItemActiveClass = "border-b-2 border-black text-black!"
+            break;
+    }
+
+    return (
+        <div data-slot={"root"} className={`p-1 relative w-fit ${tabsClass}`}>
+            <nav className={"flex"}>
+                {items.map(item => {
+                return item.to ?
+                    <Link
+                        key={item.value}
+                        to={item.to}
+                        onClick={() => onChange?.(item.value)}
+                        className={`block cursor-pointer ${tabItemClass} ${current === item.value ? `${tabItemActiveClass}` : ''}`}>
+                        {item.label}
+                    </Link>
+                    : <div
+                        key={item.value}
+                        onClick={() => onChange?.(item.value)}
+                        className={`cursor-pointer ${tabItemClass} ${current === item.value ? `${tabItemActiveClass}` : ''}`}>
+                        {item.label}
+                    </div>
+            })}
+            </nav>
+
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/features/auth/pages/Login.tsx b/frontend/src/features/auth/pages/Login.tsx
index 77e1bc9..c934a90 100644
--- a/frontend/src/features/auth/pages/Login.tsx
+++ b/frontend/src/features/auth/pages/Login.tsx
@@ -1,62 +1,46 @@
 import HwLogo from "@components/Icon.tsx";
 import HButton from "@ui/HButton.tsx";
 import HInput from "@ui/HInput.tsx";
+
 import FormField from "@ui/Form/FormField.tsx";
 import FormLabel from "@ui/Form/FormLabel.tsx";
-import { type SubmitEvent, useState } from "react";
 import FormError from "@ui/Form/FormError.tsx";
-import { loginSchema } from "@utils/schema.ts";
-import { useAuth } from "@features/auth/provider/AuthProvider.tsx";
 
-const Login = () => {
+import { useAuth } from "@features/auth/provider/AuthProvider.tsx";
+import { loginSchema } from "@utils/schema.ts";
 
-    const { login } = useAuth();
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [errors, setErrorState] = useState<Record<string, string>>({})
+import { Link } from "react-router";
 
-    async function onFormLoginSubmit(event: SubmitEvent<HTMLFormElement>) {
-        event.preventDefault();
-        const formData = new FormData(event.currentTarget)
-        const result = loginSchema.safeParse(Object.fromEntries(formData))
+import { useUncontrolledForm } from "@utils/hooks/useUncontrolledForm.ts";
+import { FetchError } from "ofetch";
 
-        if (!result.success) {
-            const errors: Record<string, string> = {};
-            result.error.issues.map((issue) => {
-                const field = issue.path[0];
-                if (typeof field === "string") {
-                    errors[field] = issue.message;
-                }
-            })
-            setErrorState(errors);
-            return;
-        }
+const Login = () => {
 
-        setErrorState({});
+    const { login } = useAuth();
 
-        try {
-            setIsSubmitting(true)
-            await login(result.data);
-        } catch (e) {
-            console.log(e)
-        } finally {
-            setIsSubmitting(false);
+    const {errors, onFormSubmit, isSubmitting} = useUncontrolledForm({
+        schema: loginSchema,
+        onSubmit: async (values) => {
+            await login(values);
+        },
+        onError: (error, {setFieldError}) => {
+            if (error instanceof FetchError) {
+                if(!error.status) setFieldError("email", "Une erreur est survenue veuillez réessayée");
+            }
         }
-    }
+    })
 
     return (
         <div className={"flex min-h-dvh justify-center items-center"}>
             <form
-                onSubmit={onFormLoginSubmit}
+                onSubmit={onFormSubmit}
                 className={"max-w-100 bg-neutral-50/30 w-full border border-neutral-100 min-h-60 flex flex-col gap-6 justify-start items-center p-6"}>
-                <div>
-                    <div className={"max-w-34 w-full mx-auto"}>
+                <div className={"w-full"}>
+                    <Link to={"/"} className={"max-w-28 block w-full mx-auto mb-4"}>
                         <HwLogo/>
-                    </div>
+                    </Link>
 
-                    <div className={"px-1 mt-4"}><p className={"text-gray-500 text-center"}>Rejoignez notre communauté
-                        de plus de 2000 employeurs afin
-                        de trouver le job qui vous correspond</p>
-                    </div>
+                    <div className={"text-left"}><h1 className={"text-xl font-semibold"}>Se connecter</h1></div>
                 </div>
 
                 <div className={"flex flex-col gap-4 w-full"}>
@@ -78,7 +62,11 @@ const Login = () => {
 
                 </div>
 
-                <HButton disabled={isSubmitting} type={"submit"}>Se connecter</HButton>
+
+                <div className={"w-full flex flex-col gap-6"}>
+                    <p className={"text-gray-500 text-sm"}>Vous n'avez pas de compte ? Inscrivez vous <Link to={"/auth/register"} className={"underline underline-offset-2"}>ici</Link></p>
+                    <HButton disabled={isSubmitting} type={"submit"}>Se connecter</HButton>
+                </div>
             </form>
         </div>
     )
diff --git a/frontend/src/features/auth/pages/Register.tsx b/frontend/src/features/auth/pages/Register.tsx
index e69de29..a84b620 100644
--- a/frontend/src/features/auth/pages/Register.tsx
+++ b/frontend/src/features/auth/pages/Register.tsx
@@ -0,0 +1,86 @@
+import FormField from "@ui/Form/FormField.tsx";
+import FormLabel from "@ui/Form/FormLabel.tsx";
+import FormError from "@ui/Form/FormError.tsx";
+
+import HwLogo from "@components/Icon.tsx";
+import HInput from "@ui/HInput.tsx";
+import HButton from "@ui/HButton.tsx";
+
+import { Link } from "react-router";
+
+import { useUncontrolledForm } from "@utils/hooks/useUncontrolledForm.ts";
+import { registerSchema } from "@utils/schema.ts";
+import { useAuth } from "@features/auth/provider/AuthProvider.tsx";
+import { FetchError } from "ofetch";
+
+const Register = () => {
+
+    const { register } = useAuth();
+
+    const {errors, onFormSubmit, isSubmitting} = useUncontrolledForm({
+        schema: registerSchema,
+        onSubmit: async (values) => {
+            await register(values);
+        },
+        onError: (error, {setFieldError}) => {
+            if (error instanceof FetchError) {
+                if(!error.status) setFieldError("email", "Une erreur est survenue veuillez réessayée");
+            }
+        }
+    })
+
+    return (
+        <div className={"flex justify-center items-center min-h-dvh"}>
+            <form
+                onSubmit={onFormSubmit}
+                className={"max-w-100 bg-neutral-50/30 w-full border border-neutral-100 min-h-60 flex flex-col gap-6 justify-start items-center p-6"}
+            >
+                <div>
+                    <Link to={"/"} className={"block max-w-16 w-full mx-auto"}>
+                        <HwLogo/>
+                    </Link>
+
+                    <h1 className={"text-xl font-semibold"}>
+                        S'inscrire
+                    </h1>
+
+                    <div>
+                        <p className={"text-gray-500 text-left text-sm"}>
+                            Rejoignez notre communauté
+                            de plus de 2000 employeurs afin
+                            de trouver le job qui vous correspond
+                        </p>
+                    </div>
+                </div>
+
+                <div className={"flex flex-col gap-4 w-full"}>
+                    <FormField className={"flex flex-col gap-2"} required name={"email"} error={errors?.email}>
+                        <FormLabel>Adresse email</FormLabel>
+                        <HInput autoComplete={"email"} type={"email"} placeholder={"ex. corentin.nelhomme@gmail.com"}/>
+                        <FormError/>
+                    </FormField>
+
+                    <FormField className={"flex flex-col gap-2"} required name={"password"} error={errors?.password}>
+                        <FormLabel>Mot de passe</FormLabel>
+                        <HInput type={"password"} placeholder={"ex. password123"}/>
+                        <FormError/>
+                    </FormField>
+
+                    <FormField className={"flex flex-col gap-2"} required name={"confirmPassword"} error={errors?.confirmPassword}>
+                        <FormLabel>Mot de passe de confirmation</FormLabel>
+                        <HInput type={"password"} placeholder={"ex. password123"}/>
+                        <FormError/>
+                    </FormField>
+
+                    <div className={"w-full flex flex-col gap-6"}>
+                        <p className={"text-gray-500 text-sm"}>Vous avez dêja un compte ? Connectez vous <Link
+                            to={"/auth/login"} className={"underline underline-offset-2"}>ici</Link></p>
+                        <HButton disabled={isSubmitting} className={"w-full"} type={"submit"}>S'inscrire</HButton>
+                    </div>
+                </div>
+            </form>
+        </div>
+    )
+}
+
+export default Register
\ No newline at end of file
diff --git a/frontend/src/utils/hooks/useControlledForm.ts b/frontend/src/utils/hooks/useControlledForm.ts
index 088505b..3228c6f 100644
--- a/frontend/src/utils/hooks/useControlledForm.ts
+++ b/frontend/src/utils/hooks/useControlledForm.ts
@@ -1,141 +1,186 @@
-import { z, type ZodObject } from "zod";
-import { useReducer } from "react";
-
-type UseFormOptions<TSchema extends ZodObject> = {
-    initialValues: z.infer<TSchema>;
-    schema: TSchema;
-    onSubmit: (values: z.infer<TSchema>) => Promise<unknown>;
-    onSuccess?: (data: unknown) => void;
-    onError?: (error: unknown) => void;
-};
-
-type UseFormReducerAction<TSchema> =
-    | {
-    type: "SET_FIELD";
-    key: keyof TSchema;
-    value: TSchema[keyof TSchema];
-}
-    | { type: "FORM_SUBMIT" }
-    | { type: "FORM_ERROR"; errors: Record<string, string> }
-    | { type: "FORM_SUCCESS" }
-    | { type: "CLEAR_ERROR" }
-
-type UseFormState<TSchema> = {
-    values: TSchema,
-    errors: Record<string, string>,
-    isSubmitting: boolean,
-}
-export const useForm = <TSchema extends ZodObject>({
-                                                       initialValues,
-                                                       schema,
-                                                       onSubmit,
-                                                       onSuccess,
-                                                       onError,
-                                                   }: UseFormOptions<TSchema>) => {
-
-    type Values = z.infer<TSchema>;
-
-    function formReducer(
-        state: UseFormState<Values>,
-        action: UseFormReducerAction<Values>
-    ): UseFormState<Values> {
-        switch (action.type) {
-            case "SET_FIELD":
-                return {
-                    ...state,
-                    values: {
-                        ...state.values,
-                        [action.key]: action.value,
-                    },
-                };
-            case "FORM_SUBMIT":
-                return {
-                    ...state,
-                    isSubmitting: true,
-                };
+    import { z, type ZodObject } from "zod";
+    import { useReducer } from "react";
+
+    type UseFormOptions<TSchema extends ZodObject> = {
+        initialValues: z.infer<TSchema>;
+        schema: TSchema;
+        onSubmit: (values: z.infer<TSchema>) => Promise<unknown>;
+        onSuccess?: (data: unknown) => void;
+        onError?: (error: unknown) => void;
+    };
 
-            case "FORM_SUCCESS":
-                return {
-                    ...state,
-                    isSubmitting: false,
-                };
+    type FormErrorKey<T> = keyof T | "global";
 
-            case "FORM_ERROR":
-                return {
-                    ...state,
-                    isSubmitting: false,
-                    errors: action.errors,
-                };
+    type FormErrors<T> = {
+        [K in keyof T]?: string;
+    } & {
+        global?: string;
+    };
 
-            case "CLEAR_ERROR":
-                return {
-                    ...state,
-                    errors: {},
-                };
-        }
+    type UseFormReducerAction<TSchema> =
+        |
+        { type: "SET_FIELD"; key: keyof TSchema; value: TSchema[keyof TSchema]; }
+        | { type: "FORM_SUBMIT" }
+        | { type: "FORM_ERROR"; errors: FormErrors<TSchema> }
+        | { type: "FORM_SUCCESS" }
+        | { type: "CLEAR_ERRORS" }
+        | { type: "FORM_RESET" }
+        | { type: "CLEAR_ERROR", key: FormErrorKey<TSchema> };
+
+
+    type UseFormState<TSchema> = {
+        values: TSchema,
+        errors: FormErrors<TSchema>,
+        isSubmitting: boolean,
     }
-
-    const [state, dispatch] = useReducer(formReducer, {
-        values: initialValues,
-        errors: {},
-        isSubmitting: false,
-    });
-
-    const submit = async () => {
-        const result = schema.safeParse(state.values);
-
-        if (!result.success) {
-            const errors: Record<string, string> = {};
-            result.error.issues.forEach((issue) => {
-                const field = issue.path[0];
-                if (typeof field === "string") {
-                    errors[field] = issue.message;
-                }
-            })
-            dispatch({type: "FORM_ERROR", errors});
-            return;
+    export const useControlledForm = <TSchema extends ZodObject>({
+                                                                     initialValues,
+                                                                     schema,
+                                                                     onSubmit,
+                                                                     onSuccess,
+                                                                     onError,
+                                                                 }: UseFormOptions<TSchema>) => {
+
+        type Values = z.infer<TSchema>;
+
+        function formReducer(
+            state: UseFormState<Values>,
+            action: UseFormReducerAction<Values>
+        ): UseFormState<Values> {
+            switch (action.type) {
+                case "SET_FIELD":
+                    return {
+                        ...state,
+                        values: {
+                            ...state.values,
+                            [action.key]: action.value,
+                        },
+                    };
+                case "FORM_SUBMIT":
+                    return {
+                        ...state,
+                        isSubmitting: true,
+                    };
+                case "FORM_SUCCESS":
+                    return {
+                        ...state,
+                        isSubmitting: false,
+                    };
+                case "FORM_ERROR":
+                    return {
+                        ...state,
+                        isSubmitting: false,
+                        errors: action.errors,
+                    };
+                case "CLEAR_ERROR":
+                    const errors = {...state.errors};
+                    delete errors[action.key as string];
+
+                    return {
+                        ...state,
+                        errors,
+                    };
+                case "CLEAR_ERRORS":
+                    return {
+                        ...state,
+                        errors: {}
+                    }
+                case "FORM_RESET":
+                    return {
+                        ...state,
+                        values: initialValues,
+                        errors: {},
+                        isSubmitting: false,
+                    };
+            }
         }
 
-        dispatch({type: "FORM_SUBMIT"});
-        try {
-            const data = await onSubmit(state.values);
+        const [state, dispatch] = useReducer(formReducer, {
+            values: initialValues,
+            errors: {},
+            isSubmitting: false,
+        });
+
+        const submit = async () => {
+            const result = schema.safeParse(state.values);
+
+            if (!result.success) {
+                const errors: Record<string, string> = {global: ""};
+
+                result.error.issues.forEach((issue) => {
+                    const field = issue.path[0];
+
+                    if (typeof field === "string") {
+                        errors[field] = issue.message;
+                    }
+                });
+
+                dispatch({
+                    type: "FORM_ERROR",
+                    errors: errors as FormErrors<Values>,
+                });
+
+                return;
+            }
+
+            dispatch({type: "FORM_SUBMIT"});
+            try {
+                const data = await onSubmit(result.data);
+
+                dispatch({type: "FORM_SUCCESS"});
+                onSuccess?.(data);
+            } catch (error) {
 
-            dispatch({type: "FORM_SUCCESS"});
-            onSuccess?.(data);
-        } catch (error) {
+                const errors: FormErrors<Values> = {
+                    global: "Une erreur est survenue",
+                };
+
+                dispatch({
+                    type: "FORM_ERROR",
+                    errors
+                });
+
+                onError?.(error);
+            }
+        };
+
+        const setValue = <K extends keyof Values>(
+            key: K,
+            value: Values[K]
+        ) => {
             dispatch({
-                type: "FORM_ERROR",
-                errors: {
-                    form: "Une erreur est survenue",
-                },
+                type: "SET_FIELD",
+                key,
+                value,
             });
+        };
 
-            onError?.(error);
+        const clearErrors = () => {
+            dispatch({
+                type: "CLEAR_ERRORS"
+            });
         }
-    };
 
-    const setValue = <K extends keyof Values>(
-        key: K,
-        value: Values[K]
-    ) => {
-        dispatch({
-            type: "SET_FIELD",
-            key,
-            value,
-        });
-    };
+        const clearError = (key: FormErrorKey<Values>) => {
+            dispatch({
+                type: "CLEAR_ERROR",
+                key,
+            })
+        }
 
-    const clearError = () => {
-        dispatch({
-            type: "CLEAR_ERROR"
-        });
-    }
+        const reset = () => {
+            dispatch({
+                type: "FORM_RESET"
+            })
+        }
 
-    return {
-        ...state,
-        setValue,
-        clearError,
-        submit
-    }
+        return {
+            ...state,
+            reset,
+            setValue,
+            clearError,
+            clearErrors,
+            submit
+        }
 
-}
\ No newline at end of file
+    }
\ No newline at end of file
diff --git a/frontend/src/utils/hooks/useUncontrolledForm.ts b/frontend/src/utils/hooks/useUncontrolledForm.ts
new file mode 100644
index 0000000..47a1fd7
--- /dev/null
+++ b/frontend/src/utils/hooks/useUncontrolledForm.ts
@@ -0,0 +1,65 @@
+import { type SubmitEvent, useState } from "react";
+import { z, type ZodObject } from "zod";
+
+interface uncontrolledFormArgs<T extends ZodObject> {
+    schema: T,
+    onSubmit: (values: z.infer<T>) => Promise<void> | void;
+    onError: (
+        error: unknown,
+        actions: {
+            setFieldError: (field: Extract<keyof z.infer<T>, string>, message: string) => void
+        }
+    ) => void;
+}
+
+export const useUncontrolledForm = <T extends ZodObject>({schema, onError, onSubmit}: uncontrolledFormArgs<T>) => {
+
+    const [errors, setError] = useState<Record<string, string>>({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    function setFieldError(field: string, message: string) {
+        setError(prev => ({
+            ...prev,
+            [field]: message
+        }));
+    }
+
+    async function validateForm(formData: FormData) {
+        const result = schema.safeParse(Object.fromEntries(formData));
+
+        if (!result.success) {
+            const errors: Record<string, string> = {};
+            result.error.issues.forEach((issue) => {
+                const field = issue.path[0];
+                if (typeof field === "string") {
+                    errors[field] = issue.message;
+                }
+            })
+            setError(errors);
+            return;
+        }
+
+        setError({});
+
+        try {
+            setIsSubmitting(true)
+            await onSubmit(result.data);
+        } catch (e) {
+            onError(e, { setFieldError });
+        } finally {
+            setIsSubmitting(false);
+        }
+    }
+
+    async function onFormSubmit(event: SubmitEvent<HTMLFormElement>) {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        await validateForm(formData);
+    }
+
+    return {
+        errors,
+        isSubmitting,
+        onFormSubmit
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/schema.ts b/frontend/src/utils/schema.ts
index d0fb454..eb03f8f 100644
--- a/frontend/src/utils/schema.ts
+++ b/frontend/src/utils/schema.ts
@@ -3,4 +3,10 @@ import { z } from "zod"
 export const loginSchema = z.object({
     email: z.email({error: "Adresse email invalide"}),
     password: z.string().min(8, {error: "Votre mot de passe est trop court"}).max(64, {error: "Votre mot de passe est trop long"}).regex(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/, "Le mot de passe doit container un chiffre, une majuscule et un caractère spéciale")
+});
+
+export const registerSchema = z.object({
+    email: z.email({error: "Adresse email invalide"}),
+    password: z.string().min(8, {error: "Votre mot de passe est trop court"}).max(64, {error: "Votre mot de passe est trop long"}).regex(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/, "Le mot de passe doit container un chiffre, une majuscule et un caractère spéciale"),
+    confirmPassword: z.string().min(8, {error: "Votre mot de passe est trop court"}).max(64, {error: "Votre mot de passe est trop long"}).regex(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/, "Le mot de passe doit container un chiffre, une majuscule et un caractère spéciale")
 });
\ No newline at end of file