diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 2a56f43eb..7e34aff23 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -38,7 +38,6 @@ body.experimental-feature-new-layout {
     }
 
     .title-row {
-        margin-top: 2em;
         margin-left: 12px;
 
         .note-icon-widget {
@@ -55,13 +54,22 @@ body.experimental-feature-new-layout {
         gap: 0.25em;
         margin: 0;
         list-style-type: none;
-        margin-bottom: 2em;
 
         span.value {
             font-weight: 500;
         }
     }
 
+    .note-split.view-mode-default {
+        .title-row {
+            margin-top: 2em;
+        }
+
+        .title-details {
+            margin-bottom: 2em;
+        }
+    }
+
     .scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)) {
         .title-row,
         .title-details {
diff --git a/apps/client/src/widgets/note_wrapper.ts b/apps/client/src/widgets/note_wrapper.ts
index f3c61859d..d743d9ffa 100644
--- a/apps/client/src/widgets/note_wrapper.ts
+++ b/apps/client/src/widgets/note_wrapper.ts
@@ -62,6 +62,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
 
         this.$widget.addClass(utils.getNoteTypeClass(note.type));
         this.$widget.addClass(utils.getMimeTypeClass(note.mime));
+        this.$widget.addClass(`view-mode-${this.noteContext?.viewScope?.viewMode ?? "default"}`);
         this.$widget.toggleClass(["bgfx", "options"], note.isOptions());
         this.$widget.toggleClass("protected", note.isProtected);