diff --git a/artifacts/tx-os/src/components/notes/folders-rail.tsx b/artifacts/tx-os/src/components/notes/folders-rail.tsx
index 1d2a69f2..5089c207 100644
--- a/artifacts/tx-os/src/components/notes/folders-rail.tsx
+++ b/artifacts/tx-os/src/components/notes/folders-rail.tsx
@@ -124,6 +124,10 @@ interface Props {
   //                 chips. Folder rows are owned by the FoldersBrowser in the
   //                 main content so test ids don't collide.
   mode?: "rail" | "chips-only";
+  // Extra classes appended to the root <aside>. Used by the Notes page
+  // to control flex `order-*` so the composer stacks above the rail on
+  // narrow widths (Task #514).
+  className?: string;
 }
 
 export function FoldersRail({
@@ -134,6 +138,7 @@ export function FoldersRail({
   totalCount,
   onShareFolder,
   mode = "rail",
+  className,
 }: Props) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
@@ -261,7 +266,7 @@ export function FoldersRail({
     <aside
       // Mobile: horizontal chip row above the notes grid.
       // Desktop (md+): fixed sidebar to the start of the grid.
-      className="w-full md:w-56 shrink-0 flex md:block gap-1 md:gap-0 md:space-y-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0"
+      className={`w-full md:w-56 shrink-0 flex md:block gap-1 md:gap-0 md:space-y-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0${className ? ` ${className}` : ""}`}
       data-testid="notes-folders-rail"
     >
       <div className="hidden md:block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground px-2 mb-1">
diff --git a/artifacts/tx-os/src/pages/notes.tsx b/artifacts/tx-os/src/pages/notes.tsx
index ddcbd5ef..437dd360 100644
--- a/artifacts/tx-os/src/pages/notes.tsx
+++ b/artifacts/tx-os/src/pages/notes.tsx
@@ -515,10 +515,13 @@ export default function NotesPage() {
   const pinned = filteredNotes.filter((n) => n.isPinned);
   const others = filteredNotes.filter((n) => !n.isPinned);
 
-  // Composer is rendered above the folders area so the user can capture
-  // a quick note from anywhere on the active "My Notes" view without
-  // first drilling into a folder. It is hidden on read-only / non-owner
-  // views (Inbox, Sent, Archived, Shared-with-me).
+  // Composer is rendered inside the main content column of the
+  // folders+content row so its top edge aligns with the FoldersRail
+  // (Task #514). On narrow widths the row stacks (`flex-col`) and the
+  // composer is forced above the rail via `order-*` classes so the
+  // user can still capture a quick note without scrolling past the
+  // rail. It is hidden on read-only / non-owner views (Inbox, Sent,
+  // Archived, Shared-with-me).
   const showTopComposer =
     view === "active" && folderSelection.kind !== "shared-folder";
 
@@ -775,11 +778,12 @@ export default function NotesPage() {
       <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.
-          Previously it was a standalone full-width block above this
-          row, which made the rail visibly start lower than the
-          composer. Hidden conditions (Inbox/Sent/Archived/Shared) are
-          unchanged — see `showTopComposer`. */}
+          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">
         {showFolders && (
           <FoldersRail
@@ -790,9 +794,10 @@ export default function NotesPage() {
             totalCount={notes.length}
             onShareFolder={(f) => setFolderShareFor(f)}
             mode={view === "active" && folderSelection.kind === "all" ? "chips-only" : "rail"}
+            className="order-2 md:order-1"
           />
         )}
-        <div className="flex-1 min-w-0">
+        <div className="flex-1 min-w-0 order-1 md:order-2">
         {showTopComposer && (
           <div className="mb-4" data-testid="notes-top-composer">
             <Composer