diff --git a/src/main/webapp/src/pages/admin/MemberPage.jsx b/src/main/webapp/src/pages/admin/MemberPage.jsx
index 99e9770..3373412 100644
--- a/src/main/webapp/src/pages/admin/MemberPage.jsx
+++ b/src/main/webapp/src/pages/admin/MemberPage.jsx
@@ -20,7 +20,6 @@ export function MemberPage() {
 
     const handleSubmit = (event) => {
         event.preventDefault();
-
         setLoading(1)
 
         const formData = new FormData();
@@ -72,22 +71,151 @@ export function MemberPage() {
         }
     }
 
+    const handleSubmitPerm = (event) => {
+
+    }
+
     return <>
         <h2>Page membre</h2>
         <button type="button" className="btn btn-link" onClick={() => navigate("/admin/member")}>
             &lt;&lt; retour
         </button>
         {data
-            ? <MemberForm data={data} handleSubmit={handleSubmit}/>
+            ? <div>
+                <div className="row">
+                    <div className="col-lg-4">
+                        <PhotoCard data={data}/>
+                        <CompteInfo userData={data}/>
+                    </div>
+                    <div className="col-lg-8">
+                        <InformationForm handleSubmit={handleSubmit} data={data}/>
+                        <PremForm handleSubmitPerm={handleSubmitPerm}/>
+                        <div className="row">
+                            <LicenceCard/>
+                            <SelectCard/>
+                        </div>
+                    </div>
+                </div>
+            </div>
             : error && <AxiosError error={error}/>
         }
     </>
 }
 
-function MemberForm({data, handleSubmit}) {
+function PhotoCard({data}) {
+    return <div className="card mb-4">
+        <div className="card-header">Licence n°{data.licence}</div>
+        <div className="card-body text-center">
+            <div className="input-group mb-3">
+                <img
+                    src={`${vite_url}/api/member/${data.id}/photo`}
+                    alt="avatar"
+                    className="rounded-circle img-fluid" style={{object_fit: 'contain'}}/>
+            </div>
+        </div>
+    </div>;
+}
+
+function InformationForm({handleSubmit, data}) {
+    return <form onSubmit={handleSubmit}>
+        <div className="card mb-4">
+            <div className="card-header">Information</div>
+            <div className="card-body">
+                <TextField name="lname" text="Nom" value={data.lname}/>
+                <TextField name="fname" text="Prénom" value={data.fname}/>
+                <TextField name="email" text="Email" value={data.email} placeholder="name@example.com"
+                           type="email"/>
+                <OptionField name="genre" text="Genre" value={data.genre}
+                             values={{NA: 'N/A', H: 'H', F: 'F'}}/>
+                <OptionField name="country" text="Pays" value={data.country}
+                             values={{NA: 'Sélectionner...', fr: 'FR', es: 'ES', be: 'BE'}}/>
+                <BirthDayField inti_date={data.birth_date ? data.birth_date.split('T')[0] : ''}
+                               inti_category={data.categorie}/>
+                <div className="row">
+                    <ClubSelect defaultValue={data?.club?.id} name="club"/>
+                </div>
+                <OptionField name="role" text="Rôle" value={data.role}
+                             values={{
+                                 MEMBRE: 'Membre',
+                                 PRESIDENT: 'Président',
+                                 TRESORIER: 'Trésorier',
+                                 SECRETAIRE: 'Secrétaire'
+                             }}/>
+                <OptionField name="grade_arbitrage" text="Grade d'arbitrage" value={data.grade_arbitrage}
+                             values={{NA: 'N/A', ASSESSEUR: 'Assesseur', ARBITRE: 'Arbitre'}}/>
+                <div className="row">
+                    <div className="input-group mb-3">
+                        <label className="input-group-text" htmlFor="url_photo">Photos
+                            (optionnelle)</label>
+                        <input type="file" className="form-control" id="url_photo" name="url_photo"
+                               accept=".jpg,.jpeg,.gif,.png,.svg"/>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-md-12 text-right">
+                        <button type="submit" className="btn btn-primary">Enregistrer</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>;
+}
+
+function PremForm({handleSubmitPerm}) {
+    return <form onSubmit={handleSubmitPerm}>
+        <div className="card mb-4">
+            <div className="card-header">Permission</div>
+            <div className="card-body">
+                <div className="row g-3">
+                    <div className="col">
+                        <h5>FFSAF intra</h5>
+                        <CheckField name="federation_admin" text="Accès à l'intra" value={false}/>
+                    </div>
+                    <div className="col">
+                        <h5>SAFCA</h5>
+                        <CheckField name="safca_user" text="Accès à l'application" value={false}/>
+                        <CheckField name="safca_create_compet" text="Créer des compétion" value={false}/>
+                        <CheckField name="safca_super_admin" text="Super administrateur" value={false}/>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-md-12 text-right">
+                        <button type="submit" className="btn btn-primary">Enregistrer</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>;
+}
+
+function LicenceCard() {
+    return <div className="col-md-6">
+        <div className="card mb-4 mb-md-0">
+            <div className="card-header">Licence</div>
+            <div className="card-body">
+                <p className="mb-1">Web Design</p>
+            </div>
+        </div>
+    </div>;
+}
+
+function SelectCard() {
+    return <div className="col-md-6">
+        <div className="card mb-4 mb-md-0">
+            <div className="card-header">Sélection en équipe de France</div>
+            <div className="card-body">
+                <p className="mb-1">Web Design</p>
+
+            </div>
+        </div>
+    </div>;
+}
+
+function CompteInfo({userData}) {
+
     const creatAccount = () => {
         toast.promise(
-            apiAxios.put(`/compte/${data.id}/init`),
+            apiAxios.put(`/compte/${userData.id}/init`),
             {
                 pending: 'Création du compte en cours',
                 success: 'Compte créé avec succès 🎉',
@@ -96,137 +224,53 @@ function MemberForm({data, handleSubmit}) {
         )
     }
 
-    return <div>
-        <div className="row">
-            <div className="col-lg-4">
-                <div className="card mb-4">
-                    <div className="card-header">Licence n°{data.licence}</div>
-                    <div className="card-body text-center">
+    return <div className="card mb-4">
+        <div className="card-header">Compte</div>
+        <div className="card-body text-center">
+            {userData.userId
+                ? <CompteInfoContent userData={userData}/>
+                : <>
+                    <div className="row">
                         <div className="input-group mb-3">
-                            <img
-                                src={`${vite_url}/api/member/${data.id}/photo`}
-                                alt="avatar"
-                                className="rounded-circle img-fluid" style={{object_fit: 'contain'}}/>
+                            <div>Ce membre ne dispose pas de compte...</div>
                         </div>
                     </div>
-                </div>
-                <div className="card mb-4">
-                    <div className="card-header">Compte</div>
-                    <div className="card-body text-center">
-                        {data.userId
-                            ? <CompteInfo userId={data.userId}/>
-                            : <>
-                                <div className="row">
-                                    <div className="input-group mb-3">
-                                        <div>Ce membre ne dispose pas de compte...</div>
-                                    </div>
-                                </div>
-                                <div className="row">
-                                    <div className="input-group mb-3">
-                                        <button className="btn btn-primary" onClick={creatAccount}>Initialiser le compte</button>
-                                    </div>
-                                </div>
-                            </>}
-                    </div>
-                </div>
-            </div>
-            <div className="col-lg-8">
-                <form onSubmit={handleSubmit}>
-                    <div className="card mb-4">
-                        <div className="card-header">Information</div>
-                        <div className="card-body">
-                            <TextField name="lname" text="Nom" value={data.lname}/>
-                            <TextField name="fname" text="Prénom" value={data.fname}/>
-                            <TextField name="email" text="Email" value={data.email} placeholder="name@example.com"
-                                       type="email"/>
-                            <OptionField name="genre" text="Genre" value={data.genre}
-                                         values={{NA: 'N/A', H: 'H', F: 'F'}}/>
-                            <OptionField name="country" text="Pays" value={data.country}
-                                         values={{NA: 'Sélectionner...', fr: 'FR', es: 'ES', be: 'BE'}}/>
-                            <BirthDayField inti_date={data.birth_date ? data.birth_date.split('T')[0] : ''}
-                                           inti_category={data.categorie}/>
-                            <div className="row">
-                                <ClubSelect defaultValue={data?.club?.id} name="club"/>
-                            </div>
-                            <OptionField name="grade_arbitrage" text="Rôle" value={data.role}
-                                         values={{NA: 'N/A', ASSESSEUR: 'Assesseur', ARBITRE: 'Arbitre'}}/>
-                            <OptionField name="role" text="Grade d'arbitrage" value={data.grade_arbitrage}
-                                         values={{
-                                             MEMBRE: 'Membre',
-                                             PRESIDENT: 'Président',
-                                             TRESORIER: 'Trésorier',
-                                             SECRETAIRE: 'Secrétaire'
-                                         }}/>
-                            <div className="row">
-                                <div className="input-group mb-3">
-                                    <label className="input-group-text" htmlFor="url_photo">Photos
-                                        (optionnelle)</label>
-                                    <input type="file" className="form-control" id="url_photo" name="url_photo"
-                                           accept=".jpg,.jpeg,.gif,.png,.svg"/>
-                                </div>
-                            </div>
-                            <div className="row">
-                                <div className="col-md-12 text-right">
-                                    <button type="submit" className="btn btn-primary">Enregistrer</button>
-                                </div>
-                            </div>
+                    <div className="row">
+                        <div className="input-group mb-3">
+                            <button className="btn btn-primary" onClick={creatAccount}>Initialiser le compte</button>
                         </div>
                     </div>
-                </form>
-                <div className="row">
-                    <div className="col-md-6">
-                        <div className="card mb-4 mb-md-0">
-                            <div className="card-header">Licence</div>
-                            <div className="card-body">
-                                <p className="mb-1">Web Design</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-md-6">
-                        <div className="card mb-4 mb-md-0">
-                            <div className="card-header">Sélection en équipe de France</div>
-                            <div className="card-body">
-                                <p className="mb-1">Web Design</p>
-
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+                </>}
         </div>
     </div>
+
 }
 
-function CompteInfo({userId}) {
+function CompteInfoContent({userData}) {
     const setLoading = useLoadingSwitcher()
-    const {data, error} = useFetch(`/compte/${userId}`, setLoading, 1)
+    const {data, error} = useFetch(`/compte/${userData.userId}`, setLoading, 1)
 
     return <>
         {data
-            ? <CompteInfoContent data={data}/>
+            ? <>
+                <div className="row">
+                    <div className="input-group mb-3">
+                        <div>Identifiant: {data.login}</div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="input-group mb-3">
+                        <div>Activer: <ColoredCircle boolean={data.enabled}/></div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="input-group mb-3">
+                        <div>Email vérifié: <ColoredCircle boolean={data.emailVerified}/></div>
+                    </div>
+                </div>
+            </>
             : error && <AxiosError error={error}/>
-        }
-    </>
-}
-
-function CompteInfoContent({data}) {
-    return <>
-        <div className="row">
-            <div className="input-group mb-3">
-                <div>Identifiant: {data.login}</div>
-            </div>
-        </div>
-        <div className="row">
-            <div className="input-group mb-3">
-                <div>Activer: <ColoredCircle boolean={data.enabled}/></div>
-            </div>
-        </div>
-        <div className="row">
-            <div className="input-group mb-3">
-                <div>Email vérifié: <ColoredCircle boolean={data.emailVerified}/></div>
-            </div>
-        </div>
-    </>
+        } </>
 }
 
 function BirthDayField({inti_date, inti_category}) {
@@ -286,4 +330,24 @@ function TextField({name, text, value, placeholder, type = "text"}) {
                    name={name} aria-describedby={name} defaultValue={value} required/>
         </div>
     </div>
+}
+
+function CheckField({name, text, value, row = false}) {
+    return <>{
+        row ?
+            <div className="row">
+                <div className="input-group mb-3">
+                    <div className="form-check">
+                        <input className="form-check-input" type="checkbox" id={name} name={name}
+                               defaultChecked={value}/>
+                        <label className="form-check-label" htmlFor={name}>{text}</label>
+                    </div>
+                </div>
+            </div>
+            : <div className="form-check">
+                <input className="form-check-input" type="checkbox" id={name} name={name} defaultChecked={value}/>
+                <label className="form-check-label" htmlFor={name}>{text}</label>
+            </div>
+    }
+    </>
 }
\ No newline at end of file