diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 8d3acea9..6b7b8fd4 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -357,10 +357,10 @@ class MarkdownNoteDetail extends React.Component {
 
         <div styleName='mode-tab'>
           <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('SPLIT')}>
-            <img styleName='item-star' src='../resources/icon/icon-mode-split-on.svg' />
+            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
           </div>
           <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('EDITOR_PREVIEW')}>
-            <img styleName='item-star' src='../resources/icon/icon-mode-markdown-off.svg' />
+            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
           </div>
         </div>
 
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index c2c189f9..7032e36f 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -39,7 +39,7 @@
   display flex
   align-items center
   div
-    width 100px
+    width 40px
     height 100%
     background-color #f9f9f9
     display flex
@@ -73,7 +73,27 @@ body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()
 
+  .mode-tab
+    border 1px solid #444444
+    div
+      background-color $ui-dark-noteDetail-backgroundColor
+      &:first-child
+        border-right 1px solid #444444
+    .active
+      background-color #3A404C
+      box-shadow 2px 0px 7px #444444
+
 body[data-theme="solarized-dark"]
   .root
     border-left 1px solid $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
\ No newline at end of file
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .mode-tab
+    border 1px solid #586E75
+    div
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      &:first-child
+        border-right 1px solid #586E75
+    .active
+      background-color #002B36
+      box-shadow 2px 0px 7px #222222
\ No newline at end of file
diff --git a/resources/icon/icon-mode-markdown-off-active.svg b/resources/icon/icon-mode-markdown-off-active.svg
new file mode 100644
index 00000000..0159836b
--- /dev/null
+++ b/resources/icon/icon-mode-markdown-off-active.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-mode-markdown-off</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Artboard-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1478.000000, -372.000000)" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Group" filter="url(#filter-1)" transform="translate(1336.000000, 363.000000)" stroke="#1EC38B" stroke-width="1.55555556">
+            <g id="icon-mode-markdown-off" transform="translate(143.000000, 10.000000)">
+                <polygon id="Shape" points="10.1111111 0 14 3.88888889 3.88888889 14 0 14 0 10.1111111"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-mode-split-on-active.svg b/resources/icon/icon-mode-split-on-active.svg
new file mode 100644
index 00000000..338d2bd7
--- /dev/null
+++ b/resources/icon/icon-mode-split-on-active.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-mode-split-on</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Artboard-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1378.000000, -372.000000)">
+        <g id="Group" filter="url(#filter-1)" transform="translate(1336.000000, 363.000000)">
+            <g id="icon-mode-split-on" transform="translate(40.000000, 7.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="sidebar" transform="translate(3.000000, 3.000000)" stroke="#1EC38B" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.55555556">
+                    <rect id="Rectangle-path" x="0" y="0" width="14" height="14" rx="1.55555556"></rect>
+                    <path d="M5.66666667,0 L5.66666667,14" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/resources/icon/icon-mode-split-on.svg b/resources/icon/icon-mode-split-on.svg
index 338d2bd7..c212d7f2 100644
--- a/resources/icon/icon-mode-split-on.svg
+++ b/resources/icon/icon-mode-split-on.svg
@@ -17,7 +17,7 @@
         <g id="Group" filter="url(#filter-1)" transform="translate(1336.000000, 363.000000)">
             <g id="icon-mode-split-on" transform="translate(40.000000, 7.000000)">
                 <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
-                <g id="sidebar" transform="translate(3.000000, 3.000000)" stroke="#1EC38B" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.55555556">
+                <g id="sidebar" transform="translate(3.000000, 3.000000)" stroke="#C7C7C7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.55555556">
                     <rect id="Rectangle-path" x="0" y="0" width="14" height="14" rx="1.55555556"></rect>
                     <path d="M5.66666667,0 L5.66666667,14" id="Shape"></path>
                 </g>