diff --git a/templates/web/prod/WorkZone/ExposeEdit.html.twig b/templates/web/prod/WorkZone/ExposeEdit.html.twig
index 33e91f01c9..56e815bd24 100644
--- a/templates/web/prod/WorkZone/ExposeEdit.html.twig
+++ b/templates/web/prod/WorkZone/ExposeEdit.html.twig
@@ -2,7 +2,7 @@
     <div id='DIALOG-expose-edit' style="display: none">
 
         <div class="expose-edit-wrapper">
-            <form name="publication-data" id="publication-data-form">
+            <form name="publication-data" id="publication-data-form-edit">
                 <div class="edit-publication-block">
                     <div class="ui-widget">
                         <label>Name </label>
@@ -16,7 +16,7 @@
                     </div>
                     <div class="ui-widget">
                         <label>Parent publication </label>
-                        <div id="publication-list-data" class="ui-widget publication_parent_wrapper ">
+                        <div id="publication-list-data-edit" class="ui-widget publication_parent_wrapper ">
                             <select id="publication_parent" name="parentId" tabindex="-1" aria-hidden="true"
                                     class="publication-field">
                                 <option value="">Select a parent publication</option>
diff --git a/templates/web/prod/WorkZone/ExposeList.html.twig b/templates/web/prod/WorkZone/ExposeList.html.twig
index 0d34538ea2..dcde82b34a 100644
--- a/templates/web/prod/WorkZone/ExposeList.html.twig
+++ b/templates/web/prod/WorkZone/ExposeList.html.twig
@@ -31,32 +31,4 @@
         </div>
     </div>
 {% endfor %}
-<script>
-    $('.expose_basket_item .top_block').on('click', function (event) {
-        $(this).parent().find('.expose_item_deployed').toggleClass('open');
-        $(this).toggleClass('open');
-    });
-    $('.edit_expose').on('click',function (event) {
-        editExposeOnBasket();
-    });
-    function editExposeOnBasket() {
-        $('#DIALOG-expose-edit').attr('title','Edit expose title')
-            .dialog({
-                autoOpen: false,
-                closeOnEscape: true,
-                resizable: true,
-                draggable: true,
-                width: 900,
-                height: 575,
-                modal: true,
-                overlay: {
-                    backgroundColor: '#000',
-                    opacity: 0.7
-                }
-            }).dialog('open');
-        $('.ui-dialog').addClass('black-dialog-wrap publish-dialog');
-        $('.close-expose-modal').on('click', function () {
-            $('#DIALOG-expose-edit').dialog('close');
-        });
-    }
-</script>
+
diff --git a/templates/web/prod/WorkZone/ExposeNew.html.twig b/templates/web/prod/WorkZone/ExposeNew.html.twig
new file mode 100644
index 0000000000..294dd69479
--- /dev/null
+++ b/templates/web/prod/WorkZone/ExposeNew.html.twig
@@ -0,0 +1,358 @@
+{% macro add_expose(app) %}
+    <div id='DIALOG-expose-add' style="display: none">
+
+        <div class="expose-edit-wrapper" style="margin-top: 100px">
+            <form id="publication-data-form" >
+                <div class="edit-publication-block">
+                    <div class="ui-widget">
+                        <label>Name </label>
+                        <input type="text" value="" name="title" class="publication-field"/>
+                    </div>
+                    <div class="ui-widget">
+                        <label>Slug: </label>
+                        <input type="text" value="" name="slug" class=" slug publication-field"/><input type="button"
+                                                                                                  class="blue_button edit_expose"
+                                                                                                  value="check slug availability">
+                    </div>
+                    <div class="ui-widget">
+                        <label>Parent publication </label>
+                        <div id="publication-list-data" class="ui-widget publication_parent_wrapper ">
+                            <select id="publication_parent" name="parentId" tabindex="-1" aria-hidden="true"
+                                    class="publication-field">
+                                <option value="">Select a parent publication</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="ui-widget profile-wrapper hide">
+                        <label>Profile </label>
+                        <select id="profile-field" name="profile" tabindex="-1" aria-hidden="true"
+                                class="publication-field">
+                            <option value="">Select Profile</option>
+                        </select>
+                    </div>
+                    <div class="ui-widget">
+                        <label>Enabled </label>
+                        <label class="switch">
+                            <input id="enabled_combobox" type="checkbox" class="publication-field" name="enabled">
+                            <span class="slider round"></span>
+                        </label>
+                    </div>
+                    <div class="ui-widget available-wrapper">
+                        <label>Available (leave blank for permanet publication): </label>
+                        <div class="available-widget">
+                            <label>From </label>
+                            <input type="text" value="" name="beginsAt" class="use-datepicker publication-field"/>
+                        </div>
+                        <div class="available-widget">
+                            <label>To </label>
+                            <input type="text" value="" name="expiresAt" class="use-datepicker publication-field"/>
+                        </div>
+                    </div>
+                    <div class="ui-widget">
+                        <label>Publicity listing </label>
+                        <label class="switch">
+                            <input id="publication_publiclyListed" type="checkbox" class="publication-field" name="publiclyListed">
+                            <span class="slider round"></span>
+                        </label>
+                    </div>
+                    <div class="ui-widget access-wrapper">
+                        <label>Access rules </label>
+                        <select id="publication_securityMethod" name="securityMethod" tabindex="-1" aria-hidden="true"
+                                class="publication-field">
+                            <option value="">open access</option>
+                            <option value="password">password</option>
+                            <option value="authentication">users</option>
+                        </select>
+                        <div class="ui-widget securityOptions_wrapper visibility-hidden"">
+                            <label>Password: </label><input class="publication-field" type="text" name="password"
+                                                            id="publication_password"/>
+                        </div>
+                    <div class="ui-widget publication_securityMethod_error hidden"
+                         id="publication_securityMethod_error">
+                        <p class="error form-error alert alert-error">Not implemented</p>
+                    </div>
+                    </div>
+                    <div class="ui-widget">
+                        <label>Layout </label>
+                        <select id="publication_layout" name="layout" tabindex="-1" aria-hidden="true"
+                                class="publication-field">
+                            <option value="" selected="selected">Select Layout</option>
+                            <option value="gallery">Gallery</option>
+                            <option value="mapbox">Mapbox</option>
+                            <option value="download">Download</option>
+                        </select>
+                    </div>
+                    <div class="ui-widget">
+                        <label>Theme </label>
+                        <select id="theme-field" name="theme" tabindex="-1" aria-hidden="true"
+                                class="publication-field">
+                            <option value="">Select Theme</option>
+                            <option value="light">Light</option>
+                            <option value="dark">Dark</option>
+                        </select>
+                    </div>
+
+
+
+                <div class="submit-block">
+                    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
+                        <div class="ui-dialog-buttonset">
+                            <button type="button"
+                                    class="close-expose-modal ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
+                                    role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span>
+                            </button>
+                            <button type="button"
+                                    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
+                                    role="button" aria-disabled="false"><span class="ui-button-text">Validate</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+
+        <form name="publication-json" id="publication-json">
+            <div id="advancedSettingBlock">
+                <h3 class="toggleSetting">Advanced setting</h3>
+                <div id="advancedSettingInner" class="hidden">
+                    <div>
+                                <textarea name="advancedSetting" id="advancedSetting" cols="100"
+                                          rows="11"></textarea></div>
+
+                </div>
+            </div>
+            <div class="publication-btn-container">
+                <button type="submit" class="btn btn-success" id="create-publication">
+                    Create publication {% if lst %} from {{ lst|split(';')|length }} selected {% endif %}
+                </button>
+                <p><span id="pub-error" class="hidden alert alert-error"></span></p>
+                <p><span id="pub-success" class="hidden alert alert-success"></span></p>
+            </div>
+        </form>
+
+
+        </div>
+    </div>
+    <script type="text/javascript">
+         // Create
+        /**convert Object data  to Json**/
+        function booleanizeObject(obj) {
+            var keys = Object.keys(obj);
+            keys.forEach(function (key) {
+                var value = obj[key];
+                if (typeof value === 'string') {
+                    var lvalue = value.toLowerCase();
+                    if (lvalue === 'true') {
+                        obj[key] = true;
+                    } else if (lvalue === 'false') {
+                        obj[key] = false;
+                    }
+                } else if (typeof value === 'object') {
+                    booleanizeObject(obj[key]);
+                }
+            });
+        }
+
+        $(document).ready(function () {
+            $(".toggleSetting").click(function (e) {
+                $(this).toggleClass('open');
+                $('#advancedSettingInner').toggleClass('hidden');
+            });
+            var test = '';
+            /*$.ajax({
+                type: "GET",
+                url: `{{ config.exposeBaseUri }}/publications`,
+                headers: {
+                    'Authorization': 'Bearer ' + '{{ config.token }}',
+                },
+                success: function (data) {
+                    console.log(data['hydra:member']);
+                    data['hydra:member'].map(function (index) {
+                        $('#publication-list-data select').append('<option value="' + index.id + '"  data-title= "' + index.title + '" data-slug= "' + index.slug + '" >' + index.title + '</option>');
+                    });
+
+                }
+            });*/
+
+        });
+
+        function buildData() {
+            try {
+                var allData = $('#publication-data-form').serializeArray();
+                console.log(allData);
+                var dataValue = allData.reduce((acc, it) => {
+                        acc[it.name] = it.value;
+                return acc;
+            }, {});
+
+                /**Build Config elt**/
+                var config = {};
+
+                if (dataValue.layout != '') {
+                    config = {...config, layout: dataValue.layout};
+                }
+                if (dataValue.enabled == 'on') {
+                    config = {...config, enabled: true};
+                }else{
+                    config = {...config, enabled: false};
+                }
+                if (dataValue.publiclyListed == 'on') {
+                    config = {...config, publiclyListed: true};
+                }else{
+                    config = {...config, publiclyListed: false};
+                }
+                if (dataValue.securityMethod != '') {
+                    config = {...config, securityMethod: dataValue.securityMethod};
+                }
+                if (dataValue.password) {
+                    config = {...config, password: dataValue.password};
+                }
+
+                if (dataValue.beginsAt) {
+                    config = {...config, beginsAt: dataValue.beginsAt};
+                }
+                if (dataValue.expiresAt) {
+                    config = {...config, expiresAt: dataValue.expiresAt};
+                }
+
+                if (dataValue.theme) {
+                    config = {...config, theme: dataValue.theme};
+                }
+
+                dataValue = {...dataValue, config};
+
+
+                booleanizeObject(dataValue);
+
+
+                return dataValue;
+
+            } catch (err) {
+                return;
+            }
+        }
+
+        function removeSecurityField() {
+            var datavalueMinus = buildData();
+
+            if ($("#publication_parent").val() == "") {
+                delete datavalueMinus['parentId'];
+            }
+
+            if ($("#profile-field").val() == "") {
+                delete datavalueMinus['profile'];
+            }
+            ;
+
+            delete datavalueMinus['layout'];
+            delete datavalueMinus['enabled'];
+            delete datavalueMinus['publiclyListed'];
+            delete datavalueMinus['password'];
+            delete datavalueMinus['securityMethod'];
+            delete datavalueMinus['theme'];
+            delete datavalueMinus['beginsAt'];
+            delete datavalueMinus['expiresAt'];
+
+            $('#advancedSetting').val(JSON.stringify(datavalueMinus, undefined, 4));
+            console.log(JSON.stringify(datavalueMinus, undefined, 4));
+
+        }
+
+        $('.publication-field').on('keyup change', function (e) {
+            removeSecurityField();
+            /**Toggle display the Security option field**/
+            $("#publication_securityMethod").change(function (e) {
+                var dataValue = buildData();
+                dataValue["securityMethod"] = '';
+                var Svalue = $(this).val();
+                if (Svalue !== '') {
+                    dataValue["securityMethod"] = Svalue;
+
+                    if (Svalue == 'authentication') {
+                        $("#publication_password").val('');
+                        $("#publication_securityMethod_error").removeClass('hidden');
+                    } else {
+                        $("#publication_securityMethod_error").addClass('hidden');
+                    }
+                } else {
+                    $("#publication_password").val('');
+                };
+                removeSecurityField();
+                if (Svalue == 'password') {
+                    $(".securityOptions_wrapper").removeClass('visibility-hidden');
+
+                } else {
+                    $(".securityOptions_wrapper").addClass('visibility-hidden');
+                };
+
+            });
+
+            /**checkbox to show profile field **/
+            checkProfile = $("#add-profile").is(":checked");
+            if (checkProfile) {
+                $(".profile-wrapper").removeClass("hide");
+            } else {
+                $(".profile-wrapper").addClass("hide");
+                $("#profile-field").val('');
+                removeSecurityField();
+            }
+
+        });
+
+        /**Selected Parent info **/
+        $(document).on('change', '#publication_parent', function (e) {
+            var selectedparent = $(this).children('option:selected');
+            if (selectedparent.val() !== "") {
+                $('#parent_info').html('').append('<p>Title : ' + selectedparent.data('title') + '</p><p>Slug: ' + selectedparent.data('slug') + '</p>');
+            } else {
+                $('#parent_info').html('');
+            }
+        });
+
+
+        $('#publication-json').on('submit', function (e) {
+            e.preventDefault();
+            try {
+                $("#pub-error").addClass("hidden");
+
+            } catch (err) {
+                $("#pub-error").removeClass("hidden").text(err.message);
+                return;
+            }
+            $.ajax({
+                type: "POST",
+                url: "../expose/create-publication/",
+                dataType: 'json',
+                data: {
+                    exposeName: "Expose to use for testing",
+                    publicationData: $('#advancedSetting').val()
+                },
+                success: function (data) {
+                    if (data.success) {
+                        $("#pub-success").removeClass("hidden").html(data.message + ": " + data.link);
+                        document.getElementById("publication-data-form").reset();
+                    } else {
+                        $("#pub-error").removeClass("hidden").text(data.message);
+                    }
+                }
+            });
+        });
+        $('.publication-field').on('keyup change', function (e) {
+            try {
+                $("#pub-success").addClass("hidden");
+                $("#pub-error").addClass("hidden");
+                // JSON.parse($(this).val());
+                jQuery.parseJSON(JSON.stringify($(this).val()));
+            } catch (err) {
+                $("#pub-error").removeClass("hidden").text(err.message);
+            }
+        });
+    </script>
+    <style>
+        .visibility-hidden {
+            visibility: hidden;
+        }
+        .publication-block .ui-widget.hide {
+            display: none;
+        }
+    </style>
+{% endmacro %}
diff --git a/templates/web/prod/WorkZone/Macros.html.twig b/templates/web/prod/WorkZone/Macros.html.twig
index 3456d9560f..8fb5436949 100644
--- a/templates/web/prod/WorkZone/Macros.html.twig
+++ b/templates/web/prod/WorkZone/Macros.html.twig
@@ -470,13 +470,14 @@
         <div id="expose_sel" class="custom_select_dark" style="display: inline-block;">
             {% set expose_list= app['conf'].get(['phraseanet-service', 'expose-service', 'exposes']) %}
 
-            <select name="expose_list" class="expose_list">
+            <select id="expose_list" name="expose_list" class="expose_list">
                 <option value="">{{ 'prod:: workzone:expose: select expose' | trans }}</option>
                 {% for key in expose_list|keys %}
                     <option value="{{ key }}">{{ key }}</option>
                 {% endfor %}
             </select>
         </div>
+        <div class="add_expose_block"><a id="add_expose" class="add_expose" href="#" ><span>{{ 'prod:: workzone:expose: Add expose' | trans }}</span><img src="/assets/common/images/icons/Basket-New.png" title="New Expose"></a></div>
         <div class="insidebloc expose_insidebloc">
             <div id="validations-block" class="validations-block SSTT publication-list">
             </div>
@@ -487,22 +488,7 @@
     {% import 'prod/WorkZone/ExposeEdit.html.twig' as Expose %}
     {{ Expose.display_edit(app) }}
 
-    <script type="text/javascript">
-        $('.expose_list').on('change', function () {
-            $('.publication-list').empty().html('<img src="/assets/common/images/icons/main-loader.gif" alt="loading"/>');
-            $.ajax({
-                type: "GET",
-                url: `/prod/expose/list-publication/?exposeName=` + this.value,
-                success: function (data) {
-                    $('.publication-list').empty().html(data);
-                }
-            });
-        });
-
-        $('.publication-list').on('click', '.top-block' , function (event) {
-            $(this).parent().find('.expose_item_deployed').toggleClass('open');
-            $(this).toggleClass('open');
-        });
-    </script>
+    {% import 'prod/WorkZone/ExposeNew.html.twig' as ExposeNew %}
+    {{ ExposeNew.add_expose(app) }}
 
 {% endmacro %}