diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js
index 5c6806653d..0136d99cc4 100644
--- a/scripts/system/create/entityProperties/html/js/entityProperties.js
+++ b/scripts/system/create/entityProperties/html/js/entityProperties.js
@@ -3695,20 +3695,20 @@ function requestZoneList() {
     }));
 }
 
-function addZoneToZonesSelection(propertyId) {
+function addZoneToZonesSelection(propertyId, id) {
     let hiddenField = document.getElementById(propertyId);
     if (JSON.stringify(hiddenField.value) === '"undefined"') {
         hiddenField.value = "[]";
     }
     let selectedZones = JSON.parse(hiddenField.value);
-    let zoneToAdd = document.getElementById("zones-select-" + propertyId).value;
-    if (!selectedZones.includes(zoneToAdd)) {
-        selectedZones.push(zoneToAdd);
+    if (!selectedZones.includes(id)) {
+        selectedZones.push(id);
     }
     hiddenField.value = JSON.stringify(selectedZones);
     displaySelectedZones(propertyId, true);
     let propertyName = propertyId.replace("property-", "");
     updateProperty(propertyName, selectedZones, false);
+    document.getElementById("zones-select-selector-list-panel-" + propertyId).style.display = "none";
 }
 
 function removeZoneFromZonesSelection(propertyId, zoneId) {
@@ -3798,7 +3798,12 @@ function createZonesSelection(property, elProperty) {
 
 function setZonesSelectionData(element, isEditable) {
     let zoneSelectorContainer = document.getElementById("zones-selector-" + element.id);
-    let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'><select class = 'zoneSelect' id='zones-select-" + element.id + "' >";
+    let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'>";
+    zoneSelector += "<input type='button' value = 'Add a zone' class='secondary' id='zones-select-add-" + element.id + "' onClick='document.getElementById(";
+    zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "block" + '"' + ";'>";
+    zoneSelector += "<div class = 'zoneSelectorListPanel' id='zones-select-selector-list-panel-" + element.id + "'>";
+    zoneSelector += "<div class='zoneSelectListHeader'>Select the Zone to add: </div>";
+    zoneSelector += "<div class='zoneSelectList' id = 'zones-select-selector-list-" + element.id + "'>";
     let i, name;
     for (i = 0; i < zonesList.length; i++) {
         if (zonesList[i].name === "") {
@@ -3806,28 +3811,34 @@ function setZonesSelectionData(element, isEditable) {
         } else {
             name = zonesList[i].name;
         }
-        zoneSelector += "<option value='" + zonesList[i].id + "'>" + name + "</option>";
+        zoneSelector += "<button class='menu-button' onClick='addZoneToZonesSelection(";
+        zoneSelector += '"' + element.id + '"' + ", " + '"' + zonesList[i].id + '"' + ");'>" + name + "</button><br>";
     }   
-    zoneSelector += "</select>&nbsp;<a href='#' id='zones-select-add-" + element.id + "' onClick='addZoneToZonesSelection(" + '"' + element.id + '"' + ");' >";
-    zoneSelector += "<img style='vertical-align:top' src='../../../html/css/img/add_icon.png'></a></div>";
+    zoneSelector += "</div>";
+    zoneSelector += "<div class='zoneSelectListFooter'>";
+    zoneSelector += "<input type='button' value = 'Cancel' class='normal' id='zones-select-cancel-" + element.id + "' onClick='document.getElementById(";
+    zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "none" + '"' + ";'>";
+    zoneSelector += "</div></div></div>";
     zoneSelector += "<div class='selected-zone-container' id='selected-zones-" + element.id + "'></div>";
     zoneSelectorContainer.innerHTML = zoneSelector;
     displaySelectedZones(element.id, isEditable);
 }
 
 function updateAllZoneSelect() {
-    let allZoneSelects = document.querySelectorAll(".zoneSelect");
-    let i, j, name, propId;
+    let allZoneSelects = document.querySelectorAll(".zoneSelectList");
+    let i, j, name, propId, btnList;
     for (i = 0; i < allZoneSelects.length; i++) {
-        allZoneSelects[i].options.length = 0;
+        btnList = "";
         for (j = 0; j < zonesList.length; j++) {
             if (zonesList[j].name === "") {
                 name = zonesList[j].id;
             } else {
                 name = zonesList[j].name;
             }
-            allZoneSelects[i].options[j] = new Option(name, zonesList[j].id, false , false);
+            btnList += "<button class='menu-button' onClick='addZoneToZonesSelection(";
+            btnList += '"' + element.id + '"' + ", " + '"' + zonesList[j].id + '"' + ");'>" + name + "</button><br>";            
         }
+        allZoneSelects[i].innerHTML = btnList;
         propId = allZoneSelects[i].id.replace("zones-select-", "");
         if (document.getElementById("multiZoneSelTools-" + propId).style.display === "block") {
             displaySelectedZones(propId, true);