diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index f981144b4..1e7fa1a0d 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -50,7 +50,7 @@
 }
 
 .note-book-header .rendered-note-attributes:before {
-    content: "\\00a0\\00a0";
+    content: "\00a0\00a0";
 }
 
 .note-book-header .note-icon {
diff --git a/apps/client/src/widgets/collections/legacy/ListView.tsx b/apps/client/src/widgets/collections/legacy/ListView.tsx
index cc08685cc..1bf98c3de 100644
--- a/apps/client/src/widgets/collections/legacy/ListView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListView.tsx
@@ -10,6 +10,7 @@ import { Pager, usePagination } from "../Pagination";
 import tree from "../../../services/tree";
 import link from "../../../services/link";
 import { t } from "../../../services/i18n";
+import attribute_renderer from "../../../services/attribute_renderer";
 
 export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
     const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@@ -18,7 +19,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
 
     return (
         <div class="note-list list-view">
-            <div class="note-list-wrapper">
+            { noteIds.length > 0 && <div class="note-list-wrapper">
                 <Pager {...pagination} />
 
                 <div class="note-list-container use-tn-links">
@@ -28,7 +29,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds }: ViewModeProps) {
                 </div>
 
                 <Pager {...pagination} />
-            </div>
+            </div>}
         </div>
     );
 }
@@ -71,6 +72,8 @@ function ListNoteCard({ note, parentNote, expand }: { note: FNote, parentNote: F
 
                 <Icon className="note-icon" icon={note.getIcon()} />
                 <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={note.type === "search"} />
+                <NoteAttributes note={note} />
+
                 {isExpanded && <>
                     <NoteContent note={note} />
                     <NoteChildren note={note} parentNote={parentNote} />
@@ -98,12 +101,24 @@ function GridNoteCard({ note, parentNote }: { note: FNote, parentNote: FNote })
             <h5 className="note-book-header">
                 <Icon className="note-icon" icon={note.getIcon()} />
                 <span className="note-book-title">{noteTitle}</span>
+                <NoteAttributes note={note} />
             </h5>
             <NoteContent note={note} trim />
         </div>
     )
 }
 
+function NoteAttributes({ note }: { note: FNote }) {
+    const ref = useRef<HTMLSpanElement>(null);
+    useEffect(() => {
+        attribute_renderer.renderNormalAttributes(note).then(({$renderedAttributes}) => {
+            ref.current?.replaceChildren(...$renderedAttributes);
+        });
+    }, [ note ]);
+
+    return <span className="note-list-attributes" ref={ref} />
+}
+
 function NoteContent({ note, trim }: { note: FNote, trim?: boolean }) {
     const contentRef = useRef<HTMLDivElement>(null);
 
diff --git a/apps/client/src/widgets/view_widgets/list_or_grid_view.ts b/apps/client/src/widgets/view_widgets/list_or_grid_view.ts
index 28f2cb866..2ca6b246a 100644
--- a/apps/client/src/widgets/view_widgets/list_or_grid_view.ts
+++ b/apps/client/src/widgets/view_widgets/list_or_grid_view.ts
@@ -15,12 +15,6 @@ class ListOrGridView extends ViewMode<{}> {
     private pageSize?: number;
     private highlightRegex?: RegExp | null;
 
-    constructor(viewType: ViewTypeOptions, args: ViewModeArgs) {
-        super(args, viewType);
-        this.$noteList = $(TPL);
-        this.$noteList.addClass(`${this.viewType}-view`);
-    }
-
     async renderList() {
         if (this.filteredNoteIds.length === 0 || !this.page || !this.pageSize) {
             this.$noteList.hide();
@@ -42,8 +36,6 @@ class ListOrGridView extends ViewMode<{}> {
     }
 
     async renderNote(note: FNote, expand: boolean = false) {
-        const { $renderedAttributes } = await attributeRenderer.renderNormalAttributes(note);
-
         if (this.highlightRegex) {
             const Mark = new (await import("mark.js")).default($card.find(".note-book-title")[0]);
             Mark.markRegExp(this.highlightRegex, {
@@ -55,10 +47,6 @@ class ListOrGridView extends ViewMode<{}> {
 
     async renderNoteContent(note: FNote) {
         try {
-            const { $renderedContent, type } = await contentRenderer.getRenderedContent(note, {
-                trim: this.viewType === "grid"
-            });
-
             if (this.highlightRegex) {
                 const Mark = new (await import("mark.js")).default($renderedContent[0]);
                 Mark.markRegExp(this.highlightRegex, {