diff --git a/src/img/icons/orderbook-to-spread-active.svg b/src/img/icons/orderbook-to-spread-active.svg
new file mode 100644
index 0000000000..72e63883ba
--- /dev/null
+++ b/src/img/icons/orderbook-to-spread-active.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <path fill="#FFF" fill-rule="nonzero" d="M6.005 2.088l2.12-2.121.708.707-2.829 2.829-.616-.618L3.17.668l.708-.707 2.127 2.127zm-.006 7.827l-2.121 2.12-.708-.707L6 8.5l.616.617 2.218 2.217-.708.708L6 9.915zM.5 5.5h11v1H.5v-1z"/>
+</svg>
diff --git a/src/modules/app/less/app-icons.less b/src/modules/app/less/app-icons.less
index ed7b9237a3..780d8f62f2 100644
--- a/src/modules/app/less/app-icons.less
+++ b/src/modules/app/less/app-icons.less
@@ -394,6 +394,13 @@
   background-position: center center;
 }
 
+.icon-dex-tospread-active {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-image: @orderbook-to-spread-icon-active;
+}
+
 .apple-store-btn,
 .google-play-btn {
   width: 135px;
diff --git a/src/modules/dex/directives/dexBlock/DexBlock.js b/src/modules/dex/directives/dexBlock/DexBlock.js
index 0e36211c44..77c561e3e5 100644
--- a/src/modules/dex/directives/dexBlock/DexBlock.js
+++ b/src/modules/dex/directives/dexBlock/DexBlock.js
@@ -99,7 +99,8 @@
                 block: '@',
                 hasSearch: '@',
                 canCollapse: '@',
-                analyticsText: '<'
+                analyticsText: '<',
+                isActiveScroll: '<'
             },
             templateUrl: 'modules/dex/directives/dexBlock/dexBlock.html',
             transclude: true,
diff --git a/src/modules/dex/directives/dexBlock/dexBlock.html b/src/modules/dex/directives/dexBlock/dexBlock.html
index d7a254a8bc..8f5d3e95e1 100644
--- a/src/modules/dex/directives/dexBlock/dexBlock.html
+++ b/src/modules/dex/directives/dexBlock/dexBlock.html
@@ -14,7 +14,11 @@
         <div ng-if="$ctrl.canCollapse"
              ng-click="$ctrl.toggleCollapse()"
              class="dex-block-top-btn"><i class="collapse"></i></div>
-        <div ng-click="$ctrl.scrollToSpread()" class="dex-block-top-btn"><i class="tospread"></i></div>
+        <div ng-click="$ctrl.scrollToSpread()"
+             ng-class="{'active': $ctrl.isActiveScroll}"
+             class="dex-block-top-btn">
+            <i class="tospread"></i>
+        </div>
     </div>
     <div ng-if="!$ctrl.collapsed" class="dex-block-content" ng-transclude></div>
 </div>
diff --git a/src/modules/dex/directives/dexBlock/dexBlock.less b/src/modules/dex/directives/dexBlock/dexBlock.less
index b48b2d93f7..ca81a2169d 100644
--- a/src/modules/dex/directives/dexBlock/dexBlock.less
+++ b/src/modules/dex/directives/dexBlock/dexBlock.less
@@ -59,6 +59,14 @@ w-dex-block {
       i.tospread:hover {
         background-color: @color-basic-100;
       }
+
+      &.active {
+        cursor: default;
+        i.tospread {
+          background: @color-submit-400;
+          .icon-dex-tospread-active();
+        }
+      }
     }
 
     .dex-block-content {
diff --git a/src/modules/dex/directives/orderBook/OrderBook.js b/src/modules/dex/directives/orderBook/OrderBook.js
index 6619fc1366..2182934157 100644
--- a/src/modules/dex/directives/orderBook/OrderBook.js
+++ b/src/modules/dex/directives/orderBook/OrderBook.js
@@ -107,6 +107,11 @@
                  * @private
                  */
                 this._dom = null;
+                /**
+                 * @type {boolean}
+                 * @public
+                 */
+                this.isScrolled = false;
 
                 this.receive(dexDataService.showSpread, () => {
                     this._dom.$box.stop().animate({ scrollTop: this._getSpreadScrollPosition() }, 300);
@@ -176,6 +181,11 @@
                     $lastPrice: { get: () => this._dom.$info.find(SECTIONS.LAST_PRICE) },
                     $spread: { get: () => this._dom.$info.find(SECTIONS.SPREAD) }
                 });
+                this._dom.$box.on('scroll', () => {
+                    const scrollPos = this._dom.$box[0].scrollTop;
+                    const spreadPos = this._getSpreadScrollPosition();
+                    this.isScrolled = Math.abs(scrollPos - spreadPos) >= 2;
+                });
             }
 
             nothingFound() {
@@ -470,6 +480,9 @@
 
     angular.module('app.dex').component('wDexOrderBook', {
         templateUrl: 'modules/dex/directives/orderBook/orderBook.html',
+        bindings: {
+            isScrolled: '='
+        },
         controller
     });
 })();
diff --git a/src/modules/dex/templates/dex.html b/src/modules/dex/templates/dex.html
index d9b0986fd3..8adb51e598 100644
--- a/src/modules/dex/templates/dex.html
+++ b/src/modules/dex/templates/dex.html
@@ -10,8 +10,9 @@
         </w-dex-block>
 
         <w-dex-block block="orderbook"
+                     is-active-scroll="$ctrl.isActiveScroll"
                      title-name="directives.orderBook.title">
-            <w-dex-order-book></w-dex-order-book>
+            <w-dex-order-book is-scrolled="$ctrl.isActiveScroll"></w-dex-order-book>
         </w-dex-block>
 
         <w-dex-block block="tradevolume"
diff --git a/src/themeConfig/black/icons.less b/src/themeConfig/black/icons.less
index 6bcdde70e0..69035d2e8d 100644
--- a/src/themeConfig/black/icons.less
+++ b/src/themeConfig/black/icons.less
@@ -11,6 +11,7 @@
 @dex-toggle-icon: url(/img/icons/dark/dex-toggle.svg);
 @dex-copybalance-icon: url(/img/icons/dark/dex-copy-icon.svg);
 @orderbook-to-spread-icon: url(/img/icons/dark/orderbook-to-spread.svg);
+@orderbook-to-spread-icon-active: url(/img/icons/orderbook-to-spread-active.svg);
 @arrow-orderbook-top-icon: url(/img/icons/dark/arrow-orderbook-top.svg);
 @arrow-orderbook-down-icon: url(/img/icons/dark/arrow-orderbook-down.svg);
 @empty-icon: url(/img/icons/dark/icon-empty.svg);
diff --git a/src/themeConfig/default/icons.less b/src/themeConfig/default/icons.less
index a16690abd4..8ce3846085 100644
--- a/src/themeConfig/default/icons.less
+++ b/src/themeConfig/default/icons.less
@@ -11,6 +11,7 @@
 @dex-toggle-icon: url(/img/icons/dex-toggle.svg);
 @dex-copybalance-icon: url(/img/icons/dex-copy-icon.svg);
 @orderbook-to-spread-icon: url(/img/icons/orderbook-to-spread.svg);
+@orderbook-to-spread-icon-active: url(/img/icons/orderbook-to-spread-active.svg);
 @arrow-orderbook-top-icon: url(/img/icons/arrow-orderbook-top.svg);
 @arrow-orderbook-down-icon: url(/img/icons/arrow-orderbook-down.svg);
 @empty-icon: url(/img/icons/icon-empty.svg);