diff --git a/assets/icons/search-not-found.png b/assets/icons/search-not-found.png
new file mode 100644
index 000000000000..545657e2dbd8
Binary files /dev/null and b/assets/icons/search-not-found.png differ
diff --git a/assets/js/registrySearch.js b/assets/js/registrySearch.js
index 7673afafe855..d41a2e2559cd 100644
--- a/assets/js/registrySearch.js
+++ b/assets/js/registrySearch.js
@@ -163,12 +163,12 @@ function executeSearch(searchQuery) {
       let results = miniSearch.search(searchQuery);
       document.getElementById('search-loading').style.display = 'none';
 
-      if (results.length > 0) {
-        populateResults(results);
-      } else {
-        document.querySelector('#search-results').innerHTML +=
-          '<p>No matches found</p>';
-      }
+      if (results.length === 0) {
+        document.getElementById('no-search-result').style.display = 'block';
+      } 
+
+      populateResults(results);
+
     }, 0);
   };
 
diff --git a/layouts/shortcodes/ecosystem/registry/search-form.html b/layouts/shortcodes/ecosystem/registry/search-form.html
index 4ed992793e72..52d5bd2b88fe 100644
--- a/layouts/shortcodes/ecosystem/registry/search-form.html
+++ b/layouts/shortcodes/ecosystem/registry/search-form.html
@@ -141,6 +141,20 @@
     <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
     <span role="status">Loading results…</span>
   </div>
+
+  <!-- When search hs no result -->
+      <div style="display: none; padding:20px; text-align: center;" id="no-search-result">
+        <div style="margin-left: auto; margin-right: auto; width: fit-content;">
+          {{ with resources.Get "icons/search-not-found.png" }}
+            <img style="border: none;" src="{{ .RelPermalink }}" width="250" alt="no result found">
+          {{ end }}
+        </div>
+          <p style="color: #4f62ad; font-size: 28px; margin-bottom: 0;">Oops no results found</p>
+          <p>No results match the filter criteria. Remove filter or clear all filters to show results</p>
+          <button type="button" class="btn btn-outline-danger"
+          onclick="document.getElementById('input-s').value = ''; document.getElementById('input-language').value = 'all';document.getElementById('input-component').value = 'all';document.getElementById('searchForm').submit();">Reset filters</button>
+      </div>
+
   <ul class="list-unstyled" id="search-results"></ul>
   <ul class="list-unstyled" id="default-body">
     {{ range $key, $value := $registry -}}