diff --git a/templates/catalog/_partials/facets.tpl b/templates/catalog/_partials/facets.tpl
index 32f4f1f..c414b71 100644
--- a/templates/catalog/_partials/facets.tpl
+++ b/templates/catalog/_partials/facets.tpl
@@ -22,6 +22,82 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
+{if $facets|count}
+  <div id="search_filters">
+    <div id="search_filter_buttons" class="flex">
+      {block name='facets_clearall_button'}
+        {if $activeFilters|count}
+          <button id="_desktop_search_filters_clear_all"  data-search-url="{$clear_all_link}"  class="flex w-6 h-6 flex items-center justify-center select-none js-search-filters-clear-all">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter-off hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227"></path>
+              <path d="M3 3l18 18"></path>
+            </svg>
+          </button>
+        {else}
+          <button id="_desktop_search_filters" class="flex w-6 h-6 items-center justify-center select-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"></path>
+            </svg>
+          </button>
+        {/if}
+      {/block}
+    </div>
+    {foreach from=$facets item="facet"}
+      {if !$facet.displayed}
+        {continue}
+      {/if}
+      {if $facet.widgetType === 'dropdown'}
+        <div class="border-t border-gray-200 px-4 py-4">
+          <h3 class="-mx-2 -my-3 flow-root">
+            <!-- Expand/collapse section button -->
+            <button id="show-filters-{$facet.label}" data-filter-name="{$facet.label}" type="button" class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false">
+              <span class="font-medium text-gray-900">
+                {$active_found = false}
+                {foreach from=$facet.filters item="filter"}
+                  {if $filter.active}
+                    {$filter.label}
+                    {$active_found = true}
+                  {/if}
+                {/foreach}
+                {if !$active_found}
+                  {$facet.label}
+                {/if}
+              </span>
+              <span class="ml-6 flex items-center">
+                <!-- Expand icon, show/hide based on section open state. -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                  <path d="M6 9l6 6l6 -6"></path>
+                </svg>
+              </span>
+            </button>
+          </h3>
+          <!-- Filter section, show/hide based on section state. -->
+          <div class="pt-6 px-4 hidden" id="filter-section-{$facet.label}" data-filter-name="{$facet.label}">
+            <div class="flex flex-wrap w-full">
+              {foreach from=$facet.filters item="filter"}
+                {if !$filter.active}
+                  <a
+                    rel="nofollow"
+                    href="{$filter.nextEncodedFacetsURL}"
+                    class="select-list text-sm w-1/4 mb-4"
+                  >
+                    {$filter.label}
+                  </a>
+                {/if}
+              {/foreach}
+            </div>
+          </div>
+        </div>
+      {/if}
+    {/foreach}
+  </div>
+{/if}
+
+
+ {*
 {if $facets|count}
   <div id="products_top_sidebar" class="sidebar lg:left-0 p-2 overflow-y-auto text-center bg-white h-screen w-56">
     <div id="search_filters">
@@ -90,3 +166,4 @@
     </div>
   </div>
 {/if}
+*}
diff --git a/templates/catalog/_partials/products-top.tpl b/templates/catalog/_partials/products-top.tpl
index 459b49b..e301e5b 100644
--- a/templates/catalog/_partials/products-top.tpl
+++ b/templates/catalog/_partials/products-top.tpl
@@ -22,6 +22,40 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
+
+<div id="js-product-list-top" class="bg-white">
+  <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
+    <div class="fixed inset-0 z-50 flex">
+      <div id="product-list-top-filters" class="relative mr-auto flex h-full w-screen md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
+        <div class="flex items-center justify-between px-4">
+          <h2 class="text-lg font-medium text-gray-900">Filters</h2>
+          <button id="hide_filters" type="button" class="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400">
+            <span class="sr-only">Close menu</span>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 6l-12 12"></path>
+                <path d="M6 6l12 12"></path>
+              </svg>
+          </button>
+        </div>
+        <form class="mt-4 border-t border-gray-200">
+          {if !empty($listing.rendered_facets)}
+            {include file='catalog/_partials/facets.tpl'}
+          {else}
+            <div></div>
+          {/if}
+          {block name='sort_by'}
+            {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
+          {/block}
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+{*
 <div id="js-product-list-top" class="flex w-full flex-col lg:flex-row lg:justify-between">
   <button id="show_filters" class=""> Filter </button>
   {if !empty($listing.rendered_facets)}
@@ -33,3 +67,4 @@
     {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
   {/block}
 </div>
+*}
diff --git a/templates/catalog/_partials/sort-orders.tpl b/templates/catalog/_partials/sort-orders.tpl
index 4b71b8b..f8b44f8 100644
--- a/templates/catalog/_partials/sort-orders.tpl
+++ b/templates/catalog/_partials/sort-orders.tpl
@@ -22,6 +22,41 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
+
+<div class="border-t border-gray-200 px-4 py-4">
+  <h3 class="-mx-2 -my-3 flow-root">
+    <!-- Expand/collapse section button -->
+    <button id="show-sort-by" type="button" class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false">
+      <span class="font-medium text-gray-900">
+        Sort By
+      </span>
+      <span class="ml-6 flex items-center">
+        <!-- Expand icon, show/hide based on section open state. -->
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M6 9l6 6l6 -6"></path>
+        </svg>
+      </span>
+    </button>
+  </h3>
+  <!-- Filter section, show/hide based on section state. -->
+  <div class="pt-6 hidden" id="filter-section-sort-by">
+    <div class="flex flex-wrap w-full">
+      {foreach from=$listing.sort_orders item=sort_order}
+        <a
+          rel="nofollow"
+          href="{$sort_order.url}"
+          class="select-list text-sm w-1/4 mb-4 {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
+        >
+          {$sort_order.label}
+        </a>
+      {/foreach}
+    </div>
+  </div>
+</div>
+
+
+{*
 <div class="relative flex gap-2 lg:items-center top-4 lg:top-0">
   <div class="relative flex-1 max-w-[140px] group">
     <button
@@ -49,3 +84,4 @@
     </div>
   </div>
 </div>
+*}