diff --git a/assets/html_files/accordions.html b/assets/html_files/accordions.html
index 66ce3da4..cc3b2f76 100644
--- a/assets/html_files/accordions.html
+++ b/assets/html_files/accordions.html
@@ -67,6 +67,12 @@
             <h1 class="SearchAccordion">Search Accordion</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Accordion Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Accordion</h1>
diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html
index 2e5981a2..fac8b3df 100644
--- a/assets/html_files/backgrounds.html
+++ b/assets/html_files/backgrounds.html
@@ -66,6 +66,12 @@
             <h1 class="SearchBackground">Search Background</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Background Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+        
         <div class="contain">
             <div class="box">
                 <h1>3D Boxes Background</h1>
diff --git a/assets/html_files/breadcrumbs.html b/assets/html_files/breadcrumbs.html
index 98da2bda..a4396fdd 100644
--- a/assets/html_files/breadcrumbs.html
+++ b/assets/html_files/breadcrumbs.html
@@ -66,6 +66,12 @@
             <h1 class="SearchBreadcrumb">Search Breadcrumb</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter breadcrumbs Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+        
         <div class="contain">
             <div class="box">
                 <h1>3D Breadcrumb</h1>
diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html
index 27d65948..103f2f2f 100644
--- a/assets/html_files/buttons.html
+++ b/assets/html_files/buttons.html
@@ -66,6 +66,12 @@
             <h1 class="SearchButton">Search Button</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Button Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+        
         <div class="contain">
             <div class="box">
                 <h1>3D Button</h1>
diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html
index a4063fef..4491be8b 100644
--- a/assets/html_files/cards.html
+++ b/assets/html_files/cards.html
@@ -66,6 +66,12 @@
             <h1 class="SearchCard">Search Card</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Card Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Animated Card</h1>
diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html
index 1cfcc361..965d1fde 100644
--- a/assets/html_files/carousels.html
+++ b/assets/html_files/carousels.html
@@ -66,6 +66,12 @@
             <h1 class="SearchCarousel">Search Carousel</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Carousel Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Image Carousel</h1>
diff --git a/assets/html_files/dropdowns.html b/assets/html_files/dropdowns.html
index 73d2ec72..0bb342da 100644
--- a/assets/html_files/dropdowns.html
+++ b/assets/html_files/dropdowns.html
@@ -66,6 +66,12 @@
             <h1 class="SearchDropdown">Search Dropdown</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Dropdown Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>Apple Themed Dropdown</h1>
diff --git a/assets/html_files/footers.html b/assets/html_files/footers.html
index 0237df1f..d6830b35 100644
--- a/assets/html_files/footers.html
+++ b/assets/html_files/footers.html
@@ -66,6 +66,12 @@
             <h1 class="SearchFooter">Search Footer</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Footer Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+        
         <div class="contain">
             <div class="box">
                 <h1>Animated Footer</h1>
diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
index 8b5ebc7b..7d3d6574 100644
--- a/assets/html_files/forms.html
+++ b/assets/html_files/forms.html
@@ -66,6 +66,12 @@
             <h1 class="SearchForm">Search Form</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Forms Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+        
         <div class="contain">
             <div class="box">
                 <h1>Animated Border Login Form</h1>
diff --git a/assets/html_files/loaders.html b/assets/html_files/loaders.html
index 5c93f2bd..54c76900 100644
--- a/assets/html_files/loaders.html
+++ b/assets/html_files/loaders.html
@@ -66,6 +66,12 @@
             <h1 class="SearchLoader">Search Loader</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Loader Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+        
         <div class="contain">
             <div class="box">
                 <h1>Bird Loader</h1>
diff --git a/assets/html_files/navigation-bars.html b/assets/html_files/navigation-bars.html
index ca0e5d98..5712723b 100644
--- a/assets/html_files/navigation-bars.html
+++ b/assets/html_files/navigation-bars.html
@@ -66,6 +66,12 @@
             <h1 class="SearchNavigationbar">Search Navigation Bar</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter NavBar Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Reveal Side Navigation Bar</h1>
diff --git a/assets/html_files/popups.html b/assets/html_files/popups.html
index fe76c1c1..8bedbc11 100644
--- a/assets/html_files/popups.html
+++ b/assets/html_files/popups.html
@@ -67,6 +67,13 @@
             <h1 class="SearchPopup">Search Popups</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Popup Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
+        
         <div class="contain">
             <div class="box">
                 <h1>Confirmation Dialog Popup</h1>
diff --git a/assets/html_files/search-bars.html b/assets/html_files/search-bars.html
index ddc36133..eb29ccae 100644
--- a/assets/html_files/search-bars.html
+++ b/assets/html_files/search-bars.html
@@ -66,6 +66,12 @@
             <h1 class="SearchSearchbar">Search Search Bar</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter SearchBar Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+        
         <div class="contain">
             <div class="box">
                 <h1>3D Search Bar </h1>
diff --git a/assets/html_files/text-animations.html b/assets/html_files/text-animations.html
index e388cb56..4f0ccf92 100644
--- a/assets/html_files/text-animations.html
+++ b/assets/html_files/text-animations.html
@@ -66,6 +66,12 @@
             <h1 class="SearchTextanimation">Search Text Animation</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Text Animation Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Cylindrically Rotating Text Animation</h1>
diff --git a/assets/html_files/transfer-lists.html b/assets/html_files/transfer-lists.html
index 6fb2d8aa..4c14b23a 100644
--- a/assets/html_files/transfer-lists.html
+++ b/assets/html_files/transfer-lists.html
@@ -66,6 +66,12 @@
             <h1 class="SearchTransferlist">Search Transfer List</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Transfer List Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+        
         <div class="contain">
             <div class="box">
                 <h1>Neumorphism Transfer List</h1>
diff --git a/assets/images/no-results.png b/assets/images/no-results.png
new file mode 100644
index 00000000..ad092736
Binary files /dev/null and b/assets/images/no-results.png differ
diff --git a/assets/js_files/search.js b/assets/js_files/search.js
index c9625ecd..d9b4bc48 100644
--- a/assets/js_files/search.js
+++ b/assets/js_files/search.js
@@ -7,6 +7,7 @@ function filtereachComponents() {
     console.log(filter)
     console.log(components)
 
+    let selected_components = 0;
     for (i = 0; i < components.length; i++) {
         var component = components[i];
         var h2 = component.querySelector('h1');
@@ -14,8 +15,15 @@ function filtereachComponents() {
 
         if (componentName.toUpperCase().indexOf(filter) > -1) {
             component.style.display = "block";
+            selected_components++;
         } else {
             component.style.display = "none";
         }
     }
+
+    if (selected_components === 0) {
+        document.querySelector(".no-results").style.display = "flex";
+    } else {
+        document.querySelector(".no-results").style.display = "none";
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 2dcb4cb6..57e4930c 100644
--- a/index.html
+++ b/index.html
@@ -80,6 +80,11 @@ <h1>Search Component</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Component Name" oninput="filterComponents()">
         </div>
 
+        <div class="no-results">
+            <img src="./assets/images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="zoom-effect">
             <div class="box">
                 <a href="./assets/html_files/accordions.html" target="_blank">
diff --git a/script.js b/script.js
index fc0bfa0a..d7128ce2 100644
--- a/script.js
+++ b/script.js
@@ -43,6 +43,7 @@ function filterComponents() {
     console.log(filter)
     console.log(components)
 
+    let selected_components = 0;
     for (i = 0; i < components.length; i++) {
         var component = components[i];
         var h2 = component.querySelector('h2');
@@ -50,10 +51,16 @@ function filterComponents() {
 
         if (componentName.toUpperCase().indexOf(filter) > -1) {
             component.style.display = "flex";
+            selected_components++;
         } else {
             component.style.display = "none";
         }
     }
+    if (selected_components === 0) {
+        document.querySelector(".no-results").style.display = "flex";
+    } else {
+        document.querySelector(".no-results").style.display = "none";
+    }
 }
 
 // Voice command in search bar feature
diff --git a/style.css b/style.css
index c82665f2..2f701cbd 100644
--- a/style.css
+++ b/style.css
@@ -717,6 +717,21 @@ footer p a {
     box-shadow: -5px -5px 10px #9961a1;
 }
 
+.no-results {
+    display: none;
+    padding-top: 50px;
+    color: white;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+.no-results h2 {
+    text-align: center;
+}
+
 /* Media Queries */
 
 @media (max-width: 1030px) {