diff --git a/resources/views/components/tools/toolbar.blade.php b/resources/views/components/tools/toolbar.blade.php
index 65e8c086b..a9ae046de 100644
--- a/resources/views/components/tools/toolbar.blade.php
+++ b/resources/views/components/tools/toolbar.blade.php
@@ -28,7 +28,7 @@
             <x-livewire-tables::tools.toolbar.items.reorder-buttons />
         @endif
 
-        @if ($this->searchIsEnabled() && $this->searchVisibilityIsEnabled())
+        @if ($this->searchIsEnabled && $this->searchVisibilityIsEnabled)
             <x-livewire-tables::tools.toolbar.items.search-field />
         @endif
 
diff --git a/resources/views/components/tools/toolbar/items/search-field.blade.php b/resources/views/components/tools/toolbar/items/search-field.blade.php
index a52f06427..406b8e9ce 100644
--- a/resources/views/components/tools/toolbar/items/search-field.blade.php
+++ b/resources/views/components/tools/toolbar/items/search-field.blade.php
@@ -1,63 +1,20 @@
-@aware(['component', 'tableName','isTailwind', 'isBootstrap'])
+@aware(['isTailwind', 'isBootstrap'])
 
 <div 
     @class([
-        'mb-3 mb-md-0 input-group' => $this->isBootstrap,
-        'rounded-md shadow-sm' => $this->isTailwind,
+        'mb-3 mb-md-0 input-group' => $isBootstrap,
+        'rounded-md shadow-sm' => $isTailwind,
         'flex' => !$this->hasSearchIcon,
         'relative inline-flex flex-row' => $this->hasSearchIcon,
     ])>
 
         @if($this->hasSearchIcon)
-            <div class="relative inset-y-0 left-6
-                        inline-flex items-center 
-                        pointer-events-none">
-
-                    @svg($this->getSearchIcon, $this->getSearchIconClasses, $this->getSearchIconOtherAttributes())
-
-            </div>
+            <x-livewire-tables::tools.toolbar.items.search.icon :searchIcon="$this->getSearchIcon" :searchIconClasses="$this->getSearchIconClasses" :searchIconOtherAttributes="$this->getSearchIconOtherAttributes"  />
         @endif
 
-        <input
-            wire:model{{ $this->getSearchOptions() }}="search"
-            placeholder="{{ $this->getSearchPlaceholder() }}"
-            type="text"
-            {{ 
-                $attributes->merge($this->getSearchFieldAttributes())
-                ->class([
-                    'rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-none rounded-l-md focus:ring-0 focus:border-gray-300' => $this->isTailwind && $this->hasSearch() && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
-                    'rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-md focus:ring focus:ring-opacity-50' => $this->isTailwind && !$this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
-                    'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-gray-300' => $this->isTailwind && $this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
-                    'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-indigo-300 focus:ring-indigo-200' => $this->isTailwind && !$this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
-                    'block w-full' => !$this->hasSearchIcon,
-                    'pl-8 pr-4' => $this->hasSearchIcon,
-                    'form-control' => $this->isBootstrap && $this->getSearchFieldAttributes()['default'] ?? true,
-                ])
-                ->except(['default','default-styling','default-colors']) 
-            }}
-
-        />
+        <x-livewire-tables::tools.toolbar.items.search.input />
 
-        @if ($this->hasSearch())
-        <div @class([
-                    'd-inline-flex h-100 align-items-center ' => $this->isBootstrap,
-                ])>
-                <div
-                    wire:click="clearSearch"
-
-                    @class([
-                            'btn btn-outline-secondary d-inline-flex h-100 align-items-center' => $this->isBootstrap,
-                            'inline-flex h-full items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $this->isTailwind,
-                        ])
-                >
-                @if($this->isTailwind)
-                <x-heroicon-m-x-mark class='w-4 h-4' />
-                @else
-                <x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
-                @endif
-                    </div>
-            </div>
+        @if ($this->hasSearch)
+            <x-livewire-tables::tools.toolbar.items.search.remove />
         @endif
-
-
 </div>
diff --git a/resources/views/components/tools/toolbar/items/search/icon.blade.php b/resources/views/components/tools/toolbar/items/search/icon.blade.php
new file mode 100644
index 000000000..f90022b50
--- /dev/null
+++ b/resources/views/components/tools/toolbar/items/search/icon.blade.php
@@ -0,0 +1,8 @@
+@props(['searchIcon','searchIconClasses','searchIconOtherAttributes'])
+<div class="relative inset-y-0 left-6
+            inline-flex items-center 
+            pointer-events-none">
+
+        @svg($searchIcon, $searchIconClasses, $searchIconOtherAttributes)
+
+</div>
diff --git a/resources/views/components/tools/toolbar/items/search/input.blade.php b/resources/views/components/tools/toolbar/items/search/input.blade.php
new file mode 100644
index 000000000..d3331cd14
--- /dev/null
+++ b/resources/views/components/tools/toolbar/items/search/input.blade.php
@@ -0,0 +1,20 @@
+@aware(['isTailwind', 'isBootstrap'])
+<input
+    wire:model{{ $this->getSearchOptions() }}="search"
+    placeholder="{{ $this->getSearchPlaceholder() }}"
+    type="text"
+    {{ 
+        $attributes->merge($this->getSearchFieldAttributes())
+        ->class([
+            'rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-none rounded-l-md focus:ring-0 focus:border-gray-300' => $isTailwind && $this->hasSearch() && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
+            'rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-md focus:ring focus:ring-opacity-50' => $isTailwind && !$this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
+            'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-gray-300' => $isTailwind && $this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
+            'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-indigo-300 focus:ring-indigo-200' => $isTailwind && !$this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
+            'block w-full' => !$this->hasSearchIcon,
+            'pl-8 pr-4' => $this->hasSearchIcon,
+            'form-control' => $isBootstrap && $this->getSearchFieldAttributes()['default'] ?? true,
+        ])
+        ->except(['default','default-styling','default-colors']) 
+    }}
+
+/>
\ No newline at end of file
diff --git a/resources/views/components/tools/toolbar/items/search/remove.blade.php b/resources/views/components/tools/toolbar/items/search/remove.blade.php
new file mode 100644
index 000000000..40ef7d8fe
--- /dev/null
+++ b/resources/views/components/tools/toolbar/items/search/remove.blade.php
@@ -0,0 +1,21 @@
+
+@aware(['isTailwind', 'isBootstrap'])
+
+<div @class([
+            'd-inline-flex h-100 align-items-center ' => $isBootstrap,
+        ])>
+    <div
+        wire:click="clearSearch"
+
+        @class([
+                'btn btn-outline-secondary d-inline-flex h-100 align-items-center' => $isBootstrap,
+                'inline-flex h-full items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind,
+            ])
+    >
+        @if($isTailwind)
+        <x-heroicon-m-x-mark class='w-4 h-4' />
+        @else
+        <x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
+        @endif
+    </div>
+</div>
diff --git a/src/Traits/Helpers/SearchHelpers.php b/src/Traits/Helpers/SearchHelpers.php
index 387155271..9b96ec8dc 100644
--- a/src/Traits/Helpers/SearchHelpers.php
+++ b/src/Traits/Helpers/SearchHelpers.php
@@ -2,13 +2,17 @@
 
 namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
 
+use Livewire\Attributes\Computed;
+
 trait SearchHelpers
 {
+    #[Computed]
     public function hasSearch(): bool
     {
         return $this->search != '';
     }
 
+    #[Computed]
     public function getSearch(): string
     {
         return $this->search ?? '';
@@ -27,6 +31,7 @@ public function getSearchStatus(): bool
         return $this->searchStatus;
     }
 
+    #[Computed]
     public function searchIsEnabled(): bool
     {
         return $this->getSearchStatus() === true;
@@ -42,6 +47,7 @@ public function getSearchVisibilityStatus(): bool
         return $this->searchVisibilityStatus;
     }
 
+    #[Computed]
     public function searchVisibilityIsEnabled(): bool
     {
         return $this->getSearchVisibilityStatus() === true;