diff --git a/src/public/app/services/note_list_renderer.js b/src/public/app/services/note_list_renderer.js
index ee2aac0d1..639eda944 100644
--- a/src/public/app/services/note_list_renderer.js
+++ b/src/public/app/services/note_list_renderer.js
@@ -3,6 +3,7 @@ import contentRenderer from "./content_renderer.js";
 import froca from "./froca.js";
 import attributeRenderer from "./attribute_renderer.js";
 import libraryLoader from "./library_loader.js";
+import treeService from "./tree.js";
 
 const TPL = `
 <div class="note-list">
@@ -294,7 +295,7 @@ class NoteListRenderer {
                     .append($expander)
                     .append($('<span class="note-icon">').addClass(note.getIcon()))
                     .append(this.viewType === 'grid'
-                        ? $('<span class="note-book-title">').text(note.title)
+                        ? $('<span class="note-book-title">').text(await treeService.getNoteTitle(note.noteId, this.parentNote.noteId))
                         : (await linkService.createLink(notePath, {showTooltip: false, showNotePath: this.showNotePath}))
                             .addClass("note-book-title")
                     )
diff --git a/src/public/app/services/tree.js b/src/public/app/services/tree.js
index 858aa4804..48aac1323 100644
--- a/src/public/app/services/tree.js
+++ b/src/public/app/services/tree.js
@@ -217,7 +217,7 @@ async function getNoteTitle(noteId, parentNoteId = null) {
         if (branchId) {
             const branch = froca.getBranch(branchId);
 
-            if (branch && branch.prefix) {
+            if (branch?.prefix) {
                 title = `${branch.prefix} - ${title}`;
             }
         }