diff --git a/src/public/javascripts/services/note_detail_book.js b/src/public/javascripts/services/note_detail_book.js
index c83ba91c6..44f47d302 100644
--- a/src/public/javascripts/services/note_detail_book.js
+++ b/src/public/javascripts/services/note_detail_book.js
@@ -3,7 +3,8 @@ import linkService from "./link.js";
 import utils from "./utils.js";
 import treeCache from "./tree_cache.js";
 import renderService from "./render.js";
-import zoom from "./zoom.js";
+import protectedSessionHolder from "./protected_session_holder.js";
+import protectedSessionService from "./protected_session.js";
 
 const MIN_ZOOM_LEVEL = 1;
 const MAX_ZOOM_LEVEL = 6;
@@ -128,14 +129,16 @@ class NoteDetailBook {
 
     async renderIntoElement(note, $container) {
         for (const childNote of await note.getChildNotes()) {
+            const type = this.getRenderingType(childNote);
+
             const $card = $('<div class="note-book-card">')
                 .attr('data-note-id', childNote.noteId)
                 .css("flex-basis", ZOOMS[this.zoomLevel].width)
-                .addClass("type-" + childNote.type)
+                .addClass("type-" + type)
                 .append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(childNote.noteId, null, false)))
                 .append($('<div class="note-book-content">')
                     .css("max-height", ZOOMS[this.zoomLevel].height)
-                    .append(await this.getNoteContent(childNote)));
+                    .append(await this.getNoteContent(type, childNote)));
 
             const childCount = childNote.getChildNoteIds().length;
 
@@ -153,8 +156,8 @@ class NoteDetailBook {
         }
     }
 
-    async getNoteContent(note) {
-        if (note.type === 'text') {
+    async getNoteContent(type, note) {
+        if (type === 'text') {
             const fullNote = await server.get('notes/' + note.noteId);
 
             const $content = $("<div>").html(fullNote.content);
@@ -166,7 +169,7 @@ class NoteDetailBook {
                 return $content;
             }
         }
-        else if (note.type === 'code') {
+        else if (type === 'code') {
             const fullNote = await server.get('notes/' + note.noteId);
 
             if (fullNote.content.trim() === "") {
@@ -175,10 +178,10 @@ class NoteDetailBook {
 
             return $("<pre>").text(fullNote.content);
         }
-        else if (note.type === 'image') {
+        else if (type === 'image') {
             return $("<img>").attr("src", `api/images/${note.noteId}/${note.title}`);
         }
-        else if (note.type === 'file') {
+        else if (type === 'file') {
             function getFileUrl() {
                 // electron needs absolute URL so we extract current host, port, protocol
                 return utils.getHost() + "/api/notes/" + note.noteId + "/download";
@@ -207,13 +210,22 @@ class NoteDetailBook {
                 .append(' &nbsp; ')
                 .append($openButton);
         }
-        else if (note.type === 'render') {
+        else if (type === 'render') {
             const $el = $('<div>');
 
             await renderService.render(note, $el, this.ctx);
 
             return $el;
         }
+        else if (type === 'protected-session') {
+            const $button = $(`<button class="btn btn-sm"><span class="jam jam-door"></span> Enter protected session</button>`)
+                .click(protectedSessionService.enterProtectedSession);
+
+            return $("<div>")
+                .append("<div>This note is protected and to access it you need to enter password.</div>")
+                .append("<br/>")
+                .append($button);
+        }
         else {
             return "<em>Content of this note cannot be displayed in the book format</em>";
         }
@@ -228,6 +240,21 @@ class NoteDetailBook {
         return this.isAutoBook() ? 3 : 1;
     }
 
+    getRenderingType(childNote) {
+        let type = childNote.type;
+
+        if (childNote.isProtected) {
+            if (protectedSessionHolder.isProtectedSessionAvailable()) {
+                protectedSessionHolder.touchProtectedSession();
+            }
+            else {
+                type = 'protected-session';
+            }
+        }
+
+        return type;
+    }
+
     getContent() {}
 
     show() {
diff --git a/src/public/javascripts/services/utils.js b/src/public/javascripts/services/utils.js
index 70451c145..d806bcc3a 100644
--- a/src/public/javascripts/services/utils.js
+++ b/src/public/javascripts/services/utils.js
@@ -202,7 +202,7 @@ function closeActiveDialog() {
 }
 
 function isHtmlEmpty(html) {
-    return $(html).text().trim().length === 0 && !html.toLowerCase().includes('<img');
+    return $("<div>").html(html).text().trim().length === 0 && !html.toLowerCase().includes('<img');
 }
 
 export default {
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index f30af6751..059c0d734 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -825,10 +825,16 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     overflow: hidden;
 }
 
-.note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content {
+.note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content, .note-book-card.type-protected-session .note-book-content {
     display: flex;
     align-items: center;
     justify-content: center;
+    text-align: center;
+}
+
+.note-book-card.type-image .note-book-content img {
+    max-width: 100%;
+    max-height: 100%;
 }
 
 .note-book-title {