diff --git a/artifacts/tx-os/src/pages/notes.tsx b/artifacts/tx-os/src/pages/notes.tsx
index c2743787..82bafdf2 100644
--- a/artifacts/tx-os/src/pages/notes.tsx
+++ b/artifacts/tx-os/src/pages/notes.tsx
@@ -777,14 +777,32 @@ export default function NotesPage() {
           The sticky header above keeps the controls pinned. */}
       <div className="flex-1 flex flex-col">
 
-      {/* Task #514: composer moved INSIDE the main content column so it
-          shares the same row (and same top edge) as the FoldersRail on
-          desktop. On narrow widths the row stacks (`flex-col`); the
-          `order-*` classes keep the composer ABOVE the folders rail in
-          that case so the original mobile reading order is preserved.
-          Hidden conditions (Inbox/Sent/Archived/Shared) are unchanged
-          — see `showTopComposer`. */}
-      <div className="flex-1 px-4 py-6 max-w-6xl w-full mx-auto flex flex-col md:flex-row gap-6">
+      {/* Task #514: switched the folders+content row from flex to CSS
+          grid so the top composer can sit at the SAME vertical
+          position as the FoldersRail on desktop, while still
+          preserving the original mobile reading order
+          (composer → rail → content). Pure flex can't do both: on
+          desktop we need composer + content stacked in the right
+          column, on mobile we need composer above the rail —
+          incompatible with a single flex direction. Grid solves it
+          with explicit `col-start` / `row-start` placement on md+
+          and natural `order-*` flow on mobile. Hidden-composer views
+          (Inbox / Sent / Archived / Shared-with-me) collapse cleanly
+          to the original two-cell layout via conditional row-span
+          / row-start. */}
+      <div className="flex-1 px-4 py-6 max-w-6xl w-full mx-auto grid gap-4 md:gap-x-6 md:gap-y-4 md:grid-cols-[14rem_minmax(0,1fr)]">
+        {showTopComposer && (
+          <div
+            className="order-1 md:order-none md:col-start-2 md:row-start-1"
+            data-testid="notes-top-composer"
+          >
+            <Composer
+              labels={labels}
+              folderSelection={folderSelection}
+              onSend={(id) => setSendForNoteId(id)}
+            />
+          </div>
+        )}
         {showFolders && (
           <FoldersRail
             folders={folders}
@@ -794,19 +812,16 @@ export default function NotesPage() {
             totalCount={notes.length}
             onShareFolder={(f) => setFolderShareFor(f)}
             mode={view === "active" && folderSelection.kind === "all" ? "chips-only" : "rail"}
-            className={showTopComposer ? "order-2 md:order-1" : undefined}
+            className={`order-2 md:order-none md:col-start-1 md:row-start-1${
+              showTopComposer ? " md:row-span-2" : ""
+            }`}
           />
         )}
-        <div className={`flex-1 min-w-0${showTopComposer ? " order-1 md:order-2" : ""}`}>
-        {showTopComposer && (
-          <div className="mb-4" data-testid="notes-top-composer">
-            <Composer
-              labels={labels}
-              folderSelection={folderSelection}
-              onSend={(id) => setSendForNoteId(id)}
-            />
-          </div>
-        )}
+        <div
+          className={`min-w-0 order-3 md:order-none md:col-start-2 ${
+            showTopComposer ? "md:row-start-2" : "md:row-start-1"
+          }`}
+        >
         {view === "active" && folderSelection.kind === "shared-folder" && (
           // Recipient view of a folder shared with the current user. Rendered
           // before the regular active branch so we never mount the Composer