diff --git a/composer.json b/composer.json
index 0e4539b9b5..c5d40eb22e 100644
--- a/composer.json
+++ b/composer.json
@@ -22,7 +22,7 @@
         "spryker-feature/approval-process": "^202404.0",
         "spryker-feature/availability-notification": "^202404.0",
         "spryker-feature/cart": "dev-master as 202407.0",
-        "spryker-feature/catalog": "^202404.0",
+        "spryker-feature/catalog": "dev-master as 202410.0",
         "spryker-feature/category-management": "^202404.0",
         "spryker-feature/checkout": "^202404.0",
         "spryker-feature/cms": "^202404.0",
diff --git a/composer.lock b/composer.lock
index 3acf5cb17d..ef9722efb9 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "ab6d2696bd5658627b6b8935dab24aa8",
+    "content-hash": "ea72c8e20cbe535e5ed5e4cb18b6d16c",
     "packages": [
         {
             "name": "async-aws/core",
@@ -5136,7 +5136,7 @@
         },
         {
             "name": "spryker-feature/catalog",
-            "version": "202404.0",
+            "version": "dev-master",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spryker-feature/catalog.git",
@@ -5157,6 +5157,7 @@
             "suggest": {
                 "spryker-feature/spryker-core": "Recommended feature dependency."
             },
+            "default-branch": true,
             "type": "metapackage",
             "extra": {
                 "branch-alias": {
@@ -8665,20 +8666,20 @@
         },
         {
             "name": "spryker-shop/catalog-page",
-            "version": "1.26.0",
+            "version": "1.27.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spryker-shop/catalog-page.git",
-                "reference": "22fac5eb129e979a24cb3702cf041dc8a0486794"
+                "reference": "96ab4505c97bab2fe78a5433031f440fd07698e4"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spryker-shop/catalog-page/zipball/22fac5eb129e979a24cb3702cf041dc8a0486794",
-                "reference": "22fac5eb129e979a24cb3702cf041dc8a0486794",
+                "url": "https://api.github.com/repos/spryker-shop/catalog-page/zipball/96ab4505c97bab2fe78a5433031f440fd07698e4",
+                "reference": "96ab4505c97bab2fe78a5433031f440fd07698e4",
                 "shasum": ""
             },
             "require": {
-                "php": ">=8.1",
+                "php": ">=8.2",
                 "spryker-shop/shop-application": "^1.0.0",
                 "spryker-shop/shop-router-extension": "^1.0.0",
                 "spryker-shop/shop-ui": "^1.63.0",
@@ -8730,9 +8731,9 @@
             ],
             "description": "CatalogPage module",
             "support": {
-                "source": "https://github.com/spryker-shop/catalog-page/tree/1.26.0"
+                "source": "https://github.com/spryker-shop/catalog-page/tree/1.27.0"
             },
-            "time": "2024-09-04T07:26:53+00:00"
+            "time": "2024-10-14T10:20:01+00:00"
         },
         {
             "name": "spryker-shop/category-image-storage-widget",
@@ -68922,6 +68923,12 @@
             "alias": "202407.0",
             "alias_normalized": "202407.0"
         },
+        {
+            "package": "spryker-feature/catalog",
+            "version": "9999999-dev",
+            "alias": "202410.0",
+            "alias_normalized": "202410.0"
+        },
         {
             "package": "spryker-feature/comments",
             "version": "9999999-dev",
@@ -68999,6 +69006,7 @@
     "stability-flags": {
         "spryker-feature/agent-assist": 20,
         "spryker-feature/cart": 20,
+        "spryker-feature/catalog": 20,
         "spryker-feature/comments": 20,
         "spryker-feature/configurable-bundle": 20,
         "spryker-feature/configurable-product": 20,
diff --git a/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss b/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss
index bf3e809138..4b38ba8e57 100644
--- a/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss
+++ b/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss
@@ -11,12 +11,16 @@
 
         &--lvl-3 {
             @include helper-breakpoint-media-min($lg) {
-                padding-left: 10px;
+                padding-left: rem(10);
             }
         }
     }
 
     &__menu-item {
+        display: flex;
+        flex-grow: 1;
+        color: $setting-color-gray-3;
+
         &--lvl-2 {
             &:first-child {
                 padding-top: rem(5);
@@ -36,6 +40,40 @@
         }
     }
 
+    &__category-row {
+        flex-grow: 1;
+
+        &--no-children {
+            margin-left: rem(16);
+        }
+    }
+
+    &__category-target {
+        @include helper-effect-transition(grid-template-rows);
+        display: grid;
+        grid-template-rows: 1fr;
+
+        &--hidden {
+            grid-template-rows: 0fr;
+        }
+    }
+
+    &__category-target-inner {
+        overflow: hidden;
+    }
+
+    &__category-toggle-button {
+        @include helper-effect-transition(transform);
+        color: $setting-color-gray-3;
+        margin-right: rem(5);
+        background-color: $setting-color-transparent;
+        cursor: pointer;
+
+        &--collapsed {
+            transform: rotate(-90deg);
+        }
+    }
+
     &__menu-link {
         @include helper-effect-transition(color);
         display: flex;
diff --git a/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig b/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig
index 0102533a1e..cca98662f3 100644
--- a/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig
+++ b/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig
@@ -29,39 +29,94 @@
                 {% endif %}
             {% endfor %}
 
-            {% if data.filterPath is not empty %}
-                {% set currentUrl = url(data.filterPath, {categoryPath: (app.request.attributes.get('categoryPath'))}) %}
-            {% else %}
-                {% set currentUrl = app.request.attributes.get('categoryNode') ? app.request.attributes.get('categoryNode').url : null %}
-            {% endif %}
+            {% if quantity > 0 or (quantity == 0 and data.isEmptyCategoryFilterValueVisible) %}
+                {% if data.filterPath is not empty %}
+                    {% set currentUrl = url(data.filterPath, {categoryPath: (app.request.attributes.get('categoryPath'))}) %}
+                {% else %}
+                    {% set currentUrl = app.request.attributes.get('categoryNode') ? app.request.attributes.get('categoryNode').url : null %}
+                {% endif %}
 
-            {% set categoryUrl = data.filterPath is not empty ? url(data.filterPath, {categoryPath: (categoryNode.url | trimLocale)}) : categoryNode.url %}
-            {% set isActive = (currentUrl == categoryUrl) %}
-            {% set isHidden = (data.levelMenu != 1) %}
-            {% set disableAttribute = quantity == 0 ? 'disabled' %}
-            {% set menuItemActiveClass = isActive ? config.name ~ '__menu-item--active ' ~ config.jsName ~ '__menu-item' %}
-            {% set menuItemHiddenClass = isHidden and not isActive ? 'is-hidden-lg-xxl' %}
-            {% set menuLinkActiveClass = isActive ? config.name ~ '__menu-link--active' %}
-            {% set linkTextActiveClass = isActive ? config.name ~ '__link-text--active' %}
-            {% set triggerButtonJsName = data.parentJsName ? data.parentJsName ~ '__trigger' %}
+                {% set categoryUrl = data.filterPath is not empty ? url(data.filterPath, {categoryPath: (categoryNode.url | trimLocale)}) : categoryNode.url %}
+                {% set isActive = (currentUrl == categoryUrl) %}
+                {% set isHidden = (data.levelMenu != 1 and data.isEmptyCategoryFilterValueVisible) %}
+                {% set disableAttribute = quantity == 0 ? 'disabled' %}
+                {% set menuItemActiveClass = isActive ? config.name ~ '__menu-item--active ' ~ config.jsName ~ '__menu-item' %}
+                {% set menuItemHiddenClass = isHidden ? 'is-hidden-lg-xxl' %}
+                {% set menuLinkActiveClass = isActive ? config.name ~ '__menu-link--active' %}
+                {% set linkTextActiveClass = isActive ? config.name ~ '__link-text--active' %}
+                {% set triggerButtonJsName = data.parentJsName ? data.parentJsName ~ '__trigger' %}
 
-            <li class="{{ config.name }}__menu-item {{ config.name }}__menu-item--lvl-{{ data.levelMenu }} {{ menuItemActiveClass }} {{ menuItemHiddenClass }}">
-                <button class="{{ config.name }}__menu-link {{ config.name }}__menu-link--lvl-{{ data.levelMenu }} {{ menuLinkActiveClass }} {{ triggerButtonJsName }}" type="button" {{ disableAttribute }} data-url={{ categoryUrl }}>
-                    <span class="{{ config.name }}__link-text {{ linkTextActiveClass }}">{{ categoryNode.name }}</span> <span>{{ quantity | executeFilterIfExists('formatInt', app.locale) }}</span>
-                </button>
+                {% set categoryNamePrepared = categoryNode.name | replace({'[^a-zA-Z0-9]': '_'}) %}
+                {% set childrenClass = categoryNode.hasChildren ? 'menu__item--has-children-list' %}
+                {% set triggerClassName = config.jsName ~ '__category-trigger-' ~ categoryNamePrepared %}
+                {% set targetCategoryClassName = config.jsName ~ '__category-target-' ~ categoryNamePrepared %}
+                {% set targetTogglerClassName = config.jsName ~ '__toggler-target-' ~ categoryNamePrepared %}
+                {% set classToToggle = config.name ~ '__category-target' %}
+                {% set categoryTargetInner = config.name ~ '__category-target-inner' %}
+                {% set classToToggleModifier = classToToggle ~ '--hidden' %}
+                {% set toggleButtonClassName = config.name  ~ '__category-toggle-button' %}
 
-                {% if hasChildren %}
-                    {% include molecule('filter-category', 'CatalogPage') with {
-                        data: {
-                            filter: data.filter,
-                            filterPath: data.filterPath,
-                            categories: categoryNode.children,
-                            levelMenu: data.levelMenu + 1,
-                            parentJsName: data.parentJsName,
-                        },
-                    } only %}
-                {% endif %}
-            </li>
+                <li class="{{ config.name }}__menu-item {{ config.name }}__menu-item--lvl-{{ data.levelMenu }} {{ menuItemActiveClass }}">
+                    {% if hasChildren %}
+                        {% block categoryItemToggler %}
+                            <div>
+                                {% block categoryItemTogglerIcon %}
+                                    <button type="button" class="spacing-right--small {{ toggleButtonClassName }} {{ triggerClassName }} {{ targetTogglerClassName }}">
+                                        {% include atom('icon') with {
+                                            class: config.name ~ '__category-toggle-button-icon',
+                                            modifiers: ['small'],
+                                            data: {
+                                                name: 'caret-down',
+                                            },
+                                        } only %}
+                                    </button>
+                                {% endblock %}
+
+                                {% block categoryItemTogglerHandlers %}
+                                    {% include molecule('toggler-click') with {
+                                        attributes: {
+                                            'trigger-class-name': triggerClassName,
+                                            'target-class-name': targetCategoryClassName,
+                                            'class-to-toggle': classToToggleModifier,
+                                        },
+                                    } only %}
+
+                                    {% include molecule('toggler-click') with {
+                                        attributes: {
+                                            'trigger-class-name': triggerClassName,
+                                            'target-class-name': targetTogglerClassName,
+                                            'class-to-toggle': toggleButtonClassName ~ '--collapsed',
+                                        },
+                                    } only %}
+                                {% endblock %}
+                            </div>
+                        {% endblock %}
+                    {% endif %}
+
+                    <div class="{{ config.name }}__category-row {{ not hasChildren ? config.name ~ '__category-row--no-children' }}">
+                        <button class="{{ config.name }}__menu-link {{ config.name }}__menu-link--lvl-{{ data.levelMenu }} {{ menuLinkActiveClass }} {{ triggerButtonJsName }}" type="button" {{ disableAttribute }} data-url={{ categoryUrl }}>
+                            <span class="{{ config.name }}__link-text {{ linkTextActiveClass }}">{{ categoryNode.name }}</span> <span>{{ quantity | executeFilterIfExists('formatInt', app.locale) }}</span>
+                        </button>
+
+                        {% if hasChildren %}
+                            <div class="{{ classToToggle }} {{ targetCategoryClassName }}">
+                                <div class="{{ categoryTargetInner }}">
+                                    {% include molecule('filter-category', 'CatalogPage') with {
+                                        data: {
+                                            filter: data.filter,
+                                            filterPath: data.filterPath,
+                                            categories: categoryNode.children,
+                                            levelMenu: data.levelMenu + 1,
+                                            parentJsName: data.parentJsName,
+                                            isEmptyCategoryFilterValueVisible: data.isEmptyCategoryFilterValueVisible,
+                                        },
+                                    } only %}
+                                </div>
+                            </div>
+                        {% endif %}
+                    </div>
+                </li>
+            {% endif %}
         {% endfor %}
     </ul>
 {% endblock %}
diff --git a/src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig b/src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig
index 4a014c0735..574c0f28fa 100644
--- a/src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig
+++ b/src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig
@@ -63,6 +63,7 @@
                             filteredFacets: data.filteredFacets,
                             filterPath: data.filterPath,
                             categories: data.categories,
+                            isEmptyCategoryFilterValueVisible: data.isEmptyCategoryFilterValueVisible,
                             parentJsName: catalogJsName,
                             numberFormatConfig: numberFormatConfig,
                         },