diff --git a/src/public/images/icons/shield-off.png b/src/public/images/icons/shield-off.png
new file mode 100644
index 000000000..31c0ab921
Binary files /dev/null and b/src/public/images/icons/shield-off.png differ
diff --git a/src/public/images/icons/shield.png b/src/public/images/icons/shield.png
new file mode 100644
index 000000000..4892e57c7
Binary files /dev/null and b/src/public/images/icons/shield.png differ
diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js
index fa287b599..3d2dcc21d 100644
--- a/src/public/javascripts/services/note_detail.js
+++ b/src/public/javascripts/services/note_detail.js
@@ -22,6 +22,7 @@ const $noteDetailComponents = $(".note-detail-component");
 const $protectButton = $("#protect-button");
 const $unprotectButton = $("#unprotect-button");
 const $noteDetailWrapper = $("#note-detail-wrapper");
+const $noteDetailComponentWrapper = $("#note-detail-component-wrapper");
 const $noteIdDisplay = $("#note-id-display");
 const $labelList = $("#label-list");
 const $labelListInner = $("#label-list-inner");
@@ -116,9 +117,9 @@ async function saveNoteIfChanged() {
 function setNoteBackgroundIfProtected(note) {
     const isProtected = !!note.isProtected;
 
-    $noteDetailWrapper.toggleClass("protected", isProtected);
-    $protectButton.toggle(!isProtected);
-    $unprotectButton.toggle(isProtected);
+    $noteDetailComponentWrapper.toggleClass("protected", isProtected);
+    $protectButton.toggleClass("active", isProtected);
+    $unprotectButton.toggleClass("active", !isProtected);
 }
 
 let isNewNoteCreated = false;
@@ -150,6 +151,8 @@ async function loadNoteDetail(noteId) {
 
     $noteIdDisplay.html(noteId);
 
+    setNoteBackgroundIfProtected(currentNote);
+
     await handleProtectedSession();
 
     $noteDetailWrapper.show();
@@ -170,7 +173,6 @@ async function loadNoteDetail(noteId) {
         noteChangeDisabled = false;
     }
 
-    setNoteBackgroundIfProtected(currentNote);
     treeService.setBranchBackgroundBasedOnProtectedStatus(noteId);
 
     // after loading new note make sure editor is scrolled to the top
diff --git a/src/public/javascripts/services/protected_session.js b/src/public/javascripts/services/protected_session.js
index b31695347..2f6fba0d9 100644
--- a/src/public/javascripts/services/protected_session.js
+++ b/src/public/javascripts/services/protected_session.js
@@ -105,6 +105,10 @@ async function enterProtectedSessionOnServer(password) {
 }
 
 async function protectNoteAndSendToServer() {
+    if (noteDetailService.getCurrentNote().isProtected) {
+        return;
+    }
+
     await ensureProtectedSession(true, true);
 
     const note = noteDetailService.getCurrentNote();
@@ -118,6 +122,10 @@ async function protectNoteAndSendToServer() {
 }
 
 async function unprotectNoteAndSendToServer() {
+    if (!noteDetailService.getCurrentNote().isProtected) {
+        return;
+    }
+
     await ensureProtectedSession(true, true);
 
     const note = noteDetailService.getCurrentNote();
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 4ce0b0cd3..a18d68425 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -51,7 +51,7 @@
     overflow: auto;
 }
 
-#note-detail-wrapper.protected, #note-detail-wrapper.protected .CodeMirror {
+#note-detail-component-wrapper.protected, #note-detail-component-wrapper.protected .CodeMirror {
     background-color: #eee;
 }
 
@@ -138,10 +138,6 @@ span.fancytree-active:not(.fancytree-focused) .fancytree-title {
     width: 24px;
 }
 
-#protect-button, #unprotect-button {
-    display: none;
-}
-
 .ui-widget-content a:not(.ui-tabs-anchor) {
     color: #337ab7 !important;
 }
@@ -361,10 +357,11 @@ div.ui-tooltip {
 
 .btn {
     border-color: #ddd;
+    background-color: #eee;
 }
 
 .btn.active {
-    background-color: #ddd;
+    background-color: #ccc;
 }
 
 #note-path-list .current a {
diff --git a/src/views/index.ejs b/src/views/index.ejs
index a781c1df5..e22f59013 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -105,15 +105,18 @@
 
           <span id="note-id-display" title="Note ID"></span>
 
-          <a title="Protect the note so that password will be required to view the note"
-             class="icon-action"
-             id="protect-button"
-             style="display: none; background: url('images/icons/lock.png')"></a>
+          <div>
+            <span style="font-size: smaller">Protected:</span>
 
-          <a title="Unprotect note so that password will not be required to access this note in the future"
-             class="icon-action"
-             id="unprotect-button"
-             style="display: none; background: url('images/icons/unlock.png')"></a>
+            <div class="btn-group btn-group-xs">
+              <button type="button" class="btn" id="protect-button" title="Protected note can be viewed and edited only after entering password">
+                <img src="images/icons/shield.png"/>
+              </button>
+              <button type="button" class="btn" id="unprotect-button" title="Not protected note can be viewed without entering password">
+                <img src="images/icons/shield-off.png"/>
+              </button>
+            </div>
+          </div>
 
           &nbsp; &nbsp;