diff --git a/resources/js/moduleJs/order.js b/resources/js/moduleJs/order.js
index 7fe3895..8e33aa5 100644
--- a/resources/js/moduleJs/order.js
+++ b/resources/js/moduleJs/order.js
@@ -1406,6 +1406,13 @@ solution before template
 
 
 
+        $('.sidebar-wrapper a.categoryItem.categoryParent').off('click');
+        $('.sidebar-wrapper a.categoryItem.categoryParent').on('click', function (e) {
+            e.preventDefault();
+            $(this).next('ul.subgroup-list').slideToggle(200);
+            $(this).toggleClass('open');
+        });
+
         $('.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.clickable').off('click');
         $('.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.clickable').on('click',
             function () {
diff --git a/resources/views/modules/order/productSelectSidebar.blade.php b/resources/views/modules/order/productSelectSidebar.blade.php
index e14ca3c..25b37dd 100644
--- a/resources/views/modules/order/productSelectSidebar.blade.php
+++ b/resources/views/modules/order/productSelectSidebar.blade.php
@@ -44,7 +44,7 @@
                         <span>Csoportok</span>
                         {{--<span class="badge badge-pill badge-warning">Új</span>--}}
                     </a>
-                    <div class="sidebar-submenu active" style="display: block;max-height: 220px; overflow: scroll;">
+                    <div class="sidebar-submenu active" style="display: block;">
                         <ul>
                             @if(count($productGroup)>0)
                             @include('modules.order.productSelectSidebarProductGroupPartial',$productGroup)
@@ -146,46 +146,51 @@
                     </a>
                 </li>
 
-                <li class="header-menu">
-                    <span>Extra</span>
-                </li>
-                <li >
-                    <a href="#" class="sidebar favorites">
-                        <i class="far fa-star"></i>
-                        <span>Kedvencek</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#" class="sidebar often">
-                        <i class="fa fa-calendar"></i>
-                        <span>Gyakran vásárolt</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#" class="sidebar last">
-                        <i class="fa fa-clock"></i>
-                        <span>Utoljára vásárolt</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#" class="sidebar weekly">
-                        <i class="fa fa-redo"></i>
-                        <span>Heti termékek</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#" class="sidebar krel">
-                        <i class="fas fa-sort-amount-down"></i>
-                        <span>REL termékek</span>
-                    </a>
-                </li>
-
-
-                <li>
-                    <a href="#" class="sidebar specialOffer">
-                        <i class="fa fa-percent"></i>
-                        <span>Akciós termékek</span>
+                <li class="sidebar-dropdown extra-block active">
+                    <a href="#">
+                        <i class="fa fa-ellipsis-h"></i>
+                        <span>Extra</span>
                     </a>
+                    <div class="sidebar-submenu" style="display: block;">
+                        <ul>
+                            <li >
+                                <a href="#" class="sidebar favorites">
+                                    <i class="far fa-star"></i>
+                                    <span>Kedvencek</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="sidebar often">
+                                    <i class="fa fa-calendar"></i>
+                                    <span>Gyakran vásárolt</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="sidebar last">
+                                    <i class="fa fa-clock"></i>
+                                    <span>Utoljára vásárolt</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="sidebar weekly">
+                                    <i class="fa fa-redo"></i>
+                                    <span>Heti termékek</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="sidebar krel">
+                                    <i class="fas fa-sort-amount-down"></i>
+                                    <span>REL termékek</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="sidebar specialOffer">
+                                    <i class="fa fa-percent"></i>
+                                    <span>Akciós termékek</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                 </li>
 
 
@@ -343,8 +348,8 @@
 
     .sidebar-wrapper {
         width: 260px;
-        height: 100%;
-        max-height: 100%;
+        height: calc(100% - 123px);
+        max-height: calc(100% - 123px);
         position: fixed;
         top: 123px;
         left: -300px;
@@ -557,6 +562,22 @@
 
     }
 
+    .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.categoryParent {
+        cursor: pointer;
+        position: relative;
+    }
+    .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.categoryParent:after {
+        font-family: "Font Awesome 5 Free";
+        font-weight: 900;
+        content: "\f105"; /* jobbra mutató nyíl */
+        position: absolute;
+        right: 15px;
+        transition: transform 0.2s ease;
+    }
+    .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.categoryItem.categoryParent.open:after {
+        transform: rotate(90deg); /* nyitott állapotban lefelé fordul */
+    }
+
     /*--------------------------side-footer------------------------------*/
 
     .sidebar-footer {
@@ -755,19 +776,44 @@
         color: #b8bfce;
     }
 
+    /*----- rugalmas magasság: a Csoportok tölti ki a szabad helyet -----*/
+    .sidebar-wrapper .sidebar-content {
+        display: flex;
+        flex-direction: column;
+    }
+    .sidebar-wrapper .sidebar-menu,
+    .sidebar-wrapper .sidebar-menu > ul {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0; /* flexben a görgetés feltétele */
+    }
+    /* a Csoportok li nőjjon, a többi (Kosár, Extra) megtartja a méretét */
+    .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active:not(.extra-block) {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+    .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active:not(.extra-block) .sidebar-submenu {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+    }
+
 </style>
 
 
 <script>
     jQuery(function ($) {
 
-        $(".sidebar-dropdown > a").click(function() {
-            $(".sidebar-submenu").slideUp(200);
+        $(".sidebar-dropdown:not(.extra-block) > a").click(function() {
+            $(".sidebar-dropdown:not(.extra-block) .sidebar-submenu").slideUp(200);
             if ($(this).parent().hasClass("active")) {
-                $(".sidebar-dropdown").removeClass("active");
+                $(".sidebar-dropdown:not(.extra-block)").removeClass("active");
                 $(this).parent().removeClass("active");
             } else {
-                $(".sidebar-dropdown").removeClass("active");
+                $(".sidebar-dropdown:not(.extra-block)").removeClass("active");
                 $(this)
                     .next(".sidebar-submenu")
                     .slideDown(200);
@@ -777,6 +823,20 @@
             }
         });
 
+        // Az Extra blokk függetlenül nyitható/csukható, nem zárja be a Csoportokat
+        var extraCollapsed = localStorage.getItem("sidebarExtraCollapsed") === "1";
+        if (extraCollapsed) {
+            $(".extra-block").removeClass("active");
+            $(".extra-block > .sidebar-submenu").hide();
+        }
+        $(".extra-block > a").click(function(e) {
+            e.preventDefault();
+            var $li = $(this).parent();
+            $(this).next(".sidebar-submenu").slideToggle(200);
+            $li.toggleClass("active");
+            localStorage.setItem("sidebarExtraCollapsed", $li.hasClass("active") ? "0" : "1");
+        });
+
         $("#close-sidebar").click(function() {
             $(".page-wrapper").removeClass("toggled");
             $(".containerStepper").removeClass("activeSideBar");
diff --git a/resources/views/modules/order/productSelectSidebarProductGroupPartial.blade.php b/resources/views/modules/order/productSelectSidebarProductGroupPartial.blade.php
index 2654df3..30f35e7 100644
--- a/resources/views/modules/order/productSelectSidebarProductGroupPartial.blade.php
+++ b/resources/views/modules/order/productSelectSidebarProductGroupPartial.blade.php
@@ -5,8 +5,9 @@
 
     <li class="list-unstyled">
     @if(!$productGroup['isLeaf'])
-            <a class="categoryItem">{{$productGroup['name']}}</a>
-            <ul>
+            @php($openByDefault = in_array($productGroup['name'], ['Food', 'NonFood'], true))
+            <a class="categoryItem categoryParent{{ $openByDefault ? ' open' : '' }}">{{$productGroup['name']}}</a>
+            <ul class="subgroup-list" style="display:{{ $openByDefault ? 'block' : 'none' }};">
         @include('modules.order.productSelectSidebarProductGroupPartial',$productGroup)
             </ul>
     @else