diff --git a/DRAFT_CHANGELOG.md b/DRAFT_CHANGELOG.md
index 486ec52e6..3b49c76ec 100644
--- a/DRAFT_CHANGELOG.md
+++ b/DRAFT_CHANGELOG.md
@@ -24,6 +24,7 @@ __DATE__
 * 🐛 [Fixed]
 
   - ContextMenu : correction pour affichage du menu en mode dark (#332, #333)
+  - Export : mise en conformité DSFR du bouton Export (#334)
   
 * 🔒 [Security]
 
diff --git a/package.json b/package.json
index 683bb3e71..74ddb243d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.2-333",
+  "version": "1.0.0-beta.2-334",
   "date": "23/01/2025",
   "module": "src/index.js",
   "directories": {},
diff --git a/samples-src/pages/tests/Export/pages-ol-export-modules-default.html b/samples-src/pages/tests/Export/pages-ol-export-modules-default.html
index 303a96d45..74ff241f0 100644
--- a/samples-src/pages/tests/Export/pages-ol-export-modules-default.html
+++ b/samples-src/pages/tests/Export/pages-ol-export-modules-default.html
@@ -67,7 +67,11 @@ <h2>Ajout du widget Export</h2>
                   })
                 });
 
-                var layerSwitcher = new ol.control.LayerSwitcher({});
+                var layerSwitcher = new ol.control.LayerSwitcher({
+                  options : {
+                    position : "top-right"
+                  }
+                });
                 map.addControl(layerSwitcher);
 
                 // var importLayer = new ol.control.LayerImport();
@@ -75,6 +79,7 @@ <h2>Ajout du widget Export</h2>
 
                 // drawing + export into widget
                 var drawing = new ol.control.Drawing({
+                  position : "bottom-left",
                   tools : {
                     export : false
                   }
@@ -82,15 +87,21 @@ <h2>Ajout du widget Export</h2>
                 map.addControl(drawing);
                 var exportDrawing = new ol.control.Export({
                   control: drawing,
-                  format : "kml"
+                  format : "kml",
+                  icons : {
+                    button : true
+                  }
                 });
                 map.addControl(exportDrawing);
-                exportDrawing.on("export:compute", (e) => {
+                exportDrawing.on("button:clicked", (e) => {
                   console.log("Export Drawing", e);
                 });
 
                 // iso + export with config
-                var iso = new ol.control.Isocurve({draggable:true});
+                var iso = new ol.control.Isocurve({
+                  position : "bottom-left",
+                  draggable : true
+                });
                 map.addControl(iso);
                 var exportIso = new ol.control.Export({
                   control: iso,
@@ -99,18 +110,24 @@ <h2>Ajout du widget Export</h2>
                   name: "export-iso",
                   title : "Exporter",
                   menu : true,
+                  icons : {
+                    menu : "",
+                    button : true
+                  }
                   // Desactive le download de l'export :
-                  // onExport : function (content) {
+                  // callback : function (content) {
                   //   console.log(content);
                   // }
                 });
                 map.addControl(exportIso);
-                exportIso.on("export:compute", (e) => {
+                exportIso.on("button:clicked", (e) => {
                   console.log("Export Iso", e);
                 });
 
                 // route + export with setters
-                var route = new ol.control.Route();
+                var route = new ol.control.Route({
+                  position : "bottom-left"
+                });
                 map.addControl(route);
                 exportRoute = new ol.control.Export({});
                 exportRoute.setControl(route);
@@ -119,13 +136,15 @@ <h2>Ajout du widget Export</h2>
                 exportRoute.setName("export-route");
                 exportRoute.setTitle("Exporter Iti");
                 exportRoute.setMenu(true);
-                exportRoute.on("export:compute", (e) => {
+                exportRoute.on("button:clicked", (e) => {
                   console.log("Export Route", e);
                 });
                 map.addControl(exportRoute);
 
                 // profil
-                var measureProfil = new ol.control.ElevationPath();
+                var measureProfil = new ol.control.ElevationPath({
+                  position : "bottom-left"
+                });
                 map.addControl(measureProfil);
                 var exportProfil = new ol.control.Export({
                   control: measureProfil,
@@ -134,7 +153,7 @@ <h2>Ajout du widget Export</h2>
                   menu: false
                 });
                 map.addControl(exportProfil);
-                exportProfil.on("export:compute", (e) => {
+                exportProfil.on("button:clicked", (e) => {
                   console.log("Export Profil", e);
                 });
               };
diff --git a/samples-src/pages/tests/Export/pages-ol-export-modules-dsfr-buttons.html b/samples-src/pages/tests/Export/pages-ol-export-modules-dsfr-buttons.html
new file mode 100644
index 000000000..2016c79e5
--- /dev/null
+++ b/samples-src/pages/tests/Export/pages-ol-export-modules-dsfr-buttons.html
@@ -0,0 +1,131 @@
+{{#extend "ol-sample-modules-dsfr-layout"}}
+
+{{#content "vendor"}}
+        
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlExport.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlExport.js"></script>
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.js"></script>
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlDrawing.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlDrawing.js"></script>
+{{/content}}
+
+{{#content "head"}}
+        <title>Sample openlayers</title>
+{{/content}}
+
+{{#content "style"}}
+        <style>
+            div#map {
+                width: 100%;
+                height: 100vh;
+            }
+            div[id^=GPlayerSwitcher-] {
+              top: 80px;
+              right: 8px;
+            }
+        </style>
+{{/content}}
+
+{{#content "body"}}
+            <h2>Ajout du widget Export</h2>
+            <!-- map -->
+            <div id="map"></div>
+{{/content}}
+
+{{#content "js"}}
+            <script type="text/javascript">
+              if (window.Gp) {
+                  // activation des loggers
+                  Gp.Logger.enableAll();
+              }
+              var map;
+              var exportRoute;
+              var createMap = function() {
+                  // on cache l'image de chargement du Géoportail.
+                  document.getElementById('map').style.backgroundImage = 'none';
+
+                // Création de la map
+                map = new ol.Map({
+                  target : "map",
+                  layers : [
+                      new ol.layer.Tile({
+                          source: new ol.source.OSM(),
+                          opacity: 0.5
+                      })
+                  ],
+                  view : new ol.View({
+                    center : [288074.8449901076, 6247982.515792289],
+                    zoom : 18
+                  })
+                });
+
+                // Ajout du widget LayerSwitcher
+                var layerSwitcher = new ol.control.LayerSwitcher({
+                  options : {
+                    position : "top-right",
+                    collapsed : true,
+                    panel : true,
+                    counter : true
+                  }
+                });
+                map.addControl(layerSwitcher);
+                
+                // cas drawing : 
+                // * bouton secondary avec icone
+                // * mode sauvegarde
+                // * sans menu
+                // * target interne 
+                // * appel instance externe
+                var drawing = new ol.control.Drawing({
+                  position: "bottom-left",
+                  tools : {
+                    export : false
+                  }
+                });
+                map.addControl(drawing);
+
+                var exportDrawingExport = new ol.control.Export({
+                  title : "Exporter",
+                  download : true,
+                  control: drawing,
+                  format : "kml",
+                  menu : false,
+                  icons : {
+                    button : "export"
+                  },
+                  kind : "secondary"
+                });
+                map.addControl(exportDrawingExport);
+                exportDrawingExport.on("button:clicked", (e) => {
+                  console.log("Export Drawing", e);
+                });
+                var exportDrawingSave = new ol.control.Export({
+                  title : "Sauvegarder",
+                  download : false,
+                  control: drawing,
+                  format : "kml",
+                  icons : {
+                    button : "save"
+                  },
+                  kind : "secondary"
+                });
+                map.addControl(exportDrawingSave);
+                exportDrawingSave.on("button:clicked", (e) => {
+                  console.log("Save Drawing", e);
+                });
+                
+              };
+              Gp.Services.getConfig({
+                    customConfigFile : "{{ configurl }}",
+                    callbackSuffix : "",
+                    // apiKey: "{{ apikey }}",
+                    timeOut : 20000,
+                    onSuccess : createMap,
+                    onFailure : (e) => {
+                        console.error(e);
+                    }
+                });
+            </script>
+{{/content}}
+{{/extend}}
diff --git a/samples-src/pages/tests/Export/pages-ol-export-modules-dsfr-default.html b/samples-src/pages/tests/Export/pages-ol-export-modules-dsfr-default.html
index 9f819d607..08af28882 100644
--- a/samples-src/pages/tests/Export/pages-ol-export-modules-dsfr-default.html
+++ b/samples-src/pages/tests/Export/pages-ol-export-modules-dsfr-default.html
@@ -2,6 +2,8 @@
 
 {{#content "vendor"}}
         
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlExport.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlExport.js"></script>
         <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.css" />
         <script src="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.js"></script>
         <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlDrawing.css" />
@@ -14,8 +16,6 @@
         <script src="{{ baseurl }}/dist/modules/GpfExtOlElevationPath.js"></script>
         <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlRoute.css" />
         <script src="{{ baseurl }}/dist/modules/GpfExtOlRoute.js"></script>
-        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlExport.css" />
-        <script src="{{ baseurl }}/dist/modules/GpfExtOlExport.js"></script>
 {{/content}}
 
 {{#content "head"}}
@@ -26,7 +26,7 @@
         <style>
             div#map {
                 width: 100%;
-                height: 500px;
+                height: 100vh;
             }
             div[id^=GPlayerSwitcher-] {
               top: 80px;
@@ -48,9 +48,9 @@ <h2>Ajout du widget Export</h2>
             <script type="text/javascript">
               var map;
               var exportRoute;
-              window.onload = function () {
-                // on cache l'image de chargement du Géoportail.
-                document.getElementById("map").style.backgroundImage = "none";
+              var createMap = function() {
+                  // on cache l'image de chargement du Géoportail.
+                  document.getElementById('map').style.backgroundImage = 'none';
 
                 // Création de la map
                 map = new ol.Map({
@@ -67,78 +67,169 @@ <h2>Ajout du widget Export</h2>
                   })
                 });
 
-                var layerSwitcher = new ol.control.LayerSwitcher({});
+                // Ajout du widget LayerSwitcher
+                var layerSwitcher = new ol.control.LayerSwitcher({
+                  options : {
+                    position : "top-right",
+                    collapsed : true,
+                    panel : true,
+                    counter : true
+                  }
+                });
                 map.addControl(layerSwitcher);
-
-                var importLayer = new ol.control.LayerImport();
+                
+                // Ajout du widget LayerImport
+                var importLayer = new ol.control.LayerImport({
+                  position: "top-right"
+                });
                 map.addControl(importLayer);
 
-                // drawing + export into widget
+                // cas drawing : 
+                // * bouton secondary avec icone
+                // * mode sauvegarde
+                // * sans menu
+                // * target interne 
+                // * appel instance externe
                 var drawing = new ol.control.Drawing({
+                  position: "bottom-left",
                   tools : {
                     export : false
                   }
                 });
                 map.addControl(drawing);
                 var exportDrawing = new ol.control.Export({
+                  title : "Sauvegarde",
+                  download : false,
                   control: drawing,
-                  format : "kml"
+                  format : "kml",
+                  menu : true,
+                  direction : "column",
+                  icons : {
+                    button : "save"
+                  },
+                  kind : "secondary"
                 });
                 map.addControl(exportDrawing);
-                exportDrawing.on("export:compute", (e) => {
+                exportDrawing.on("button:clicked", (e) => {
                   console.log("Export Drawing", e);
                 });
 
-                // iso + export with config
-                var iso = new ol.control.Isocurve({draggable:true});
-                map.addControl(iso);
-                var exportIso = new ol.control.Export({
-                  control: iso,
-                  // target: document.getElementById("btnExportIso"),
-                  format: "kml",
-                  name: "export-iso",
-                  title : "Exporter",
-                  menu : true,
-                  // Desactive le download de l'export :
-                  // onExport : function (content) {
-                  //   console.log(content);
-                  // }
-                });
-                map.addControl(exportIso);
-                exportIso.on("export:compute", (e) => {
-                  console.log("Export Iso", e);
+                // cas iso :
+                // * bouton primary avec icone
+                // * mode export
+                // * avec menu
+                // * target externe
+                // * appel instance interne
+                var iso = new ol.control.Isocurve({
+                  position: "bottom-left",
+                  draggable:true,
+                  export : {
+                    target: document.getElementById("btnExportIso"),
+                    format: "kml",
+                    kind: "primary",
+                    name: "export-iso",
+                    description : "Graphe isochrone",
+                    title : "Exporter Isochrone",
+                    menu : true,
+                    icons : {
+                      menu : "",
+                      button : "export"
+                    },
+                    callback : function (content, layer) {
+                      console.log(content, layer);
+                    }
+                  }
                 });
+                map.addControl(iso);
 
-                // route + export with setters
-                var route = new ol.control.Route();
+                // cas iso :
+                // * bouton primary avec icone
+                // * mode export
+                // * avec menu
+                // * target externe
+                // * appel instance externe
+                // var exportIso = new ol.control.Export({
+                //   control: iso,
+                //   target: document.getElementById("btnExportIso"),
+                //   format: "kml",
+                //   kind: "primary",
+                //   name: "export-iso",
+                //   description : "Graphe isochrone",
+                //   title : "Exporter Isochrone",
+                //   menu : true,
+                //   icons : {
+                //     menu : ""
+                //   },
+                //   callback : function (content) {
+                //     console.log(content);
+                //   }
+                // });
+                // map.addControl(exportIso);
+                // exportIso.on("button:clicked", (e) => {
+                //   console.log("Export Iso", e);
+                // });
+
+                // cas route :
+                // * bouton secondary avec icone
+                // * mode export
+                // * avec menu
+                // * target externe
+                // * appel instance externe avec setters
+                var route = new ol.control.Route({
+                  position: "bottom-left"
+                });
                 map.addControl(route);
-                exportRoute = new ol.control.Export({});
+                exportRoute = new ol.control.Export({
+                  icons: {
+                    menu : "",
+                    button : "export"
+                  }
+                });
+                exportRoute.setDownload(true);
                 exportRoute.setControl(route);
                 exportRoute.setTarget(document.getElementById("btnExportRoute"));
                 exportRoute.setFormat("gpx");
+                exportRoute.setKind("secondary");
                 exportRoute.setName("export-route");
-                exportRoute.setTitle("Exporter Iti");
+                exportRoute.setTitle("Exporter Itineraire");
                 exportRoute.setMenu(true);
-                exportRoute.on("export:compute", (e) => {
+                exportRoute.on("button:clicked", (e) => {
                   console.log("Export Route", e);
                 });
                 map.addControl(exportRoute);
 
-                // profil
-                var measureProfil = new ol.control.ElevationPath();
+                // cas profil :
+                // * bouton secondary avec icone
+                // * mode export avec icone de menu
+                // * avec menu
+                // * target interne
+                // * appel instance externe
+                var measureProfil = new ol.control.ElevationPath({
+                  position: "bottom-left"
+                });
                 map.addControl(measureProfil);
                 var exportProfil = new ol.control.Export({
                   control: measureProfil,
                   name: "export-profil", 
                   format : "geojson",
-                  menu: false
+                  menu: true,
+                  // target : measureProfil.getContainer().querySelector(".gpf-panel__body")
                 });
                 map.addControl(exportProfil);
-                exportProfil.on("export:compute", (e) => {
+                exportProfil.on("button:clicked", (e) => {
                   console.log("Export Profil", e);
                 });
               };
-
+              Gp.Services.getConfig({
+                    customConfigFile : "{{ configurl }}",
+                    callbackSuffix : "",
+                    // apiKey: "{{ apikey }}",
+                    timeOut : 20000,
+                    onSuccess : createMap,
+                    onFailure : (e) => {
+                        console.error(e);
+                    }
+                });
             </script>
 {{/content}}
 {{/extend}}
diff --git a/samples-src/pages/tests/Layers/pages-ol-layerwfs-modules-default.html b/samples-src/pages/tests/Layers/pages-ol-layerwfs-modules-default.html
index 887bd5fbf..524dcaf7e 100644
--- a/samples-src/pages/tests/Layers/pages-ol-layerwfs-modules-default.html
+++ b/samples-src/pages/tests/Layers/pages-ol-layerwfs-modules-default.html
@@ -100,7 +100,7 @@ <h2>Ajout d'une couche WFS (avec pagination des résultats)</h2>
                     exportBtn.setFormat("geojson");
                     exportBtn.setName("export");
                     exportBtn.setTitle("Exporter");
-                    exportBtn.on("export:compute", (e) => {
+                    exportBtn.on("button:clicked", (e) => {
                         console.log("Export", e);
                     });
                     document.getElementById("btnExport").appendChild(exportBtn.getContainer());
diff --git a/samples-src/pages/tests/Layers/pages-ol-layerwfs-modules-native.html b/samples-src/pages/tests/Layers/pages-ol-layerwfs-modules-native.html
index f81650bf4..25e349bc3 100644
--- a/samples-src/pages/tests/Layers/pages-ol-layerwfs-modules-native.html
+++ b/samples-src/pages/tests/Layers/pages-ol-layerwfs-modules-native.html
@@ -184,7 +184,7 @@ <h2>Ajout d'une couche WFS (avec pagination des résultats)</h2>
                     exportBtn.setFormat("geojson");
                     exportBtn.setName("export");
                     exportBtn.setTitle("Exporter");
-                    exportBtn.on("export:compute", (e) => {
+                    exportBtn.on("button:clicked", (e) => {
                         console.log("Export", e);
                     });
                     document.getElementById("btnExport").appendChild(exportBtn.getContainer());
diff --git a/src/packages/CSS/Controls/Export/DSFRexportStyle.css b/src/packages/CSS/Controls/Export/DSFRexportStyle.css
index e69de29bb..10bfcc69e 100644
--- a/src/packages/CSS/Controls/Export/DSFRexportStyle.css
+++ b/src/packages/CSS/Controls/Export/DSFRexportStyle.css
@@ -0,0 +1,79 @@
+.gpf-btn-icon-export-submit {
+    padding-left: 25px;
+    height: fit-content;
+    width: 150px;
+    justify-content: center;
+}
+
+.gpf-btn-icon-export-submit::after {
+    content: '';
+    -webkit-mask: url("img/GPexportDownload.svg") left no-repeat;
+    mask: url("img/GPexportDownload.svg") left no-repeat;
+    mask-size: 20px 20px;
+    mask-position: 5px;
+}
+
+.gpf-btn-icon-save-submit {
+    padding-left: 25px;
+    height: fit-content;
+    width: 150px;
+    justify-content: center;
+}
+
+.gpf-btn-icon-save-submit::after {
+    content: '';
+    -webkit-mask: url("img/GPexportSave.svg") left no-repeat;
+    mask: url("img/GPexportSave.svg") left no-repeat;
+    mask-size: 20px 20px;
+    mask-position: 5px;
+}
+
+dialog div .gpf-export-menu-container {
+    justify-content: center;
+}
+
+.gpf-export-menu-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.gpf-export-menu-container-row {
+    flex-direction: row-reverse;
+}
+
+.gpf-export-menu-container-column {
+    flex-direction: column-reverse;
+}
+
+.gpf-accordion {
+    width: min-content;
+}
+
+.gpf-accordion--opened {
+    width: unset;
+}
+
+.gpf-accordion::before {
+    box-shadow: unset;
+}
+
+.gpf-accordion__btn {
+    width: fit-content;
+}
+
+.gpf-accordion__title {
+
+}
+
+dialog div .gpf-full-container {
+    position: absolute;
+    width: auto;
+    z-index: 1;
+    top: 0px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(255,255,255,1);
+    overflow: hidden;
+  }
\ No newline at end of file
diff --git a/src/packages/CSS/Controls/Export/GPFexportStyle.css b/src/packages/CSS/Controls/Export/GPFexportStyle.css
index d464924ad..2f6bc66f3 100644
--- a/src/packages/CSS/Controls/Export/GPFexportStyle.css
+++ b/src/packages/CSS/Controls/Export/GPFexportStyle.css
@@ -3,18 +3,32 @@ div[id^=GPexportContainer-] {
     padding: 5px;
 }
 
-div[id^=GPexportContainer-] > input.GPsubmit {
+div[id^=GPexportContainer-] > button.GPsubmit {
     color: white;
 }
 
 /* bouton */
-input[id^=GPexportButton-] {
+button[id^=GPexportButton-] {
+    width: fit-content;
     min-width: fit-content;
-    padding-left: 25px;
+    padding-left: 5px;
     padding-right: 5px;
+}
+
+button[id^=GPexportButton-].GPexportButtonExportIcon {
+    padding-left: 25px;
+    background-image: url("img/GPexportDownload.svg");
+    background-size: 25px 25px;
+    background-repeat: no-repeat;
+    background-position: left;
+}
+
+button[id^=GPexportButton-].GPexportButtonSaveIcon {
+    padding-left: 25px;
     background-image: url("img/GPexportSave.svg");
     background-size: 25px 25px;
     background-repeat: no-repeat;
+    background-position: left;
 }
 
 /* menu */
@@ -32,15 +46,17 @@ input[id^=GPexportButton-] {
     position: absolute;
     background-color: #f1f1f1;
     min-width: 80px;
+    width: 100%;
     padding: 8px;
     border-radius: 10px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
 }
 
+/* 
 .GPexportMenuContent a:hover { background-color: #f1f1f1; }
-
-.GPexportMenuContainer:hover .GPexportMenuContent { display: block; }
+.GPexportMenuContainer:hover .GPexportMenuContent { display: block; } 
+*/
 
 /* menu des formats */
 .GPexportMenuContent .container {
@@ -99,4 +115,10 @@ input[id^=GPexportButton-] {
     height: 4px;
     border-radius: 50%;
     background: white;
+}
+
+.GPexportMenuContent .GPexportMenuFormat {
+    display: flex;
+    align-items: baseline;
+    flex-direction: row;
 }
\ No newline at end of file
diff --git a/src/packages/CSS/Controls/Export/img/GPexportDownload.svg b/src/packages/CSS/Controls/Export/img/GPexportDownload.svg
new file mode 100644
index 000000000..8f5d0b8ac
--- /dev/null
+++ b/src/packages/CSS/Controls/Export/img/GPexportDownload.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="3.7039998mm"
+   height="3.7009997mm"
+   viewBox="-1 -1 5.70462 5.6999996"
+   version="1.1"
+   id="svg417"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs414" /><g
+     id="layer1"
+     transform="translate(-38.704299,-56.496744)"><g
+       stroke-linejoin="round"
+       stroke="#ffffff"
+       stroke-linecap="round"
+       stroke-width="3"
+       fill="none"
+       id="g604"
+       transform="matrix(0.26458333,0,0,0.26458333,36.5866,54.39369)"><path
+         d="m 688,326.4 v 8 h 20 v -8 m -10,-14 v 14"
+         transform="matrix(0.6086,0,0,0.5595,-409.8,-166)"
+         id="path600" /><path
+         d="m 693,321.4 5,5 5,-5"
+         transform="matrix(0.6086,0,0,0.5595,-409.8,-166)"
+         id="path602" /></g></g></svg>
diff --git a/src/packages/CSS/Controls/Export/img/GPexportSave.svg b/src/packages/CSS/Controls/Export/img/GPexportSave.svg
index 8f5d0b8ac..480b64b96 100644
--- a/src/packages/CSS/Controls/Export/img/GPexportSave.svg
+++ b/src/packages/CSS/Controls/Export/img/GPexportSave.svg
@@ -1,28 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="3.7039998mm"
-   height="3.7009997mm"
-   viewBox="-1 -1 5.70462 5.6999996"
-   version="1.1"
-   id="svg417"
-   xml:space="preserve"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs414" /><g
-     id="layer1"
-     transform="translate(-38.704299,-56.496744)"><g
-       stroke-linejoin="round"
-       stroke="#ffffff"
-       stroke-linecap="round"
-       stroke-width="3"
-       fill="none"
-       id="g604"
-       transform="matrix(0.26458333,0,0,0.26458333,36.5866,54.39369)"><path
-         d="m 688,326.4 v 8 h 20 v -8 m -10,-14 v 14"
-         transform="matrix(0.6086,0,0,0.5595,-409.8,-166)"
-         id="path600" /><path
-         d="m 693,321.4 5,5 5,-5"
-         transform="matrix(0.6086,0,0,0.5595,-409.8,-166)"
-         id="path602" /></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,255,255,1)"><path d="M7 19V13H17V19H19V7.82843L16.1716 5H5V19H7ZM4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM9 15V19H15V15H9Z"></path></svg>
\ No newline at end of file
diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css
index 63441d809..9349d09e5 100644
--- a/src/packages/CSS/DSFRgeneralWidget.css
+++ b/src/packages/CSS/DSFRgeneralWidget.css
@@ -204,12 +204,13 @@ div:not(.position) > .gpf-widget > .gpf-btn-icon[aria-label]:hover::before {
 }
 
 
-
+.gpf-btn--primary,
 .gpf-btn--secondary,
 .gpf-btn--tertiary {
   position: relative;
 }
 
+.gpf-btn--primary::after,
 .gpf-btn--tertiary::after,
 .gpf-btn--secondary::after {
   content: "";
@@ -225,6 +226,11 @@ div:not(.position) > .gpf-widget > .gpf-btn-icon[aria-label]:hover::before {
   mask: linear-gradient(#0000, #0000);
 }
 
+.gpf-btn--primary::after {
+  background-color: var(--text-inverted-blue-france);
+}
+
+.gpf-btn--primary:disabled:after,
 .gpf-btn--tertiary:disabled:after,
 .gpf-btn--secondary:disabled::after {
   background-color: var(--text-disabled-grey);
diff --git a/src/packages/CSS/GPFgeneralWidget.css b/src/packages/CSS/GPFgeneralWidget.css
index c2c237628..7f76c4bc9 100644
--- a/src/packages/CSS/GPFgeneralWidget.css
+++ b/src/packages/CSS/GPFgeneralWidget.css
@@ -312,6 +312,7 @@
 /* Submit input */
 /****************/
 
+button.GPsubmit,
 input.GPsubmit {
   display: block;
   width: 80px;
@@ -331,6 +332,7 @@ input.GPsubmit {
   cursor: pointer;
 }
 
+button.GPsubmit:hover,
 input.GPsubmit:hover {
   opacity: 1;
 }
diff --git a/src/packages/Controls/ContextMenu/ContextMenu.js b/src/packages/Controls/ContextMenu/ContextMenu.js
index ba6f55f32..e3c55fe2d 100644
--- a/src/packages/Controls/ContextMenu/ContextMenu.js
+++ b/src/packages/Controls/ContextMenu/ContextMenu.js
@@ -54,7 +54,6 @@ var logger = Logger.getLogger("contextMenu");
  * @extends {ol.control.Control}
  * @param {Object} options - options for function call.
  * 
- * @fires custom:action
  * @example
  * var contextMenu = new ol.control.ContextMenu();
  * map.addControl(contextMenu);
diff --git a/src/packages/Controls/Drawing/Drawing.js b/src/packages/Controls/Drawing/Drawing.js
index 8a0bc1981..f48ed2835 100644
--- a/src/packages/Controls/Drawing/Drawing.js
+++ b/src/packages/Controls/Drawing/Drawing.js
@@ -114,7 +114,7 @@ var logger = Logger.getLogger("Drawing");
  * @param {Array.<Object>} [options.markersList = [{"src" : "data:image/png;base64,xxxx", "anchor" : [0.5,1]}]] - List of markers src to be used for points with their anchor offsets See {@link http://openlayers.org/en/latest/apidoc/ol.style.Icon.html OpenLayers params} for anchor offset options.
  * @param {Object} options.defaultStyles - Default styles applying to geometries (labels, lines and polygons).
  * @param {String} [options.defaultStyles.textFillColor = "#000000"] - Text fill color for labels (RGB hex value).
- * @param {String} [options.defaultStyles.textStrokeColor = "#FFFFFF"] - Text surrounding color for labels (RGB hex value).
+ * @param {String} [options.defaultStyles.textStrokeColor = "#ffffff"] - Text surrounding color for labels (RGB hex value).
  * @param {String} [options.defaultStyles.strokeColor = "#ffcc33"] - Stroke color (RGB hex value).
  * @param {Number} [options.defaultStyles.strokeWidth = 2] - Stroke width in pixels.
  * @param {String} [options.defaultStyles.polyStrokeColor = "#ffcc33"] - Stroke color (RGB hex value) for polygons.
@@ -123,7 +123,7 @@ var logger = Logger.getLogger("Drawing");
  * @param {Number} [options.defaultStyles.polyFillOpacity = 0.2] - Polygon fill opacity (alpha value between 0:transparent and 1:opaque).
  * @param {Object} options.cursorStyle - cursor (circle) style when drawing or editing.
  * @param {String} [options.cursorStyle.fillColor = "rgba(0, 153, 255, 1)"] - Cursor fill color.
- * @param {String} [options.cursorStyle.strokeColor = "#FFF"] - Cursor stroke color.
+ * @param {String} [options.cursorStyle.strokeColor = "#ffffff"] - Cursor stroke color.
  * @param {String} [options.cursorStyle.strokeWidth = 1] - Cursor surrounding stroke width.
  * @param {String} [options.cursorStyle.radius = 6] - Cursor radius.
  * @example
@@ -850,6 +850,9 @@ var Drawing = class Drawing extends Control {
             sections.appendChild(tools[i]);
         }
 
+        var containerButtonsPlugin = this._createDrawingButtonsPluginDiv();
+        sections.appendChild(containerButtonsPlugin);
+
         container.appendChild(panel);
 
         return container;
diff --git a/src/packages/Controls/Drawing/DrawingDOM.js b/src/packages/Controls/Drawing/DrawingDOM.js
index 37874399c..71d886fd5 100644
--- a/src/packages/Controls/Drawing/DrawingDOM.js
+++ b/src/packages/Controls/Drawing/DrawingDOM.js
@@ -101,6 +101,11 @@ var DrawingDOM = {
         return div;
     },
 
+    _createDrawingButtonsPluginDiv : function () {
+        var div = document.createElement("div");
+        div.className = "container-buttons-plugin fr-mx-2w";
+        return div;
+    },
     // ################################################################### //
     // ####################### Panel container ########################### //
     // ################################################################### //
diff --git a/src/packages/Controls/ElevationPath/ElevationPath.js b/src/packages/Controls/ElevationPath/ElevationPath.js
index 81abf9547..e44aa2eaa 100644
--- a/src/packages/Controls/ElevationPath/ElevationPath.js
+++ b/src/packages/Controls/ElevationPath/ElevationPath.js
@@ -536,7 +536,7 @@ var ElevationPath = class ElevationPath extends Control {
                 this.export = new ButtonExport(opts);
                 this.export.render();
                 var self = this;
-                this.export.on("export:compute", (e) => {
+                this.export.on("button:clicked", (e) => {
                     self.dispatchEvent({
                         type : "export:compute",
                         content : e.content
@@ -871,6 +871,9 @@ var ElevationPath = class ElevationPath extends Control {
         var info = this._infoContainer = this._createElevationPathInformationsElement();
         panelDiv.appendChild(info);
 
+        var plugin = this._createDrawingButtonsPluginDiv();
+        panelDiv.appendChild(plugin);
+
         if (this.options.displayProfileOptions.target === null) {
             container.appendChild(panel);
         }
diff --git a/src/packages/Controls/ElevationPath/ElevationPathDOM.js b/src/packages/Controls/ElevationPath/ElevationPathDOM.js
index 693a4cabb..7ba9dfe57 100644
--- a/src/packages/Controls/ElevationPath/ElevationPathDOM.js
+++ b/src/packages/Controls/ElevationPath/ElevationPathDOM.js
@@ -100,6 +100,12 @@ var ElevationPathDOM = {
         return div;
     },
 
+    _createDrawingButtonsPluginDiv : function () {
+        var div = document.createElement("div");
+        div.className = "container-buttons-plugin fr-mx-2w";
+        return div;
+    },
+    
     /**
      * Create Header Panel
      *
diff --git a/src/packages/Controls/Export/Export.js b/src/packages/Controls/Export/Export.js
index 4705010f5..bad55f071 100644
--- a/src/packages/Controls/Export/Export.js
+++ b/src/packages/Controls/Export/Export.js
@@ -9,6 +9,7 @@ import Control from "ol/control/Control";
 // import local
 import ID from "../../Utils/SelectorID";
 import Logger from "../../Utils/LoggerByDefault";
+import Utils from "../../Utils/Helper";
 
 // import local with ol dependencies
 import KMLExtended from "../../Formats/KML";
@@ -23,20 +24,28 @@ var logger = Logger.getLogger("export");
 /**
  * @classdesc
  *
- * Export button
+ * button that will plug into a widget and export the contents of the calculation
  *
  * @constructor
  * @alias ol.control.Export
  * @param {Object} options - options for function call.
  * @param {Number} [options.id] - Ability to add an identifier on the widget (advanced option)
+ * @param {String} [options.download = "true"] - triggering the download of the file
  * @param {String} [options.format = "geojson"] - geojson / kml / gpx
- * @param {String} [options.name = "export"] - export name
+ * @param {String} [options.name = "export"] - export name file
+ * @param {String} [options.description = "export"] - export description put into file
  * @param {String} [options.title = "Exporter"] - button name
- * @param {Boolean} [options.menu = false] - displays the format choice menu
- * @param {Function} [options.onExport] - callback
- * @param {DOMElement} [options.target] - target
- * @param {Object} options.control - instance of control
- * @fires export:compute
+ * @param {String} [options.kind = "secondary"] - button type : primary | secondary | tertiary
+ * @param {Boolean} [options.menu = false] - displays the menu
+ * @param {String} [options.direction = "row"] - buttons and menus layout
+ * @param {Object} [options.icons] - icons
+ * @param {String} [options.icons.menu = "\u2630 "] - displays the menu icon, or otherwise left blank if you don't want it
+ * @param {String} [options.icons.button = "export"] - displays the button icon : save or export icon, or otherwise left blank if you don't want it
+ * @param {Function} [options.callback] - with a callback, the implementation is your responsibility
+ * @param {DOMElement} [options.target] - target where the button will plug in. By default, the target is 'container-buttons-plugin' into the wikdget
+ * @param {Object} [options.control] - instance of control
+ * @param {Object} [options.layer] - the layer instance is retrieved from the control, but you can defined it
+ * @fires button:clicked 
  * @example
  * // pluggued widget Export into control Isocurve
  * var iso = new ol.control.Isocurve();
@@ -44,34 +53,44 @@ var logger = Logger.getLogger("export");
  *
  * // method : call render()
  * var export = new ButtonExport();
+ * export.setDownload(true);
  * export.setControl(iso);
  * export.setTarget(<!-- DOMElement -->);
  * export.setName("export");
  * export.setFormat("geojson");
+ * export.setDescription("Export Isochrone");
  * export.setTitle("Exporter");
  * export.setMenu(false);
  * export.render(); // <-- direct call to render function !
- * export.on("export:compute", (data) => { console.log(data); });
+ * export.on("button:clicked", (data) => { console.log(data); });
  *
  * // method : call map.addControl()
  * var export = new ButtonExport();
+ * export.setDownload(true);
  * export.setControl(iso);
  * export.setTarget(<!-- DOMElement -->);
  * export.setName("export");
  * export.setFormat("geojson");
+ * export.setDescription("Export Isochrone");
  * export.setTitle("Exporter");
+ * export.setKind("secondary");
  * export.setMenu(false);
- * export.on("export:compute", (data) => { console.log(data); });
+ * export.on("button:clicked", (data) => { console.log(data); });
  * map.addControl(export); // <-- using the OpenLayers mechanism, don't call to render function !
  *
  * // use control options instead of setters
  * var export = new ButtonExport({
+ *   download : true,
  *   control : iso,
  *   target : <!-- DOMElement -->,
  *   name : "export",
+ *   description : "Export Isochrone",
  *   format : "geojson",
  *   title : "Exporter",
- *   menu : false
+ *   menu : false,
+ *   callback : (content, layer) => {
+ *      console.log(content, layer);
+ *   }
  * });
  * map.addControl(export);
  *
@@ -79,9 +98,10 @@ var logger = Logger.getLogger("export");
  * var iso = new ol.control.Isocurve({ export : true });
  * // with control options :
  * var iso = new ol.control.Isocurve({ export : {
- *   name : "export",
+ *   download : false,
+ *   name : "save-iso",
  *   format : "geojson",
- *   title : "Exporter",
+ *   title : "Sauvegarde",
  *   menu : false
  * }});
  */
@@ -99,13 +119,20 @@ class ButtonExport extends Control {
      */
     constructor (options) {
         options = options || {
+            layer : null,
             control : null,
             target : null,
             format : "geojson",
             name : "export",
+            description : "export",
             title : "Exporter",
+            kind : "secondary",
             menu : false,
-            onExport : null
+            icons : {
+                menu : "\u2630 ",
+                button : ""
+            },
+            callback : null
         };
 
         logger.trace("[constructor] Export", options);
@@ -113,7 +140,7 @@ class ButtonExport extends Control {
         super({
             element : document.createElement("div"),
             render : options.render,
-            target : options.target
+            target : null
         });
 
         if (!(this instanceof ButtonExport)) {
@@ -234,8 +261,9 @@ class ButtonExport extends Control {
         // dom
         this.container = null;
         this.button = null;
+        this.inputName = null;
+        this.inputDesc = null;
         this.menu = null;
-        this.icon = "\u2630 ";
         this.menuClassHidden = "GPelementHidden gpf-hidden";
 
         this.initOptions(options);
@@ -256,9 +284,10 @@ class ButtonExport extends Control {
         if (!this.options.target) {
             if (this.options.control) {
                 // insertion du composant dans le panneau du controle
-                var container = this.options.control.getContainer();
+                var containerMain = this.options.control.getContainer();
+                var containerPlug = containerMain.querySelector(".container-buttons-plugin");
                 // ex. GP(iso|route)Panel-
-                this.options.target = container.lastChild;
+                this.options.target = containerPlug || containerMain.lastChild;
             }
         }
         if (this.container) {
@@ -278,15 +307,41 @@ class ButtonExport extends Control {
      * @private
      */
     initOptions (options) {
-        // options
-        this.options = options;
+        this.options = {
+            layer : null,
+            control : null,
+            target : null,
+            download : true,
+            format : "geojson",
+            name : "export",
+            description : "export",
+            title : "Exporter",
+            kind : "secondary",
+            menu : false,
+            icons : {
+                menu : "\u2630 ",
+                button : "export"
+            },
+            callback : null
+        };
+
+        // merge with user options
+        var icons = Utils.assign(this.options.icons, options.icons);
+        Utils.assign(this.options, options);
+        Utils.assign(this.options.icons, icons);
+
+        logger.debug(this.options);
+        
+        if (this.options.layer) {
+            // TODO test...
+        }
 
         if (this.options.control) {
-            // ...
+            // TODO test...
         }
 
         if (this.options.target) {
-            // ...
+            // TODO test...
         }
 
         var format = this.options.format;
@@ -296,10 +351,18 @@ class ButtonExport extends Control {
             this.setName("export");
         }
 
+        if (!this.options.description) {
+            this.setDescription("export");
+        }
+
         if (!this.options.title) {
             this.setTitle("Exporter");
         }
 
+        if (!this.options.kind) {
+            this.setKind("secondary");
+        }
+
         if (this.options.menu === undefined) {
             this.setMenu(false);
         }
@@ -323,54 +386,70 @@ class ButtonExport extends Control {
         // afficher l'icone du menu
         var title = this.options.title;
         if (this.options.menu) {
-            title = this.icon + this.options.title;
+            title = this.options.icons.menu + this.options.title;
         }
 
         var div = document.createElement("div");
         div.id = this._addUID("GPexportContainer");
-        div.className = "GPexportMenuContainer";
+        div.className = "GPexportMenuContainer gpf-export-menu-container gpf-export-menu-container-row";
 
-        // bouton Exporter
-        // utiliser les templates literals avec la substitution ${...}
-        var button = this.stringToHTML(`
-            <input type="button"
-                id="${this._addUID("GPexportButton")}" 
-                class="GPsubmit gpf-btn gpf-btn-icon-submit  fr-btn"
-                value="${title}">
-        `);
-
-        // add event click button
-        this.button = button.firstChild;
-        if (this.button) {
-            this.button.addEventListener("click", (e) => this.onClickButtonExport(e));
+        if (this.options.direction === "column") {
+            div.classList.replace("gpf-export-menu-container-row", "gpf-export-menu-container-column");
         }
-        div.appendChild(button.firstChild);
-
+        
         // menu des options
         // utiliser les templates literals avec la substitution ${...}
         var menu = this.stringToHTML(`
-            <div class="GPexportMenuContent ${this.menuClassHidden}">
-                <label class="container">GeoJSON
-                    <input type="radio" 
-                        id="GPmenuFormatGeojson-${this.uid}"
-                        name="format" 
-                        value="geojson">
-                    <span class="checkmark"></span>
-                </label>
-                <label class="container">KML
-                    <input type="radio" 
-                        id="GPmenuFormatKml-${this.uid}"
-                        name="format" 
-                        value="kml">
-                    <span class="checkmark"></span>
-                </label>
-                <label class="container">GPX
-                    <input type="radio" 
-                        id="GPmenuFormatGpx-${this.uid}"
-                        name="format" 
-                        value="gpx">
-                    <span class="checkmark"></span>
-                </label>
+            <div class="GPexportMenuHidden gpf-accordion fr-accordion ${this.menuClassHidden}">
+                <h3 class="gpf-accordion__title fr-accordion__title">
+                    <button type="button" 
+                        id="GPexportBtnMenuContent-${this.uid}"
+                        class="gpf-accordion__btn fr-accordion__btn" 
+                        aria-expanded="false" aria-controls="GPexportMenuContent-${this.uid}">options</button>
+                </h3>
+                <div id="GPexportMenuContent-${this.uid}"
+                    class="GPexportMenuContent fr-collapse fr-mx-2w">
+                    <div id="GPexportMenuName-${this.uid}" 
+                        class="GPexportMenuName">
+                        <label class="GPlabel gpf-label fr-label" for="GPexportMenuInputName-${this.uid}" title="Nom">Nom</label>
+                        <input type="text" id="GPexportMenuInputName-${this.uid}" class="GPinput gpf-input fr-input">
+                    </div>
+                    <div id="GPexportMenuDesc-${this.uid}"
+                        class="GPexportMenuDesc">
+                        <label class="GPlabel gpf-label fr-label" for="GPexportMenuInputDesc-${this.uid}" title="Description">Description</label>
+                        <input type="text" id="GPexportMenuInputDesc-${this.uid}" class="GPinput gpf-input fr-input">
+                    </div>
+                    <div id="GPexportMenuFormat-${this.uid}">
+                        <label class="GPlabel gpf-label fr-label" title="Formats">Formats</label>
+                        <div class="GPexportMenuFormat fr-radio-group fr-m-1w">
+                            <input type="radio" 
+                                id="GPmenuFormatGeojson-${this.uid}"
+                                name="format" 
+                                value="geojson">
+                            <label class="fr-label container" for="GPmenuFormatGeojson-${this.uid}">GeoJSON
+                                <span class="checkmark"></span>
+                            </label>
+                        </div>
+                        <div class="GPexportMenuFormat fr-radio-group fr-m-1w">
+                            <input type="radio" 
+                                id="GPmenuFormatKml-${this.uid}"
+                                name="format" 
+                                value="kml">
+                            <label class="fr-label container" for="GPmenuFormatKml-${this.uid}">KML
+                                <span class="checkmark"></span>
+                            </label>
+                        </div>
+                        <div class="GPexportMenuFormat fr-radio-group fr-m-1w">
+                            <input type="radio" 
+                                id="GPmenuFormatGpx-${this.uid}"
+                                name="format" 
+                                value="gpx">
+                            <label class="fr-label container" for="GPmenuFormatGpx-${this.uid}">GPX
+                                <span class="checkmark"></span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
             </div>
         `);
 
@@ -380,20 +459,77 @@ class ButtonExport extends Control {
                 var className = this.menu.className;
                 this.menu.className = className.replace(this.menuClassHidden, "");
             }
+            var format = this.options.format.toUpperCase();
             var radios = this.menu.querySelectorAll(`input[type=radio][name="format"]`);
-            radios.forEach((radio) => {
+            for (let i = 0; i < radios.length; i++) {
+                var radio = radios[i];
                 // radio checked par defaut
-                if (radio.id.toUpperCase().includes(this.options.format.toUpperCase())) {
+                if (radio.id.toUpperCase().includes(format)) {
                     radio.checked = true;
                 }
                 // ecouteur pour changer de format
-                radio.addEventListener("change", (e) => {
-                    this.setFormat(e.target.value);
-                });
-            });
+                radio.addEventListener("change", (e) => this.onChangeRadioFormat(e));
+            }
+
+            var btn = this.menu.querySelector("#GPexportBtnMenuContent-" + this.uid);
+            if (btn) {
+                btn.addEventListener("click", (e) => this.onClickButtonToggleOptions(e));
+            }
+
+            this.inputName = this.menu.querySelector("#GPexportMenuInputName-" + this.uid);
+            this.inputDesc = this.menu.querySelector("#GPexportMenuInputDesc-" + this.uid);
+            this.inputName.addEventListener("change", (e) => this.onChangeInputName(e));
+            this.inputDesc.addEventListener("change", (e) => this.onChangeInputDesc(e));
         }
-        div.appendChild(menu.firstChild);
+        div.appendChild(this.menu);
 
+        // bouton Exporter
+        // utiliser les templates literals avec la substitution ${...}
+        var button = this.stringToHTML(`
+            <button 
+                type="button"
+                id="${this._addUID("GPexportButton")}" 
+                class="GPexportButtonExportIcon GPsubmit gpf-btn gpf-btn-icon-export-submit fr-btn fr-m-1w">
+                ${title}
+            </button>
+        `);
+
+        // add event click button
+        this.button = button.firstChild;
+        if (this.button) {
+            this.button.addEventListener("click", (e) => this.onClickButtonExport(e));
+        }
+        // primary | secondary | tertiary
+        switch (this.options.kind) {
+            case "tertiary":
+                this.button.classList.add("fr-btn--tertiary", "gpf-btn--tertiary");
+                break;
+            case "secondary":
+                this.button.classList.add("fr-btn--secondary", "gpf-btn--secondary");
+                break;
+            case "primary":
+            default:
+                this.button.classList.add("fr-btn--primary", "gpf-btn--primary");
+                break;
+        }
+        // icon button
+        if (!this.options.icons.button) {
+            this.button.classList.remove("GPexportButtonExportIcon", "gpf-btn-icon-export-submit");
+        } else {
+            switch (this.options.icons.button) {
+                case "export":
+                    break;
+                case "save":
+                    this.button.classList.replace("GPexportButtonExportIcon", "GPexportButtonSaveIcon");
+                    this.button.classList.replace("gpf-btn-icon-export-submit", "gpf-btn-icon-save-submit");
+                    break;
+                default:
+                    this.button.classList.remove("GPexportButtonExportIcon", "gpf-btn-icon-export-submit");
+                    break;
+            }
+        }
+        div.appendChild(this.button);
+        
         this.container = div;
     }
 
@@ -482,7 +618,8 @@ class ButtonExport extends Control {
 
         // ajouter les metadonnées de calcul et de configuration
         var options = {
-            defaultStyle : style
+            defaultStyle : style,
+            extensions : {}
         };
         if (data) {
             // properties ajoutées à la racine :
@@ -492,6 +629,10 @@ class ButtonExport extends Control {
             };
         }
 
+        if (this.options.description) {
+            options.extensions.description = (this.inputDesc && this.inputDesc.value) ? this.inputDesc.value : this.options.description;
+        }
+
         var ClassName = null;
         switch (this.options.format.toUpperCase()) {
             case "KML":
@@ -549,7 +690,7 @@ class ButtonExport extends Control {
             // return;
         }
 
-        var layer = (this.options.control && this.options.control.getLayer !== undefined) ? this.options.control.getData() : this.options.layer;
+        var layer = (this.options.control && this.options.control.getLayer !== undefined) ? this.options.control.getLayer() : this.options.layer;
         var data = (this.options.control && this.options.control.getData !== undefined) ? this.options.control.getData() : {};
         var style = (this.options.control && this.options.control.getStyle !== undefined) ? this.options.control.getStyle() : {};
 
@@ -561,39 +702,93 @@ class ButtonExport extends Control {
         /**
          * event triggered when the export is finished
          *
-         * @event export:compute
+         * @event button:clicked
          * @typedef {Object}
          * @property {Object} type - event
          * @property {Object} target - instance Export
          * @property {String} content - export data
+         * @property {String} name - name
+         * @property {String} description - description
+         * @property {String} format - format : kml, geojson, ...
+         * @property {Object} layer - layer
          * @example
-         * Export.on("export:compute", function (e) {
+         * Export.on("button:clicked", function (e) {
          *   console.log(e.target);
          * })
          */
         this.dispatchEvent({
-            type : "export:compute",
-            content : content
+            type : "button:clicked",
+            content : content,
+            name : this.options.name,
+            description : this.options.description,
+            format : this.options.format,
+            layer : layer
         });
 
-        // INFO
-        // la callback annule le download du fichier.
-        if (this.options.onExport && typeof this.options.onExport === "function") {
-            this.options.onExport(content);
-            return;
+        if (this.options.download) {
+            var link = document.createElement("a");
+            // determiner le bon charset !
+            var charset = "utf-8";
+            link.setAttribute("href", "data:" + this.mimeType + ";charset=" + charset + "," + encodeURIComponent(content));
+            link.setAttribute("download", this.options.name + this.extension);
+            if (document.createEvent) {
+                var event = document.createEvent("MouseEvents");
+                event.initEvent("click", true, true);
+                link.dispatchEvent(event);
+            } else {
+                link.click();
+            }
         }
 
-        var link = document.createElement("a");
-        // determiner le bon charset !
-        var charset = "utf-8";
-        link.setAttribute("href", "data:" + this.mimeType + ";charset=" + charset + "," + encodeURIComponent(content));
-        link.setAttribute("download", this.options.name + this.extension);
-        if (document.createEvent) {
-            var event = document.createEvent("MouseEvents");
-            event.initEvent("click", true, true);
-            link.dispatchEvent(event);
+        if (this.options.callback && typeof this.options.callback === "function") {
+            this.options.callback(content, layer);
+        }
+    }
+
+    /**
+     * 
+     * @param {*} e - Click
+     */
+    onChangeRadioFormat (e) {
+        this.setFormat(e.target.value);
+    }
+
+    /**
+     * 
+     * @param {*} e - Click
+     */
+    onChangeInputName (e) {
+        this.setName(e.target.value);
+    }
+
+    /**
+     * 
+     * @param {*} e - Click
+     */
+    onChangeInputDesc (e) {
+        this.setDescription(e.target.value);
+    }
+
+    /**
+     * 
+     * @param {*} e - Click
+     */
+    onClickButtonToggleOptions (e) {
+        e.target.ariaExpanded = !(e.target.ariaExpanded === "true");
+        var collapse = this.menu.querySelector("#" + e.target.getAttribute("aria-controls"));
+        if (!collapse) {
+            return;
+        }
+        if (e.target.ariaExpanded === "true") {
+            collapse.classList.add("fr-collapse--expanded");
+            this.menu.classList.add("gpf-full-container");
+            this.menu.classList.add("gpf-accordion--opened");
+            collapse.classList.remove("GPelementHidden");
         } else {
-            link.click();
+            collapse.classList.remove("fr-collapse--expanded");
+            this.menu.classList.remove("gpf-full-container");
+            this.menu.classList.remove("gpf-accordion--opened");
+            collapse.classList.add("GPelementHidden");
         }
     }
 
@@ -665,6 +860,15 @@ class ButtonExport extends Control {
         this.options.name = name;
     }
 
+    /**
+     * ...
+     * @param {String} desc - ...
+     * @public
+     */
+    setDescription (desc) {
+        this.options.description = desc;
+    }
+
     /**
      * ...
      * @param {String} title - ...
@@ -674,7 +878,32 @@ class ButtonExport extends Control {
         this.options.title = title;
         if (this.button) {
             // afficher l'icone du menu / titre
-            this.button.value = (this.options.menu) ? this.icon + title : title;
+            this.button.textContent = (this.options.menu) ? this.options.icons.menu + title : title;
+        }
+    }
+
+    /**
+     * ...
+     * @param {String} type - ...
+     * @public
+     */
+    setKind (type) {
+        this.options.kind = type;
+        if (this.button) {
+            this.button.classList.remove("fr-btn--tertiary", "gpf-btn--tertiary");
+            this.button.classList.remove("fr-btn--secondary", "gpf-btn--secondary");
+            switch (this.options.kind) {
+                case "tertiary":
+                    this.button.classList.add("fr-btn--tertiary", "gpf-btn--tertiary");
+                    break;
+                case "secondary":
+                    this.button.classList.add("fr-btn--secondary", "gpf-btn--secondary");
+                    break;
+                case "primary":
+                default:
+                    this.button.classList.add("fr-btn--primary", "gpf-btn--primary");
+                    break;
+            }
         }
     }
 
@@ -687,27 +916,42 @@ class ButtonExport extends Control {
         this.options.menu = active;
         if (this.button) {
             // afficher l'icone du menu / titre
-            this.button.value = (this.options.menu) ? this.icon + this.options.title : this.options.title;
+            this.button.textContent = (this.options.menu) ? this.options.icons.menu + this.options.title : this.options.title;
         }
         if (this.menu && this.options.menu) {
             // afficher le menu
             var className = this.menu.className;
             this.menu.className = className.replace(this.menuClassHidden, "");
             // format par defaut
+            var format = this.options.format.toUpperCase();
             var radios = this.menu.querySelectorAll(`input[type=radio][name="format"]`);
-            radios.forEach((radio) => {
-                // radio checked par defaut
-                if (radio.id.toUpperCase().includes(this.options.format.toUpperCase())) {
+            for (let i = 0; i < radios.length; i++) {
+                var radio = radios[i];
+                if (radio.id.toUpperCase().includes(format)) {
                     radio.checked = true;
                 }
-            });
+            }
         }
     }
 
+    /**
+     * ...
+     * @param {*} layer  - ...
+     * @public
+     */
     setLayer (layer) {
         this.options.layer = layer;
     }
 
+    /**
+     * ...
+     * @param {Boolean} value - ...
+     * @public
+     */
+    setDownload (value) {
+        this.options.download = value;
+    }
+
 };
 
 // on récupère les méthodes de la classe DOM
diff --git a/src/packages/Controls/GetFeatureInfo/GetFeatureInfo.js b/src/packages/Controls/GetFeatureInfo/GetFeatureInfo.js
index 2709edf67..b6c93a94f 100644
--- a/src/packages/Controls/GetFeatureInfo/GetFeatureInfo.js
+++ b/src/packages/Controls/GetFeatureInfo/GetFeatureInfo.js
@@ -32,7 +32,6 @@ var logger = Logger.getLogger("getFeatureInfo");
  * @extends {ol.control.Control}
  * @param {Object} options - options for function call.
  *
- * @fires custom:action
  * @example
  * var getFeatureInfo = new ol.control.GetFeatureInfo();
  * map.addControl(getFeatureInfo);
diff --git a/src/packages/Controls/Isocurve/Isocurve.js b/src/packages/Controls/Isocurve/Isocurve.js
index 2ed8ac94a..d43f45834 100644
--- a/src/packages/Controls/Isocurve/Isocurve.js
+++ b/src/packages/Controls/Isocurve/Isocurve.js
@@ -152,7 +152,7 @@ var Isocurve = class Isocurve extends Control {
                 this.export = new ButtonExport(opts);
                 this.export.render();
                 var self = this;
-                this.export.on("export:compute", (e) => {
+                this.export.on("button:clicked", (e) => {
                     self.dispatchEvent({
                         type : "export:compute",
                         content : e.content
@@ -890,13 +890,15 @@ var Isocurve = class Isocurve extends Control {
             footer.appendChild(buttonReset);
         }
 
-
         // form: bouton du calcul
         var buttonSubmit = this._submitContainer = this._createIsoSubmitFormElement();
         footer.appendChild(buttonSubmit);
 
         panelDiv.appendChild(form);
 
+        var plugin = this._createDrawingButtonsPluginDiv();
+        panelDiv.appendChild(plugin);
+        
         // waiting
         var waiting = this._waitingContainer = this._createIsoWaitingElement();
         panel.appendChild(waiting);
diff --git a/src/packages/Controls/Isocurve/IsocurveDOM.js b/src/packages/Controls/Isocurve/IsocurveDOM.js
index a646b8901..ab7907141 100644
--- a/src/packages/Controls/Isocurve/IsocurveDOM.js
+++ b/src/packages/Controls/Isocurve/IsocurveDOM.js
@@ -100,6 +100,12 @@ var IsoDOM = {
         return div;
     },
 
+    _createDrawingButtonsPluginDiv : function () {
+        var div = document.createElement("div");
+        div.className = "container-buttons-plugin fr-mx-2w";
+        return div;
+    },
+
     /**
      * Create Header Panel
      *
diff --git a/src/packages/Controls/LayerImport/LayerImport.js b/src/packages/Controls/LayerImport/LayerImport.js
index 0b86551b8..33703798e 100644
--- a/src/packages/Controls/LayerImport/LayerImport.js
+++ b/src/packages/Controls/LayerImport/LayerImport.js
@@ -70,6 +70,12 @@ var logger = Logger.getLogger("layerimport");
  * @alias ol.control.LayerImport
  * @extends {ol.control.Control}
  * @type {ol.control.LayerImport}
+ * @fires layerimport:mapbox:added
+ * @fires layerimport:vector:added
+ * @fires layerimport:service:added
+ * @fires editor:loaded
+ * @fires render:success
+ * @fires render:failure
  * @param {Object} options - options for function call.
  * @param {Number} [options.id] - Ability to add an identifier on the widget (advanced option)
  * @param {Boolean} [options.collapsed = true] - Specify if LayerImport control should be collapsed at startup. Default is true.
@@ -1592,6 +1598,29 @@ var LayerImport = class LayerImport extends Control {
                         // ajout du layer sur la carte
                         map.addLayer(p.layer);
 
+                        /**
+                         * event triggered when a layer is added
+                         *
+                         * @event layerimport:mapbox:added
+                         * @property {Object} type - event
+                         * @property {String} name - layerName
+                         * @property {String} data - data
+                         * @property {Object} layer - layer
+                         * @property {String} format - format
+                         * @property {Object} target - instance LayerImport
+                         * @example
+                         * LayerImport.on("layerimport:mapbox:added", function (e) {
+                         *   console.log(e.layer);
+                         * })
+                         */
+                        this.dispatchEvent({
+                            type : "layerimport:mapbox:added",
+                            name : layerName,
+                            data : fileContent,
+                            layer : p.layer,
+                            format : this._currentImportType.toLowerCase() || "mapbox"
+                        });
+
                         // application du style
                         if (p.layer.getSource()) {
                             setStyle();
@@ -1738,6 +1767,29 @@ var LayerImport = class LayerImport extends Control {
                     map.getView().fit(sourceExtent, map.getSize());
                 }
             }
+
+            /**
+             * event triggered when a layer is added
+             *
+             * @event layerimport:vector:added
+             * @property {Object} type - event
+             * @property {String} name - layerName
+             * @property {String} data - data
+             * @property {Object} layer - layer
+             * @property {String} format - format
+             * @property {Object} target - instance LayerImport
+             * @example
+             * LayerImport.on("layerimport:vector:added", function (e) {
+             *   console.log(e.layer);
+             * })
+             */
+            this.dispatchEvent({
+                type : "layerimport:vector:added",
+                name : layerName,
+                data : fileContent,
+                layer : vectorLayer,
+                format : this._currentImportType.toLowerCase()
+            });
         }
     }
 
@@ -1837,6 +1889,29 @@ var LayerImport = class LayerImport extends Control {
                 map.getView().fit(sourceExtent, map.getSize());
             }
         }
+
+        /**
+         * event triggered when a layer is added
+         *
+         * @event layerimport:vector:added
+         * @property {Object} type - event
+         * @property {String} name - layerName
+         * @property {String} url - url
+         * @property {Object} layer - layer
+         * @property {String} format - format
+         * @property {Object} target - instance LayerImport
+         * @example
+         * LayerImport.on("layerimport:vector:added", function (e) {
+         *   console.log(e.layer);
+         * })
+         */
+        this.dispatchEvent({
+            type : "layerimport:vector:added",
+            name : layerName,
+            url : url,
+            layer : vectorLayer,
+            format : this._currentImportType.toLowerCase()
+        });
     }
 
     // Events MapBox DOM
@@ -2452,6 +2527,29 @@ var LayerImport = class LayerImport extends Control {
                 map.getView().fit(sourceExtent, map.getSize());
             }
         }
+
+        /**
+         * event triggered when a layer is added
+         *
+         * @event layerimport:service:added
+         * @property {Object} type - event
+         * @property {String} name - layerName
+         * @property {String} data - data
+         * @property {Object} layer - layer
+         * @property {String} format - format
+         * @property {Object} target - instance LayerImport
+         * @example
+         * LayerImport.on("layerimport:service:added", function (e) {
+         *   console.log(e.layer);
+         * })
+         */
+        this.dispatchEvent({
+            type : "layerimport:service:added",
+            name : layerInfo.Name,
+            data : layerInfo,
+            layer : wmsLayer,
+            format : "wms"
+        });
     }
 
     /**
@@ -2802,6 +2900,29 @@ var LayerImport = class LayerImport extends Control {
                 map.getView().fit(sourceExtent, map.getSize());
             }
         }
+
+        /**
+         * event triggered when a layer is added
+         *
+         * @event layerimport:service:added
+         * @property {Object} type - event
+         * @property {String} name - layerName
+         * @property {String} data - data
+         * @property {Object} layer - layer
+         * @property {String} format - format
+         * @property {Object} target - instance LayerImport
+         * @example
+         * LayerImport.on("layerimport:service:added", function (e) {
+         *   console.log(e.layer);
+         * })
+         */
+        this.dispatchEvent({
+            type : "layerimport:service:added",
+            name : layerInfo.Identifier,
+            data : layerInfo,
+            layer : wmtsLayer,
+            format : "wmts"
+        });
     }
 
     /**
diff --git a/src/packages/Controls/Route/Route.js b/src/packages/Controls/Route/Route.js
index 8eb9e8432..3a9c737ab 100644
--- a/src/packages/Controls/Route/Route.js
+++ b/src/packages/Controls/Route/Route.js
@@ -161,7 +161,7 @@ var Route = class Route extends Control {
                 this.export = new ButtonExport(opts);
                 this.export.render();
                 var self = this;
-                this.export.on("export:compute", (e) => {
+                this.export.on("button:clicked", (e) => {
                     self.dispatchEvent({
                         type : "export:compute",
                         content : e.content
@@ -738,6 +738,9 @@ var Route = class Route extends Control {
         // results
         var routeResults = this._resultsRouteContainer = this._createRoutePanelResultsElement();
         routePanelDiv.appendChild(routeResults);
+        
+        var plugin = this._createDrawingButtonsPluginDiv();
+        routePanelDiv.appendChild(plugin);
 
         // waiting
         var waiting = this._waitingContainer = this._createRouteWaitingElement();
diff --git a/src/packages/Controls/Route/RouteDOM.js b/src/packages/Controls/Route/RouteDOM.js
index afdc571ff..852c82d79 100644
--- a/src/packages/Controls/Route/RouteDOM.js
+++ b/src/packages/Controls/Route/RouteDOM.js
@@ -107,6 +107,12 @@ var RouteDOM = {
         return div;
     },
 
+    _createDrawingButtonsPluginDiv : function () {
+        var div = document.createElement("div");
+        div.className = "container-buttons-plugin fr-mx-2w";
+        return div;
+    },
+    
     /**
      * Create Header Panel
      *
diff --git a/src/packages/Controls/Territories/Territories.js b/src/packages/Controls/Territories/Territories.js
index ecf457573..741b12dcf 100644
--- a/src/packages/Controls/Territories/Territories.js
+++ b/src/packages/Controls/Territories/Territories.js
@@ -30,7 +30,7 @@ var logger = Logger.getLogger("territories");
  * @extends {ol.control.Control}
  * @param {Object} options - options for function call.
  *
- * @fires custom:action
+ * @fires territories:change
  * @example
  * var territories = new ol.control.Territories({
  *   collapsed: true,
@@ -402,6 +402,22 @@ var Territories = class Territories extends Control {
                 map.getView().setZoom(zoom);
             }
             this.setCollapse(true);
+            /**
+             * event triggered when a territory is clicked
+             *
+             * @event territories:change
+             * @property {Object} type - event
+             * @property {Object} target - instance Territories
+             * @property {Object} territory - territory
+             * @example
+             * Route.on("territories:change", function (e) {
+             *   console.log(e.target.getData());
+             * })
+             */
+            this.dispatchEvent({
+                type : "territories:change",
+                territory : territory
+            });
         }
     }