diff --git a/apps/roam/src/components/DiscourseNodeMenu.tsx b/apps/roam/src/components/DiscourseNodeMenu.tsx
index 46fdcc8ed..f5e569aea 100644
--- a/apps/roam/src/components/DiscourseNodeMenu.tsx
+++ b/apps/roam/src/components/DiscourseNodeMenu.tsx
@@ -4,11 +4,11 @@ import {
   Popover,
   Position,
   Button,
-  InputGroup,
   getKeyCombo,
   IKeyCombo,
   Icon,
 } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
 import React, {
   useCallback,
   useEffect,
@@ -496,7 +496,8 @@ export const NodeMenuTriggerComponent = ({
   const shortcut = useMemo(() => comboToString(comboKey), [comboKey]);
 
   return (
-    <InputGroup
+    <SettingKeycapInput
+      wide
       inputRef={inputRef}
       placeholder={
         isActive ? "Press keys" : (placeholder ?? "Click to set trigger")
diff --git a/apps/roam/src/components/DiscourseNodeSearchMenu.tsx b/apps/roam/src/components/DiscourseNodeSearchMenu.tsx
index 53b66ddbd..55a9dd9c4 100644
--- a/apps/roam/src/components/DiscourseNodeSearchMenu.tsx
+++ b/apps/roam/src/components/DiscourseNodeSearchMenu.tsx
@@ -11,9 +11,9 @@ import {
   Popover,
   Position,
   Button,
-  InputGroup,
   Intent,
 } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
 import ReactDOM from "react-dom";
 import getUids from "roamjs-components/dom/getUids";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
@@ -712,7 +712,7 @@ export const NodeSearchMenuTriggerSetting = ({
     setPersonalSetting([PERSONAL_KEYS.nodeSearchMenuTrigger], trigger);
   };
   return (
-    <InputGroup
+    <SettingKeycapInput
       value={nodeSearchTrigger}
       onChange={handleNodeSearchTriggerChange}
       placeholder="Click to set trigger"
diff --git a/apps/roam/src/components/ExportOptions.tsx b/apps/roam/src/components/ExportOptions.tsx
index 04226933f..fbc2fd469 100644
--- a/apps/roam/src/components/ExportOptions.tsx
+++ b/apps/roam/src/components/ExportOptions.tsx
@@ -40,6 +40,7 @@ const ExportOptions = ({
           order={1}
           uid={exportSettings.removeSpecialCharacters.uid}
           parentUid={parentUid}
+          compact
         />
 
         <GlobalFlagPanel
@@ -53,6 +54,7 @@ const ExportOptions = ({
           order={3}
           uid={exportSettings.optsRefs.uid}
           parentUid={parentUid}
+          compact
         />
         <GlobalFlagPanel
           title="resolve block embeds"
@@ -65,6 +67,7 @@ const ExportOptions = ({
           order={4}
           uid={exportSettings.optsEmbeds.uid}
           parentUid={parentUid}
+          compact
         />
 
         <GlobalFlagPanel
@@ -78,6 +81,7 @@ const ExportOptions = ({
           order={6}
           uid={exportSettings.appendRefNodeContext.uid}
           parentUid={parentUid}
+          compact
         />
       </div>
       <div className="link-type-select-wrapper">
@@ -93,6 +97,7 @@ const ExportOptions = ({
           options={["alias", "wikilinks", "roam url"]}
           uid={exportSettings.linkType.uid}
           parentUid={parentUid}
+          compact
         />
       </div>
       <GlobalNumberPanel
@@ -106,6 +111,7 @@ const ExportOptions = ({
         order={0}
         uid={exportSettings.maxFilenameLength.uid}
         parentUid={parentUid}
+        compact
       />
       <GlobalMultiTextPanel
         title="frontmatter"
@@ -118,6 +124,7 @@ const ExportOptions = ({
         order={2}
         uid={exportSettings.frontmatter.uid}
         parentUid={parentUid}
+        compact
       />
     </div>
   );
diff --git a/apps/roam/src/components/settings/KeyboardShortcutInput.tsx b/apps/roam/src/components/settings/KeyboardShortcutInput.tsx
index 2c7314495..4defbc331 100644
--- a/apps/roam/src/components/settings/KeyboardShortcutInput.tsx
+++ b/apps/roam/src/components/settings/KeyboardShortcutInput.tsx
@@ -1,14 +1,8 @@
 import React, { useState, useCallback, useMemo, useRef } from "react";
 import { OnloadArgs } from "roamjs-components/types";
-import {
-  InputGroup,
-  Button,
-  getKeyCombo,
-  IKeyCombo,
-  Label,
-} from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
-import { settingAnchor } from "~/components/settings/utils/settingAnchor";
+import { Button, getKeyCombo, IKeyCombo } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
+import SettingItemRow from "~/components/settings/components/SettingItemRow";
 import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 import { setPersonalSetting } from "~/components/settings/utils/accessors";
 import { comboToString } from "~/components/DiscourseNodeMenu";
@@ -93,26 +87,32 @@ const KeyboardShortcutInput = ({
   }, [extensionAPI, settingKey, blockPropKey]);
 
   return (
-    <Label {...settingAnchor([blockPropKey])}>
-      {label}
-      <Description description={description} />
-      <InputGroup
-        inputRef={inputRef}
-        placeholder={isActive ? "Press keys" : placeholder}
-        value={shortcut}
-        onKeyDown={handleKeyDown}
-        onFocus={() => setIsActive(true)}
-        onBlur={() => setIsActive(false)}
-        rightElement={
-          <Button
-            hidden={!comboKey.key}
-            icon="remove"
-            onClick={handleClear}
-            minimal
-          />
-        }
-      />
-    </Label>
+    <SettingItemRow
+      label={label}
+      description={description}
+      scope="personal"
+      settingKeys={[blockPropKey]}
+      control={(controlId) => (
+        <SettingKeycapInput
+          wide
+          id={controlId}
+          inputRef={inputRef}
+          placeholder={isActive ? "Press keys" : placeholder}
+          value={shortcut}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsActive(true)}
+          onBlur={() => setIsActive(false)}
+          rightElement={
+            <Button
+              hidden={!comboKey.key}
+              icon="remove"
+              onClick={handleClear}
+              minimal
+            />
+          }
+        />
+      )}
+    />
   );
 };
 
diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx
index 4f0672a86..b277bd0ec 100644
--- a/apps/roam/src/components/settings/NodeConfig.tsx
+++ b/apps/roam/src/components/settings/NodeConfig.tsx
@@ -1,14 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
 import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes";
 import { getSubTree } from "roamjs-components/util";
-import Description from "~/components/settings/SettingsDescription";
-import {
-  Label,
-  InputGroup,
-  ControlGroup,
-  Tooltip,
-  Icon,
-} from "@blueprintjs/core";
+import { InputGroup, ControlGroup, Tooltip, Icon } from "@blueprintjs/core";
 import DiscourseNodeSpecification from "./DiscourseNodeSpecification";
 import DiscourseNodeAttributes from "./DiscourseNodeAttributes";
 import DiscourseNodeCanvasSettings, {
@@ -34,7 +27,8 @@ import {
 } from "./components/BlockPropSettingPanels";
 import { ROAM_DOCS, withDocsLink } from "./utils/docs";
 import { SettingsGroup } from "./components/SettingsHeadings";
-import SettingsDrillDownRow from "./components/SettingsDrillDownRow";
+import SettingItemRow from "./components/SettingItemRow";
+import SettingDrillDownSummary from "./components/SettingDrillDownSummary";
 import { useSettingsNav } from "./navigation/SettingsNavContext";
 import { nodeConfigSegmentIds } from "./utils/settingsNavigation";
 
@@ -116,38 +110,41 @@ const DiscourseNodeColorSetting = ({
           </span>
         </div>
       )}
-      <Label>
-        Color
-        <Description description="Changes the color of tags and canvas nodes" />
-        <ControlGroup>
-          <InputGroup
-            style={{ width: 120 }}
-            type={"color"}
-            value={color}
-            onChange={(e) => {
-              const nextColor = e.target.value;
-              const colorValue = nextColor.replace("#", ""); // remove hash to not create roam link
-              setColor(nextColor);
-              persistColorAfterPause(colorValue);
-            }}
-          />
-          <Tooltip content={color ? "Unset" : "Color not set"}>
-            <Icon
-              className={"ml-2 align-middle opacity-80"}
-              icon={color ? "delete" : "info-sign"}
-              onClick={() => {
-                if (colorWriteTimeoutRef.current) {
-                  window.clearTimeout(colorWriteTimeoutRef.current);
-                  colorWriteTimeoutRef.current = null;
-                }
-                pendingColorRef.current = null;
-                setColor("");
-                persistColorValue("");
+      <SettingItemRow
+        label="Color"
+        description="Changes the color of tags and canvas nodes"
+        scope="global"
+        control={
+          <ControlGroup>
+            <InputGroup
+              style={{ width: 120 }}
+              type={"color"}
+              value={color}
+              onChange={(e) => {
+                const nextColor = e.target.value;
+                const colorValue = nextColor.replace("#", ""); // remove hash to not create roam link
+                setColor(nextColor);
+                persistColorAfterPause(colorValue);
               }}
             />
-          </Tooltip>
-        </ControlGroup>
-      </Label>
+            <Tooltip content={color ? "Unset" : "Color not set"}>
+              <Icon
+                className={"ml-2 align-middle opacity-80"}
+                icon={color ? "delete" : "info-sign"}
+                onClick={() => {
+                  if (colorWriteTimeoutRef.current) {
+                    window.clearTimeout(colorWriteTimeoutRef.current);
+                    colorWriteTimeoutRef.current = null;
+                  }
+                  pendingColorRef.current = null;
+                  setColor("");
+                  persistColorValue("");
+                }}
+              />
+            </Tooltip>
+          </ControlGroup>
+        }
+      />
     </>
   );
 };
@@ -293,11 +290,16 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
   return (
     <div className="dg-settings-node-page">
       <SettingsGroup title="Identity">
-        <SettingsDrillDownRow
-          title="Index"
+        <SettingItemRow
+          label="Index"
           description={`The saved list of all ${node.text} pages \u2014 which pages appear and which columns show.`}
-          buttonText={`See all ${node.text} nodes`}
-          onClick={() => nav.push(nodeConfigSegmentIds.index)}
+          scope="global"
+          control={
+            <SettingDrillDownSummary
+              summary={`See all ${node.text} nodes`}
+              onClick={() => nav.push(nodeConfigSegmentIds.index)}
+            />
+          }
         />
         <DiscourseNodeTextPanel
           nodeType={node.type}
@@ -368,14 +370,19 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
           parentUid={node.type}
           uid={shortcutUid}
         />
-        <SettingsDrillDownRow
-          title="Template"
+        <SettingItemRow
+          label="Template"
           description={withDocsLink(
             `The template that auto fills ${node.text} page when generated.`,
             ROAM_DOCS.creatingNodes,
           )}
-          buttonText="Edit template"
-          onClick={() => nav.push(nodeConfigSegmentIds.template)}
+          scope="global"
+          control={
+            <SettingDrillDownSummary
+              summary="Edit template"
+              onClick={() => nav.push(nodeConfigSegmentIds.template)}
+            />
+          }
         />
       </SettingsGroup>
 
@@ -394,26 +401,28 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
       </SettingsGroup>
 
       <SettingsGroup title="Legacy">
-        <Label>
-          Specification
-          <Description
-            description={withDocsLink(
-              `The conditions specified to identify a ${node.text} node.`,
-              ROAM_DOCS.grammarNodes,
-            )}
-          />
-          <DiscourseNodeSpecification
-            node={node}
-            parentUid={specificationUid}
-            parentSetEnabled={(isSpecificationEnabled) => {
-              validate({
-                tag: tagValue,
-                format: formatValue,
-                isSpecificationEnabled,
-              });
-            }}
-          />
-        </Label>
+        <SettingItemRow
+          label="Specification"
+          description={withDocsLink(
+            `The conditions specified to identify a ${node.text} node.`,
+            ROAM_DOCS.grammarNodes,
+          )}
+          scope="global"
+          controlPlacement="below"
+          control={
+            <DiscourseNodeSpecification
+              node={node}
+              parentUid={specificationUid}
+              parentSetEnabled={(isSpecificationEnabled) => {
+                validate({
+                  tag: tagValue,
+                  format: formatValue,
+                  isSpecificationEnabled,
+                });
+              }}
+            />
+          }
+        />
       </SettingsGroup>
 
       {isSyncEnabled() && (
diff --git a/apps/roam/src/components/settings/PageGroupPanel.tsx b/apps/roam/src/components/settings/PageGroupPanel.tsx
index 584cb83b5..c68bf84fc 100644
--- a/apps/roam/src/components/settings/PageGroupPanel.tsx
+++ b/apps/roam/src/components/settings/PageGroupPanel.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useCallback } from "react";
-import { Label, Button, Intent, Tag, InputGroup } from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
+import { Button, Intent, Tag, InputGroup } from "@blueprintjs/core";
 import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
 import createBlock from "roamjs-components/writes/createBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getAllPageNames from "roamjs-components/queries/getAllPageNames";
 import { type PageGroup } from "~/utils/getSuggestiveModeConfigSettings";
 import { setGlobalSetting } from "~/components/settings/utils/accessors";
+import SettingItemRow from "./components/SettingItemRow";
 import {
   GLOBAL_KEYS,
   SUGGESTIVE_MODE_KEYS,
@@ -129,107 +129,109 @@ const PageGroupsPanel = ({
   }, []);
 
   return (
-    <Label>
-      Page groups
-      <Description
-        description={
-          "Organize pages into named groups that will be can be selected when generating discourse suggestions."
-        }
-      />
-      <div className="flex flex-col gap-2">
-        <div
-          className="flex items-baseline gap-2"
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && newGroupName) {
-              e.preventDefault();
-              e.stopPropagation();
-              void addGroup(newGroupName);
-            }
-          }}
-        >
-          <InputGroup
-            key={groupKey}
-            value={newGroupName}
-            onChange={(e) => handleNewGroupNameChange(e.target.value)}
-            placeholder="Page group name"
-          />
-          <Button
-            icon="plus"
-            small
-            minimal
-            disabled={
-              !newGroupName || pageGroups.some((g) => g.name === newGroupName)
-            }
-            onClick={() => void addGroup(newGroupName)}
-          />
-        </div>
+    <SettingItemRow
+      label="Page groups"
+      description="Organize pages into named groups that will be can be selected when generating discourse suggestions."
+      scope="global"
+      controlPlacement="below"
+      control={
+        <div className="flex flex-col gap-2">
+          <div
+            className="flex items-baseline gap-2"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && newGroupName) {
+                e.preventDefault();
+                e.stopPropagation();
+                void addGroup(newGroupName);
+              }
+            }}
+          >
+            <InputGroup
+              key={groupKey}
+              value={newGroupName}
+              onChange={(e) => handleNewGroupNameChange(e.target.value)}
+              placeholder="Page group name"
+            />
+            <Button
+              icon="plus"
+              small
+              minimal
+              disabled={
+                !newGroupName || pageGroups.some((g) => g.name === newGroupName)
+              }
+              onClick={() => void addGroup(newGroupName)}
+            />
+          </div>
 
-        {Object.keys(pageGroups).length === 0 && (
-          <div className="text-sm italic text-gray-500">No groups added.</div>
-        )}
-        {pageGroups.map((group) => (
-          <div key={group.uid} className="rounded border p-2">
-            <div className="mb-1 flex items-center justify-between">
-              <span className="font-semibold">{group.name}</span>
-              <Button
-                icon="trash"
-                minimal
-                small
-                intent={Intent.DANGER}
-                onClick={() => void removeGroup(group.uid)}
-              />
-            </div>
-            <div className="flex flex-wrap items-baseline gap-2">
-              <div
-                className="flex-0 min-w-[160px]"
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && getPageInput(group.uid)) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    void addPageToGroup(group.uid, getPageInput(group.uid));
+          {Object.keys(pageGroups).length === 0 && (
+            <div className="text-sm italic text-gray-500">No groups added.</div>
+          )}
+          {pageGroups.map((group) => (
+            <div key={group.uid} className="rounded border p-2">
+              <div className="mb-1 flex items-center justify-between">
+                <span className="font-semibold">{group.name}</span>
+                <Button
+                  icon="trash"
+                  minimal
+                  small
+                  intent={Intent.DANGER}
+                  onClick={() => void removeGroup(group.uid)}
+                />
+              </div>
+              <div className="flex flex-wrap items-baseline gap-2">
+                <div
+                  className="flex-0 min-w-[160px]"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && getPageInput(group.uid)) {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      void addPageToGroup(group.uid, getPageInput(group.uid));
+                    }
+                  }}
+                >
+                  <AutocompleteInput
+                    key={getAutocompleteKey(group.uid)}
+                    value={getPageInput(group.uid)}
+                    placeholder="Add page…"
+                    setValue={(v) => setPageInput(group.uid, v)}
+                    options={getAllPageNames()}
+                    maxItemsDisplayed={50}
+                  />
+                </div>
+                <Button
+                  icon="plus"
+                  small
+                  minimal
+                  onClick={() =>
+                    void addPageToGroup(group.uid, getPageInput(group.uid))
+                  }
+                  disabled={
+                    !getPageInput(group.uid) ||
+                    group.pages.some((p) => p.name === getPageInput(group.uid))
                   }
-                }}
-              >
-                <AutocompleteInput
-                  key={getAutocompleteKey(group.uid)}
-                  value={getPageInput(group.uid)}
-                  placeholder="Add page…"
-                  setValue={(v) => setPageInput(group.uid, v)}
-                  options={getAllPageNames()}
-                  maxItemsDisplayed={50}
                 />
               </div>
-              <Button
-                icon="plus"
-                small
-                minimal
-                onClick={() =>
-                  void addPageToGroup(group.uid, getPageInput(group.uid))
-                }
-                disabled={
-                  !getPageInput(group.uid) ||
-                  group.pages.some((p) => p.name === getPageInput(group.uid))
-                }
-              />
+              {group.pages.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-1">
+                  {group.pages.map((p) => (
+                    <Tag
+                      key={p.uid}
+                      onRemove={() =>
+                        void removePageFromGroup(group.uid, p.uid)
+                      }
+                      round
+                      minimal
+                    >
+                      {p.name}
+                    </Tag>
+                  ))}
+                </div>
+              )}
             </div>
-            {group.pages.length > 0 && (
-              <div className="mt-2 flex flex-wrap gap-1">
-                {group.pages.map((p) => (
-                  <Tag
-                    key={p.uid}
-                    onRemove={() => void removePageFromGroup(group.uid, p.uid)}
-                    round
-                    minimal
-                  >
-                    {p.name}
-                  </Tag>
-                ))}
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </Label>
+          ))}
+        </div>
+      }
+    />
   );
 };
 
diff --git a/apps/roam/src/components/settings/PreferencesGeneral.tsx b/apps/roam/src/components/settings/PreferencesGeneral.tsx
index c5eb08706..8af6537ec 100644
--- a/apps/roam/src/components/settings/PreferencesGeneral.tsx
+++ b/apps/roam/src/components/settings/PreferencesGeneral.tsx
@@ -3,7 +3,6 @@ import { OnloadArgs } from "roamjs-components/types";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import { Label, Dialog, Button, Intent, Classes } from "@blueprintjs/core";
 import posthog from "posthog-js";
-import Description from "~/components/settings/SettingsDescription";
 import { NodeMenuTriggerComponent } from "~/components/DiscourseNodeMenu";
 import { NodeSearchMenuTriggerSetting } from "../DiscourseNodeSearchMenu";
 import {
@@ -24,7 +23,7 @@ import { GLOBAL_KEYS, PERSONAL_KEYS } from "./utils/settingKeys";
 import { setPersonalSetting, type SettingsSnapshot } from "./utils/accessors";
 import { useLegacyConfigBlocks } from "./utils/useLegacyConfigBlocks";
 import { SettingsGroup } from "./components/SettingsHeadings";
-import { settingAnchor } from "./utils/settingAnchor";
+import SettingItemRow from "./components/SettingItemRow";
 import { ROAM_DOCS, withDocsLink } from "./utils/docs";
 
 const enum RelationMigrationDialog {
@@ -112,14 +111,18 @@ const PreferencesGeneral = ({
 
   return (
     <div className="flex flex-col gap-4 p-1">
-      <Label {...settingAnchor([PERSONAL_KEYS.nodeSearchMenuTrigger])}>
-        Node search menu trigger
-        <Description description="Set the trigger character for the node search menu." />
-        <NodeSearchMenuTriggerSetting
-          onloadArgs={onloadArgs}
-          initialValue={personalSettings[PERSONAL_KEYS.nodeSearchMenuTrigger]}
-        />
-      </Label>
+      <SettingItemRow
+        label="Node search menu trigger"
+        description="Set the trigger character for the node search menu."
+        scope="personal"
+        settingKeys={[PERSONAL_KEYS.nodeSearchMenuTrigger]}
+        control={
+          <NodeSearchMenuTriggerSetting
+            onloadArgs={onloadArgs}
+            initialValue={personalSettings[PERSONAL_KEYS.nodeSearchMenuTrigger]}
+          />
+        }
+      />
       <PersonalFlagPanel
         title="Text selection popup"
         description={withDocsLink(
@@ -190,22 +193,24 @@ const PreferencesGeneral = ({
           initialValue={globalSettings[GLOBAL_KEYS.trigger]}
           {...legacyBlocks.trigger}
         />
-        <Label {...settingAnchor([PERSONAL_KEYS.personalNodeMenuTrigger])}>
-          Personal override
-          <Description
-            description={withDocsLink(
-              "Override the global trigger for the discourse node menu.",
-              ROAM_DOCS.creatingNodes,
-            )}
-          />
-          <NodeMenuTriggerComponent
-            extensionAPI={extensionAPI}
-            initialValue={
-              personalSettings[PERSONAL_KEYS.personalNodeMenuTrigger]
-            }
-            placeholder=""
-          />
-        </Label>
+        <SettingItemRow
+          label="Personal override"
+          description={withDocsLink(
+            "Override the global trigger for the discourse node menu.",
+            ROAM_DOCS.creatingNodes,
+          )}
+          scope="personal"
+          settingKeys={[PERSONAL_KEYS.personalNodeMenuTrigger]}
+          control={
+            <NodeMenuTriggerComponent
+              extensionAPI={extensionAPI}
+              initialValue={
+                personalSettings[PERSONAL_KEYS.personalNodeMenuTrigger]
+              }
+              placeholder=""
+            />
+          }
+        />
       </SettingsGroup>
       <Dialog
         isOpen={
diff --git a/apps/roam/src/components/settings/QuerySettings.tsx b/apps/roam/src/components/settings/QuerySettings.tsx
index 8b68e6f37..9805359ca 100644
--- a/apps/roam/src/components/settings/QuerySettings.tsx
+++ b/apps/roam/src/components/settings/QuerySettings.tsx
@@ -1,10 +1,7 @@
 import React from "react";
 import { OnloadArgs } from "roamjs-components/types";
-import { Label } from "@blueprintjs/core";
 import { DEFAULT_PAGE_SIZE_KEY, HIDE_METADATA_KEY } from "~/data/userSettings";
-import Description from "~/components/settings/SettingsDescription";
 import DefaultFilters from "./DefaultFilters";
-import { settingAnchor } from "./utils/settingAnchor";
 import {
   PersonalFlagPanel,
   PersonalNumberPanel,
@@ -17,6 +14,7 @@ import {
 import { type SettingsSnapshot } from "./utils/accessors";
 import posthog from "posthog-js";
 import { ROAM_DOCS, withDocsLink } from "./utils/docs";
+import SettingItemRow from "./components/SettingItemRow";
 
 const QuerySettings = ({
   extensionAPI,
@@ -70,21 +68,22 @@ const QuerySettings = ({
           void extensionAPI.settings.set("query-pages", values);
         }}
       />
-      <Label
-        {...settingAnchor([PERSONAL_KEYS.query, QUERY_KEYS.defaultFilters])}
-      >
-        Default filters
-        <Description
-          description={withDocsLink(
-            "Any filters that should be applied to your results by default",
-            ROAM_DOCS.querying,
-          )}
-        />
-        <DefaultFilters
-          extensionAPI={extensionAPI}
-          defaultFilters={querySettings[QUERY_KEYS.defaultFilters]}
-        />
-      </Label>
+      <SettingItemRow
+        label="Default filters"
+        description={withDocsLink(
+          "Any filters that should be applied to your results by default",
+          ROAM_DOCS.querying,
+        )}
+        scope="personal"
+        settingKeys={[PERSONAL_KEYS.query, QUERY_KEYS.defaultFilters]}
+        controlPlacement="below"
+        control={
+          <DefaultFilters
+            extensionAPI={extensionAPI}
+            defaultFilters={querySettings[QUERY_KEYS.defaultFilters]}
+          />
+        }
+      />
     </div>
   );
 };
diff --git a/apps/roam/src/components/settings/SettingsDescription.tsx b/apps/roam/src/components/settings/SettingsDescription.tsx
index 587695ec2..1359495aa 100644
--- a/apps/roam/src/components/settings/SettingsDescription.tsx
+++ b/apps/roam/src/components/settings/SettingsDescription.tsx
@@ -1,10 +1,13 @@
 import React from "react";
-import Description from "roamjs-components/components/Description";
 
-type SettingsDescriptionProps = React.ComponentProps<typeof Description>;
-
-const SettingsDescription = (
-  props: SettingsDescriptionProps,
-): React.ReactElement => <Description {...props} interactionKind="hover" />;
+/** Inline, not a hover popover: the popover dismissed before its doc links could be
+ *  clicked (ENG-2080). Kept for rows not yet on SettingItemRow. */
+const SettingsDescription = ({
+  description,
+}: {
+  description: React.ReactNode;
+}): React.ReactElement => (
+  <div className="text-sm font-normal text-gray-500">{description}</div>
+);
 
 export default SettingsDescription;
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
index 09d8125f3..7ddc8f6c0 100644
--- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
+++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
@@ -6,17 +6,17 @@ import React, {
   useEffect,
 } from "react";
 import {
-  Checkbox,
   InputGroup,
-  Label,
   NumericInput,
   HTMLSelect,
   Button,
+  Switch,
   Tag,
   TextArea,
 } from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
-import { settingAnchor } from "~/components/settings/utils/settingAnchor";
+import SettingItemRow, {
+  type SettingScope,
+} from "~/components/settings/components/SettingItemRow";
 import getFirstChildUidByBlockUid from "roamjs-components/queries/getFirstChildUidByBlockUid";
 import createBlock from "roamjs-components/writes/createBlock";
 import updateBlock from "roamjs-components/writes/updateBlock";
@@ -54,6 +54,13 @@ type FlagSetter = (keys: string[], value: boolean) => void;
 type NumberSetter = (keys: string[], value: number) => void;
 
 type MultiTextSetter = (keys: string[], value: string[]) => void;
+
+type RowPresentationProps = {
+  scope?: SettingScope;
+  /** Tighter row for narrow hosts such as the Export dialog. */
+  compact?: boolean;
+};
+
 type BaseTextPanelProps = {
   title: string;
   description: React.ReactNode;
@@ -65,7 +72,8 @@ type BaseTextPanelProps = {
   error?: string;
   disabled?: boolean;
   onChange?: (value: string) => void;
-} & RoamBlockSyncProps;
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 type BaseFlagPanelProps = {
   title: string;
@@ -77,7 +85,8 @@ type BaseFlagPanelProps = {
   disabled?: boolean;
   onBeforeChange?: (checked: boolean) => Promise<boolean>;
   onChange?: (checked: boolean) => void;
-} & RoamBlockSyncProps;
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 type BaseNumberPanelProps = {
   title: string;
@@ -88,7 +97,8 @@ type BaseNumberPanelProps = {
   min?: number;
   max?: number;
   onChange?: (value: number) => void;
-} & RoamBlockSyncProps;
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 type BaseSelectPanelProps = {
   title: string;
@@ -97,7 +107,8 @@ type BaseSelectPanelProps = {
   setter: TextSetter;
   options: string[];
   initialValue: string;
-} & RoamBlockSyncProps;
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 type BaseMultiTextPanelProps = {
   title: string;
@@ -106,20 +117,8 @@ type BaseMultiTextPanelProps = {
   setter: MultiTextSetter;
   initialValue: string[];
   onChange?: (values: string[]) => void;
-} & RoamBlockSyncProps;
-
-const SettingTitle = ({
-  title,
-  description,
-}: {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-}) => (
-  <>
-    {title}
-    {description ? <Description description={description} /> : null}
-  </>
-);
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 const DEBOUNCE_MS = 250;
 const SHORT_DEBOUNCE_MS = 100;
@@ -220,6 +219,8 @@ const BaseTextPanel = ({
   uid,
   order,
   blockKey,
+  scope,
+  compact,
 }: BaseTextPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? "");
   const errorRef = useRef(error);
@@ -248,11 +249,18 @@ const BaseTextPanel = ({
   };
 
   return (
-    <div className="flex flex-col" {...settingAnchor(settingKeys)}>
-      <Label>
-        <SettingTitle title={title} description={description} />
-        {multiline ? (
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      compact={compact}
+      settingKeys={settingKeys}
+      error={error}
+      controlPlacement={multiline ? "below" : "trailing"}
+      control={(controlId) =>
+        multiline ? (
           <TextArea
+            id={controlId}
             value={value}
             onChange={handleChange}
             placeholder={placeholder || initialValue}
@@ -262,17 +270,16 @@ const BaseTextPanel = ({
           />
         ) : (
           <InputGroup
+            id={controlId}
             value={value}
             onChange={handleChange}
             placeholder={placeholder || initialValue}
             disabled={disabled}
+            className="w-56"
           />
-        )}
-      </Label>
-      {error && (
-        <div className="mt-1 text-sm font-medium text-red-600">{error}</div>
-      )}
-    </div>
+        )
+      }
+    />
   );
 };
 
@@ -290,6 +297,8 @@ const BaseFlagPanel = ({
   uid: initialBlockUid,
   order,
   blockKey,
+  scope,
+  compact,
 }: BaseFlagPanelProps) => {
   const [internalValue, setInternalValue] = useState(
     () => initialValue ?? false,
@@ -333,14 +342,22 @@ const BaseFlagPanel = ({
   };
 
   return (
-    <div {...settingAnchor(settingKeys)}>
-      <Checkbox
-        checked={value ?? internalValue}
-        onChange={(e) => void handleChange(e)}
-        disabled={disabled}
-        labelElement={<SettingTitle title={title} description={description} />}
-      />
-    </div>
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      compact={compact}
+      settingKeys={settingKeys}
+      control={(controlId) => (
+        <Switch
+          id={controlId}
+          checked={value ?? internalValue}
+          onChange={(e) => void handleChange(e)}
+          disabled={disabled}
+          className="mb-0"
+        />
+      )}
+    />
   );
 };
 
@@ -357,6 +374,8 @@ const BaseNumberPanel = ({
   uid,
   order,
   blockKey,
+  scope,
+  compact,
 }: BaseNumberPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? 0);
   const syncToBlock = useLegacyBlockSync({
@@ -379,16 +398,25 @@ const BaseNumberPanel = ({
   };
 
   return (
-    <Label {...settingAnchor(settingKeys)}>
-      <SettingTitle title={title} description={description} />
-      <NumericInput
-        value={value}
-        onValueChange={handleChange}
-        min={min}
-        max={max}
-        fill
-      />
-    </Label>
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      compact={compact}
+      settingKeys={settingKeys}
+      control={(controlId) => (
+        <div className="w-24">
+          <NumericInput
+            id={controlId}
+            value={value}
+            onValueChange={handleChange}
+            min={min}
+            max={max}
+            fill
+          />
+        </div>
+      )}
+    />
   );
 };
 
@@ -403,6 +431,8 @@ const BaseSelectPanel = ({
   uid,
   order,
   blockKey,
+  scope,
+  compact,
 }: BaseSelectPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? options[0]);
   const syncToBlock = useLegacyBlockSync({
@@ -424,15 +454,21 @@ const BaseSelectPanel = ({
   };
 
   return (
-    <Label {...settingAnchor(settingKeys)}>
-      <SettingTitle title={title} description={description} />
-      <HTMLSelect
-        value={value}
-        onChange={handleChange}
-        fill
-        options={options}
-      />
-    </Label>
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      compact={compact}
+      settingKeys={settingKeys}
+      control={(controlId) => (
+        <HTMLSelect
+          id={controlId}
+          value={value}
+          onChange={handleChange}
+          options={options}
+        />
+      )}
+    />
   );
 };
 
@@ -447,6 +483,8 @@ const BaseMultiTextPanel = ({
   uid: initialBlockUid,
   order,
   blockKey,
+  scope,
+  compact,
 }: BaseMultiTextPanelProps) => {
   const [values, setValues] = useState<string[]>(() => initialValue ?? []);
   const [inputValue, setInputValue] = useState("");
@@ -523,32 +561,42 @@ const BaseMultiTextPanel = ({
   };
 
   return (
-    <Label {...settingAnchor(settingKeys)}>
-      <SettingTitle title={title} description={description} />
-      <div className="flex gap-2">
-        <InputGroup
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Add new item"
-          className="flex-grow"
-        />
-        <Button
-          icon="plus"
-          onClick={() => void handleAdd()}
-          disabled={!inputValue.trim()}
-        />
-      </div>
-      {values.length > 0 && (
-        <div className="mt-2 flex flex-wrap gap-1">
-          {values.map((v, i) => (
-            <Tag key={i} onRemove={() => handleRemove(i)} minimal>
-              {v}
-            </Tag>
-          ))}
-        </div>
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      compact={compact}
+      settingKeys={settingKeys}
+      controlPlacement="below"
+      control={(controlId) => (
+        <>
+          <div className="flex gap-2">
+            <InputGroup
+              id={controlId}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Add new item"
+              className="flex-grow"
+            />
+            <Button
+              icon="plus"
+              onClick={() => void handleAdd()}
+              disabled={!inputValue.trim()}
+            />
+          </div>
+          {values.length > 0 && (
+            <div className="mt-2 flex flex-wrap gap-1">
+              {values.map((v, i) => (
+                <Tag key={i} onRemove={() => handleRemove(i)} minimal>
+                  {v}
+                </Tag>
+              ))}
+            </div>
+          )}
+        </>
       )}
-    </Label>
+    />
   );
 };
 
@@ -604,6 +652,7 @@ export const FeatureFlagPanel = ({
   uid,
   order,
   blockKey,
+  scope = "global",
 }: {
   title: string;
   description: React.ReactNode;
@@ -613,7 +662,8 @@ export const FeatureFlagPanel = ({
   disabled?: boolean;
   onBeforeEnable?: () => Promise<boolean>;
   onAfterChange?: (checked: boolean) => void;
-} & RoamBlockSyncProps) => {
+} & RoamBlockSyncProps &
+  RowPresentationProps) => {
   const handleBeforeChange:
     | ((checked: boolean) => Promise<boolean>)
     | undefined = onBeforeEnable
@@ -629,6 +679,7 @@ export const FeatureFlagPanel = ({
     <BaseFlagPanel
       title={title}
       blockKey={blockKey}
+      scope={scope}
       description={description}
       settingKeys={[featureKey as string]}
       setter={featureFlagSetter}
@@ -644,50 +695,90 @@ export const FeatureFlagPanel = ({
   );
 };
 
-export const GlobalTextPanel = (props: TextWrapperProps) => (
-  <BaseTextPanel {...props} {...globalAccessors.text} />
+/** Scope comes from the wrapper because it binds the setter that decides where a value
+ *  lands; a call site that overrides `setter` must pass `scope` too. */
+export const GlobalTextPanel = ({
+  scope = "global",
+  ...props
+}: TextWrapperProps) => (
+  <BaseTextPanel {...props} scope={scope} {...globalAccessors.text} />
 );
 
-export const GlobalFlagPanel = (props: FlagWrapperProps) => (
-  <BaseFlagPanel {...props} {...globalAccessors.flag} />
+export const GlobalFlagPanel = ({
+  scope = "global",
+  ...props
+}: FlagWrapperProps) => (
+  <BaseFlagPanel {...props} scope={scope} {...globalAccessors.flag} />
 );
 
-export const GlobalNumberPanel = (props: NumberWrapperProps) => (
-  <BaseNumberPanel {...props} {...globalAccessors.number} />
+export const GlobalNumberPanel = ({
+  scope = "global",
+  ...props
+}: NumberWrapperProps) => (
+  <BaseNumberPanel {...props} scope={scope} {...globalAccessors.number} />
 );
 
-export const GlobalSelectPanel = (props: SelectWrapperProps) => (
-  <BaseSelectPanel {...props} {...globalAccessors.text} />
+export const GlobalSelectPanel = ({
+  scope = "global",
+  ...props
+}: SelectWrapperProps) => (
+  <BaseSelectPanel {...props} scope={scope} {...globalAccessors.text} />
 );
 
-export const GlobalMultiTextPanel = (props: MultiTextWrapperProps) => (
-  <BaseMultiTextPanel {...props} {...globalAccessors.multiText} />
+export const GlobalMultiTextPanel = ({
+  scope = "global",
+  ...props
+}: MultiTextWrapperProps) => (
+  <BaseMultiTextPanel {...props} scope={scope} {...globalAccessors.multiText} />
 );
 
-export const PersonalTextPanel = ({ setter, ...props }: TextWrapperProps) => (
-  <BaseTextPanel {...props} setter={setter ?? personalAccessors.text.setter} />
+export const PersonalTextPanel = ({
+  setter,
+  scope = "personal",
+  ...props
+}: TextWrapperProps) => (
+  <BaseTextPanel
+    {...props}
+    scope={scope}
+    setter={setter ?? personalAccessors.text.setter}
+  />
 );
 
-export const PersonalFlagPanel = (props: FlagWrapperProps) => (
-  <BaseFlagPanel {...props} {...personalAccessors.flag} />
+export const PersonalFlagPanel = ({
+  scope = "personal",
+  ...props
+}: FlagWrapperProps) => (
+  <BaseFlagPanel {...props} scope={scope} {...personalAccessors.flag} />
 );
 
 export const PersonalNumberPanel = ({
   setter,
+  scope = "personal",
   ...props
 }: NumberWrapperProps) => (
   <BaseNumberPanel
     {...props}
+    scope={scope}
     setter={setter ?? personalAccessors.number.setter}
   />
 );
 
-export const PersonalSelectPanel = (props: SelectWrapperProps) => (
-  <BaseSelectPanel {...props} {...personalAccessors.text} />
+export const PersonalSelectPanel = ({
+  scope = "personal",
+  ...props
+}: SelectWrapperProps) => (
+  <BaseSelectPanel {...props} scope={scope} {...personalAccessors.text} />
 );
 
-export const PersonalMultiTextPanel = (props: MultiTextWrapperProps) => (
-  <BaseMultiTextPanel {...props} {...personalAccessors.multiText} />
+export const PersonalMultiTextPanel = ({
+  scope = "personal",
+  ...props
+}: MultiTextWrapperProps) => (
+  <BaseMultiTextPanel
+    {...props}
+    scope={scope}
+    {...personalAccessors.multiText}
+  />
 );
 
 const createDiscourseNodeSetter =
@@ -715,6 +806,7 @@ export const DiscourseNodeTextPanel = ({
   }) => (
   <BaseTextPanel
     {...props}
+    scope="global"
     initialValue={
       getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -736,6 +828,7 @@ export const DiscourseNodeFlagPanel = ({
   }) => (
   <BaseFlagPanel
     {...props}
+    scope="global"
     initialValue={
       getDiscourseNodeSetting<boolean>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -752,6 +845,7 @@ export const DiscourseNodeSelectPanel = ({
   RoamBlockSyncProps & { options: string[]; initialValue?: string }) => (
   <BaseSelectPanel
     {...props}
+    scope="global"
     initialValue={
       getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -773,6 +867,7 @@ export const DiscourseNodeNumberPanel = ({
   }) => (
   <BaseNumberPanel
     {...props}
+    scope="global"
     initialValue={
       getDiscourseNodeSetting<number>(nodeType, props.settingKeys) ??
       props.initialValue ??
diff --git a/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx b/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
index 25cfa7ee0..9ee0108be 100644
--- a/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
+++ b/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
@@ -1,6 +1,4 @@
 import React, { useRef, useEffect, useCallback, useState } from "react";
-import { Label } from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
 import createBlock from "roamjs-components/writes/createBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getFullTreeByParentUid from "roamjs-components/queries/getFullTreeByParentUid";
@@ -12,6 +10,7 @@ import {
   setDiscourseNodeSetting,
 } from "~/components/settings/utils/accessors";
 import type { DiscourseNodeBaseProps } from "./BlockPropSettingPanels";
+import SettingItemRow from "~/components/settings/components/SettingItemRow";
 
 const DEBOUNCE_MS = 250;
 const TEMPLATE_BUFFER_TEXT = "Template";
@@ -212,14 +211,16 @@ const DualWriteBlocksPanel = ({
     };
   }, [renderUid, handleChange, flushPendingChanges]);
 
+  // One node either way: the ref must attach whether or not a header wraps it.
+  const blocksContainer = (
+    <div
+      ref={containerRef}
+      className="dg-dualwrite-blocks rounded border border-gray-200 py-2"
+    />
+  );
+
   return (
     <>
-      {title ? (
-        <Label>
-          {title}
-          <Description description={description} />
-        </Label>
-      ) : null}
       <style>{`.dg-dualwrite-blocks > div > .rm-block-main {
     display: none;
   }
@@ -229,10 +230,17 @@ const DualWriteBlocksPanel = ({
   .dg-dualwrite-blocks > div > .rm-block-children {
     margin-left: -4px;
   }`}</style>
-      <div
-        ref={containerRef}
-        className="dg-dualwrite-blocks rounded border border-gray-200 py-2"
-      />
+      {title ? (
+        <SettingItemRow
+          label={title}
+          description={description}
+          scope="global"
+          controlPlacement="below"
+          control={blocksContainer}
+        />
+      ) : (
+        blocksContainer
+      )}
     </>
   );
 };
diff --git a/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx b/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx
new file mode 100644
index 000000000..a66ed976c
--- /dev/null
+++ b/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Button } from "@blueprintjs/core";
+
+const SettingDrillDownSummary = ({
+  summary,
+  onClick,
+  disabled,
+}: {
+  /** Current value, or an action label where there is no single value. */
+  summary: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}): React.ReactElement => (
+  <Button
+    minimal
+    rightIcon="chevron-right"
+    onClick={onClick}
+    disabled={disabled}
+    className="max-w-xs"
+  >
+    <span className="truncate text-gray-500">{summary}</span>
+  </Button>
+);
+
+export default SettingDrillDownSummary;
diff --git a/apps/roam/src/components/settings/components/SettingItemRow.tsx b/apps/roam/src/components/settings/components/SettingItemRow.tsx
new file mode 100644
index 000000000..11fcc5fcf
--- /dev/null
+++ b/apps/roam/src/components/settings/components/SettingItemRow.tsx
@@ -0,0 +1,103 @@
+import React, { useId } from "react";
+import { Icon, type IconName, Position, Tooltip } from "@blueprintjs/core";
+import { settingAnchor } from "~/components/settings/utils/settingAnchor";
+
+/** Per-node settings are `global`: they live on the node type's page, so the whole graph sees them. */
+export type SettingScope = "personal" | "global";
+
+const SCOPE_INDICATORS = {
+  personal: {
+    icon: "person",
+    tooltip: "Personal — applies only to you",
+  },
+  global: {
+    icon: "globe",
+    tooltip: "Graph-wide — applies to everyone in this graph",
+  },
+} as const satisfies Record<SettingScope, { icon: IconName; tooltip: string }>;
+
+/** Raw <label> plus flex on purpose: Blueprint's `.bp3-label .bp3-popover-wrapper` and
+ *  `.bp3-icon` vertical-align rules would otherwise push the badge out of line. */
+const SettingScopeIndicator = ({ scope }: { scope: SettingScope }) => {
+  const { icon, tooltip } = SCOPE_INDICATORS[scope];
+  return (
+    <Tooltip content={tooltip} position={Position.TOP} hoverOpenDelay={300}>
+      <span
+        aria-label={tooltip}
+        className="dg-setting-row__scope flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-gray-500"
+      >
+        <Icon icon={icon} iconSize={12} />
+      </span>
+    </Tooltip>
+  );
+};
+
+type SettingItemRowProps = {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  /** A function receives the row's id to bind label and control; a node labels itself. */
+  control: React.ReactNode | ((controlId: string) => React.ReactNode);
+  scope?: SettingScope;
+  /** `below` is for controls too tall to sit beside the label, such as a textarea. */
+  controlPlacement?: "trailing" | "below";
+  settingKeys?: string[];
+  error?: string;
+  /** Tighter row for narrow hosts such as the Export dialog: no scope badge, control below. */
+  compact?: boolean;
+};
+
+const SettingItemRow = ({
+  label,
+  description,
+  control,
+  scope,
+  controlPlacement = "trailing",
+  settingKeys,
+  error,
+  compact = false,
+}: SettingItemRowProps): React.ReactElement => {
+  const controlId = useId();
+  const isAssociated = typeof control === "function";
+  // Description is a sibling of the label: nested, its doc links would toggle the control (ENG-2080).
+  const LabelTag = isAssociated ? "label" : "div";
+
+  return (
+    <div
+      {...(settingKeys ? settingAnchor(settingKeys) : {})}
+      className={`dg-setting-row ${compact ? "py-2" : "py-3"} ${
+        controlPlacement === "trailing" && !compact
+          ? "flex items-center justify-between gap-4"
+          : "flex flex-col gap-2"
+      }`}
+    >
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <LabelTag
+          {...(isAssociated ? { htmlFor: controlId } : {})}
+          className={`dg-setting-row__label mb-0 flex items-center gap-2 font-semibold ${
+            isAssociated ? "cursor-pointer" : ""
+          }`}
+        >
+          {scope && !compact ? <SettingScopeIndicator scope={scope} /> : null}
+          <span>{label}</span>
+        </LabelTag>
+        {description ? (
+          <div className="text-sm font-normal text-gray-500">{description}</div>
+        ) : null}
+        {error ? (
+          <div className="text-sm font-medium text-red-600">{error}</div>
+        ) : null}
+      </div>
+      <div
+        className={
+          controlPlacement === "trailing" && !compact
+            ? "flex-shrink-0"
+            : "w-full"
+        }
+      >
+        {isAssociated ? control(controlId) : control}
+      </div>
+    </div>
+  );
+};
+
+export default SettingItemRow;
diff --git a/apps/roam/src/components/settings/components/SettingKeycapInput.tsx b/apps/roam/src/components/settings/components/SettingKeycapInput.tsx
new file mode 100644
index 000000000..2fc3655c2
--- /dev/null
+++ b/apps/roam/src/components/settings/components/SettingKeycapInput.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { InputGroup, type InputGroupProps2 } from "@blueprintjs/core";
+
+const SettingKeycapInput = ({
+  wide = false,
+  className = "",
+  ...props
+}: InputGroupProps2 & { wide?: boolean }): React.ReactElement => (
+  <InputGroup
+    {...props}
+    className={`dg-setting-keycap ${wide ? "w-40" : "w-16"} ${className}`}
+  />
+);
+
+export default SettingKeycapInput;
diff --git a/apps/roam/src/components/settings/components/SettingsDrillDownRow.tsx b/apps/roam/src/components/settings/components/SettingsDrillDownRow.tsx
deleted file mode 100644
index 1bb0b2c84..000000000
--- a/apps/roam/src/components/settings/components/SettingsDrillDownRow.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { Button, Intent, Label } from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
-
-const SettingsDrillDownRow = ({
-  title,
-  description,
-  buttonText,
-  onClick,
-}: {
-  title: string;
-  description: React.ReactNode;
-  buttonText: string;
-  onClick: () => void;
-}): JSX.Element => (
-  <Label>
-    {title}
-    <Description description={description} />
-    <div>
-      <Button
-        outlined
-        intent={Intent.PRIMARY}
-        rightIcon="chevron-right"
-        text={buttonText}
-        onClick={onClick}
-      />
-    </div>
-  </Label>
-);
-
-export default SettingsDrillDownRow;
diff --git a/apps/roam/src/styles/settingsStyles.css b/apps/roam/src/styles/settingsStyles.css
index c6d345e00..2e59f9a3d 100644
--- a/apps/roam/src/styles/settingsStyles.css
+++ b/apps/roam/src/styles/settingsStyles.css
@@ -40,6 +40,10 @@
 :root {
   /* Brand secondary, mirroring packages/tailwind-config. */
   --dg-secondary: #5f57c0;
+  /** Neutrals mirrored too: Roam ships Tailwind's utilities but not this repo's theme extensions. */
+  --dg-neutral-dark: #1f1f1f;
+  --dg-neutral-light: #f1f1f1;
+  --dg-border: rgb(229, 231, 235);
 }
 
 /** Hand-rolled: apps/roam has no Tailwind build, so only utilities Roam ships resolve. */
@@ -88,3 +92,20 @@
   gap: 44px;
   padding: 2px;
 }
+
+/** No row dividers: the only rule on a page is the one under a section heading. */
+
+.dg-setting-row__label {
+  color: var(--dg-neutral-dark);
+}
+
+.dg-setting-row__scope {
+  background-color: var(--dg-neutral-light);
+  border: 1px solid var(--dg-border);
+}
+
+/* Trailing keycap control: a narrow box whose value reads as a single key. */
+.dg-setting-keycap .bp3-input {
+  text-align: center;
+  font-family: monospace;
+}