diff --git a/docs/_assets/css/style.css b/docs/_assets/css/style.css
index 0a32b22..5fa4291 100644
--- a/docs/_assets/css/style.css
+++ b/docs/_assets/css/style.css
@@ -47,6 +47,20 @@ h1 {
   list-style: none;
 }
 
+.hidden {
+  display: none !important;
+}
+
+.visible{
+  display: block;
+}
+
+#noThumbnailsMessage p{
+  background: var(--vocabulary-neutral-color-lighter-gray);
+  text-align: center;
+  font-weight: bold;
+}
+
 .thumbnailbox {
   grid-column: span 3;
   height: fit-content;
diff --git a/docs/_assets/js/listing.js b/docs/_assets/js/listing.js
index 7b3ed48..ee2a577 100644
--- a/docs/_assets/js/listing.js
+++ b/docs/_assets/js/listing.js
@@ -117,3 +117,24 @@ if (language) {
   isFilterSelected += ", .resourcenavlanguageunknown";
 }
 dynamicStyle.innerHTML += `${isFilterSelected} { display: block; }`;
+
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Check if all thumbnailbox elements are hidden
+  var thumbnailBoxes = document.querySelectorAll('.thumbnailbox');
+  var allHidden = true;
+  
+  thumbnailBoxes.forEach(function (box) {
+      if (window.getComputedStyle(box).display !== 'none') {
+          allHidden = false;
+      }
+  });
+
+  // Show the message if all thumbnailbox elements are hidden
+  var messageElement = document.getElementById('noThumbnailsMessage');
+  messageElement.className = allHidden ? 'visible' : 'hidden';
+
+  var ThumbNailList = document.getElementById('thumbnaillist');
+  ThumbNailList.className = allHidden ? 'hidden' : 'visible';
+});
+
diff --git a/docs/_layouts/listing.html b/docs/_layouts/listing.html
index 51da776..73248ee 100644
--- a/docs/_layouts/listing.html
+++ b/docs/_layouts/listing.html
@@ -50,7 +50,10 @@ <h1>Resources</h1>
 
       <!-- This is the section that shows all the resource cards in the site.
        The homepage shows upto 16 'featured' items ordered (1) to (16 or lesser) -->
-      <ul id="thumbnaillist">
+       <div id="noThumbnailsMessage" class="hidden">
+        <p>No resources matched the selected filters.</p>
+        </div> 
+      <ul id="thumbnaillist" class="hidden">
         {% for i in (1..16) %} {% for page in site.pages %} {% if page.layout
         =='resource' %} {% if page.featured == i %}
         <li
@@ -91,7 +94,7 @@ <h3 class="thumbnailtitle">
         {% endif %} {% endunless %} {% endif %} {% endif %} {% endfor %} {%
         endfor %} {% endunless %}
       </ul>
-    </main>
+    </main>   
 
     <!-- The standard CC footer, located at docs/_includes/footer.html -->
     {% include footer.html %}