diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx
index 39af419a53b12..fd8c7d481872d 100644
--- a/src/javascript/app/pages/trade/markets.jsx
+++ b/src/javascript/app/pages/trade/markets.jsx
@@ -78,13 +78,13 @@ const List = ({
                             ) : (
                                 <div key={`${item}_${idx}`}>
                                     <div
-                                        className='market'
+                                        className='subgroup'
                                         key={idx}
                                         id={`${obj.key}_market`}
                                         ref={saveRef.bind(null,obj.key)}
                                     >
                                         {(obj.key === derived_category && isMobile()) && <div className='label'>{obj.subgroup_name}</div>}
-                                        <div className='market_name'>
+                                        <div className='subgroup_name'>
                                             {obj.name}
                                         </div>
                                         {Object.entries(obj.submarket).sort((a, b) => sortSubmarket(a[0], b[0]))
@@ -329,6 +329,7 @@ class Markets extends React.Component {
         const class_under = 'put_under';
         const TITLE_HEIGHT = 40;
         const DEFAULT_TOP = this.references.list.offsetTop;
+        const SUBGROUP_LABEL = document.getElementsByClassName('label');
 
         const current_viewed_node = Object.values(market_nodes).find(node => (
             node.dataset.offsetTop <= position
@@ -355,11 +356,12 @@ class Markets extends React.Component {
             current_viewed_node.children[0].removeAttribute('style');
             current_viewed_node.children[0].classList.remove(class_under);
         }
-        if (Object.values(current_viewed_node.children[0].classList).includes('label')) {
-            current_viewed_node.children[1].classList.add(class_sticky);
-        } else {
-            current_viewed_node.children[0].classList.add(class_sticky);
+        if (isMobile() && (current_viewed_node.classList.contains('subgroup') && !current_viewed_node.classList.contains('label'))) {
+            SUBGROUP_LABEL[0].classList.add(class_sticky);
+            SUBGROUP_LABEL[0].removeAttribute('style');
+            SUBGROUP_LABEL[0].classList.remove(class_under);
         }
+        current_viewed_node.children[0].classList.add(class_sticky);
         current_viewed_node.style.paddingTop = `${TITLE_HEIGHT}px`;
     }
 
diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss
index 9e690c8e1a1fe..9e79844dfdda3 100644
--- a/src/sass/app/components/market.scss
+++ b/src/sass/app/components/market.scss
@@ -1,3 +1,22 @@
+@mixin market_name($FONT-SIZE, $FONT-WEIGHT, $COLOR) {
+    font-size: $FONT-SIZE;
+    padding: 10px 0;
+    font-weight: $FONT-WEIGHT;
+    flex: 1 0 auto;
+    color: $COLOR;
+    transition: none;
+}
+@mixin sticky($FONT-WEIGHT) {
+    position: absolute;
+    width: 431px;
+    top: 60px;
+    background: $COLOR_WHITE;
+    @media (max-width: 767px) {
+        top: 123px;
+        width: calc(100% - $FONT-WEIGHT);
+    }
+}
+
 .markets {
     min-width: 120px;
     position: relative;
@@ -284,31 +303,14 @@
                     &:last-of-type {
                         padding-bottom: 80px;
                     }
-                    .label {
-                        font-size: 20px;
-                        padding: 16px 0px;
-                        font-weight: 700;
-                    }
                     .market_name {
-                        font-size: 18px;
-                        padding: 10px 0;
-                        font-weight: 400;
-                        flex: 1 0 auto;
-                        color: $COLOR_BLUE;
-                        transition: none;
+                        @include market_name(18px, 500, $COLOR_BLUE);
                         @media (min-width: 320px) and (max-width: 767px) {
-                            font-size: 20px;
+                            font-size: 16px;
                         }
 
                         &.sticky {
-                            position: absolute;
-                            width: 431px;
-                            top: 60px;
-                            background: $COLOR_WHITE;
-                            @media (max-width: 767px) {
-                                top: 123px;
-                                width: calc(100% - 20px);
-                            }
+                            @include sticky(16px);
                         }
                         &.put_under {
                             z-index: -1;
@@ -321,13 +323,89 @@
                         margin-bottom: 10px;
 
                         .submarket_name {
-                            font-size: 12px;
-                            padding: 10px 0 0;
+                            @include market_name(12px, 400, $COLOR_ORANGE);
+                        }
+                        .symbols {
+                            display: flex;
+                            flex-wrap: wrap;
+                            flex-direction: row;
                             flex: 1 0 auto;
-                            font-weight: 300;
-                            color: $COLOR_ORANGE;
-                            @media (min-width: 320px) and (max-width: 767px) {
+
+                            .symbol_name {
+                                padding: 5px;
+                                margin: 10px 0 5px 5px;
+                                line-height: 18px;
+                                cursor: pointer;
+                                width: 162px;
                                 font-size: 14px;
+                                font-weight: 500;
+                                transition: all 0.2s;
+                                @media (min-width: 320px) and (max-width: 767px) {
+                                    width: 200px;
+                                    font-size: 14px;
+                                }
+
+                                &:hover {
+                                    background: $COLOR_GRAY;
+                                }
+                                &.active {
+                                    background: $COLOR_BLUE;
+                                    color: $COLOR_WHITE;
+                                    @media (min-width: 320px) and (max-width: 767px) {
+                                        background: $COLOR_BLUE;
+                                        color: $COLOR_WHITE;
+                                        font-weight: normal;
+                                        padding-left: 5px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                .subgroup {
+                    display: flex;
+                    flex-direction: column;
+                    flex: 0 0 auto;
+                    padding-bottom: 40px;
+
+                    &:last-of-type {
+                        padding-bottom: 80px;
+                    }
+                    .label {
+                        @include market_name(18px,700, $COLOR_BLUE);
+
+                        &.sticky {
+                            @include sticky(18px);
+                        }
+                        &.put_under {
+                            z-index: -1;
+                        }
+                    }
+                    .subgroup_name {
+                        @include market_name(18px,500, $COLOR_BLUE);
+                        @media (min-width: 320px) and (max-width: 767px) {
+                            font-size: 16px;
+                        }
+
+                        @media (min-width: 767px) {
+                            &.sticky {
+                                @include sticky(16px);
+                            }
+                            &.put_under {
+                                z-index: -1;
+                            }
+                        }
+                    }
+                    .submarket {
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1 0 auto;
+                        margin-bottom: 10px;
+
+                        .submarket_name {
+                            @include market_name(12px, 400, $COLOR_ORANGE);
+                            @media (min-width: 320px) and (max-width: 767px) {
+                                font-size: 12px;
                             }
                         }
                         .symbols {
@@ -343,11 +421,11 @@
                                 cursor: pointer;
                                 width: 162px;
                                 font-size: 14px;
-                                font-weight: 400;
+                                font-weight: 500;
                                 transition: all 0.2s;
                                 @media (min-width: 320px) and (max-width: 767px) {
                                     width: 200px;
-                                    font-size: 16px;
+                                    font-size: 14px;
                                 }
 
                                 &:hover {