diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index ef609c1d0d..d393c2496b 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -100,50 +100,111 @@
     overflow: auto;
 }
 
-.note-expander {
-    font-size: x-large;
-    cursor: pointer;
-    opacity: .65;
-}
-
 .note-list-pager {
     text-align: center;
 }
 
-.note-list.list-view .note-path {
-    margin-left: 0.5em;
-    vertical-align: middle;
-    opacity: 0.5;
+@keyframes note-preview-show {
+    from {
+        opacity: 0;
+    } to {
+        opacity: 1;
+    }
 }
 
-:root .list-view-card {
+.nested-note-list {
     --card-nested-section-indent: 40px;
-}
 
-.note-list h5 {
-    display: flex;
-    align-items: center;
-    font-size: 1em;
-    margin: 0;
+    h5 {
+        display: flex;
+        align-items: center;
+        font-size: 1em;
+        font-weight: normal;
+        margin: 0;
 
-    .tn-icon {
-        color: var(--left-pane-icon-color);
-        margin-inline-end: 8px;
-        font-size: 1.2em;
+        .note-expander {
+            font-size: x-large;
+            cursor: pointer;
+            opacity: .65;
+            margin-inline-end: 4px;
+        }
+
+        .tn-icon {
+            color: var(--left-pane-icon-color);
+            margin-inline-end: 8px;
+            font-size: 1.2em;
+        }
+
+        .note-book-title {
+            color: inherit;
+            font-weight: normal;
+        }
+
+        .note-path {
+            margin-left: 0.5em;
+            vertical-align: middle;
+            opacity: 0.5;
+            order: -1;
+        }
+
+        .note-list-attributes {
+            flex-grow: 1;
+            text-align: right;
+            font-size: .75em;
+            opacity: .75;
+        }
     }
 
-    .note-book-title {
-        color: inherit;
-    }
+    .note-book-content {
+        --background: rgba(0, 0, 0, .2);
+        outline: 1px solid var(--background);
+        border-radius: 8px;
+        background-color: var(--background);
+        overflow: hidden;
+        user-select: text;
+        animation: note-preview-show .25s ease-out;
+        will-change: opacity;
 
-    .note-list-attributes {
-        flex-grow: 1;
-        text-align: right;
-        font-size: .75em;
-        opacity: .75;
+        > .rendered-content > *:last-child {
+            margin-bottom: 0;
+        }
+
+        &.type-text {
+            padding: 8px 24px;
+
+            .ck-content > *:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &.type-protectedSession {
+            padding: 20px;
+        }
+
+        &.type-image {
+            padding: 0;
+        }
+
+        &.type-pdf {
+            iframe {
+                height: 50vh;
+            }
+
+            .file-footer {
+                padding: 8px;
+            }
+        }
+
+        &.type-webView {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            min-height: 50vh;
+        }
     }
 }
 
+
 .note-content-preview:has(.note-book-content:empty) {
     display: none;
 }
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 6bf77c644f..a1bbd6916d 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -15,6 +15,7 @@ import NoteLink from "../../react/NoteLink";
 import { ViewModeProps } from "../interface";
 import { Pager, usePagination } from "../Pagination";
 import { filterChildNotes, useFilteredNoteIds } from "./utils";
+import { JSX } from "preact/jsx-runtime";
 
 export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
     const expandDepth = useExpansionDepth(note);
@@ -34,7 +35,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
             { noteIds.length > 0 && <div class="note-list-wrapper">
                 {!hasCollectionProperties && <Pager {...pagination} />}
 
-                <Card className="list-view-card">
+                <Card className="nested-note-list">
                     {pageNotes?.map(childNote => (
                         <ListNoteCard
                             key={childNote.noteId}
@@ -94,32 +95,42 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
     // Reset expand state if switching to another note, or if user manually toggled expansion state.
     useEffect(() => setExpanded(currentLevel <= expandDepth), [ note, currentLevel, expandDepth ]);
 
-    const children = <>
-        {isExpanded && <>
+    let subSections: JSX.Element | undefined = undefined;
+    if (isExpanded) {
+        subSections = <>
             <CardSection className="note-content-preview">
-                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList includeArchivedNotes={includeArchived} />
+                <NoteContent note={note}
+                             highlightedTokens={highlightedTokens}
+                             noChildrenList
+                             includeArchivedNotes={includeArchived} />
             </CardSection>
-            <NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} currentLevel={currentLevel} expandDepth={expandDepth} includeArchived={includeArchived} />
-        </>}
-    </>
 
+            <NoteChildren note={note}
+                          parentNote={parentNote}
+                          highlightedTokens={highlightedTokens}
+                          currentLevel={currentLevel}
+                          expandDepth={expandDepth}
+                          includeArchived={includeArchived} />
+        </>
+    }
+            
     return (
         <CardSection
-            className={`no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
-            subSections={children}
+            className={`nested-note-list-item no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
+            subSections={subSections}
             childrenVisible={isExpanded}
             hasAction
             onAction={() => setExpanded(!isExpanded)}
             data-note-id={note.noteId}
         >
             <h5 className="">
-                <span
-                    className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`}
-                    onClick={(e) => {setExpanded(!isExpanded); e.stopPropagation();}}
-                />
-
+                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`} />
                 <Icon className="note-icon" icon={note.getIcon()} />
-                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} />
+                <NoteLink className="note-book-title"
+                          notePath={notePath}
+                          noPreview
+                          showNotePath={parentNote.type === "search"}
+                          highlightedTokens={highlightedTokens} />
                 <NoteAttributes note={note} />
             </h5>
         </CardSection>
@@ -198,7 +209,8 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
             });
     }, [ note, highlightedTokens ]);
 
-    return <div ref={contentRef} className="note-book-content" />;
+    return <div ref={contentRef} className="note-book-content">
+        </div>;
 }
 
 function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expandDepth, includeArchived }: {
diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css
index 53fd889b21..4a5b53f82a 100644
--- a/apps/client/src/widgets/react/Card.css
+++ b/apps/client/src/widgets/react/Card.css
@@ -24,7 +24,7 @@
         }
 
         &.tn-card-section-nested {
-            padding-left: calc(8px + (var(--card-nested-section-indent) * var(--tn-card-section-nesting-level)));
+            padding-left: calc(var(--card-nested-section-indent) * var(--tn-card-section-nesting-level));
             background-color: color-mix(in srgb, var(--card-background-color) calc(100% / (var(--tn-card-section-nesting-level) + 1)) , transparent);
         }
 
diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 34eea094af..c717ee5433 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -27,16 +27,16 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
     const nestingLevel = (parentContext && parentContext.nestingLevel + 1) ?? 0;
 
     return <>
-        <section className={clsx(["tn-card-section", {
+        <section className={clsx("tn-card-section", props.className, {
                     "tn-card-section-nested": nestingLevel > 0,
-                    "tn-action": props?.hasAction}
-                 ], props.className)}
-                 style={"--tn-card-section-nesting-level: " + nestingLevel}
-                 onClick={() => {props.onAction?.()}}>
+                    "tn-action": props.hasAction
+                 })}
+                 style={{"--tn-card-section-nesting-level": nestingLevel}}
+                 onClick={props.onAction}>
             {props.children}
         </section>
 
-        {props?.childrenVisible &&
+        {props.childrenVisible &&
             <CardSectionContext.Provider value={{nestingLevel}}>
                 {props.subSections}
             </CardSectionContext.Provider>