diff --git a/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl b/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl
index 8a51d568e..e13ef31a1 100644
--- a/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl
+++ b/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl
@@ -8,18 +8,20 @@
 {function name="categories" nodes=[] depth=0}
   {strip}
     {if $nodes|count}
-      <ul class="{$componentName}__list" data-depth="{$depth}">
+      <ul class="{$componentName}__list" data-depth="{$depth|escape:'htmlall':'UTF-8'}">
         {foreach from=$nodes item=node name="categories"}
-          <li class="{$componentName}__item">
-            <div class="{$componentName}__item__header{if $node.children} {$componentName}__item__header--parent{/if}">
-              <a class="{$componentName}__item__link" href="{$node.link}">{$node.name}</a>
+          <li class="{$componentName}__item {if $node.children}accordion-item{/if}">
+            <div class="{$componentName}__item__header nosplit {if $node.children} split parent{/if}">
+              <a class="{$componentName}__item__link" href="{$node.link|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a>
               {if $node.children}
-                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#exCollapsingNavbar{$node.id}"></div>
+                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#category-tree-{$node.id|escape:'htmlall':'UTF-8'}"></div>
               {/if}
             </div>
             {if $node.children}
-              <div class="collapse" id="exCollapsingNavbar{$node.id}">
-                {categories nodes=$node.children depth=$depth+1}
+              <div class="accordion-collapse collapse" id="category-tree-{$node.id|escape:'htmlall':'UTF-8'}">
+                <div class="accordion-body">
+                  {categories nodes=$node.children depth=$depth+1}
+                </div>
               </div>
             {/if}
           </li>
@@ -29,11 +31,16 @@
   {/strip}
 {/function}
 
-<div class="{$componentName}">
-  <ul class="{$componentName}__list list-group">
-    <li class="{$componentName}__title list-group-item"><a class="{$componentName}__title__link" href="{$categories.link nofilter}">{$categories.name}</a></li>
-    {if !empty($categories.children)}
-      <li class="{$componentName}__child list-group-item">{categories nodes=$categories.children}</li>
-    {/if}
-  </ul>
-</div>
+{if !empty($categories.children)}
+  <div class="ps_categorytree {$componentName} left-block">
+    <div class="left-block__title">
+      <a class="left-block__title__link" href="{$categories.link nofilter}">{$categories.name|escape:'htmlall':'UTF-8'}</a>
+    </div>
+
+    <ul class="accordion accordion-flush accordion--small accordion--category">
+      {if !empty($categories.children)}
+        <li class="{$componentName}__child">{categories nodes=$categories.children}</li>
+      {/if}
+    </ul>
+  </div>
+{/if}
diff --git a/modules/ps_facetedsearch/ps_facetedsearch.tpl b/modules/ps_facetedsearch/ps_facetedsearch.tpl
index fd9b4da32..dff2c302f 100644
--- a/modules/ps_facetedsearch/ps_facetedsearch.tpl
+++ b/modules/ps_facetedsearch/ps_facetedsearch.tpl
@@ -3,8 +3,8 @@
  * file that was distributed with this source code.
  *}
 
-{if isset($listing.rendered_facets)}
-  <div id="search_filters_wrapper" class="d-none d-md-block">
+{if isset($listing.rendered_facets) && !empty($listing.rendered_facets)}
+  <div id="search_filters_wrapper" class="d-none d-md-block left-block">
     <div id="_desktop_faceted">
       {$listing.rendered_facets nofilter}
     </div>
diff --git a/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl b/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl
index 8777152cf..ad8cad180 100644
--- a/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl
+++ b/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl
@@ -21,7 +21,7 @@
 {if $displayedFacets|count}
   <div id="search-filters" class="{$componentName} d-flex flex-direction-column flex-wrap w-100">
     {block name='facets_title'}
-      <p class="{$componentName}-title d-none d-md-block">{l s='Filter By' d='Shop.Theme.Actions'}</p>
+      <p class="{$componentName}-title left-block__title d-none d-md-block">{l s='Filter By' d='Shop.Theme.Actions'}</p>
     {/block}
 
     {block name='facets_clearall_button'}
diff --git a/src/js/modules/ps_categorytree.ts b/src/js/modules/ps_categorytree.ts
new file mode 100644
index 000000000..fb27ecac9
--- /dev/null
+++ b/src/js/modules/ps_categorytree.ts
@@ -0,0 +1,16 @@
+const initCategoryTree = () => {
+  const categoryTree = document.querySelector('.ps_categorytree');
+
+  if (categoryTree) {
+    const accordionButtons = categoryTree.querySelectorAll('.accordion-button');
+
+    accordionButtons.forEach((element) => {
+      element.addEventListener('click', () => {
+        const isActive = element.getAttribute('aria-expanded') === 'true';
+        element.closest('.category-tree__item')?.classList.toggle('active', isActive);
+      });
+    });
+  }
+};
+
+export default initCategoryTree;
diff --git a/src/js/theme.ts b/src/js/theme.ts
index 9d3f428b7..c234aa519 100644
--- a/src/js/theme.ts
+++ b/src/js/theme.ts
@@ -27,6 +27,7 @@ import './modules/blockcart';
 import './modules/facetedsearch';
 import initDesktopMenu from './modules/ps_mainmenu';
 import initFormValidation from './form-validation';
+import initCategoryTree from './modules/ps_categorytree';
 
 initEmitter();
 
@@ -50,6 +51,7 @@ $(() => {
   initFormValidation();
   initErrorHandler();
   usePasswordPolicy('.field-password-policy');
+  initCategoryTree();
 
   prestashop.on(events.responsiveUpdate, () => {
     initSearchbar();
diff --git a/src/scss/core/layout/_left-column.scss b/src/scss/core/layout/_left-column.scss
index b3f5dae9a..e67dc2139 100644
--- a/src/scss/core/layout/_left-column.scss
+++ b/src/scss/core/layout/_left-column.scss
@@ -21,6 +21,14 @@ $component-name: left-block;
     font-size: var(--#{$component-name}-title-size);
     font-weight: 600;
     border: none;
+
+    &__link {
+      color: var(--#{$component-name}-link-color);
+
+      &:hover {
+        color: var(--bs-primary);
+      }
+    }
   }
 
   &__content {
@@ -35,5 +43,9 @@ $component-name: left-block;
     font-size: var(--#{$component-name}-subtitle-size);
     font-weight: 600;
     color: var(--#{$component-name}-subtitle-color);
+
+    &:hover {
+      color: var(--bs-primary);
+    }
   }
 }
diff --git a/src/scss/custom/components/category-tree/_category-tree.scss b/src/scss/custom/components/category-tree/_category-tree.scss
index a6825dc94..603e89184 100644
--- a/src/scss/custom/components/category-tree/_category-tree.scss
+++ b/src/scss/custom/components/category-tree/_category-tree.scss
@@ -1,58 +1,116 @@
 $component-name: category-tree;
 
-#left-column {
-  --#{$component-name}-title-color: #{$gray-800};
-  --#{$component-name}-title-size: 1.5rem;
-  --#{$component-name}-title-spacing: 1rem;
-  --#{$component-name}-subtitle-color: #{$gray-800};
-  --#{$component-name}-subtitle-size: 1rem;
-  --#{$component-name}-subtitle-spacing: 0.25rem;
-  --#{$component-name}-border-bottom: 1px solid #{$gray-200};
-}
-
 .#{$component-name} {
-  padding-bottom: 1rem;
-  margin-bottom: 2rem;
-  border-bottom: var(--#{$component-name}-border-bottom);
+  .accordion {
+    --bs-accordion-bg: transparent;
+    --bs-accordion-btn-bg: transparent;
+    --bs-accordion-active-bg: transparent;
+  }
 
   &__child {
     padding: 0;
     border: none;
+    .#{$component-name}__list {
+      display: flex;
+      flex-direction: column;
+      row-gap: 0.5rem;
+
+      &[data-depth="0"] {
+        > .category-tree__item {
+          > .category-tree__item__header {
+            .category-tree__item__link {
+              font-weight: 600;
+            }
+          }
+        }
+      }
+
+      &[data-depth="1"] {
+        padding-left: 0.5rem;
+      }
+
+      &[data-depth="2"] {
+        padding-left: 0.5rem;
+      }
+
+      &[data-depth="3"] {
+        padding-left: 0.5rem;
+      }
+
+      &[data-depth="4"] {
+        padding-left: 0.5rem;
+      }
+    }
   }
 
   &__title {
-    padding: 0;
-    margin-bottom: var(--#{$component-name}-title-spacing);
-    font-size: var(--#{$component-name}-title-size);
-    border: none;
-
     &__link {
-      display: block;
-      font-weight: 600;
-      line-height: 2rem;
-      color: var(--#{$component-name}-title-color);
+      color: var(--bs-body-color);
     }
   }
 
   &__item {
+    /* stylelint-disable-next-line declaration-no-important */
+    transition: $transition-base;
+
+    &.active {
+      > .category-tree__item__header {
+        &.parent {
+          .category-tree__item__link {
+            color: var(--bs-primary);
+          }
+        }
+      }
+    }
+
     &__link {
-      display: block;
-      padding: var(--#{$component-name}-subtitle-spacing) 0;
-      font-size: var(--#{$component-name}-subtitle-size);
-      font-weight: 600;
-      color: var(--#{$component-name}-subtitle-color);
+      color: var(--bs-body-color);
+
+      &:hover {
+        color: var(--bs-primary);
+      }
     }
 
     &__header {
-      &--parent {
+      &.split {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
+        padding: 0.25rem 0;
 
-        > div {
-          padding: 0;
+        .accordion-button {
+          margin: -0.25rem -0.5rem -0.25rem auto;
         }
       }
+
+      &.nosplit {
+        display: flex;
+        padding: 0.25rem 0;
+      }
+
+      .category-tree__item__link {
+        flex-grow: 1;
+      }
     }
   }
 }
+
+// Accordion variant
+.accordion--category {
+  margin-bottom: 0;
+
+  .accordion-item {
+    border: none;
+  }
+
+  .accordion-body {
+    padding: 0.5rem 0 0;
+    margin: 0;
+  }
+
+  .accordion-button {
+    width: auto;
+    padding: 0.25rem 0.5rem;
+    font-size: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+  }
+}
diff --git a/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss b/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss
index 6b15a48b9..b0b487fbf 100644
--- a/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss
+++ b/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss
@@ -3,12 +3,12 @@ $component-name: search-filters-modules;
 .#{$component-name} {
   padding-bottom: 1rem;
   margin-bottom: 2rem;
-  border-bottom: var(--category-tree-border-bottom);
+  border-bottom: var(--left-block-border-bottom);
 
   &-title {
-    font-size: var(--category-tree-title-size);
+    font-size: var(--left-block-title-size);
     font-weight: 600;
-    color: var(--category-tree-title-color);
+    color: var(--left-block-title-color);
   }
 
   &__list {
@@ -20,7 +20,7 @@ $component-name: search-filters-modules;
       display: block;
       font-weight: 600;
       line-height: 2rem;
-      color: var(--category-tree-title-color);
+      color: var(--left-block-title-color);
     }
   }
 }
diff --git a/src/scss/custom/components/search-filters/_search-filters.scss b/src/scss/custom/components/search-filters/_search-filters.scss
index c664affbb..44a543512 100644
--- a/src/scss/custom/components/search-filters/_search-filters.scss
+++ b/src/scss/custom/components/search-filters/_search-filters.scss
@@ -1,26 +1,22 @@
 $component-name: search-filters;
 
 .#{$component-name} {
-  padding-bottom: 1rem;
-  margin-bottom: 2rem;
-  border-bottom: var(--category-tree-border-bottom);
-
   & &-title {
-    font-size: var(--category-tree-title-size);
+    font-size: var(--left-block-title-size);
     font-weight: 600;
-    color: var(--category-tree-title-color);
+    color: var(--left-block-title-color);
   }
 
   & &-subtitle {
-    font-size: var(--category-tree-subtitle-size);
+    font-size: var(--left-block-subtitle-size);
     font-weight: 600;
-    color: var(--category-tree-subtitle-color);
+    color: var(--left-block-subtitle-color);
   }
 
   & &-link {
-    font-size: var(--category-tree-subtitle-size);
+    font-size: var(--left-block-subtitle-size);
     font-weight: 300;
-    color: var(--category-tree-subtitle-color);
+    color: var(--left-block-subtitle-color);
   }
 
   & &-label {