diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js
index 5c6806653d..253b96998f 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' 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' 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);
@@ -4500,6 +4511,7 @@ function loaded() {
         });
 
         updateVisibleSpaceModeProperties();
+        requestZoneList();
 
         if (window.EventBridge !== undefined) {
             EventBridge.scriptEventReceived.connect(function(data) {
diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index 9f7f329040..5aea382d63 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -1955,6 +1955,65 @@ div.multiZoneSelToolbar {
     padding: 0px;
 }
 
+div.zoneSelectorListPanel {
+    position: absolute;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-width: 0px;
+    background-color: #666666;
+    color: #dddddd;
+    padding: 0% 2% 0% 2%;
+    z-index: 2;
+    cursor: pointer;
+}
+
+div.zoneSelectListHeader {
+    position: static;
+    width: 96%;
+    height: 6%;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;    
+    padding-top: 4px;
+    cursor: pointer;
+    border-width: 0px;    
+}
+
+div.zoneSelectList {
+    position: static;
+    width: 96%;
+    height: 86%;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;    
+    border-width: 0px;
+    background-color: #c0c0c0;
+    overflow-y: auto;
+    padding: 0px;
+    cursor: pointer;
+}
+
+div.zoneSelectListFooter {
+    position: static;
+    width: 96%;
+    height: auto;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;    
+    padding: 2px;
+    cursor: pointer;
+    border-width: 0px;
+    text-align: right;
+}
+
 #menuBackgroundOverlay{
     background-color:transparent;
     position:fixed;