diff --git a/modules/mysql/src/main/resources/db/migration/V3.31__AddZoneChangeFields.sql b/modules/mysql/src/main/resources/db/migration/V3.31__AddZoneChangeFields.sql
new file mode 100644
index 000000000..7246e7bb4
--- /dev/null
+++ b/modules/mysql/src/main/resources/db/migration/V3.31__AddZoneChangeFields.sql
@@ -0,0 +1,12 @@
+CREATE SCHEMA IF NOT EXISTS ${dbName};
+
+USE ${dbName};
+
+ALTER TABLE zone_change
+ADD COLUMN zone_name VARCHAR(256) NOT NULL;
+CREATE INDEX zone_name_index ON zone_change(zone_name);
+
+
+ALTER TABLE zone_change
+ADD COLUMN zone_status CHAR(36) NOT NULL;
+CREATE INDEX zone_status_index ON zone_change(zone_status);
\ No newline at end of file
diff --git a/modules/mysql/src/main/scala/vinyldns/mysql/repository/MySqlZoneChangeRepository.scala b/modules/mysql/src/main/scala/vinyldns/mysql/repository/MySqlZoneChangeRepository.scala
index b0b5a4192..f9deec42b 100644
--- a/modules/mysql/src/main/scala/vinyldns/mysql/repository/MySqlZoneChangeRepository.scala
+++ b/modules/mysql/src/main/scala/vinyldns/mysql/repository/MySqlZoneChangeRepository.scala
@@ -39,8 +39,8 @@ class MySqlZoneChangeRepository
 
   private final val PUT_ZONE_CHANGE =
     sql"""
-      |REPLACE INTO zone_change (change_id, zone_id, data, created_timestamp)
-      |  VALUES ({change_id}, {zone_id}, {data}, {created_timestamp})
+      |REPLACE INTO zone_change (change_id, zone_id, data, created_timestamp, zone_name, zone_status)
+      |  VALUES ({change_id}, {zone_id}, {data}, {created_timestamp},{zone_name}, {zone_status})
       """.stripMargin
 
   private final val BASE_ZONE_CHANGE_SEARCH_SQL =
@@ -49,9 +49,15 @@ class MySqlZoneChangeRepository
       |  FROM zone_change zc
        """.stripMargin
 
-  private final val BASE_GET_ZONES_SQL =
+  private final val BASE_ZONE_NAME_COUNT_SQL =
     """
-      |SELECT z.data
+      |SELECT COUNT(z.name)
+      |  FROM zone z
+       """.stripMargin
+
+  private final val BASE_ZONE_NAME_SEARCH_SQL =
+    """
+      |SELECT z.name
       |  FROM zone z
        """.stripMargin
 
@@ -82,7 +88,9 @@ class MySqlZoneChangeRepository
               'change_id -> zoneChange.id,
               'zone_id -> zoneChange.zoneId,
               'data -> toPB(zoneChange).toByteArray,
-              'created_timestamp -> zoneChange.created.toEpochMilli
+              'created_timestamp -> zoneChange.created.toEpochMilli,
+              'zone_name -> zoneChange.zone.name,
+              'zone_status -> zoneChange.zone.status.toString
             )
             .update()
             .apply()
@@ -144,7 +152,7 @@ class MySqlZoneChangeRepository
         s"""
            |    JOIN zone_access za ON zc.zone_id = za.zone_id
            |      AND za.accessor_id IN ($questionMarks)
-    """.stripMargin
+        """.stripMargin
       (withAccessorCheck, accessors)
     }
 
@@ -177,37 +185,46 @@ class MySqlZoneChangeRepository
           val sb = new StringBuilder
           sb.append(withAccessorCheck)
 
-          val query = sb.toString
+          val zoneResults: Int =
+             SQL(BASE_ZONE_NAME_COUNT_SQL)
+               .map(_.int(1))
+               .single()
+               .apply()
+               .getOrElse(0)
 
-          val zoneChangeResults: List[ZoneChange] =
-            SQL(query)
-              .bind(accessors: _*)
-              .map(extractZoneChange(1))
-              .list()
-              .apply()
+           sb.append(s" WHERE ")
 
-          val zoneResults: List[Zone] =
-            SQL(BASE_GET_ZONES_SQL)
-              .map(extractZone(1))
-              .list()
-              .apply()
+          if (zoneResults != 0) sb.append(s" zc.zone_name NOT IN ($BASE_ZONE_NAME_SEARCH_SQL) AND ")
 
-          val zoneNotInZoneChange: List[ZoneChange] =
-            zoneChangeResults.filter(z=> !zoneResults.map(_.name).contains(z.zone.name) && z.zone.status != ZoneStatus.Active)
+          sb.append(s" zc.zone_status = 'Deleted' ")
 
-          val deletedZoneResults: List[ZoneChange] =
-            zoneNotInZoneChange.filter(_.zone.status.equals(ZoneStatus.Deleted)).distinct.sortBy(_.zone.updated).reverse
+          val filters = if (zoneNameFilter.isDefined && zoneNameFilter.get.contains("*"))
+              zoneNameFilter.map(flt => s"zc.zone_name LIKE '${flt.replace('*', '%')}'")
+          else zoneNameFilter.map(flt => s"zc.zone_name LIKE '${flt.concat("%")}'")
+
+          if(zoneNameFilter.isDefined)
+            sb.append(s" AND ")
 
-          val results: List[ZoneChange] =
-            if (zoneNameFilter.nonEmpty) {
-              deletedZoneResults.filter(r => r.zone.name.contains(zoneNameFilter.getOrElse("not found")))
-            } else {
-              deletedZoneResults
-            }
+          sb.append(filters.mkString)
+
+          val resultOrdering = s"""|    GROUP BY zc.zone_name
+                                   |    ORDER BY zc.created_timestamp DESC
+                                 """.stripMargin
+
+          sb.append(resultOrdering)
+
+          val query = sb.toString
+
+          val deletedZoneResults: List[ZoneChange] =
+            SQL(query)
+              .bind(accessors: _*)
+              .map(extractZoneChange(1))
+                .list()
+                .apply()
 
           val deletedZonesWithStartFrom: List[ZoneChange] = startFrom match {
-            case Some(zoneId) => results.dropWhile(_.zone.id != zoneId)
-            case None => results
+            case Some(zoneId) => deletedZoneResults.dropWhile(_.zone.id != zoneId)
+            case None => deletedZoneResults
           }
 
           val deletedZonesWithMaxItems = deletedZonesWithStartFrom.take(maxItems + 1)
@@ -247,8 +264,4 @@ class MySqlZoneChangeRepository
   private def extractZoneChange(colIndex: Int): WrappedResultSet => ZoneChange = res => {
     fromPB(VinylDNSProto.ZoneChange.parseFrom(res.bytes(colIndex)))
   }
-
-  private def extractZone(columnIndex: Int): WrappedResultSet => Zone = res => {
-    fromPB(VinylDNSProto.Zone.parseFrom(res.bytes(columnIndex)))
-  }
 }
diff --git a/modules/portal/app/views/zones/zones.scala.html b/modules/portal/app/views/zones/zones.scala.html
index 616ca5872..ac3b0ca86 100644
--- a/modules/portal/app/views/zones/zones.scala.html
+++ b/modules/portal/app/views/zones/zones.scala.html
@@ -300,7 +300,7 @@ <h3><span class="fa fa-table"></span> Zones</h3>
                                                         <span class="fa fa-search"></span>
                                                     </button>
                                                 </span>
-                                                <input id="deleted-zones-search-text" ng-model="query" type="text" class="form-control"  placeholder="Zone Name"/>
+                                                <input id="deleted-zones-search-text" ng-model="query" type="text" class="form-control"  placeholder="Deleted Zone Name"/>
                                             </div>
                                         </form>
                                     </div>
@@ -309,13 +309,13 @@ <h3><span class="fa fa-table"></span> Zones</h3>
                                     <!-- DELETED ZONES TABS -->
                                     <div class="panel panel-default panel-tabs">
                                         <ul class="nav nav-tabs bar_tabs">
-                                            <li class="active"><a href="#myDeletedZones" data-toggle="tab">My Zones</a></li>
-                                            <li><a id="tab2-button" href="#allDeletedZones" data-toggle="tab">All Zones</a></li>
+                                            <li class="active"><a href="#myDeletedZones" data-toggle="tab" ng-click="myZonesAccess()" >My Zones</a></li>
+                                            <li><a id="tab2-button" href="#allDeletedZones" data-toggle="tab"  ng-click="allZonesAccess()">All Zones</a></li>
                                         </ul>
                                         <div class="panel-body tab-content">
                                             <div class="tab-pane active" id="myDeletedZones">
                                                 <div id="zone-list-table" class="panel-body">
-                                                    <p ng-if="!myDeletedZonesLoaded">Loading zones...</p>
+                                                    <p ng-if="!myDeletedZonesLoaded">Loading my deleted zones...</p>
                                                     <p ng-if="myDeletedZonesLoaded && !myDeletedZones.length">No zones match the search criteria.</p>
 
                                                     <!-- PAGINATION -->
@@ -394,7 +394,7 @@ <h3><span class="fa fa-table"></span> Zones</h3>
                                             </div>
                                             <div class="tab-pane" id="allDeletedZones">
                                                 <div id="zone-list-table" class="panel-body">
-                                                    <p ng-if="!allDeletedZonesLoaded">Loading zones...</p>
+                                                    <p ng-if="!allDeletedZonesLoaded">Loading all deleted zones...</p>
                                                     <p ng-if="allDeletedZonesLoaded && !allDeletedZones.length">No zones match the search criteria.</p>
 
                                                     <!-- PAGINATION -->
diff --git a/modules/portal/public/lib/controllers/controller.zones.js b/modules/portal/public/lib/controllers/controller.zones.js
index 0dd5ad470..c42abd42f 100644
--- a/modules/portal/public/lib/controllers/controller.zones.js
+++ b/modules/portal/public/lib/controllers/controller.zones.js
@@ -43,8 +43,8 @@ angular.module('controller.zones', [])
     // Paging status for zone sets
     var zonesPaging = pagingService.getNewPagingParams(100);
     var allZonesPaging = pagingService.getNewPagingParams(100);
-    var myDeleteZonesPaging = pagingService.getNewPagingParams(100);
-    var allDeleteZonesPaging = pagingService.getNewPagingParams(100);
+    var myDeletedZonesPaging = pagingService.getNewPagingParams(100);
+    var allDeletedZonesPaging = pagingService.getNewPagingParams(100);
     profileService.getAuthenticatedUserData().then(function (results) {
         if (results.data) {
             $scope.profile = results.data;
@@ -176,6 +176,8 @@ angular.module('controller.zones', [])
     $scope.refreshZones = function () {
         zonesPaging = pagingService.resetPaging(zonesPaging);
         allZonesPaging = pagingService.resetPaging(allZonesPaging);
+        myDeletedZonesPaging = pagingService.resetPaging(myDeletedZonesPaging);
+        allDeletedZonesPaging = pagingService.resetPaging(allDeletedZonesPaging);
 
         zonesService
             .getZones(zonesPaging.maxItems, undefined, $scope.query, $scope.searchByAdminGroup, false, $scope.includeReverse)
@@ -203,10 +205,10 @@ angular.module('controller.zones', [])
             });
 
         zonesService
-                    .getDeletedZones(myDeleteZonesPaging.maxItems, undefined, $scope.query, false)
+                    .getDeletedZones(myDeletedZonesPaging.maxItems, undefined, $scope.query, false)
                     .then(function (response) {
                         $log.debug('zonesService::getMyDeletedZones-success (' + response.data.zonesDeletedInfo.length + ' zones)');
-                        myDeleteZonesPaging.next = response.data.nextId;
+                        myDeletedZonesPaging.next = response.data.nextId;
                         updateMyDeletedZoneDisplay(response.data.zonesDeletedInfo);
                     })
                     .catch(function (error) {
@@ -214,10 +216,10 @@ angular.module('controller.zones', [])
                     });
 
         zonesService
-                    .getDeletedZones(allDeleteZonesPaging.maxItems, undefined, $scope.query, true)
+                    .getDeletedZones(allDeletedZonesPaging.maxItems, undefined, $scope.query, true)
                     .then(function (response) {
                         $log.debug('zonesService::getAllDeletedZones-success (' + response.data.zonesDeletedInfo.length + ' zones)');
-                        allDeleteZonesPaging.next = response.data.nextId;
+                        allDeletedZonesPaging.next = response.data.nextId;
                         updateAllDeletedZoneDisplay(response.data.zonesDeletedInfo);
                     })
                     .catch(function (error) {
@@ -333,9 +335,9 @@ angular.module('controller.zones', [])
              case 'allZones':
                  return pagingService.getPanelTitle(allZonesPaging);
              case 'myDeletedZones':
-                 return pagingService.getPanelTitle(myDeleteZonesPaging);
+                 return pagingService.getPanelTitle(myDeletedZonesPaging);
              case 'allDeletedZones':
-                 return pagingService.getPanelTitle(allDeleteZonesPaging);
+                 return pagingService.getPanelTitle(allDeletedZonesPaging);
          }
      };
 
@@ -346,9 +348,9 @@ angular.module('controller.zones', [])
             case 'allZones':
                 return pagingService.prevPageEnabled(allZonesPaging);
             case 'myDeletedZones':
-                return pagingService.prevPageEnabled(myDeleteZonesPaging);
+                return pagingService.prevPageEnabled(myDeletedZonesPaging);
             case 'allDeletedZones':
-                return pagingService.prevPageEnabled(allDeleteZonesPaging);
+                return pagingService.prevPageEnabled(allDeletedZonesPaging);
         }
     };
 
@@ -359,9 +361,9 @@ angular.module('controller.zones', [])
             case 'allZones':
                 return pagingService.nextPageEnabled(allZonesPaging);
             case 'myDeletedZones':
-                return pagingService.nextPageEnabled(myDeleteZonesPaging);
+                return pagingService.nextPageEnabled(myDeletedZonesPaging);
             case 'allDeletedZones':
-                return pagingService.nextPageEnabled(allDeleteZonesPaging);
+                return pagingService.nextPageEnabled(allDeletedZonesPaging);
         }
     };
 
@@ -392,11 +394,11 @@ angular.module('controller.zones', [])
     }
 
     $scope.prevPageMyDeletedZones = function() {
-        var startFrom = pagingService.getPrevStartFrom(myDeleteZonesPaging);
+        var startFrom = pagingService.getPrevStartFrom(myDeletedZonesPaging);
         return zonesService
-            .getDeletedZones(myDeleteZonesPaging.maxItems, startFrom, $scope.query, false)
+            .getDeletedZones(myDeletedZonesPaging.maxItems, startFrom, $scope.query, false)
             .then(function(response) {
-                myDeleteZonesPaging = pagingService.prevPageUpdate(response.data.nextId, myDeleteZonesPaging);
+                myDeletedZonesPaging = pagingService.prevPageUpdate(response.data.nextId, myDeletedZonesPaging);
                 updateMyDeletedZoneDisplay(response.data.zonesDeletedInfo);
             })
             .catch(function (error) {
@@ -405,11 +407,11 @@ angular.module('controller.zones', [])
     }
 
     $scope.prevPageAllDeletedZones = function() {
-            var startFrom = pagingService.getPrevStartFrom(allDeleteZonesPaging);
+            var startFrom = pagingService.getPrevStartFrom(allDeletedZonesPaging);
             return zonesService
-                .getDeletedZones(allDeleteZonesPaging.maxItems, startFrom, $scope.query, true)
+                .getDeletedZones(allDeletedZonesPaging.maxItems, startFrom, $scope.query, true)
                 .then(function(response) {
-                    allDeleteZonesPaging = pagingService.prevPageUpdate(response.data.nextId, allDeleteZonesPaging);
+                    allDeletedZonesPaging = pagingService.prevPageUpdate(response.data.nextId, allDeletedZonesPaging);
                     updateAllDeletedZoneDisplay(response.data.zonesDeletedInfo);
                 })
                 .catch(function (error) {
@@ -451,10 +453,10 @@ angular.module('controller.zones', [])
 
     $scope.nextPageMyDeletedZones = function () {
         return zonesService
-            .getDeletedZones(myDeleteZonesPaging.maxItems, myDeleteZonesPaging.next, $scope.query, false)
+            .getDeletedZones(myDeletedZonesPaging.maxItems, myDeletedZonesPaging.next, $scope.query, false)
             .then(function(response) {
                 var myDeletedZoneSets = response.data.zonesDeletedInfo;
-                myDeleteZonesPaging = pagingService.nextPageUpdate(myDeletedZoneSets, response.data.nextId, myDeleteZonesPaging);
+                myDeletedZonesPaging = pagingService.nextPageUpdate(myDeletedZoneSets, response.data.nextId, myDeletedZonesPaging);
 
                 if (myDeletedZoneSets.length > 0) {
                     updateMyDeletedZoneDisplay(response.data.zonesDeletedInfo);
@@ -467,10 +469,10 @@ angular.module('controller.zones', [])
 
     $scope.nextPageAllDeletedZones = function () {
         return zonesService
-            .getDeletedZones(allDeleteZonesPaging.maxItems, allDeleteZonesPaging.next, $scope.query, false)
+            .getDeletedZones(allDeletedZonesPaging.maxItems, allDeletedZonesPaging.next, $scope.query, true)
             .then(function(response) {
                 var allDeletedZoneSets = response.data.zonesDeletedInfo;
-                allDeleteZonesPaging = pagingService.nextPageUpdate(allDeletedZoneSets, response.data.nextId, allDeleteZonesPaging);
+                allDeletedZonesPaging = pagingService.nextPageUpdate(allDeletedZoneSets, response.data.nextId, allDeletedZonesPaging);
 
                 if (allDeletedZoneSets.length > 0) {
                     updateAllDeletedZoneDisplay(response.data.zonesDeletedInfo);
diff --git a/modules/portal/public/lib/services/zones/service.zones.js b/modules/portal/public/lib/services/zones/service.zones.js
index ebc3fa5a8..dad71e957 100644
--- a/modules/portal/public/lib/services/zones/service.zones.js
+++ b/modules/portal/public/lib/services/zones/service.zones.js
@@ -63,8 +63,20 @@ angular.module('service.zones', [])
                 "nameFilter": query,
                 "ignoreAccess": ignoreAccess
             };
+
+            let loader = $("#loader");
+            loader.modal({
+                          backdrop: "static", //remove ability to close modal with click
+                          keyboard: false, //remove option to close with keyboard
+                          show: true //Display loader!
+                          })
+
             var url = groupsService.urlBuilder("/api/zones/deleted/changes", params);
-            return $http.get(url);
+
+            let promis =  $http.get(url);
+            // Hide loader when api gets response
+            promis.then(()=>loader.modal("hide"), ()=>loader.modal("hide"))
+            return promis;
         };
 
         this.getBackendIds = function() {