diff --git a/Front-End/src/components/Modal.js b/Front-End/src/components/Modal.js
index ab25e47..b0305b1 100644
--- a/Front-End/src/components/Modal.js
+++ b/Front-End/src/components/Modal.js
@@ -10,19 +10,21 @@ const Modal = ({
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        <Dialog.Content className="fixed inset-0 flex items-center justify-center p-4">
+        {/* Overlay avec un z-index élevé et un effet de flou */}
+        <Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-[9998] transition-opacity" />
+        <Dialog.Content className="fixed inset-0 flex items-center justify-center p-4 z-[9999]">
           <div
-            className={`inline-block bg-white rounded-lg px-6 py-5 text-left shadow-xl transform transition-all sm:my-8 ${modalClassName ? modalClassName : 'min-w-[500px] m-12 w-max max-h-[80vh] h-full'}`}
+            className={`relative bg-white rounded-xl px-8 py-6 text-left shadow-2xl transform transition-all sm:my-8 ${modalClassName ? modalClassName : 'min-w-[500px] max-w-[90%] max-h-[80vh] overflow-auto'}`}
           >
-            <div className="flex justify-between items-start mb-4">
-              <Dialog.Title className="text-xl font-medium text-gray-900">
+            {/* En-tête de la modale */}
+            <div className="flex justify-between items-center mb-6">
+              <Dialog.Title className="text-2xl font-semibold text-gray-800">
                 {title}
               </Dialog.Title>
               <Dialog.Close asChild>
                 <button
                   onClick={() => setIsOpen(false)}
-                  className="text-gray-400 hover:text-gray-500 ml-4 focus:outline-none"
+                  className="text-gray-500 hover:text-gray-700 focus:outline-none"
                 >
                   <span className="sr-only">Fermer</span>
                   <svg
@@ -42,6 +44,8 @@ const Modal = ({
                 </button>
               </Dialog.Close>
             </div>
+
+            {/* Contenu de la modale */}
             <div className="w-full h-full">
               <ContentComponent />
             </div>
diff --git a/Front-End/src/components/Structure/Files/FileUploadDocuSeal.js b/Front-End/src/components/Structure/Files/FileUploadDocuSeal.js
index 11f8c9b..ce20f3d 100644
--- a/Front-End/src/components/Structure/Files/FileUploadDocuSeal.js
+++ b/Front-End/src/components/Structure/Files/FileUploadDocuSeal.js
@@ -162,41 +162,55 @@ export default function FileUploadDocuSeal({
         uniqueConfirmButton={true}
       />
       {/* Contenu principal */}
-      <div className="grid grid-cols-10 gap-6 items-start">
-        {/* Sélection des groupes */}
-        <div className="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
-          <h3 className="text-lg font-medium text-gray-800 mb-4">
-            Dossiers d'inscription
-          </h3>
-          <MultiSelect
-            name="groups"
-            label="Sélection de dossier(s) d'inscription"
-            options={groups}
-            selectedOptions={selectedGroups}
-            onChange={handleGroupChange}
-            errorMsg={null}
-          />
+      {selectedGroups.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-full text-center space-y-6">
+          {/* Description de l'étape */}
+          <p className="text-gray-700 text-base font-medium mb-4">
+            Étape 1 - Sélectionner au moins un dossier d'inscription
+          </p>
+
+          {/* Section centrée pour la sélection des groupes */}
+          <div className="bg-gray-50 p-8 rounded-lg shadow-md border border-gray-300 transform transition-transform hover:scale-105">
+            <h3 className="text-xl font-semibold text-gray-800 mb-4 text-center">
+              Dossiers d'inscription
+            </h3>
+            <MultiSelect
+              name="groups"
+              label="Sélection dossier d'inscription"
+              options={groups}
+              selectedOptions={selectedGroups}
+              onChange={handleGroupChange}
+              errorMsg={null}
+              className="bg-white rounded-md shadow-inner p-4"
+            />
+          </div>
         </div>
+      ) : (
+        <div className="grid grid-cols-10 gap-6 items-start">
+          {/* Section Dossiers d'inscription repositionnée sur le côté */}
+          <div className="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
+            <h3 className="text-lg font-medium text-gray-800 mb-4">
+              Dossiers d'inscription
+            </h3>
+            <MultiSelect
+              name="groups"
+              label="Sélection dossier d'inscription"
+              options={groups}
+              selectedOptions={selectedGroups}
+              onChange={handleGroupChange}
+              errorMsg={null}
+            />
+          </div>
 
-        {/* Zone de configuration des documents */}
-        <div className="col-span-8 bg-white p-6 rounded-lg shadow-md border border-gray-200">
-          {selectedGroups.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-full text-center space-y-4">
-              {/* Icône circulaire modernisée */}
-              <div className="bg-emerald-100 p-6 rounded-full flex items-center justify-center shadow-md">
-                <div className="w-12 h-12 bg-emerald-200 rounded-full flex items-center justify-center">
-                  <span className="text-emerald-600 font-bold text-2xl">+</span>
-                </div>
-              </div>
-
-              {/* Message d'information */}
-              <p className="text-gray-600 text-sm font-medium">
-                Veuillez sélectionner au moins un groupe pour continuer.
-              </p>
-            </div>
-          ) : (
-            token && (
+          {/* Zone de configuration des documents */}
+          <div className="col-span-8 bg-white p-6 rounded-lg shadow-md border border-gray-200">
+            {token && (
               <div className="h-full overflow-auto">
+                {/* Description de l'étape */}
+                <p className="text-gray-700 text-base font-medium mb-4">
+                  Étape 2 - Sélectionnez un document
+                </p>
+
                 <DocusealBuilder
                   token={token}
                   headers={{
@@ -215,10 +229,10 @@ export default function FileUploadDocuSeal({
                   style={{ maxHeight: '65vh' }}
                 />
               </div>
-            )
-          )}
+            )}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/Front-End/src/components/Structure/Files/FilesGroupsManagement.js b/Front-End/src/components/Structure/Files/FilesGroupsManagement.js
index c7a2c28..840fec3 100644
--- a/Front-End/src/components/Structure/Files/FilesGroupsManagement.js
+++ b/Front-End/src/components/Structure/Files/FilesGroupsManagement.js
@@ -489,9 +489,7 @@ export default function FilesGroupsManagement({
         isOpen={isGroupModalOpen}
         setIsOpen={setIsGroupModalOpen}
         title={
-          groupToEdit
-            ? 'Modifier le groupe'
-            : 'Ajouter un groupe de schoolFileMasters'
+          groupToEdit ? 'Modifier le dossier' : "Création d'un nouveau dossier"
         }
         ContentComponent={() => (
           <RegistrationFileGroupForm
diff --git a/Front-End/src/components/Structure/Files/ParentFilesSection.js b/Front-End/src/components/Structure/Files/ParentFilesSection.js
index d8926eb..ba60bb3 100644
--- a/Front-End/src/components/Structure/Files/ParentFilesSection.js
+++ b/Front-End/src/components/Structure/Files/ParentFilesSection.js
@@ -47,7 +47,18 @@ export default function ParentFilesSection({
 
   const handleSaveDocument = () => {
     if (!formData.name) {
-      alert('Le nom de la pièce est requis.');
+      setPopupMessage(
+        "Attention !\nVeuillez saisir un nom de document pour valider l'opération."
+      );
+      setPopupVisible(true);
+      return;
+    }
+    if (selectedGroups.length === 0) {
+      setPopupMessage(
+        "Attention !\nVeuillez sélectionner au moins un dossier d'inscription pour valider l'opération"
+      );
+      setPopupVisible(true);
+      setPopupVisible(true);
       return;
     }
 
@@ -110,7 +121,6 @@ export default function ParentFilesSection({
 
   const handleGroupChange = (selected) => {
     setSelectedGroups(selected);
-    console.log('selected : ', selected);
 
     // Extraire les guardians associés aux register_forms des groupes sélectionnés
     const details = selected.flatMap((group) =>
@@ -123,8 +133,6 @@ export default function ParentFilesSection({
         }))
       )
     );
-
-    console.log('Guardians associés : ', details);
     setGuardianDetails(details); // Mettre à jour la variable d'état avec les détails des guardians
   };
 
@@ -163,7 +171,7 @@ export default function ParentFilesSection({
           return (
             <MultiSelect
               name="groups"
-              label="Sélection du(des) dossier(s) d'inscription"
+              label="Sélection dossier d'inscription"
               options={groups}
               selectedOptions={selectedGroups}
               onChange={handleGroupChange}