diff --git a/examples/al-gaiadr3.html b/examples/al-gaiadr3.html
new file mode 100644
index 00000000..206e9b00
--- /dev/null
+++ b/examples/al-gaiadr3.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+
+    <meta charset="utf-8">
+    <!-- Recommendation for users smartphone/tablets users -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+    <title>Explore Gaia DR3 in Aladin Lite</title>
+  </head>
+
+  <body>
+    <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+    <form class="pure-form pure-form-stacked">
+        <fieldset>
+          <label for="option-gdr3-flux-color-map" class="pure-radio">
+            <input id="option-gdr3-flux-color-map" type="radio" name="img-hips" value="CDS/P/DM/flux-color-Rp-G-Bp/I/350/gaiaedr3" checked>
+            Gaia DR3 flux map
+          </label>
+          <label for="option-gdr3-density-map" class="pure-radio">
+            <input id="option-gdr3-density-map" type="radio" name="img-hips" value="CDS/P/DM/I/350/gaiaedr3">
+            Gaia DR3 density map
+          </label>
+          <label for="option-DSS-map" class="pure-radio">
+            <input id="option-DSS-map" type="radio" name="img-hips" value="P/DSS2/color">
+            DSS Color
+          </label>
+          <label for="option-PS1-map" class="pure-radio">
+            <input id="option-PS1-map" type="radio" name="img-hips" value="P/PanSTARRS/DR1/color-z-zg-g">
+            Pan-STARRS
+          </label>
+
+        </fieldset>
+      </form>
+
+  </body>
+
+  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
+  <script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+  <script type="text/javascript">
+    $('#layersControl').show();
+
+    var curSelectedSource = null;
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', { fov: 100, cooFrame: 'galactic', fullscreen: true, showSimbadPointerControl: true });
+        aladin.gotoRaDec(297.87, 25.96);
+        aladin.setProjection('MOL');
+
+        const fluxMap = aladin.createImageSurvey('gdr3-color-flux-map', 'Gaia DR3 flux map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/color-Rp-G-Bp-flux-map', 'equatorial', 7);
+        const densityMap = aladin.createImageSurvey('gdr3-density-map', 'Gaia DR3 density map', 'https://alasky.u-strasbg.fr/ancillary/GaiaEDR3/density-map', 'equatorial', 7, {imgFormat: 'fits'});
+
+        aladin.setImageSurvey(fluxMap);
+
+        var hipsCats = {
+            //'gdr3': A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/I/355/gaiadr3', { name: 'Gaia DR3 sources', shape: 'circle', sourceSize: 8, color: '#d66bae' }),
+            'simbad': A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', { name: 'Simbad', color: '#6dbdce' })
+        };
+
+        hipsCats['simbad'].hide();
+
+        aladin.addCatalog(hipsCats['simbad']);
+        //aladin.addCatalog(hipsCats['gdr3']);
+
+        cmDensMapChanged = false;
+        // listen changes on HiPS image background selection
+        $('input[type=radio][name=img-hips]').change(function () {
+            if (this.value == 'CDS/P/DM/I/350/gaiaedr3') {
+                aladin.setBaseImageLayer(densityMap);
+            }
+            else if (this.value == "CDS/P/DM/flux-color-Rp-G-Bp/I/350/gaiaedr3") {
+                aladin.setBaseImageLayer(fluxMap);
+            } else {
+                aladin.setBaseImageLayer(this.value)
+            }
+        });
+
+
+        // listen changes on HiPS catalogues selection
+        $('#overlay-form :checkbox').change(function () {
+            var cat = hipsCats[this.value];
+
+            if (this.checked) {
+                cat.show();
+            }
+            else {
+                cat.hide();
+            }
+        });
+
+        // listen to click on objects
+        aladin.on('objectClicked', function (source) {
+            var html = '<table class="pure-table">';
+
+            if (curSelectedSource != null) {
+                curSelectedSource.deselect();
+            }
+            if (source == null) {
+                $('#explain').html('');
+                $('#explain').hide();
+                return;
+            }
+
+            source.select();
+            curSelectedSource = source;
+            html += '<tbody>';
+            if (source.catalog.name !== 'Simbad') {
+                html += '<h3>Gaia DR3 <em>' + source.data.Source + '</em></h3>';
+                html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.RAdeg + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data['parallax'] + '</td><td><em>mas</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data['pmra'] + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmdec</b></td><td>' + source.data['pmdec'] + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Gmag</b></td><td>' + source.data['phot_g_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Bpmag</b></td><td>' + source.data['phot_bp_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>Rpmag</b></td><td>' + source.data['phot_rp_mean_mag'] + '</td><td><em>mag</em></td></tr>';
+                html += '</tbody>';
+                html += '</table>';
+
+                html += '<br/><a target="_blank" href="https://vizier.u-strasbg.fr/viz-bin/VizieR-5?-out.form=%2bH&-source=I/350/gaiaedr3&Source=' + source.data.source_id + '">More details</a>';
+            }
+            else {
+                console.log(source.data);
+                html += '<h3>Simbad object <em>' + source.data.main_id + '</em></h3>';
+                html += '<tr class="pure-table-odd"><td><b>ra</b></td><td>' + source.data.ra + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>dec</b></td><td>' + source.data.dec + '</td><td><em>deg</em></td></tr>';
+                html += '<tr><td><b>main_type</b></td><td>' + source.data.main_type + '</td><td><em>deg</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>pmra</b></td><td>' + source.data.pmra + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr><td><b>pmdec</b></td><td>' + source.data.pmdec + '</td><td><em>mas/yr</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>parallax</b></td><td>' + source.data.plx + '</td><td><em>mas</em></td></tr>';
+                html += '<tr><td><b>B mag.</b></td><td>' + source.data.B + '</td><td><em>mag</em></td></tr>';
+                html += '<tr class="pure-table-odd"><td><b>V mag.</b></td><td>' + source.data.V + '</td><td><em>mag</em></td></tr>';
+                html += '</tbody>';
+                html += '</table>';
+
+                html += '<br/><a target="_blank" href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=' + encodeURIComponent(source.data.main_id) + '">More details</a>';
+            }
+
+
+            $('#explain').html(html);
+            $('#explain').show();
+
+        });
+    });
+</script>
+</html>
\ No newline at end of file
diff --git a/src/css/aladin.css b/src/css/aladin.css
index 466942f8..be224f27 100644
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -435,8 +435,16 @@ word-wrap:break-word;
     border-color: #357ebd;
 }
 
+.aladin-layer-main {
+    background-color: #ddd;
+}
+
 .aladin-btn-small {
-	font-size: 10px;
+    border-radius: 3px;
+    border: 1px solid transparent;
+    color: #ffffff;
+    background-color: #428bca;
+    border-color: #357ebd;
 }
 
 .aladin-button:hover {
diff --git a/src/js/Aladin.js b/src/js/Aladin.js
index 41d85382..f2ea49f5 100644
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
@@ -482,7 +482,7 @@ export let Aladin = (function () {
         });
     }
 
-    Aladin.prototype.updateSurveysDropdownList = function (surveys) {
+    /*Aladin.prototype.updateSurveysDropdownList = function (surveys) {
         //console.log(surveys)
         surveys = surveys.sort(function (a, b) {
             if (!a.order) {
@@ -515,7 +515,7 @@ export let Aladin = (function () {
                 select.append($("<option />").attr("selected", true).val(baseImgLayer.properties.id).text(baseImgLayer.properties.name));
             }
         }
-    };
+    };*/
 
     Aladin.prototype.setAngleRotation = function (theta) {
         this.view.setAngleRotation(theta)
diff --git a/src/js/HpxImageSurvey.js b/src/js/HpxImageSurvey.js
index 4acf8402..cc732536 100644
--- a/src/js/HpxImageSurvey.js
+++ b/src/js/HpxImageSurvey.js
@@ -148,7 +148,14 @@ export let HpxImageSurvey = (function() {
         };
         
         if (this.options.imgFormat) {
+            // Img format preprocessing
+            // transform to upper case
             this.options.imgFormat = this.options.imgFormat.toUpperCase();
+
+            // convert JPG -> JPEG
+            if (this.options.imgFormat === "JPG") {
+                this.options.imgFormat = "JPEG";
+            }
         }
 
         if (this.options.imgFormat === 'FITS') {
@@ -295,7 +302,7 @@ export let HpxImageSurvey = (function() {
             }
 
             this.updateMeta();
-
+            
             // Discard further processing if the layer has been removed
             if (!this.backend.imageSurveys.get(this.layer)) {
                 return;
@@ -437,7 +444,6 @@ export let HpxImageSurvey = (function() {
         this.options.colormap = colormap;
 
         this.updateColor();
-
         // Tell the view its meta have changed
         if ( this.ready ) {
             this.backend.aladin.webglAPI.setImageSurveyMeta(this.layer, this.meta);
diff --git a/src/js/View.js b/src/js/View.js
index d47c1ae9..661be7d5 100644
--- a/src/js/View.js
+++ b/src/js/View.js
@@ -1658,11 +1658,6 @@ export let View = (function() {
 
         this.imageSurveys.set(layer, survey);
         this.addImageSurvey(survey, layer);
-
-        // If the base has been changed, we update the survey dropdown list
-        if (layer === "base") {
-            this.aladin.updateSurveysDropdownList(HpxImageSurvey.getAvailableSurveys());
-        }
     };
 
     View.prototype.buildSortedImageSurveys = function() {
diff --git a/src/js/gui/HiPSLayer.js b/src/js/gui/HiPSLayer.js
index 52d50294..9738ba2b 100644
--- a/src/js/gui/HiPSLayer.js
+++ b/src/js/gui/HiPSLayer.js
@@ -40,7 +40,27 @@
         this.view = view;
         this.layer = layer;
 
-        this.optionsOpenerForImageLayer = $('<span class="indicator right-triangle">&nbsp;</span>');
+        // HiPS header div
+        if (this.layer === "base") {
+            this.headerDiv = $(
+                '<div class=".aladin-layer-header">' +
+                    '<span class="indicator right-triangle">&nbsp;</span>' +
+                    '<select class="aladin-surveySelection"></select>' +
+                    '<button class="aladin-btn-small aladin-HiPSSelector" type="button" title="Search a specific HiPS">🔍</button>' +
+                '</div>'
+            );
+        } else {
+            this.headerDiv = $(
+                '<div class=".aladin-layer-header">' +
+                    '<span class="indicator right-triangle">&nbsp;</span>' +
+                    '<select class="aladin-surveySelection"></select>' +
+                    '<button class="aladin-btn-small aladin-HiPSSelector" type="button" title="Search a specific HiPS">🔍</button>' +
+                    '<button class="aladin-btn-small aladin-delete-layer" type="button" title="Delete this layer">🗑️</button>' +
+                '</div>'
+            );
+        }
+
+        // HiPS main options div
         let cmListStr = '';
         for (const cm of this.aladin.webglAPI.getAvailableColormapList()) {
             cmListStr += '<option>' + cm + '</option>';
@@ -49,9 +69,7 @@
         // - for FITS hipses, it is changed to grayscale
         // - for JPG/PNG hipses, we do not use any colormap in the backend
         cmListStr += '<option>native</option>';
-
-        this.surveySelectionDiv = $('<select class="aladin-surveySelection"></select>');
-        this.mainDiv = $('<div class="layer-options" style="display: none;">' +
+        this.mainDiv = $('<div class="aladin-layer-main" style="display: none;">' +
                 '<table class="aladin-options"><tbody>' +
                 '  <tr><td>Color map</td><td><select class="">' + cmListStr + '</select></td></tr>' +
                 '  <tr><td></td><td><label><input type="checkbox"> Reverse</label></td></tr>' +
@@ -61,70 +79,41 @@
                 '  <tr><td>Max cut</td><td><input type="number" class="aladin-cuts"></td></tr>' +
                 '  <tr><td>Opacity</td><td><input class="" type="range" min="0" max="1" step="0.01"></td></tr>' +
                 '</table> ' +
-                '<button class="aladin-btn my-1" type="button">🔍</button>' +
             '</div>');
 
-        this.#createComponent();
         this.#addListeners();
-
         this.#updateHiPSLayerOptions();
     }
 
-    #createComponent() {
-        let self = this;
-
-        // Search HiPS button
-        const searchHiPS4BaseLayerBtn = this.mainDiv.find('button');
-        $(searchHiPS4BaseLayerBtn).click(function () {
-            if (!self.hipsSelector) {
-                let fnURLSelected = function(url) {
-                    self.aladin.setBaseImageLayer(url);
-                };
-                let fnIdSelected = function(id) {
-                    self.aladin.setBaseImageLayer(id);
-                };
-                self.hipsSelector = new HiPSSelector(self.aladin.aladinDiv, fnURLSelected, fnIdSelected);
+    #addListeners() {
+        const self = this;
+        ALEvent.HIPS_LAYER_CHANGED.listenedBy(this.aladin.aladinDiv, function (e) {
+            if (e.detail.layer === self.layer) {
+                self.#updateHiPSLayerOptions();
+                self.#updateSurveysDropdownList(HpxImageSurvey.getAvailableSurveys());
             }
-            self.hipsSelector.show();
         });
-        // Update list of surveys
-        const updateSurveysDropdownList = (surveys) => {
-            //console.log(surveys)
-            surveys = surveys.sort(function (a, b) {
-                if (!a.order) {
-                    return a.id > b.id;
-                }
-                return a.maxOrder && a.maxOrder > b.maxOrder ? 1 : -1;
-            });
-            self.surveySelectionDiv.empty();
-            const imgLayer = self.aladin.getOverlayImageLayer(self.layer);
-            const imgNotLoaded = imgLayer.properties;
-    
-            if (imgNotLoaded) {
-                let surveyFound = false;
-                surveys.forEach(s => {
-                    const isCurSurvey = imgLayer.properties.url.endsWith(s.url);
-                    self.surveySelectionDiv.append($("<option />").attr("selected", isCurSurvey).val(s.id).text(s.name));
-                    surveyFound |= isCurSurvey;
-                });
-    
-                // The survey has not been found among the ones cached
-                if (!surveyFound) {
-                    // Cache it
-                    HpxImageSurvey.SURVEYS.push({
-                        id: imgLayer.properties.id,
-                        name: imgLayer.properties.name,
-                        maxOrder: imgLayer.properties.maxOrder,
-                        url: imgLayer.properties.url,
-                    });
-                    self.surveySelectionDiv.append($("<option />").attr("selected", true).val(imgLayer.properties.id).text(imgLayer.properties.name));
-                }
+
+        // HEADER DIV listeners
+        // Click opener
+        this.headerDiv.find('.indicator').unbind("click");
+        let indicator = this.headerDiv.find('.indicator');
+        indicator.click(function () {
+            if (indicator.hasClass('right-triangle')) {
+                indicator.removeClass('right-triangle');
+                indicator.addClass('down-triangle');
+                self.mainDiv.slideDown(300);
             }
-        };
-        updateSurveysDropdownList(HpxImageSurvey.getAvailableSurveys());
-        //self.aladin.updateSurveysDropdownList(HpxImageSurvey.getAvailableSurveys());
-        $(self.surveySelectionDiv).change(function () {
-            console.log("sdfsd")
+            else {
+                indicator.removeClass('down-triangle');
+                indicator.addClass('right-triangle');
+                self.mainDiv.slideUp(300);
+            }
+        });
+
+        // Update list of surveys
+        self.#updateSurveysDropdownList(HpxImageSurvey.getAvailableSurveys());
+        this.headerDiv.find('.aladin-surveySelection').change(function () {
             var survey = HpxImageSurvey.getAvailableSurveys()[$(this)[0].selectedIndex];
             //console.log("survey, chosen ", survey)
             const hpxImageSurvey = new HpxImageSurvey(
@@ -135,7 +124,31 @@
             self.aladin.setOverlayImageLayer(hpxImageSurvey, null, self.layer);
         });
 
-        // create listeners 
+        // Search HiPS button
+        this.headerDiv.find('.aladin-HiPSSelector').unbind("click");
+        this.headerDiv.find('.aladin-HiPSSelector').click(function () {
+            if (!self.hipsSelector) {
+                let fnURLSelected = function(url) {
+                    self.aladin.setOverlayImageLayer(url, null, self.layer);
+                };
+                let fnIdSelected = function(id) {
+                    self.aladin.setOverlayImageLayer(id, null, self.layer);
+                };
+                self.hipsSelector = new HiPSSelector(self.aladin.aladinDiv, fnURLSelected, fnIdSelected);
+            }
+            self.hipsSelector.show();
+        });
+
+        // Delete HiPS button
+        this.headerDiv.find('.aladin-delete-layer').unbind('click');
+        this.headerDiv.find('.aladin-delete-layer').click(function () {
+            const removeLayerEvent = new CustomEvent('remove-layer', {
+                detail: self.layer 
+            });
+            self.aladin.aladinDiv.dispatchEvent(removeLayerEvent);
+        });
+
+        // MAIN DIV listeners
         // image format
         const format4ImgLayer = this.mainDiv.find('select').eq(2);
         const minCut4ImgLayer = this.mainDiv.find('input').eq(1);
@@ -161,7 +174,7 @@
             maxCut4ImgLayer.val(maxCut);
 
             // update HpxImageSurvey.SURVEYS definition
-            const idxSelectedHiPS = self.surveySelectionDiv[0].selectedIndex;
+            const idxSelectedHiPS = self.headerDiv.find('.aladin-surveySelection')[0].selectedIndex;
             let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
             let options = surveyDef.options || {};
             options.minCut = minCut;
@@ -205,7 +218,7 @@
             self.aladin.getOverlayImageLayer(self.layer).setColormap(cmap, {reversed: reverse, stretch: stretch});
 
             // update HpxImageSurvey.SURVEYS definition
-            const idxSelectedHiPS = self.surveySelectionDiv[0].selectedIndex;
+            const idxSelectedHiPS = self.headerDiv.find('.aladin-surveySelection')[0].selectedIndex;
             let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
             let options = surveyDef.options || {};
             options.colormap = cmap;
@@ -221,34 +234,12 @@
             self.aladin.getOverlayImageLayer(self.layer).setOpacity(opacity);
 
             // update HpxImageSurvey.SURVEYS definition
-            const idxSelectedHiPS = self.surveySelectionDiv[0].selectedIndex;
+            const idxSelectedHiPS = self.headerDiv.find('.aladin-surveySelection')[0].selectedIndex;
             let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
             let options = surveyDef.options || {};
             options.opacity = opacity;
             surveyDef.options = options;
         });
-
-        this.optionsOpenerForImageLayer.click(function () {
-            if (self.optionsOpenerForImageLayer.hasClass('right-triangle')) {
-                self.optionsOpenerForImageLayer.removeClass('right-triangle');
-                self.optionsOpenerForImageLayer.addClass('down-triangle');
-                self.mainDiv.slideDown(10);
-            }
-            else {
-                self.optionsOpenerForImageLayer.removeClass('down-triangle');
-                self.optionsOpenerForImageLayer.addClass('right-triangle');
-                self.mainDiv.slideUp(300);
-            }
-        });
-    }
-
-    #addListeners() {
-        const self = this;
-        ALEvent.HIPS_LAYER_CHANGED.listenedBy(this.aladin.aladinDiv, function (e) {
-            if (e.detail.layer === self.layer) {
-                self.#updateHiPSLayerOptions();
-            }
-        });
     }
 
     #updateHiPSLayerOptions() {
@@ -321,11 +312,48 @@
         stretchSelect4ImgLayer.val(stretch);
     }
 
+    #updateSurveysDropdownList(surveys) {
+        const self = this;
+
+        let surveySelectionDiv = this.headerDiv.find('.aladin-surveySelection');
+
+        surveys = surveys.sort(function (a, b) {
+            if (!a.order) {
+                return a.id > b.id;
+            }
+            return a.maxOrder && a.maxOrder > b.maxOrder ? 1 : -1;
+        });
+        surveySelectionDiv.empty();
+        const imgLayer = self.aladin.getOverlayImageLayer(self.layer);
+        const imgNotLoaded = imgLayer.properties;
+
+        if (imgNotLoaded) {
+            let surveyFound = false;
+            surveys.forEach(s => {
+                const isCurSurvey = imgLayer.properties.url.endsWith(s.url);
+                surveySelectionDiv.append($("<option />").attr("selected", isCurSurvey).val(s.id).text(s.name));
+                surveyFound |= isCurSurvey;
+            });
+
+            // The survey has not been found among the ones cached
+            if (!surveyFound) {
+                // Cache it
+                HpxImageSurvey.SURVEYS.push({
+                    id: imgLayer.properties.id,
+                    name: imgLayer.properties.name,
+                    maxOrder: imgLayer.properties.maxOrder,
+                    url: imgLayer.properties.url,
+                });
+                surveySelectionDiv.append($("<option />").attr("selected", true).val(imgLayer.properties.id).text(imgLayer.properties.name));
+            }
+        }
+    }
+
     attachTo(parentDiv) {
-        parentDiv.append(this.optionsOpenerForImageLayer)
-            .append(this.surveySelectionDiv)
-            .append(this.mainDiv)
-            .append('<br/>');
+        parentDiv.append(this.headerDiv)
+            .append(this.mainDiv);
+
+        this.#addListeners();
     }
 
     show() {
@@ -333,6 +361,7 @@
     }
 
     hide() {
+        this.headerDiv.style.display = 'none';
         this.mainDiv.style.display = 'none';
     }
 }
diff --git a/src/js/gui/Stack.js b/src/js/gui/Stack.js
index 600d4304..f1a2e72c 100644
--- a/src/js/gui/Stack.js
+++ b/src/js/gui/Stack.js
@@ -33,6 +33,7 @@ import { AladinUtils } from "../AladinUtils.js";
 import { Color } from "../Color.js";
 import { ALEvent } from "../events/ALEvent.js";
 import { HiPSLayer } from "./HiPSLayer.js";
+import { Utils } from "../Utils.js";
 
 export class Stack {
 
@@ -65,17 +66,37 @@ export class Stack {
         layerBox.append('<a class="aladin-closeBtn">&times;</a>' +
             '<div style="clear: both;"></div>' +
             '<div class="aladin-label">Base image layer</div>')
+        this.imgLayers.get("base").attachTo(layerBox);
 
-        this.imgLayers.forEach((imgLayer) => {
-            imgLayer.attachTo(layerBox);
-        });
+        if (this.imgLayers.size > 1) {
+            layerBox.append('<div class="aladin-label">Overlay image layers</div>')
 
+            this.imgLayers.forEach((imgLayer) => {
+                if (imgLayer.layer !== "base") {
+                    imgLayer.attachTo(layerBox);
+                }
+            });
+        }
 
-        layerBox.append('<div class="aladin-label">Add Layer</div>' +
-            '<input type="text" class="layer-name" maxlength="16" size="16">' +
-            '<button class="aladin-btn" type="button">+</button>'
+        layerBox.append(
+            '<button class="aladin-btn add-layer-hips" type="button">New layer HiPS</button>'
         );
 
+        $(this.mainDiv).find('.add-layer-hips').click(function () {
+            const layerName = Utils.uuidv4();
+
+            self.aladin.setOverlayImageLayer(
+                'CDS/P/DSS2/color',
+                (survey) => {
+                    console.log("loaded", layerName)
+                    self.imgLayers.set(layerName, new HiPSLayer(self.aladin, self.view, layerName));
+
+                    self.#createComponent();
+                },
+                layerName
+            );
+        });
+
         layerBox.append('<div class="aladin-label">Projection</div>' +
             '<select class="aladin-projSelection"></select>' +
             '</div>');
@@ -246,20 +267,6 @@ export class Stack {
 
         layerBox.find('.aladin-closeBtn').click(function () { self.aladin.hideBoxes(); return false; });
 
-        // update list of surveys
-        //this.aladin.updateSurveysDropdownList(HpxImageSurvey.getAvailableSurveys());
-        /*var surveySelection = $(this.mainDiv).find('.aladin-surveySelection');
-        surveySelection.change(function () {
-            var survey = HpxImageSurvey.getAvailableSurveys()[$(this)[0].selectedIndex];
-            //console.log("survey, chosen ", survey)
-            const hpxImageSurvey = new HpxImageSurvey(
-                survey.url,
-                self.view,
-                survey.options
-            );
-            self.aladin.setImageSurvey(hpxImageSurvey);
-        });*/
-
         // handler to hide/show overlays
         $(this.mainDiv).find('ul input').change(function () {
             var layerName = ($(this).attr('id').substr(12));
@@ -275,26 +282,14 @@ export class Stack {
 
     #addListeners() {
         let self = this;
-        const layerBox = $(this.mainDiv);
+        this.aladin.aladinDiv.addEventListener('remove-layer', e => {
+            const layerName = e.detail;
+            console.log("ksdlfs", e.detail);
 
-        layerBox.find('button').click(function () {
-            const layerName = $(layerBox.find('.layer-name')[0]).val();
+            self.imgLayers.delete(layerName);
+            self.aladin.view.removeImageSurvey(layerName);
 
-            /*if (self.imgLayers.has(layerName)) {
-                throw 'Layer ' + layerName + ' already exist.';
-            }*/
-
-            self.aladin.setOverlayImageLayer(
-                'CDS/P/DSS2/color',
-                (survey) => {
-                    console.log("loaded")
-                    self.imgLayers.set(layerName, new HiPSLayer(self.aladin, self.view, layerName));
-                    survey.setOpacity(0.5)
-
-                    self.#createComponent();
-                },
-                layerName
-            );
+            self.#createComponent();
         });
     }
 
