diff --git a/src/components/MainSideBar/TopGradient.js b/src/components/MainSideBar/TopGradient.js
new file mode 100644
index 00000000..3cf0e899
--- /dev/null
+++ b/src/components/MainSideBar/TopGradient.js
@@ -0,0 +1,19 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+const TopGradientBox = styled.div`
+  width: 100%;
+  height: 80px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(#ffffff 40%, rgba(255, 255, 255, 0));
+  z-index: 2;
+  pointer-events: none;
+`
+
+const el = <TopGradientBox />
+
+export default () => el
diff --git a/src/components/MainSideBar/index.js b/src/components/MainSideBar/index.js
index 2ec2ba3a..28c8c5c8 100644
--- a/src/components/MainSideBar/index.js
+++ b/src/components/MainSideBar/index.js
@@ -32,6 +32,7 @@ import IconExchange from 'icons/Exchange'
 
 import AccountListItem from './AccountListItem'
 import AddAccountButton from './AddAccountButton'
+import TopGradient from './TopGradient'
 
 const mapStateToProps = state => ({
   accounts: accountsSelector(state),
@@ -84,6 +85,7 @@ class MainSideBar extends PureComponent<Props> {
 
     return (
       <Box relative bg="white" style={{ width: 230 }}>
+        <TopGradient />
         <GrowScroll>
           <Space of={70} />
           <SideBarList title={t('app:sidebar.menu')}>