diff --git a/ui/src/styles/dreams.css b/ui/src/styles/dreams.css
index 36bfc21e591..bc779627504 100644
--- a/ui/src/styles/dreams.css
+++ b/ui/src/styles/dreams.css
@@ -686,14 +686,30 @@
 
 /* ---- Diary header ---- */
 
+.dreams-diary__chrome {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  width: min(100%, 680px);
+  max-width: 100%;
+  min-width: 0;
+  padding-bottom: 14px;
+  margin-bottom: 10px;
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--bg) 98%, transparent) 0%,
+      color-mix(in oklab, var(--bg) 94%, transparent) 72%,
+      color-mix(in oklab, var(--bg) 0%, transparent) 100%
+    );
+}
+
 .dreams-diary__header {
   display: flex;
   align-items: center;
   gap: 16px;
-  margin-bottom: 20px;
+  margin-bottom: 14px;
   flex-shrink: 0;
-  position: relative;
-  z-index: 2;
 }
 
 .dreams-diary__title {
@@ -773,7 +789,7 @@
 .dreams-diary__daychips {
   display: flex;
   gap: 6px;
-  margin: 0 0 24px;
+  margin: 0;
   width: min(100%, 680px);
   max-width: 100%;
   min-width: 0;
@@ -782,8 +798,6 @@
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding-bottom: 2px;
-  position: relative;
-  z-index: 2;
 }
 
 .dreams-diary__daychips::-webkit-scrollbar {
diff --git a/ui/src/ui/views/dreaming.ts b/ui/src/ui/views/dreaming.ts
index a0babd20ffb..1cda9f91ca2 100644
--- a/ui/src/ui/views/dreaming.ts
+++ b/ui/src/ui/views/dreaming.ts
@@ -728,37 +728,39 @@ function renderDiarySection(props: DreamingProps) {
 
   return html`
     <section class="dreams-diary">
-      <div class="dreams-diary__header">
-        <span class="dreams-diary__title">${t("dreaming.diary.title")}</span>
-        <button
-          class="btn btn--subtle btn--sm"
-          ?disabled=${props.modeSaving || props.dreamDiaryLoading}
-          @click=${() => {
-            _diaryPage = 0;
-            props.onRefreshDiary();
-          }}
-        >
-          ${props.dreamDiaryLoading ? t("dreaming.diary.reloading") : t("dreaming.diary.reload")}
-        </button>
-      </div>
+      <div class="dreams-diary__chrome">
+        <div class="dreams-diary__header">
+          <span class="dreams-diary__title">${t("dreaming.diary.title")}</span>
+          <button
+            class="btn btn--subtle btn--sm"
+            ?disabled=${props.modeSaving || props.dreamDiaryLoading}
+            @click=${() => {
+              _diaryPage = 0;
+              props.onRefreshDiary();
+            }}
+          >
+            ${props.dreamDiaryLoading ? t("dreaming.diary.reloading") : t("dreaming.diary.reload")}
+          </button>
+        </div>
 
-      <!-- Simple day chips -->
-      <div class="dreams-diary__daychips">
-        ${reversed.map(
-          (e) => html`
-            <button
-              class="dreams-diary__day-chip ${e.page === page
-                ? "dreams-diary__day-chip--active"
-                : ""}"
-              @click=${() => {
-                setDiaryPage(e.page);
-                props.onRequestUpdate?.();
-              }}
-            >
-              ${formatDiaryChipLabel(e.date)}
-            </button>
-          `,
-        )}
+        <!-- Simple day chips -->
+        <div class="dreams-diary__daychips">
+          ${reversed.map(
+            (e) => html`
+              <button
+                class="dreams-diary__day-chip ${e.page === page
+                  ? "dreams-diary__day-chip--active"
+                  : ""}"
+                @click=${() => {
+                  setDiaryPage(e.page);
+                  props.onRequestUpdate?.();
+                }}
+              >
+                ${formatDiaryChipLabel(e.date)}
+              </button>
+            `,
+          )}
+        </div>
       </div>
 
       <article class="dreams-diary__entry" key="${page}">