diff --git a/demo/scss/search.scss b/demo/scss/search.scss
index db2d599..9b51dd7 100644
--- a/demo/scss/search.scss
+++ b/demo/scss/search.scss
@@ -38,9 +38,16 @@
 
 .results-container:empty:after {
   font-family: var(--font-sans);
-  content: "No results";
+  content: "Enter Something to search";
 }
 
 .results-container:empty:before {
   font-size: var(--size-9);
 }
+
+.results-container.no-results:empty {
+  @include material-icon('do_not_disturb_alt');
+  &:after {
+    content: "No results";
+  }
+}
diff --git a/demo/src/search/search-page.js b/demo/src/search/search-page.js
index 1801ee7..c4f8b1b 100644
--- a/demo/src/search/search-page.js
+++ b/demo/src/search/search-page.js
@@ -195,8 +195,7 @@ class SearchPage {
       const data = await ilProvider.search(bu, query, signal);
 
       this.#fetchNextPage = data.next;
-      this.#resultsEl.replaceChildren(...this.createResultsEl(data.results));
-      this.#resultsEl.classList.add('fade-in');
+      this.#updateResults(data.results);
       this.initIntersectionObserver();
       this.initScrollToTopButton();
     } finally {
@@ -204,6 +203,17 @@ class SearchPage {
     }
   }
 
+  /**
+   * Updates the results in the page.
+   *
+   * @param results {{ title: string, urn: string }[]} the results.
+   */
+  #updateResults(results) {
+    this.#resultsEl.replaceChildren(...this.createResultsEl(results));
+    this.#resultsEl.classList.add('fade-in');
+    this.#resultsEl.classList.toggle('no-results', results.length === 0);
+  }
+
   /**
    * Clear the search results and intersection observer and aborts any ongoing search query.
    *
@@ -219,6 +229,7 @@ class SearchPage {
     this.#intersectionObserverComponent?.remove();
     this.#intersectionObserverComponent = null;
     this.#resultsEl.replaceChildren();
+    this.#resultsEl.classList.toggle('no-results', false);
 
     return signal;
   }
@@ -308,9 +319,9 @@ class SearchPage {
   /**
    * Creates and returns HTML elements for the search results based on the provided results data.
    *
-   * @param {Object[]} results - An array of search results.
+   * @param {{ title: string, urn: string }[]} results - An array of search results.
    *
-   * @returns {HTMLElement[]} - An array of HTML elements representing the search results.
+   * @returns {NodeListOf<ChildNode>} - An array of HTML elements representing the search results.
    */
   createResultsEl(results) {
     return parseHtml(results.map((r) => {