diff --git a/resources/views/components/search-view.blade.php b/resources/views/components/search-view.blade.php
index f431b02..985ce9d 100644
--- a/resources/views/components/search-view.blade.php
+++ b/resources/views/components/search-view.blade.php
@@ -1,6 +1,6 @@
 <div x-data="searchView()" x-init="loadMore()">
     <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
-        <div class="md:w-1/4">
+        <nav class="md:w-1/4">
             <x-inputs.input type="text"
                             name="search"
                             placeholder="Search..."
@@ -17,11 +17,22 @@
                     @endforeach
                 </div>
             </details>
-        </div>
-        <div class="md:w-3/4">
+        </nav>
+        <section class="md:w-3/4">
             <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
                 {{ $results }}
             </div>
+            <svg x-show="searching" class="animate-spin h-24 w-24 mx-auto my-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-5" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-25" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <div x-show="!searching && results.length === 0"
+                 class="h-full w-full font-extrabold text-red-100">
+                <div class="text-center text-6xl md:text-9xl">Nothing Found</div>
+                <svg class="h-24 w-24 m-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </div>
             <x-inputs.button
                 class="text-xl mt-4"
                 color="blue"
@@ -31,7 +42,7 @@
                 @click.prevent="loadMore()">
                 Load more
             </x-inputs.button>
-        </div>
+        </section>
     </div>
 </div>
 
@@ -44,13 +55,15 @@
                     number: 1,
                     size: 12,
                     morePages: false,
-                    searchTerm: '{{ $defaultSearch ?? null }}',
+                    searchTerm: null,
+                    searching: false,
                     filterTags: [],
                     resetPagination() {
                         this.number = 1;
                         this.morePages = false;
                     },
                     loadMore() {
+                        this.searching = true;
                         let url = `{{ $route }}?page[number]=${this.number}&page[size]=${this.size}`;
                         if (this.searchTerm) {
                             url += `&filter[search]=${this.searchTerm}`;
@@ -59,7 +72,6 @@
                         fetch(url)
                             .then(response => response.json())
                             .then(data => {
-                                this.results = [];
                                 this.results = [...this.results, ...data.data.map(result => result.attributes)];
                                 if (this.number < data.meta.page['last-page']) {
                                     this.morePages = true;
@@ -67,9 +79,11 @@
                                 } else {
                                     this.morePages = false;
                                 }
+                                this.searching = false;
                             });
                     },
                     search(e) {
+                        this.results = [];
                         this.resetPagination();
                         if (e.target.value !== '') {
                             this.searchTerm = e.target.value;
@@ -80,6 +94,7 @@
                         this.loadMore();
                     },
                     updateFilters(e) {
+                        this.results = [];
                         this.resetPagination();
                         const newTag = e.target.text;
                         if (this.filterTags.includes(newTag)) {