diff --git a/packages/trader/src/App/Components/Elements/MenuAccordion/menu-accordion-headers.jsx b/packages/trader/src/App/Components/Elements/MenuAccordion/menu-accordion-headers.jsx
index 051b3d5c2b3e..1c1104847f76 100644
--- a/packages/trader/src/App/Components/Elements/MenuAccordion/menu-accordion-headers.jsx
+++ b/packages/trader/src/App/Components/Elements/MenuAccordion/menu-accordion-headers.jsx
@@ -1,3 +1,4 @@
+import classNames       from 'classnames';
 import React            from 'react';
 import Icon             from 'Assets/icon.jsx';
 import {
@@ -36,7 +37,9 @@ class MenuAccordionHeaders extends React.PureComponent {
                         <div key={idx}>
                             <div>
                                 <VerticalTabHeader item={item} onChange={this.handleAccordion} >
-                                    <Icon icon='IconChevronRight' className='dt_accordion-chevron' />
+                                    <Icon icon='IconChevronRight' className={classNames('dt_accordion-chevron', {
+                                        'dt_accordion-chevron--show': show_sub_tab_list, // this.state.is_active_tab_open,
+                                    })} />
                                 </VerticalTabHeader>
                             </div>
                             {show_sub_tab_list && (
diff --git a/packages/trader/src/sass/app/_common/components/menu-accordion.scss b/packages/trader/src/sass/app/_common/components/menu-accordion.scss
index a9770cc36613..4fb912b55751 100644
--- a/packages/trader/src/sass/app/_common/components/menu-accordion.scss
+++ b/packages/trader/src/sass/app/_common/components/menu-accordion.scss
@@ -1,4 +1,10 @@
 .dt_accordion-chevron {
     transform: rotate(90deg);
     margin-left: auto;
+    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+    transform-origin: 50% 45%;
+
+    &--show {
+        transform: rotate(-90deg);
+    }
 }