diff --git a/.gitignore b/.gitignore
index 54fb416b..778248bd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,7 +23,6 @@ yarn-error.log
 composer.lock
 package-lock.json
 yarn.lock
-config/lunar
 public/build
 meilisearch/
 .phpunit.cache/test-results
diff --git a/README.md b/README.md
index aa2d1c2b..ee406088 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,15 @@ docker-compose up
 
 The demo store will be available to `http://localhost` in your browser.
 
+### Searching
+
+Out the box, the starter kit is configured to use Meilisearch. You will need to ensure you have this set up, you should also check the following config files to familiarise yourself how search is configured to work.
+
+- `config/lunar/search.php`
+- `config/scout.php`
+
+To customise what is indexed, you should look at the `Search/ProductIndexer` class.
+
 ####  Log into Lunar panel
 
 Once the project is prepared, the Lunar panel will start and available to `http://localhost/lunar`. 
diff --git a/app/Livewire/CollectionPage.php b/app/Livewire/CollectionPage.php
index 92111777..b1faf594 100644
--- a/app/Livewire/CollectionPage.php
+++ b/app/Livewire/CollectionPage.php
@@ -2,15 +2,20 @@
 
 namespace App\Livewire;
 
+use App\Livewire\Traits\WithSearch;
 use App\Traits\FetchesUrls;
 use Illuminate\Support\Collection;
-use Illuminate\View\View;
+use Livewire\Attributes\Computed;
 use Livewire\Component;
+use Livewire\WithPagination;
 use Lunar\Models\Collection as CollectionModel;
+use Lunar\Search\Contracts\SearchManagerContract;
 
 class CollectionPage extends Component
 {
     use FetchesUrls;
+    use WithPagination;
+    use WithSearch;
 
     public function mount(string $slug): void
     {
@@ -24,21 +29,27 @@ public function mount(string $slug): void
             ]
         );
 
+
+
         if (! $this->url) {
             abort(404);
         }
+
+        $this->filters = [
+            'collection_ids' => [$this->collection->id]
+        ];
     }
 
-    /**
-     * Computed property to return the collection.
-     */
-    public function getCollectionProperty(): mixed
+    #[Computed]
+    public function collection(): mixed
     {
         return $this->url->element;
     }
 
-    public function render(): View
+    public function render(): \Illuminate\Contracts\View\View
     {
-        return view('livewire.collection-page');
+        return view('livewire.search-page', [
+            'isCollection' => true,
+        ]);
     }
 }
diff --git a/app/Livewire/SearchPage.php b/app/Livewire/SearchPage.php
index 4ffc903d..c06daa34 100644
--- a/app/Livewire/SearchPage.php
+++ b/app/Livewire/SearchPage.php
@@ -2,34 +2,30 @@
 
 namespace App\Livewire;
 
+use App\Livewire\Traits\SearchesProducts;
+use App\Livewire\Traits\WithSearch;
+use Illuminate\Http\Request;
 use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Collection;
 use Illuminate\View\View;
+use Livewire\Attributes\Computed;
+use Livewire\Attributes\Modelable;
+use Livewire\Attributes\Url;
 use Livewire\Component;
 use Livewire\WithPagination;
 use Lunar\Models\Product;
+use Lunar\Search\Contracts\SearchManagerContract;
+use Lunar\Search\Data\SearchResults;
+use Lunar\Search\Facades\Search;
 
 class SearchPage extends Component
 {
     use WithPagination;
+    use WithSearch;
 
-    /**
-     * {@inheritDoc}
-     */
-    protected $queryString = [
-        'term',
-    ];
-
-    /**
-     * The search term.
-     */
-    public ?string $term = null;
-
-    /**
-     * Return the search results.
-     */
-    public function getResultsProperty(): LengthAwarePaginator
+    public function mount(Request $request)
     {
-        return Product::search($this->term)->paginate(50);
+        $this->query = (string) $request->get('query', '');
     }
 
     public function render(): View
diff --git a/app/Livewire/Traits/WithSearch.php b/app/Livewire/Traits/WithSearch.php
new file mode 100644
index 00000000..0fb5c731
--- /dev/null
+++ b/app/Livewire/Traits/WithSearch.php
@@ -0,0 +1,113 @@
+<?php
+
+namespace App\Livewire\Traits;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Collection;
+use Livewire\Attributes\Computed;
+use Livewire\Attributes\Modelable;
+use Livewire\Attributes\Url;
+use Lunar\Search\Contracts\SearchManagerContract;
+use Lunar\Search\Data\SearchResults;
+use Lunar\Search\Facades\Search;
+
+trait WithSearch
+{
+    #[Modelable]
+    #[Url]
+    public ?array $facets = [];
+
+    public array $filters = [];
+
+    #[Modelable]
+    #[Url]
+    public int $perPage = 50;
+
+    #[Modelable]
+    #[Url]
+    public string $sort = '';
+
+    #[Modelable]
+    #[Url]
+    public string $query = '';
+
+    public function mountWithSearch(Request $request): void
+    {
+        $this->sort = (string) $request->get('sort', '');
+    }
+
+    #[Computed]
+    public function searchInstance(): SearchManagerContract
+    {
+        $search = Search::model(\Lunar\Models\Product::class);
+
+        if ($this->facets && count($this->facets)) {
+            $facets = [];
+
+            foreach ($this->facets as $facet) {
+                [$field, $facetValue] = explode(':', urldecode($facet));
+
+                if (empty($facets[$field])) {
+                    $facets[$field] = [];
+                }
+
+                $facets[$field][] = $facetValue;
+            }
+
+            $search->setFacets($facets);
+        }
+
+        $search->filter($this->filters);
+
+        return $search;
+    }
+
+
+
+    #[Computed]
+    public function results(): SearchResults
+    {
+
+        $sorting = $this->sort ?: '';
+
+        return $this->searchInstance->perPage($this->perPage)->sort($sorting)->query($this->query)->get();
+    }
+
+    #[Computed]
+    public function displayFacets(): Collection
+    {
+        return collect($this->results->facets)->reject(
+            fn ($facet) => !count($facet->values)
+        )->values();
+    }
+
+    public function clearFacets(): void
+    {
+        $this->facets = [];
+    }
+
+    public function updatedQuery(): void
+    {
+        $this->resetPage();
+    }
+
+    public function updatedFacets(): void
+    {
+        $this->resetPage();
+    }
+
+    public function updatedPerPage(): void
+    {
+        $this->resetPage();
+        $this->instance->perPage($this->perPage);
+    }
+
+    public function removeFacet(string $facet): void
+    {
+        $facets = $this->facets;
+        unset($facets[
+            array_search($facet, $facets)
+            ]);
+        $this->facets = collect($facets)->values()->toArray();
+    }
+}
diff --git a/app/Search/ProductIndexer.php b/app/Search/ProductIndexer.php
new file mode 100644
index 00000000..6ca64fd3
--- /dev/null
+++ b/app/Search/ProductIndexer.php
@@ -0,0 +1,121 @@
+<?php
+
+namespace App\Search;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\DB;
+
+class ProductIndexer extends \Lunar\Search\ProductIndexer
+{
+    public function makeAllSearchableUsing(Builder $query): Builder
+    {
+        return $query->with([
+            'thumbnail',
+            'variants',
+            'productType',
+            'brand',
+            'prices',
+        ]);
+    }
+
+    public function toSearchableArray(Model $model): array
+    {
+        $priceModels = $model->prices;
+
+        $basePrice = $priceModels->first(function ($price) {
+            return $price->min_quantity == 1;
+        });
+
+        $minPrice = $priceModels->sortBy('price')->first();
+
+        $options = $model->productOptions()->with([
+            'values' => function ($query) use ($model) {
+                $query->whereHas('variants', function ($relation) use ($model) {
+                    $relation->where('product_id', $model->id);
+                });
+            },
+        ])->get()->mapWithKeys(function ($option) {
+            return [
+                $option->handle => $option->values->map(function ($value) {
+                    return $value->translate('name');
+                })
+            ];
+        })->toArray();
+
+        return [
+            'id' => (string) $model->id,
+            'name' => $model->attr('name'),
+            'description' => $model->attr('description'),
+            'brand' => $model->brand?->name,
+            'thumbnail' => $model->thumbnail?->getUrl('small'),
+            'slug' => $model->defaultUrl?->slug,
+            'price' => [
+                'inc_tax' => [
+                    'value' => (int) $basePrice->priceIncTax()->value,
+                    'formatted' => $basePrice->priceIncTax()->formatted,
+                ],
+                'ex_tax' => [
+                    'value' => (int) $basePrice->priceExTax()->value,
+                    'formatted' => $basePrice->priceExTax()->formatted,
+                ],
+            ],
+            'min_price' => $minPrice?->priceIncTax()?->value ?: 0,
+            ...$options,
+            ...$this->getCollections($model)
+        ];
+    }
+
+    private function getCollections(Model $product): array
+    {
+        $trail = [];
+
+        $categories = [];
+        $categoryIds = [];
+
+        foreach ($product->collections as $i => $collection) {
+            $levels = [$collection->translateAttribute('name')];
+            $levelIds = [$collection->id];
+            $node = $collection;
+
+            while ($node->parent) {
+                array_unshift($levels, $node->parent->translateAttribute('name'));
+                array_unshift($levelIds, $node->parent->id);
+                $node = $node->parent;
+            }
+
+            foreach ($levels as $level => $name) {
+                if (! isset($trail['lvl'.$level])) {
+                    $trail['lvl'.$level] = [];
+                }
+
+                $key = $level - 1;
+
+                $breadcrumb = [$name];
+
+                while (isset($levels[$key])) {
+                    array_unshift($breadcrumb, $levels[$key]);
+                    $key--;
+                }
+
+                $trail['lvl'.$level][] = implode(' > ', $breadcrumb);
+            }
+
+            $categories = array_merge($levels, $categories);
+            $categoryIds = array_merge($levelIds, $categoryIds);
+        }
+
+        foreach ($trail as $key => $values) {
+            $trail[$key] = collect($values)
+                ->unique()
+                ->values()
+                ->toArray();
+        }
+
+        return [
+            'hierarchical_collections' => $trail,
+            'collection_ids' => collect($categoryIds)->unique()->values()->toArray(),
+            'collections' => collect($categories)->unique()->values()->toArray(),
+        ];
+    }
+}
diff --git a/composer.json b/composer.json
index 37aac3ad..6cd78c63 100644
--- a/composer.json
+++ b/composer.json
@@ -20,6 +20,7 @@
         "league/flysystem-aws-s3-v3": "^3.0",
         "lunarphp/lunar": "^1.0@beta",
         "lunarphp/stripe": "^1.0@beta",
+        "lunarphp/search": "^0.1@alpha",
         "lunarphp/table-rate-shipping": "^1.0@beta",
         "meilisearch/meilisearch-php": "^1.6",
         "predis/predis": "^2.2"
diff --git a/config/lunar/search.php b/config/lunar/search.php
new file mode 100644
index 00000000..fa5ccf03
--- /dev/null
+++ b/config/lunar/search.php
@@ -0,0 +1,73 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Models for indexing
+    |--------------------------------------------------------------------------
+    |
+    | The model listed here will be used to create/populate the indexes.
+    | You can provide your own model here to run them all on the same
+    | search engine.
+    |
+    */
+    'models' => [
+        /*
+         * These models are required by the system, do not change them.
+         */
+        Lunar\Models\Brand::class,
+        Lunar\Models\Collection::class,
+        Lunar\Models\Customer::class,
+        Lunar\Models\Order::class,
+        Lunar\Models\Product::class,
+        Lunar\Models\ProductOption::class,
+
+        /*
+         * Below you can add your own models for indexing...
+         */
+        // App\Models\Example::class,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Search engine mapping
+    |--------------------------------------------------------------------------
+    |
+    | You can define what search driver each searchable model should use.
+    | If the model isn't defined here, it will use the SCOUT_DRIVER env variable.
+    |
+    */
+    'engine_map' => [
+        // Lunar\Models\Product::class => 'algolia',
+        // Lunar\Models\Order::class => 'meilisearch',
+        // Lunar\Models\Collection::class => 'meilisearch',
+    ],
+
+    'indexers' => [
+        Lunar\Models\Brand::class => Lunar\Search\BrandIndexer::class,
+        Lunar\Models\Collection::class => Lunar\Search\CollectionIndexer::class,
+        Lunar\Models\Customer::class => Lunar\Search\CustomerIndexer::class,
+        Lunar\Models\Order::class => Lunar\Search\OrderIndexer::class,
+        Lunar\Models\Product::class => \App\Search\ProductIndexer::class,
+        Lunar\Models\ProductOption::class => Lunar\Search\ProductOptionIndexer::class,
+    ],
+
+    'facets' => [
+        \Lunar\Models\Product::class => [
+            'brand' => [
+                'label' => 'Brand',
+            ],
+            'colour' => [
+                'label' => 'Colour',
+            ],
+            'size' => [
+                'label' => 'Size',
+            ],
+            'shoe-size' => [
+                'label' => 'Shoe Size',
+            ]
+        ]
+    ],
+
+];
diff --git a/config/scout.php b/config/scout.php
index 955f878d..2fa2f0e6 100644
--- a/config/scout.php
+++ b/config/scout.php
@@ -116,4 +116,15 @@
         'secret' => env('ALGOLIA_SECRET', ''),
     ],
 
+    'meilisearch' => [
+        'host' => env('MEILISEARCH_HOST', 'http://127.0.0.1:7700'),
+        'key' => env('MEILISEARCH_KEY'),
+        'index-settings' => [
+            \App\Models\Product::class => [
+                'filterableAttributes' => ['brand', 'size', 'shoe-size', 'colour', 'collection_ids'],
+                'sortableAttributes' => ['name', 'sku', 'min_price']
+            ],
+        ],
+    ],
+
 ];
diff --git a/package.json b/package.json
index d6bc2c46..e5bee683 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,11 @@
     "devDependencies": {
         "@ryangjchandler/alpine-clipboard": "^2.3.0",
         "@tailwindcss/forms": "^0.5.7",
-        "autoprefixer": "^10.4.17",
+        "autoprefixer": "^10.4.20",
         "axios": "^1.6.1",
         "laravel-vite-plugin": "^0.8.0",
-        "postcss": "^8.4.35",
-        "tailwindcss": "^3.4.1",
+        "postcss": "^8.5.1",
+        "tailwindcss": "^3.4.17",
         "vite": "^4.0.0"
     }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..49c0612d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/resources/views/components/header/search.blade.php b/resources/views/components/header/search.blade.php
index eeb8479a..893753ae 100644
--- a/resources/views/components/header/search.blade.php
+++ b/resources/views/components/header/search.blade.php
@@ -1,6 +1,6 @@
 <form {{ $attributes->merge(['class' => 'w-full relative']) }}
       action="{{ route('search.view') }}">
-    <input name="term"
+    <input name="query"
            type="search"
            placeholder="Search for products"
            class="w-full pl-10 text-sm border-2 border-gray-100 rounded-lg"
diff --git a/resources/views/components/input/select.blade.php b/resources/views/components/input/select.blade.php
new file mode 100644
index 00000000..a04b344f
--- /dev/null
+++ b/resources/views/components/input/select.blade.php
@@ -0,0 +1,10 @@
+<div>
+    <label for="sorting" class="sr-only">Sort</label>
+    <div class="grid grid-cols-1">
+        <select id="sorting" name="sorting" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+            <option>United States</option>
+            <option selected>Canada</option>
+            <option>Mexico</option>
+        </select>
+    </div>
+</div>
diff --git a/resources/views/components/product-card.blade.php b/resources/views/components/product-card.blade.php
index 7afe73cb..8514e9a6 100644
--- a/resources/views/components/product-card.blade.php
+++ b/resources/views/components/product-card.blade.php
@@ -1,26 +1,42 @@
-@props(['product'])
+@props([
+    'name',
+    'slug' => null,
+    'thumbnail' => null,
+    'price'
+])
 
-<a class="block group"
-   href="{{ route('product.view', $product->defaultUrl->slug) }}"
-   wire:navigate
->
-    <div class="overflow-hidden rounded-lg aspect-w-1 aspect-h-1">
-        @if ($product->thumbnail)
-            <img class="object-cover transition-transform duration-300 group-hover:scale-105"
-                 src="{{ $product->thumbnail->getUrl('medium') }}"
-                 alt="{{ $product->translateAttribute('name') }}" />
-        @endif
+<div class="space-y-2">
+    <div class="overflow-hidden rounded-lg">
+        @if($slug)<a href="{{ route('product.view', $slug) }}">@endif
+            @if ($thumbnail)
+                    <img class="object-cover transition-transform duration-300 group-hover:scale-105 w-full"
+                         src="{{ $thumbnail }}"
+                         alt="{{ $name }}" />
+
+            @else
+                <figure class="h-64 w-full bg-gray-100 flex items-center object-cover transition-transform duration-300 group-hover:scale-105">
+                    <div class="mx-auto text-gray-300">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-images"><path d="M18 22H4a2 2 0 0 1-2-2V6"/><path d="m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18"/><circle cx="12" cy="8" r="2"/><rect width="16" height="16" x="6" y="2" rx="2"/></svg>
+                    </div>
+                </figure>
+            @endif
+        @if($slug)</a>@endif
     </div>
 
-    <strong class="mt-2 text-sm font-medium">
-        {{ $product->translateAttribute('name') }}
-    </strong>
+    @if($slug)
+    <a href="{{ route('product.view', $slug) }}" class="text-sm font-medium hover:underline block">
+        {{ $name }}
+    </a>
+    @else
+        {{ $name }}
+    @endif
 
     <p class="mt-1 text-sm text-gray-600">
         <span class="sr-only">
             Price
         </span>
-
-        <x-product-price :product="$product" />
     </p>
-</a>
+    <div>
+        {{ $price }}
+    </div>
+</div>
diff --git a/resources/views/layouts/storefront.blade.php b/resources/views/layouts/storefront.blade.php
index ad81472f..3e6d4c9a 100644
--- a/resources/views/layouts/storefront.blade.php
+++ b/resources/views/layouts/storefront.blade.php
@@ -12,10 +12,7 @@
         name="description"
         content="Example of an ecommerce storefront built with Lunar."
     >
-    <link
-        href="{{ asset('css/app.css') }}"
-        rel="stylesheet"
-    >
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
 
     <link
         rel="icon"
diff --git a/resources/views/livewire/collection-page.blade.php b/resources/views/livewire/collection-page.blade.php
deleted file mode 100644
index a2d67b35..00000000
--- a/resources/views/livewire/collection-page.blade.php
+++ /dev/null
@@ -1,14 +0,0 @@
-<section>
-    <div class="max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:px-8">
-        <h1 class="text-3xl font-bold">
-            {{ $this->collection->translateAttribute('name') }}
-        </h1>
-
-        <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3">
-            @forelse($this->collection->products as $product)
-                <x-product-card :product="$product" />
-            @empty
-            @endforelse
-        </div>
-    </div>
-</section>
diff --git a/resources/views/livewire/home.blade.php b/resources/views/livewire/home.blade.php
index c99b2a77..30e13d73 100644
--- a/resources/views/livewire/home.blade.php
+++ b/resources/views/livewire/home.blade.php
@@ -14,7 +14,12 @@
 
                 <div class="grid grid-cols-2 mt-8 lg:grid-cols-4 gap-x-4 gap-y-8">
                     @foreach ($this->randomCollection->products as $product)
-                        <x-product-card :product="$product" />
+                        <x-product-card
+                            :name="$product->attr('name')"
+                            :slug="$product->defaultUrl->slug"
+                            :thumbnail="$product->thumbnail?->getUrl('small')"
+                            :price="\Lunar\Facades\Pricing::for($product->variants->first())->get()->matched->price->formatted"
+                        />
                     @endforeach
                 </div>
             </section>
diff --git a/resources/views/livewire/search-page.blade.php b/resources/views/livewire/search-page.blade.php
index f8e7c233..b10e57c4 100644
--- a/resources/views/livewire/search-page.blade.php
+++ b/resources/views/livewire/search-page.blade.php
@@ -1,16 +1,69 @@
 <section>
-    <div class="max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:px-8">
-        <h1 class="text-3xl font-bold">
-            Search Results
-            @if (isset($term))
-                for <u>{{ $term }}</u>
-            @endif
-        </h1>
+    <div class="max-w-screen-2xl px-4 py-12 mx-auto sm:px-6 lg:px-8 space-y-6">
+        <header>
+            <h1 class="text-3xl font-bold">
+                @if(!empty($isCollection))
+                    {{ $this->collection->attr('name') }}
+                @elseif($this->query)
+                    Search Results for "{{ $this->query }}"
+                @else
+                    All Products
+                @endif
+            </h1>
+        </header>
 
-        <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-4">
-            @foreach ($this->results as $result)
-                <x-product-card :product="$result" />
-            @endforeach
+        @if(!$this->results->count)
+            <div>
+                Sorry, looks like we don't have any products available.
+            </div>
+        @endif
+        <div
+            class="grid grid-cols-1 md:grid-cols-12 gap-12"
+            x-data="{
+               showFilters: false
+            }"
+        >
+            <div
+                class="md:col-span-3 space-y-2 fixed md:static md:overflow-y-auto bg-white w-full z-50 left-0 p-4 md:p-0 overflow-y-scroll h-full top-0"
+                :class="{
+                    'hidden md:block': !showFilters
+                }"
+            >
+                <header class="flex items-center justify-between md:hidden">
+                    Search Filters
+                    <button type="button" @click="showFilters = false" class="border px-2 py-1 rounded text-xs font-medium shadow-sm">Close</button>
+                </header>
+                @include('partials.search.search-filters')
+            </div>
+            <div class="md:col-span-9 space-y-4">
+                @if($this->results->count)
+                <div class="md:flex md:space-x-2 space-y-2 md:space-y-0 justify-between">
+                    <div class="w-2/5">
+                        {{ $this->results->links }}
+                    </div>
+                    <div class="flex-shrink-0 flex md:flex-none items-center justify-between">
+                        <div class="md:hidden">
+                            <button @click="showFilters = true" class="border px-4 py-1 rounded" type="button">Filters</button>
+                        </div>
+                        <div>
+                            @include('partials.search.sorting')
+                        </div>
+                    </div>
+                </div>
+                @endif
+                <div class="grid grid-cols-2 gap-4 md:gap-8 lg:grid-cols-3">
+                        @foreach ($this->results->hits as $result)
+                            <div>
+                                <x-product-card
+                                    :thumbnail="$result->document['thumbnail']"
+                                    :name="$result->document['name']"
+                                    :slug="$result->document['slug']"
+                                    :price="$result->document['price']['ex_tax']['formatted']"
+                                ></x-product-card>
+                            </div>
+                        @endforeach
+                </div>
+            </div>
         </div>
     </div>
 </section>
diff --git a/resources/views/partials/search/search-filters.blade.php b/resources/views/partials/search/search-filters.blade.php
new file mode 100644
index 00000000..f96b697a
--- /dev/null
+++ b/resources/views/partials/search/search-filters.blade.php
@@ -0,0 +1,50 @@
+<div class="space-y-2 divide-y">
+    @foreach($this->displayFacets as $displayFacet)
+        <div class="space-y-2 py-2" wire:key="facet_{{ $displayFacet->field }}">
+            <p  class="font-medium text-sm leading-120 text-black">
+                {{ $displayFacet->label }}
+            </p>
+            <div class="space-y-1">
+                @foreach($displayFacet->values as $facetValue)
+                    <div
+                        class="flex gap-2 items-center max-lg:mt-5 cursor-pointer"
+                        wire:key="facet_{{ $displayFacet->field }}_value_{{ $facetValue->value }}"
+                    >
+                        <div>
+                            <span
+                                @class([
+                                   'flex items-center w-4 h-4 rounded-full',
+                                   'bg-gray-100 text-white' => !$facetValue->active,
+                                   'bg-blue-500 text-white' => $facetValue->active,
+                                ])
+                            >
+                                @if($facetValue->active)
+                                        <svg xmlns="http://www.w3.org/2000/svg"  width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
+                                    @endif
+                            </span>
+                            <input
+                                type="checkbox"
+                                name="facets"
+                                value="{{ $displayFacet->field }}:{{ $facetValue->value }}"
+                                id="{{ $displayFacet->field }}:{{ $facetValue->value }}"
+                                wire:model.live="facets"
+                                class="hidden"
+                            />
+                        </div>
+                        <label
+                            for="{{ $displayFacet->field }}:{{ $facetValue->value }}"
+                            @class([
+                                'hover:cursor-pointer font-medium grow text-sm leading-120 text-slate-grey grid grid-cols-6  ',
+                                'text-gray-500 hover:text-gray-800' => !$facetValue->active,
+                                'text-blue-500' => $facetValue->active,
+                            ])
+                        >
+                            <span class="truncate col-span-5" title="{!! $facetValue->label !!}">{!! $facetValue->label !!}</span>
+                            <span class="text-right text-xs text-gray-500">({{ $facetValue->count }})</span>
+                        </label>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    @endforeach
+</div>
diff --git a/resources/views/partials/search/sorting.blade.php b/resources/views/partials/search/sorting.blade.php
new file mode 100644
index 00000000..fbe28df7
--- /dev/null
+++ b/resources/views/partials/search/sorting.blade.php
@@ -0,0 +1,13 @@
+<div>
+    <div class="flex items-center space-x-2">
+        <label for="sort" class="uppercase text-xs text-gray-500">Sort</label>
+        <div class="grid grid-cols-1">
+            <select wire:model.live="sort" id="sort" name="sort" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+                <option value>Relevancy</option>
+                <option value="min_price:asc">Price Asc</option>
+                <option value="min_price:desc">Price Desc</option>
+            </select>
+        </div>
+    </div>
+
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 06dfc796..45f36f86 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,11 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+
+export default {
     content: [
-        './resources/**/*.blade.php',
-        './resources/**/*.js',
-        './vendor/lunarphp/stripe-payments/resources/views/**/*.blade.php',
+        "./resources/**/*.blade.php",
+        "./resources/**/*.js",
+        "./resources/**/*.vue",
+        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/**/*.blade.php'
     ],
     theme: {
         extend: {},