diff --git a/backend/gn_module_monitoring/conf_schema_toml.py b/backend/gn_module_monitoring/conf_schema_toml.py
index e89328a69..0d9b3039a 100644
--- a/backend/gn_module_monitoring/conf_schema_toml.py
+++ b/backend/gn_module_monitoring/conf_schema_toml.py
@@ -4,11 +4,14 @@
    Fichier à ne pas modifier. Paramètres surcouchables dans config/config_gn_module.tml
 """
 
-from marshmallow import Schema, fields, validates_schema, ValidationError
+from marshmallow import Schema, fields
 
 
 class GnModuleSchemaConf(Schema):
-    pass
+    DESCRIPTION_MODULE = fields.String(missing="Vous trouverez ici la liste des modules")
+    TITLE_MODULE = fields.String(missing="Module de suivi")
+
+
 #     AREA_TYPE = fields.List(fields.String(), missing=["COM", "M1", "M5", "M10"])
 #     BORNE_OBS = fields.List(fields.Integer(), missing=[1, 20, 40, 60, 80, 100, 120])
 #     BORNE_TAXON = fields.List(fields.Integer(), missing=[1, 5, 10, 15])
diff --git a/config/conf_gn_module.toml.example b/config/conf_gn_module.toml.example
index f04d33639..e77362652 100644
--- a/config/conf_gn_module.toml.example
+++ b/config/conf_gn_module.toml.example
@@ -1 +1,5 @@
 # Fichier listant les paramètres du module et leurs valeurs par défaut
+
+#Possibilité de rajouter une description au module de suivi
+#DESCRIPTION_MODULE = "ceci est une description"
+#TITLE_MODULE = "Module de suivi"
\ No newline at end of file
diff --git a/frontend/app/components/modules/modules.component.css b/frontend/app/components/modules/modules.component.css
index 658574e78..19ee16247 100644
--- a/frontend/app/components/modules/modules.component.css
+++ b/frontend/app/components/modules/modules.component.css
@@ -38,14 +38,14 @@ h2 {
 }
 
 a {
-  text-decoration:none;
-  color:initial;
+  text-decoration: none;
+  color: initial;
 }
 
 .flex-item:hover {
-    opacity: 1;
-    box-shadow: 0px 0px 10px black;
-    transition: opacity 0.2s, box-shadow 0.2s;
+  opacity: 1;
+  box-shadow: 0px 0px 10px black;
+  transition: opacity 0.2s, box-shadow 0.2s;
 }
 
 .module h2 {
@@ -53,16 +53,14 @@ a {
 }
 
 
-.module-card:hover
-{
-    border: 1px solid #303030;
-    padding: 5px;
-    color:gray;
-    transition: 1s ease;
+.module-card:hover {
+  border: 1px solid #303030;
+  padding: 5px;
+  color: gray;
+  transition: 1s ease;
 }
 
-.module-card
-{
-  background-color:#71717129;
+.module-card {
+  background-color: #71717129;
   transition: 1s ease;
-}
+}
\ No newline at end of file
diff --git a/frontend/app/components/modules/modules.component.html b/frontend/app/components/modules/modules.component.html
index 821736b9c..611c18166 100644
--- a/frontend/app/components/modules/modules.component.html
+++ b/frontend/app/components/modules/modules.component.html
@@ -1,38 +1,65 @@
-
 <div class="modules">
-    <pnx-modal-msg [bDisplayModal]="bLoading">
-        <h2>Chargement en cours</h2>
-        <div>
-          <span class="center spinner-border" role="status" aria-hidden="true"></span>
-        </div>
-      </pnx-modal-msg>
-
-  <h2>Modules de suivi</h2>
+  <pnx-modal-msg [bDisplayModal]="bLoading">
+    <h2>Chargement en cours</h2>
+    <div>
+      <span class="center spinner-border" role="status" aria-hidden="true"></span>
+    </div>
+  </pnx-modal-msg>
 
-  <div class="container py-5">
-    <div class="row">
-      <div class="col-4 col-sm-5 col-md-4 col-lg-4 module" *ngFor="let module of modules">
-        <a [routerLink]="[
+  <h2 class="title-module mb-4">{{titleModule}}</h2>
+  <div class="text-center my-auto" style="height: 80vh;" *ngIf="modules.length<1 && !bLoading">Vous n'avez pas encore de
+    protocole
+    installé</div>
+  <div class="row m-2" *ngIf="modules.length>0">
+    <div class="col-md-4 col-sm-12 des-module"> {{description}}</div>
+    <!-- <div class="w-100 d-none d-sm-block"></div> -->
+    <div class="btn-module col-md-8 col-sm-12 text-center">
+      <button class="btn btn-success mr-2" (click)="onAccessSitesClick(modules)" *ngIf="currentUser">
+        Accès aux sites
+      </button>
+      <div class="container py-5 border rounded m-2">
+        <h3>Liste des protocoles</h3>
+        <div class="row row-eq-height" style="overflow-x: auto;">
+          <div class="col-3 col-sm-5 col-md-3 col-lg-3 module" style="width:250px;" *ngFor="let module of modules">
+            <a [routerLink]="[
         'object',
         module.module_code,
         'module',
         module.id_module
-        ]" >
-          <div class="card module-card">
-            <img class="card-img-top"
-            src="{{assetsDirectory}}{{ module.module_code.toLowerCase()}}.jpg"
-            alt="{{ module.module_label }}"
-            title="{{ module.module_label }}"
-            >
-            <div class="card-body">
-              <h5 class="card-title">{{ module.module_label }}</h5>
-              <p class="card-text"> {{ module.module_desc }}</p>
-            </div>
+        ]">
+              <div class="card module-card h-100">
+                <img class="card-img-top" src="{{assetsDirectory}}{{ module.module_code.toLowerCase()}}.jpg"
+                  alt="{{ module.module_label }}" title="{{ module.module_label }}">
+                <div class="card-body">
+                  <h5 class="card-title">{{ module.module_label }}</h5>
+                  <p class="card-text"> {{ module.module_desc }}</p>
+                </div>
+              </div>
+            </a>
+
           </div>
-        </a>
+        </div>
+        <!-- <div class="d-flex flex-row p-4" style="overflow-x: auto;">
+          <div class="module" style="min-width:250px; max-width: 250px;" *ngFor="let module of modules">
+            <a [routerLink]="[
+        'object',
+        module.module_code,
+        'module',
+        module.id_module
+        ]">
+              <div class="card module-card h-100">
+                <img class="card-img-top" src="{{assetsDirectory}}{{ module.module_code.toLowerCase()}}.jpg"
+                  alt="{{ module.module_label }}" title="{{ module.module_label }}">
+                <div class="card-body">
+                  <h5 class="card-title">{{ module.module_label }}</h5>
+                  <p class="card-text"> {{ module.module_desc }}</p>
+                </div>
+              </div>
+            </a>
 
+          </div>
+        </div> -->
       </div>
-
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/app/components/modules/modules.component.ts b/frontend/app/components/modules/modules.component.ts
index 979d2402c..9a45f8f00 100644
--- a/frontend/app/components/modules/modules.component.ts
+++ b/frontend/app/components/modules/modules.component.ts
@@ -6,6 +6,7 @@ import { mergeMap } from "rxjs/operators";
 import { DataMonitoringObjectService } from "../../services/data-monitoring-object.service";
 import { ConfigService } from "../../services/config.service";
 import { get } from "https";
+import { AuthService, User } from "@geonature/components/auth/auth.service";
 
 @Component({
   selector: "pnx-monitoring-modules",
@@ -13,6 +14,12 @@ import { get } from "https";
   styleUrls: ["./modules.component.css"],
 })
 export class ModulesComponent implements OnInit {
+
+
+  currentUser: User;
+
+  description: string;
+  titleModule: string;
   modules: Array<any> = [];
 
   backendUrl: string;
@@ -24,9 +31,10 @@ export class ModulesComponent implements OnInit {
   bLoading = false;
 
   constructor(
+    private _auth: AuthService,
     private _dataMonitoringObjectService: DataMonitoringObjectService,
     private _configService: ConfigService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.bLoading = true;
@@ -50,6 +58,19 @@ export class ModulesComponent implements OnInit {
           this._configService.backendUrl() +
           "/static/external_assets/monitorings/";
         this.bLoading = false;
+        this.description = this._configService.descriptionModule();
+        this.titleModule = this._configService.titleModule();
       });
+
+    this.currentUser = this._auth.getCurrentUser();
+
+    this.currentUser["cruved"] = {};
+    this.currentUser["cruved_objects"] = {};
+  }
+
+  onAccessSitesClick(modules) {
+    console.log("accès aux sites avec droits ")
+    console.log(modules)
   }
+
 }
diff --git a/frontend/app/services/config.service.ts b/frontend/app/services/config.service.ts
index cb163ad8c..d37243b66 100644
--- a/frontend/app/services/config.service.ts
+++ b/frontend/app/services/config.service.ts
@@ -66,6 +66,12 @@ export class ConfigService {
     return `${api_url}${this._moduleService.currentModule.module_path}`;
   }
 
+  descriptionModule() {
+    return ModuleConfig.DESCRIPTION_MODULE;
+  }
+  titleModule() {
+    return ModuleConfig.TITLE_MODULE;
+  }
   /** Frontend Module Monitoring Url */
   frontendModuleMonitoringUrl() {
     return this._moduleService.currentModule.module_path;