diff --git a/resources/js/alpine/components/inline-search.js b/resources/js/alpine/components/inline-search.js
new file mode 100644
index 000000000..76a5b3e69
--- /dev/null
+++ b/resources/js/alpine/components/inline-search.js
@@ -0,0 +1,34 @@
+/**
+ * Inline search – plain DOM listeners (no Alpine x-data needed).
+ *
+ * Each .inline-search-widget has a pre-built data-base-url including category
+ * param (e.g. "/search?t=6041"). This script just appends "&search=<query>".
+ *
+ * Supports multiple instances on the same page.
+ * Works safely inside nested forms / x-data scopes.
+ */
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.inline-search-widget').forEach((widget) => {
+        const input = widget.querySelector('[data-role="inline-search-input"]');
+        const btn = widget.querySelector('[data-role="inline-search-btn"]');
+        if (!input || !btn) return;
+
+        function doSearch() {
+            const q = input.value.trim();
+            if (!q) return;
+
+            const baseUrl = widget.dataset.baseUrl || '/search';
+            const sep = baseUrl.includes('?') ? '&' : '?';
+            window.location.href = baseUrl + sep + 'search=' + encodeURIComponent(q);
+        }
+
+        btn.addEventListener('click', doSearch);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                doSearch();
+            }
+        });
+    });
+});
+
diff --git a/resources/js/alpine/index.js b/resources/js/alpine/index.js
index c9b1f0620..5d02abae7 100644
--- a/resources/js/alpine/index.js
+++ b/resources/js/alpine/index.js
@@ -27,6 +27,7 @@ import './components/confirm-link.js';
 import './components/toast-notification.js';
 import './components/tab-switcher.js';
 import './components/cart-button.js';
+import './components/inline-search.js';
 import './components/search-autocomplete.js';
 import './components/dismissible.js';
 
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index 1437cea6b..1e474e3da 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -73,7 +73,7 @@
 
         <!-- Results -->
         @if(count($results) > 0)
-            <div class="mb-4 flex justify-between items-center">
+            <div class="mb-4 flex flex-wrap justify-between items-center gap-4">
                 <div class="flex items-center gap-4">
                     <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                         <i class="fa fa-book mr-2 text-blue-600"></i>
@@ -87,9 +87,12 @@
                         :shows="false"
                     />
                 </div>
-                <span class="text-sm text-gray-600 dark:text-gray-400">
-                    {{ $results->total() }} results found
-                </span>
+                <div class="flex items-center gap-4">
+                    <x-inline-search placeholder="Search in Books..." :category="$category ?? null" />
+                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{ $results->total() }} results found
+                    </span>
+                </div>
             </div>
 
             <!-- Books Grid -->
diff --git a/resources/views/browse/index.blade.php b/resources/views/browse/index.blade.php
index 5eee1bf0d..5d4376c94 100644
--- a/resources/views/browse/index.blade.php
+++ b/resources/views/browse/index.blade.php
@@ -6,41 +6,18 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm transition-colors duration-200">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav class="flex" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-3">
-                <li class="inline-flex items-center">
-                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center">
-                        <i class="fas fa-home mr-2"></i> Home
-                    </a>
-                </li>
-                @if(isset($parentcat) && $parentcat != '')
-                    <li>
-                        <div class="flex items-center">
-                            <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500 mx-2"></i>
-                            <a href="{{ url('/browse/' . ($parentcat == 'music' ? 'Audio' : $parentcat)) }}" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">{{ $parentcat }}</a>
-                        </div>
-                    </li>
-                    @if(isset($catname) && $catname != '' && $catname != 'all')
-                        <li>
-                            <div class="flex items-center">
-                                <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500 mx-2"></i>
-                                <span class="text-gray-500 dark:text-gray-400">{{ $catname }}</span>
-                            </div>
-                        </li>
-                    @endif
-                @else
-                    <li>
-                        <div class="flex items-center">
-                            <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500 mx-2"></i>
-                            <span class="text-gray-500 dark:text-gray-400">Browse / {{ $catname ?? 'All' }}</span>
-                        </div>
-                    </li>
-                @endif
-            </ol>
-        </nav>
-    </div>
+    @php
+        $crumbs = [['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home']];
+        if (isset($parentcat) && $parentcat != '') {
+            $crumbs[] = ['label' => $parentcat, 'url' => url('/browse/' . ($parentcat == 'music' ? 'Audio' : $parentcat))];
+            if (isset($catname) && $catname != '' && $catname != 'all') {
+                $crumbs[] = ['label' => $catname];
+            }
+        } else {
+            $crumbs[] = ['label' => 'Browse / ' . ($catname ?? 'All')];
+        }
+    @endphp
+    <x-breadcrumb :items="$crumbs" />
 
     @if($results->count() > 0)
         <form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps" data-show-thumbs="{{ request()->query('thumbs', '0') === '1' ? '1' : '0' }}">
@@ -95,8 +72,19 @@
                         </div>
                     </div>
 
-                    <!-- Right Section - Sort Options -->
-                    <div class="flex items-center justify-end">
+                    <!-- Right Section - Sort & Search -->
+                    <div class="flex items-center justify-end gap-3">
+                        @php
+                            $searchPlaceholder = 'Search';
+                            if (!empty($parentcat) && $parentcat !== 'All') {
+                                $searchPlaceholder .= ' in ' . $parentcat;
+                                if (!empty($catname) && $catname !== 'All' && $catname !== 'all') {
+                                    $searchPlaceholder .= ' ' . $catname;
+                                }
+                            }
+                            $searchPlaceholder .= '...';
+                        @endphp
+                        <x-inline-search :placeholder="$searchPlaceholder" :category="$category ?? null" />
                         <x-sort-dropdown />
                     </div>
                 </div>
@@ -217,7 +205,7 @@
                                     </div>
                                 </td>
                                 <td class="px-3 py-4 whitespace-nowrap">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200">
                                         {{ $result->category_name ?? 'Other' }}
                                     </span>
                                 </td>
@@ -292,7 +280,7 @@
                                     {{ $result->searchname }}
                                 </a>
                                 <div class="flex flex-wrap items-center gap-2 mt-2 text-sm text-gray-600 dark:text-gray-400">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200">
                                         {{ $result->category_name ?? 'Other' }}
                                     </span>
                                     <span><i class="fas fa-clock mr-1"></i>{{ userDateDiffForHumans($result->adddate) }}</span>
@@ -324,11 +312,11 @@
             </div>
         </form>
     @else
-        <div class="px-6 py-12 text-center">
-            <i class="fas fa-search text-6xl text-gray-300 dark:text-gray-600 dark:text-gray-400 mb-4"></i>
-            <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300 mb-2">No releases found</h3>
-            <p class="text-gray-500 dark:text-gray-400">Try adjusting your search criteria or browse other categories.</p>
-        </div>
+        <x-empty-state
+            icon="fas fa-search"
+            title="No releases found"
+            message="Try adjusting your search criteria or browse other categories."
+        />
     @endif
 
     {{-- All modals (preview, mediainfo, filelist, NFO) are included globally via layouts.main --}}
diff --git a/resources/views/components/breadcrumb.blade.php b/resources/views/components/breadcrumb.blade.php
new file mode 100644
index 000000000..347b9185c
--- /dev/null
+++ b/resources/views/components/breadcrumb.blade.php
@@ -0,0 +1,35 @@
+@props([
+    'items' => []
+])
+
+<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+    <nav class="flex" aria-label="Breadcrumb">
+        <ol class="inline-flex items-center space-x-1 md:space-x-2 text-sm">
+            @foreach($items as $index => $item)
+                @if($index > 0)
+                    <li aria-hidden="true">
+                        <i class="fas fa-chevron-right text-xs text-gray-400 dark:text-gray-500 mx-1"></i>
+                    </li>
+                @endif
+                <li class="inline-flex items-center">
+                    @if(!empty($item['url']))
+                        <a href="{{ $item['url'] }}" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center transition">
+                            @if(!empty($item['icon']))
+                                <i class="{{ $item['icon'] }} mr-1.5"></i>
+                            @endif
+                            {{ $item['label'] }}
+                        </a>
+                    @else
+                        <span class="text-gray-500 dark:text-gray-400 inline-flex items-center">
+                            @if(!empty($item['icon']))
+                                <i class="{{ $item['icon'] }} mr-1.5"></i>
+                            @endif
+                            {{ $item['label'] }}
+                        </span>
+                    @endif
+                </li>
+            @endforeach
+        </ol>
+    </nav>
+</div>
+
diff --git a/resources/views/components/empty-state.blade.php b/resources/views/components/empty-state.blade.php
new file mode 100644
index 000000000..e35f1d979
--- /dev/null
+++ b/resources/views/components/empty-state.blade.php
@@ -0,0 +1,25 @@
+@props([
+    'icon' => 'fas fa-search',
+    'title' => 'No results found',
+    'message' => 'Try adjusting your search criteria or browse other categories.',
+    'actionUrl' => null,
+    'actionLabel' => null,
+    'actionIcon' => null,
+])
+
+<div class="px-6 py-12 text-center">
+    <div class="inline-flex items-center justify-center w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full mb-6">
+        <i class="{{ $icon }} text-gray-400 dark:text-gray-500 text-4xl"></i>
+    </div>
+    <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">{{ $title }}</h3>
+    <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto mb-4">{{ $message }}</p>
+    @if($actionUrl && $actionLabel)
+        <a href="{{ $actionUrl }}" class="inline-flex items-center px-4 py-2 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition shadow-sm">
+            @if($actionIcon)
+                <i class="{{ $actionIcon }} mr-2"></i>
+            @endif
+            {{ $actionLabel }}
+        </a>
+    @endif
+</div>
+
diff --git a/resources/views/components/inline-search.blade.php b/resources/views/components/inline-search.blade.php
new file mode 100644
index 000000000..76df33726
--- /dev/null
+++ b/resources/views/components/inline-search.blade.php
@@ -0,0 +1,31 @@
+@props([
+    'action' => null,
+    'placeholder' => 'Quick search...',
+    'category' => null,
+])
+
+@php
+    $baseUrl = $action ?? route('search');
+    if ($category !== null && (int) $category > 0) {
+        $baseUrl .= (str_contains($baseUrl, '?') ? '&' : '?') . 't=' . (int) $category;
+    }
+@endphp
+
+<div class="inline-search-widget flex items-center gap-2" data-base-url="{{ $baseUrl }}">
+    <div class="relative">
+        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <i class="fas fa-search text-gray-400 dark:text-gray-500 text-sm"></i>
+        </div>
+        <input type="text"
+               data-role="inline-search-input"
+               placeholder="{{ $placeholder }}"
+               class="w-48 lg:w-56 pl-9 pr-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition"
+               autocomplete="off">
+    </div>
+    <button type="button"
+            data-role="inline-search-btn"
+            class="px-3 py-1.5 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition text-sm">
+        <i class="fas fa-search"></i>
+    </button>
+</div>
+
diff --git a/resources/views/console/index.blade.php b/resources/views/console/index.blade.php
index 5db33b034..9269a24ab 100644
--- a/resources/views/console/index.blade.php
+++ b/resources/views/console/index.blade.php
@@ -6,39 +6,16 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav class="flex" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-3">
-                <li class="inline-flex items-center">
-                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
-                        <i class="fas fa-home mr-2"></i> Home
-                    </a>
-                </li>
-                @if(!empty($catname) && is_object($catname) && !empty($catname->parent))
-                    <li>
-                        <div class="flex items-center">
-                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                            <a href="{{ url('/browse/' . $catname->parent->title) }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600">{{ $catname->parent->title }}</a>
-                        </div>
-                    </li>
-                    <li>
-                        <div class="flex items-center">
-                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                            <a href="{{ url('/browse/' . $catname->title) }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600">{{ $catname->title }}</a>
-                        </div>
-                    </li>
-                @else
-                    <li>
-                        <div class="flex items-center">
-                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                            <span class="text-gray-500">Console / {{ is_object($catname) ? $catname->title : $catname }}</span>
-                        </div>
-                    </li>
-                @endif
-            </ol>
-        </nav>
-    </div>
+    @php
+        $crumbs = [['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home']];
+        if (!empty($catname) && is_object($catname) && !empty($catname->parent)) {
+            $crumbs[] = ['label' => $catname->parent->title, 'url' => url('/browse/' . $catname->parent->title)];
+            $crumbs[] = ['label' => $catname->title, 'url' => url('/browse/' . $catname->title)];
+        } else {
+            $crumbs[] = ['label' => 'Console / ' . (is_object($catname) ? $catname->title : $catname)];
+        }
+    @endphp
+    <x-breadcrumb :items="$crumbs" />
 
     @if($results->count() > 0)
         <form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
@@ -71,6 +48,10 @@
                         </div>
                     </div>
 
+                    <!-- Right Section - Inline Search -->
+                    <div class="flex items-center">
+                        <x-inline-search placeholder="Search in Console..." :category="$category ?? null" />
+                    </div>
                 </div>
             </div>
 
@@ -250,12 +231,11 @@
             </div>
         </form>
     @else
-        <div class="px-6 py-8">
-            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg p-4 text-blue-800 dark:text-blue-200">
-                <i class="fa fa-info-circle mr-2"></i>
-                No console releases with covers available!
-            </div>
-        </div>
+        <x-empty-state
+            icon="fas fa-gamepad"
+            title="No console releases found"
+            message="No console releases with covers available! Check back later."
+        />
     @endif
 </div>
 
diff --git a/resources/views/games/index.blade.php b/resources/views/games/index.blade.php
index 2d1100584..6990da32e 100644
--- a/resources/views/games/index.blade.php
+++ b/resources/views/games/index.blade.php
@@ -96,7 +96,7 @@
 
         <!-- Results -->
         @if(count($results) > 0)
-            <div class="mb-4 flex justify-between items-center">
+            <div class="mb-4 flex flex-wrap justify-between items-center gap-4">
                 <div class="flex items-center gap-4">
                     <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                         <i class="fa fa-gamepad mr-2 text-blue-600"></i>
@@ -110,9 +110,12 @@
                         :shows="false"
                     />
                 </div>
-                <span class="text-sm text-gray-600 dark:text-gray-400">
-                    {{ $results->total() }} results found
-                </span>
+                <div class="flex items-center gap-4">
+                    <x-inline-search placeholder="Search in Games..." :category="$category ?? null" />
+                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{ $results->total() }} results found
+                    </span>
+                </div>
             </div>
 
             <!-- Games Grid - Card Layout with Multiple Releases -->
@@ -234,7 +237,7 @@
                                                                 </a>
                                                                 <button class="add-to-cart inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-600 dark:bg-blue-700 text-white hover:bg-blue-700 dark:hover:bg-blue-800 transition" data-guid="{{ $release->guid }}">
                                                                     <i class="fas fa-shopping-cart mr-1"></i> Cart
-                                                                </a>
+                                                                </button>
                                                                 <a href="{{ url('/details/' . $release->guid) }}" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-600 dark:bg-gray-700 text-white hover:bg-gray-700 dark:hover:bg-gray-800 transition">
                                                                     <i class="fas fa-info-circle mr-1"></i> Details
                                                                 </a>
diff --git a/resources/views/movies/index.blade.php b/resources/views/movies/index.blade.php
index 2131cd659..04da67b58 100644
--- a/resources/views/movies/index.blade.php
+++ b/resources/views/movies/index.blade.php
@@ -6,25 +6,10 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm" x-data="moviesPage" data-movie-layout="{{ $movie_layout ?? 2 }}">
-    {{-- Breadcrumb --}}
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav class="flex" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-3">
-                <li class="inline-flex items-center">
-                    <a href="{{ url($site['home_link'] ?? '/') }}"
-                       class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center transition">
-                        <i class="fas fa-home mr-2"></i> Home
-                    </a>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <span class="text-gray-500 dark:text-gray-400">Movies</span>
-                    </div>
-                </li>
-            </ol>
-        </nav>
-    </div>
+    <x-breadcrumb :items="[
+        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
+        ['label' => 'Movies'],
+    ]" />
 
     {{-- Movies Filter Section --}}
     <div class="px-6 py-5 surface-panel-alt border-b">
@@ -129,14 +114,15 @@
     @if(isset($results) && $results->count() > 0)
         <div class="px-6 py-6">
             {{-- Results Summary and Pagination --}}
-            <div class="flex flex-col sm:flex-row justify-between items-center mb-6 pb-4 border-b border-gray-200 dark:border-gray-700">
-                <div class="text-sm text-gray-700 dark:text-gray-300 mb-3 sm:mb-0">
+            <div class="flex flex-col sm:flex-row justify-between items-center mb-6 pb-4 border-b border-gray-200 dark:border-gray-700 gap-4">
+                <div class="text-sm text-gray-700 dark:text-gray-300">
                     <span class="font-medium">{{ $results->total() }}</span> movies found
                     <span class="text-gray-500 dark:text-gray-400">
                         (showing {{ $results->firstItem() }}-{{ $results->lastItem() }})
                     </span>
                 </div>
-                <div>
+                <div class="flex items-center gap-4">
+                    <x-inline-search placeholder="Search in Movies..." :category="$category ?? null" />
                     {{ $results->links() }}
                 </div>
             </div>
@@ -156,16 +142,11 @@
             </div>
         </div>
     @else
-        {{-- Empty State --}}
-        <div class="px-6 py-16 text-center">
-            <div class="inline-flex items-center justify-center w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full mb-6">
-                <i class="fas fa-film text-gray-400 dark:text-gray-500 text-4xl"></i>
-            </div>
-            <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">No Movies Found</h3>
-            <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
-                Try adjusting your search filters or check back later for new releases.
-            </p>
-        </div>
+        <x-empty-state
+            icon="fas fa-film"
+            title="No Movies Found"
+            message="Try adjusting your search filters or check back later for new releases."
+        />
     @endif
 </div>
 
diff --git a/resources/views/movies/trending.blade.php b/resources/views/movies/trending.blade.php
index 4a8514e99..66d87ccca 100644
--- a/resources/views/movies/trending.blade.php
+++ b/resources/views/movies/trending.blade.php
@@ -2,30 +2,11 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav class="flex" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-3">
-                <li class="inline-flex items-center">
-                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center">
-                        <i class="fas fa-home mr-2"></i> Home
-                    </a>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <a href="{{ route('Movies') }}" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Movies</a>
-                    </div>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <span class="text-gray-500">Trending</span>
-                    </div>
-                </li>
-            </ol>
-        </nav>
-    </div>
+    <x-breadcrumb :items="[
+        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
+        ['label' => 'Movies', 'url' => route('Movies')],
+        ['label' => 'Trending'],
+    ]" />
 
     <!-- Header -->
     <div class="px-6 py-6 bg-primary-600 text-white">
@@ -159,11 +140,14 @@
             </div>
         </div>
     @else
-        <div class="px-6 py-12 text-center">
-            <i class="fas fa-chart-line text-gray-400 text-5xl mb-4"></i>
-            <p class="text-gray-600 dark:text-gray-400 text-lg mb-2">No trending movies found.</p>
-            <p class="text-gray-500 dark:text-gray-500 text-sm">Check back soon for the most popular downloads!</p>
-        </div>
+        <x-empty-state
+            icon="fas fa-chart-line"
+            title="No trending movies found"
+            message="Check back soon for the most popular downloads!"
+            action-url="{{ route('Movies') }}"
+            action-label="Browse All Movies"
+            action-icon="fas fa-film"
+        />
     @endif
 
     <!-- Info Box -->
diff --git a/resources/views/movies/viewmoviefull.blade.php b/resources/views/movies/viewmoviefull.blade.php
index 4d4aa96f4..4f2451121 100644
--- a/resources/views/movies/viewmoviefull.blade.php
+++ b/resources/views/movies/viewmoviefull.blade.php
@@ -2,30 +2,11 @@
 
 @section('content')
 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200">
-        <nav class="flex" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-3">
-                <li class="inline-flex items-center">
-                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
-                        <i class="fas fa-home mr-2"></i> Home
-                    </a>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <a href="{{ route('Movies') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600">Movies</a>
-                    </div>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <span class="text-gray-500">{{ $movie['title'] ?? 'Movie Details' }}</span>
-                    </div>
-                </li>
-            </ol>
-        </nav>
-    </div>
+    <x-breadcrumb :items="[
+        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
+        ['label' => 'Movies', 'url' => route('Movies')],
+        ['label' => $movie['title'] ?? 'Movie Details'],
+    ]" />
 
     @if(isset($movie))
         <div class="px-6 py-6">
@@ -232,7 +213,7 @@
                                         <a href="{{ url('/getnzb/' . $release->guid) }}" class="inline-flex items-center px-4 py-2 bg-green-600 dark:bg-green-700 text-white text-sm font-medium rounded-lg hover:bg-green-700 dark:hover:bg-green-800 transition">
                                             <i class="fas fa-download mr-2"></i> Download
                                         </a>
-                                        <button class="add-to-cart inline-flex items-center px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white text-sm font-medium rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition" data-guid="{{ $release->guid }}">
+                                        <button class="add-to-cart inline-flex items-center px-4 py-2 bg-primary-600 dark:bg-primary-700 text-white text-sm font-medium rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition" data-guid="{{ $release->guid }}">
                                             <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
                                         </button>
                                         <a href="{{ url('/details/' . $release->guid) }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition">
diff --git a/resources/views/movies/viewmovietrailer.blade.php b/resources/views/movies/viewmovietrailer.blade.php
index 85fa726e3..e552b3550 100644
--- a/resources/views/movies/viewmovietrailer.blade.php
+++ b/resources/views/movies/viewmovietrailer.blade.php
@@ -2,30 +2,11 @@
 
 @section('content')
 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200">
-        <nav class="flex" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-3">
-                <li class="inline-flex items-center">
-                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
-                        <i class="fas fa-home mr-2"></i> Home
-                    </a>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <a href="{{ route('Movies') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600">Movies</a>
-                    </div>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <span class="text-gray-500">Trailer</span>
-                    </div>
-                </li>
-            </ol>
-        </nav>
-    </div>
+    <x-breadcrumb :items="[
+        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
+        ['label' => 'Movies', 'url' => route('Movies')],
+        ['label' => 'Trailer'],
+    ]" />
 
     <div class="px-6 py-6">
         @if(isset($movie))
diff --git a/resources/views/music/index.blade.php b/resources/views/music/index.blade.php
index 4c51b2c45..255646e7e 100644
--- a/resources/views/music/index.blade.php
+++ b/resources/views/music/index.blade.php
@@ -93,7 +93,7 @@
 
         <!-- Results -->
         @if(count($results) > 0)
-            <div class="mb-4 flex justify-between items-center">
+            <div class="mb-4 flex flex-wrap justify-between items-center gap-4">
                 <div class="flex items-center gap-4">
                     <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                         <i class="fa fa-music mr-2 text-blue-600 dark:text-blue-400"></i>
@@ -107,9 +107,12 @@
                         :shows="false"
                     />
                 </div>
-                <span class="text-sm text-gray-600 dark:text-gray-400">
-                    {{ $results->total() }} results found
-                </span>
+                <div class="flex items-center gap-4">
+                    <x-inline-search placeholder="Search in Audio..." :category="$category ?? null" />
+                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {{ $results->total() }} results found
+                    </span>
+                </div>
             </div>
 
             <!-- Album Grid - Card Layout with Multiple Releases -->
diff --git a/resources/views/search/index.blade.php b/resources/views/search/index.blade.php
index ff5da0ed3..dd4c7ed19 100644
--- a/resources/views/search/index.blade.php
+++ b/resources/views/search/index.blade.php
@@ -5,14 +5,19 @@
 @endpush
 
 @section('content')
-<div class="surface-panel rounded-xl shadow-sm p-6">
-    <div class="mb-6">
+<div class="surface-panel rounded-xl shadow-sm">
+    <x-breadcrumb :items="[
+        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
+        ['label' => 'Search'],
+    ]" />
+
+    <div class="px-6 py-6">
         <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Search Releases</h1>
-        <p class="text-gray-600">Find exactly what you're looking for</p>
+        <p class="text-gray-600 dark:text-gray-400">Find exactly what you're looking for</p>
     </div>
 
     <!-- Search Form -->
-    <form method="GET" action="{{ route('search') }}" class="mb-8" id="searchForm">
+    <form method="GET" action="{{ route('search') }}" class="px-6 pb-6" id="searchForm">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
             <!-- Search Query with Autocomplete -->
             <div class="lg:col-span-2 relative">
@@ -150,8 +155,8 @@
     @if(isset($results) && ((is_array($results) && count($results) > 0) || (is_object($results) && $results->count() > 0)))
         <form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
             <!-- Multi-operations toolbar -->
-            <div class="mb-4 surface-panel-alt rounded-lg p-4 border">
-                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div class="px-6 py-4 surface-panel-alt border-y">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                     <div class="flex flex-wrap items-center gap-2">
                         <small class="text-gray-600 dark:text-gray-400">With Selected:</small>
                         <div class="flex gap-1">
@@ -168,25 +173,20 @@
                             @endif
                         </div>
                     </div>
-                    <div class="flex items-center gap-4">
-                        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">
-                            Search Results ({{ is_object($results) ? $results->total() : count($results) }} found)
-                        </h2>
-                        @if(is_object($results))
-                            <div class="text-sm text-gray-600 dark:text-gray-400">
-                                Page {{ $results->currentPage() }} of {{ $results->lastPage() }}
-                            </div>
-                        @endif
+                    <div class="flex items-center justify-center">
+                        <div class="text-sm text-gray-600 dark:text-gray-400">
+                            <span class="font-semibold">{{ is_object($results) ? $results->total() : count($results) }}</span> results found
+                            @if(is_object($results))
+                                — Page {{ $results->currentPage() }} of {{ $results->lastPage() }}
+                            @endif
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-end">
+                        <x-sort-dropdown />
                     </div>
                 </div>
             </div>
 
-            <!-- Sort Options -->
-            <div class="mb-4 surface-panel-alt rounded-lg p-4 border flex items-center justify-between">
-                <span class="font-medium text-gray-700 dark:text-gray-300 text-sm">Sort results:</span>
-                <x-sort-dropdown />
-            </div>
-
             <!-- Desktop Table View (hidden on mobile) -->
             <div class="hidden md:block overflow-x-auto">
                 <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
@@ -342,70 +342,17 @@
             </div>
 
             <!-- Mobile Card View (visible on mobile only) -->
-            <div class="md:hidden space-y-3">
+            <div class="md:hidden space-y-3 px-4 py-4">
                 @foreach($results as $result)
-                    <div class="border border-gray-200 dark:border-gray-700 rounded-xl p-4 hover:shadow-md transition">
+                    <div class="surface-panel border rounded-xl p-4 hover:shadow-md transition">
                         <div class="flex items-start gap-3">
                             <input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-primary-600 dark:text-primary-500 focus:ring-primary-500 dark:focus:ring-primary-400 dark:bg-gray-700 mt-1" name="release[]" value="{{ $result->guid }}" @change="onCheckboxChange()">
-                            <div class="flex-1">
-                                <div class="flex items-center gap-2 flex-wrap mb-2">
-                                    <a href="{{ url('/details/' . $result->guid) }}" class="text-lg font-medium text-primary-600 dark:text-primary-400 hover:text-primary-800 wrap-break-word break-all">
-                                        {{ $result->searchname }}
-                                    </a>
-                                    @if(!empty($result->report_count) && $result->report_count > 0)
-                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200"
-                                              title="Reported: {{ \App\Models\ReleaseReport::reasonKeysToLabels($result->report_reasons ?? '') }}">
-                                            <i class="fas fa-flag mr-1"></i> Reported ({{ $result->report_count }})
-                                        </span>
-                                    @endif
-                                    @if(!empty($result->failed_count) && $result->failed_count > 0)
-                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
-                                              title="{{ $result->failed_count }} user(s) reported download failure">
-                                            <i class="fas fa-exclamation-triangle mr-1"></i> Failed ({{ $result->failed_count }})
-                                        </span>
-                                    @endif
-                                    @if(isset($result->haspreview) && $result->haspreview == 1)
-                                        <button type="button"
-                                                class="preview-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 hover:bg-purple-200 dark:hover:bg-purple-800 transition cursor-pointer"
-                                                data-guid="{{ $result->guid }}"
-                                                title="View preview image">
-                                            <i class="fas fa-image mr-1"></i> Preview
-                                        </button>
-                                    @endif
-                                    @if(isset($result->jpgstatus) && $result->jpgstatus == 1)
-                                        <button type="button"
-                                                class="sample-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800 transition cursor-pointer"
-                                                data-guid="{{ $result->guid }}"
-                                                title="View sample image">
-                                            <i class="fas fa-images mr-1"></i> Sample
-                                        </button>
-                                    @endif
-                                    @if(isset($result->reid) && $result->reid != null)
-                                        <button type="button"
-                                                class="mediainfo-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200 hover:bg-primary-200 dark:hover:bg-primary-800 transition cursor-pointer"
-                                                data-release-id="{{ $result->id }}"
-                                                title="View media info">
-                                            <i class="fas fa-info-circle mr-1"></i> Media Info
-                                        </button>
-                                    @endif
-                                    @if(isset($result->nfostatus) && $result->nfostatus == 1)
-                                        <button type="button"
-                                                class="nfo-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800 transition cursor-pointer"
-                                                data-guid="{{ $result->guid }}"
-                                                title="View NFO file">
-                                            <i class="fas fa-file-alt mr-1"></i> NFO
-                                        </button>
-                                    @endif
-                                    @if(!empty($result->videos_id) && (int)$result->videos_id > 0)
-                                        <a href="{{ url('/series/' . $result->videos_id) }}"
-                                           class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition"
-                                           title="View full series">
-                                            <i class="fas fa-tv mr-1"></i> View Series
-                                        </a>
-                                    @endif
-                                </div>
-                                <div class="flex flex-wrap items-center gap-3 mt-2 text-sm text-gray-600 dark:text-gray-400">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200">
+                            <div class="flex-1 min-w-0">
+                                <a href="{{ url('/details/' . $result->guid) }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-medium wrap-break-word text-base break-all">
+                                    {{ $result->searchname }}
+                                </a>
+                                <div class="flex flex-wrap items-center gap-2 mt-2 text-sm text-gray-600 dark:text-gray-400">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200">
                                         {{ $result->category_name ?? 'Other' }}
                                     </span>
                                     <span><i class="fas fa-clock mr-1"></i>{{ userDateDiffForHumans($result->postdate) }}</span>
@@ -413,30 +360,15 @@
                                     <span><i class="fas fa-file mr-1"></i>{{ $result->totalpart ?? 0 }} files</span>
                                     <span title="Grabs"><i class="fas fa-download text-green-600 dark:text-green-400 mr-1"></i>{{ $result->grabs ?? 0 }}</span>
                                     <span title="Comments"><i class="fas fa-comment text-primary-600 dark:text-primary-400 mr-1"></i>{{ $result->comments ?? 0 }}</span>
-                                    @if($result->group_name)
-                                        <span><i class="fas fa-users mr-1"></i>{{ $result->group_name }}</span>
-                                    @endif
-                                    @if(!empty($result->fromname))
-                                        <span class="inline-flex items-center px-2 py-0.5 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 font-mono text-xs">
-                                            <i class="fas fa-user mr-1"></i>{{ $result->fromname }}
-                                        </span>
-                                    @endif
                                 </div>
                                 <div class="mt-3 flex gap-1 flex-wrap">
-                                    <a href="{{ url('/getnzb/' . $result->guid) }}"
-                                       class="download-nzb px-2 py-1 bg-green-600 dark:bg-green-700 text-white rounded-lg hover:bg-green-700 dark:hover:bg-green-800 transition text-sm"
-                                       title="Download NZB">
+                                    <a href="{{ url('/getnzb/' . $result->guid) }}" class="download-nzb px-2 py-1 bg-green-600 dark:bg-green-700 text-white rounded-lg hover:bg-green-700 dark:hover:bg-green-800 transition text-sm" title="Download NZB">
                                         <i class="fa fa-download"></i>
                                     </a>
-                                    <a href="{{ url('/details/' . $result->guid) }}"
-                                       class="px-2 py-1 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition text-sm"
-                                       title="View Details">
+                                    <a href="{{ url('/details/' . $result->guid) }}" class="px-2 py-1 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition text-sm" title="View Details">
                                         <i class="fa fa-info"></i>
                                     </a>
-                                    <a href="#"
-                                       class="add-to-cart px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition text-sm"
-                                       data-guid="{{ $result->guid }}"
-                                       title="Add to Cart">
+                                    <a href="#" class="add-to-cart px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition text-sm" data-guid="{{ $result->guid }}" title="Add to Cart">
                                         <i class="icon_cart fa fa-shopping-basket"></i>
                                     </a>
                                     @if(!empty($result->imdbid) && $result->imdbid != '0' && $result->imdbid != 0 && $result->imdbid != '0000000')
@@ -456,27 +388,25 @@
 
             <!-- Pagination -->
             @if(is_object($results) && method_exists($results, 'links'))
-                <div class="mt-6">
+                <div class="px-6 py-3 surface-panel-alt border-t">
                     {{ $results->appends(request()->query())->links() }}
                 </div>
             @endif
         </form>
     @elseif(request()->has('search'))
-        <div class="text-center py-12">
-            <i class="fas fa-search text-6xl text-gray-300 mb-4"></i>
-            <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300 mb-2">No results found</h3>
-            <p class="text-gray-500">Try adjusting your search terms or using different filters.</p>
-        </div>
+        <x-empty-state
+            icon="fas fa-search"
+            title="No results found"
+            message="Try adjusting your search terms or using different filters."
+        />
     @else
-        <div class="text-center py-12">
-            <i class="fas fa-search text-6xl text-gray-300 mb-4"></i>
-            <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300 mb-2">Start Your Search</h3>
-            <p class="text-gray-500">Enter search terms above to find releases.</p>
-        </div>
+        <x-empty-state
+            icon="fas fa-search"
+            title="Start Your Search"
+            message="Enter search terms above to find releases."
+        />
     @endif
 
-
-
     {{-- All modals (preview, mediainfo, filelist, NFO) are included globally via layouts.main --}}
 </div>
 @endsection
diff --git a/resources/views/series/trending.blade.php b/resources/views/series/trending.blade.php
index 1da1fc527..a326f343a 100644
--- a/resources/views/series/trending.blade.php
+++ b/resources/views/series/trending.blade.php
@@ -2,30 +2,11 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav class="flex" aria-label="Breadcrumb">
-            <ol class="inline-flex items-center space-x-1 md:space-x-3">
-                <li class="inline-flex items-center">
-                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center">
-                        <i class="fas fa-home mr-2"></i> Home
-                    </a>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <a href="{{ route('series') }}" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">TV Shows</a>
-                    </div>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
-                        <span class="text-gray-500">Trending</span>
-                    </div>
-                </li>
-            </ol>
-        </nav>
-    </div>
+    <x-breadcrumb :items="[
+        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
+        ['label' => 'TV Shows', 'url' => route('series')],
+        ['label' => 'Trending'],
+    ]" />
 
     <!-- Header -->
     <div class="px-6 py-6 bg-primary-600 text-white">
@@ -157,11 +138,14 @@
             </div>
         </div>
     @else
-        <div class="px-6 py-12 text-center">
-            <i class="fas fa-chart-line text-gray-400 text-5xl mb-4"></i>
-            <p class="text-gray-600 dark:text-gray-400 text-lg mb-2">No trending TV shows found.</p>
-            <p class="text-gray-500 dark:text-gray-500 text-sm">Check back soon for the most popular downloads!</p>
-        </div>
+        <x-empty-state
+            icon="fas fa-chart-line"
+            title="No trending TV shows found"
+            message="Check back soon for the most popular downloads!"
+            action-url="{{ route('series') }}"
+            action-label="Browse All TV Shows"
+            action-icon="fas fa-tv"
+        />
     @endif
 
     <!-- Info Box -->
diff --git a/resources/views/xxx/index.blade.php b/resources/views/xxx/index.blade.php
index 65153e821..d3c67695d 100644
--- a/resources/views/xxx/index.blade.php
+++ b/resources/views/xxx/index.blade.php
@@ -6,20 +6,13 @@
 
 @section('content')
 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav aria-label="breadcrumb">
-            <ol class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
-                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600 dark:hover:text-blue-400">Home</a></li>
-                <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                <li><a href="{{ url('/XXX') }}" class="hover:text-blue-600 dark:hover:text-blue-400">XXX</a></li>
-                @if(!empty($categorytitle) && $categorytitle !== 'All')
-                    <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                    <li class="text-gray-500 dark:text-gray-400">{{ $categorytitle }}</li>
-                @endif
-            </ol>
-        </nav>
-    </div>
+    @php
+        $crumbs = [['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'], ['label' => 'XXX', 'url' => url('/XXX')]];
+        if (!empty($categorytitle) && $categorytitle !== 'All') {
+            $crumbs[] = ['label' => $categorytitle];
+        }
+    @endphp
+    <x-breadcrumb :items="$crumbs" />
 
     <div class="px-6 py-4">
         <!-- Category and order -->
@@ -28,12 +21,13 @@
                 <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Category:</span>
                 @foreach($catlist ?? [] as $c)
                     <a href="{{ url('/XXX/' . $c['title']) }}?t={{ $c['id'] }}"
-                       class="px-3 py-1 rounded-lg text-sm {{ (string)($category ?? '') === (string)$c['id'] ? 'bg-blue-600 dark:bg-blue-700 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600' }}">
+                       class="px-3 py-1 rounded-lg text-sm {{ (string)($category ?? '') === (string)$c['id'] ? 'bg-primary-600 dark:bg-primary-700 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600' }}">
                         {{ $c['title'] }}
                     </a>
                 @endforeach
             </div>
             <div class="flex items-center gap-2 flex-wrap ml-auto">
+                <x-inline-search placeholder="Search in XXX{{ !empty($categorytitle) && $categorytitle !== 'All' ? ' ' . $categorytitle : '' }}..." :category="$category ?? null" />
                 <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Order by:</span>
                 @foreach($ordering ?? [] as $ob)
                     <a href="{{ $orderByUrls['orderby'.$ob] ?? url('/XXX/' . ($categorytitle ?: 'All') . '?ob=' . $ob) }}"
@@ -69,7 +63,7 @@
                                             <i class="fas fa-film text-gray-400 text-lg"></i>
                                         </div>
                                         <div class="flex-1 min-w-0">
-                                            <a href="{{ url('/details/' . $result->guid) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium break-all block">
+                                            <a href="{{ url('/details/' . $result->guid) }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-medium break-all block">
                                                 {{ $result->searchname }}
                                             </a>
                                             @if(!empty($result->failed_count) && $result->failed_count > 0)
@@ -84,7 +78,7 @@
                                     </div>
                                 </td>
                                 <td class="px-3 py-4 whitespace-nowrap">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200">
                                         {{ $result->category_name ?? 'Other' }}
                                     </span>
                                 </td>
@@ -99,7 +93,7 @@
                                         <a href="{{ url('/getnzb/' . $result->guid) }}" class="px-2 py-1 bg-green-600 dark:bg-green-700 text-white rounded text-sm hover:bg-green-700 dark:hover:bg-green-800" title="Download NZB">
                                             <i class="fa fa-download"></i>
                                         </a>
-                                        <a href="{{ url('/details/' . $result->guid) }}" class="px-2 py-1 bg-blue-600 dark:bg-blue-700 text-white rounded text-sm hover:bg-blue-700 dark:hover:bg-blue-800" title="Details">
+                                        <a href="{{ url('/details/' . $result->guid) }}" class="px-2 py-1 bg-primary-600 dark:bg-primary-700 text-white rounded text-sm hover:bg-primary-700 dark:hover:bg-primary-800" title="Details">
                                             <i class="fa fa-info"></i>
                                         </a>
                                         <a href="#" class="add-to-cart px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600" data-guid="{{ $result->guid }}" title="Add to Cart">
@@ -117,14 +111,14 @@
                 {{ $results->links() }}
             </div>
         @else
-            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8 text-center">
-                <i class="fa fa-film text-yellow-600 dark:text-yellow-500 text-5xl mb-4"></i>
-                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">No content found</h3>
-                <p class="text-gray-600 dark:text-gray-400 mb-4">Try a different category or browse all XXX.</p>
-                <a href="{{ url('/XXX/All') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800">
-                    <i class="fa fa-film mr-2"></i> Browse All XXX
-                </a>
-            </div>
+            <x-empty-state
+                icon="fas fa-film"
+                title="No content found"
+                message="Try a different category or browse all XXX."
+                action-url="{{ url('/XXX/All') }}"
+                action-label="Browse All XXX"
+                action-icon="fas fa-film"
+            />
         @endif
     </div>
 </div>