diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 26ac1bf8..520c0b90 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -276,11 +276,14 @@ class MarkdownNoteDetail extends React.Component {
             {(() => {
               const faClassName=`fa ${this.getToggleLockButton()}`
               const lockButtonComponent =
-                <button styleName='info-right-button'
+                <button styleName='control-lockButton'
                   onFocus={(e) => this.handleFocus(e)}
                   onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
                 >
                   <i className={faClassName}/>
+                  <span styleName='control-lockButton-tooltip'>
+                  {this.state.isLocked ? 'Unlock' : 'Lock'}
+                  </span>
                 </button>
               return (
                 this.state.isLockButtonShown ? lockButtonComponent : ''
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index e23296a4..b5ebc26a 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -9,6 +9,34 @@
   background-color $ui-noteDetail-backgroundColor
   box-shadow $note-detail-box-shadow
 
+.control-lockButton
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding-top 7px
+  border none
+  color $ui-button-color
+  fill $ui-button-color
+  background-color transparent
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover .control-lockButton-tooltip
+    opacity 1
+
+.control-lockButton-tooltip
+  tooltip()
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
 .body
   absolute left right
   left $note-detail-left-margin
@@ -24,3 +52,13 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
+
+  .control-lockButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:active
+      border-color $ui-dark-button--active-backgroundColor
+
+  .control-lockButton-tooltip
+    darkTooltip()
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index eeffd78a..a579d148 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -38,7 +38,7 @@ $info-margin-under-border = 27px
   margin 13px 2px
   padding 0
   border-radius 17px
-  &:hover .info-right-button-tooltip
+  &:hover .info-left-button-tooltip
     opacity 1
   &:focus
     border-color $ui-favorite-star-button-color