diff --git a/chrome/content/zotero/integration/citationDialog.js b/chrome/content/zotero/integration/citationDialog.js
index b33c13d26f..da00a1545e 100644
--- a/chrome/content/zotero/integration/citationDialog.js
+++ b/chrome/content/zotero/integration/citationDialog.js
@@ -2079,19 +2079,19 @@ const CitationPreview = {
 		let prefShown = Zotero.Prefs.get("integration.citationPreviewShown");
 		let isCitingItems = DIALOG_STATE.isCitingItems();
 		let hasPreview = !!io.preview;
-		let shouldShow = isCitingItems && prefShown && hasPreview;
-		_id("citation-preview").hidden = !shouldShow;
 		let isEmpty = !CitationDataManager.items.length;
-		_id("citation-preview-empty").hidden = !isEmpty;
-		_id("citation-preview-content").hidden = isEmpty;
+		// The preview pane appears when citing at least one item and the caller has
+		// provided a preview function
+		let isRelevant = isCitingItems && hasPreview && !isEmpty;
+		_id("citation-preview").hidden = !(isRelevant && prefShown);
 		if (isEmpty) {
 			_id("citation-preview-content").innerHTML = "";
 			_id("citation-preview-error").hidden = true;
 		}
-		// The toggle button only makes sense while citing items with a backing
-		// preview function. It reflects the pref directly.
+		// The toggle button is hidden when there's no preview and is restored to its last
+		// state when the preview pane appears
 		let toggleBtn = _id("display-preview-button");
-		toggleBtn.hidden = !(isCitingItems && hasPreview);
+		toggleBtn.hidden = !isRelevant;
 		toggleBtn.setAttribute("aria-pressed", prefShown ? "true" : "false");
 		if (!isEmpty) {
 			CitationPreview._renderDebounced();
diff --git a/chrome/content/zotero/integration/citationDialog.xhtml b/chrome/content/zotero/integration/citationDialog.xhtml
index e0eea906a5..6cd90058a6 100644
--- a/chrome/content/zotero/integration/citationDialog.xhtml
+++ b/chrome/content/zotero/integration/citationDialog.xhtml
@@ -111,7 +111,6 @@
 			<div id="citation-preview" class="vbox" data-dialog-type="citation">
 				<div id="citation-preview-wrapper" class="vbox">
 					<div id="citation-preview-content"></div>
-					<div id="citation-preview-empty" data-l10n-id="integration-citationDialog-preview-empty"></div>
 					<div id="citation-preview-error" data-l10n-id="integration-citationDialog-preview-error" hidden="true"></div>
 				</div>
 				<div class="divider subtle"></div>
diff --git a/chrome/locale/en-US/zotero/integration.ftl b/chrome/locale/en-US/zotero/integration.ftl
index 6980e84cf2..cd1142ae5c 100644
--- a/chrome/locale/en-US/zotero/integration.ftl
+++ b/chrome/locale/en-US/zotero/integration.ftl
@@ -50,7 +50,6 @@ integration-citationDialog-lib-message-annotations = { $search ->
    *[other] No selected or open items with annotations
 }
 integration-citationDialog-settings-keepSorted = Keep sources sorted
-integration-citationDialog-preview-empty = Preview
 integration-citationDialog-preview-error = Preview unavailable
 integration-citationDialog-btn-displayPreview =
     .title = Display citation preview
diff --git a/scss/components/_citationDialog.scss b/scss/components/_citationDialog.scss
index ac9bd26792..9abef5df43 100644
--- a/scss/components/_citationDialog.scss
+++ b/scss/components/_citationDialog.scss
@@ -587,7 +587,7 @@
 				font-size: 1.1rem;
 			}
 
-			#citation-preview-empty, #citation-preview-error {
+			#citation-preview-error {
 				padding-top: 2px;
 				color: var(--fill-secondary);
 				font-family: $font-family-base;
diff --git a/test/tests/citationDialogTest.js b/test/tests/citationDialogTest.js
index 9ec08a2bcc..e7ae2f6f94 100644
--- a/test/tests/citationDialogTest.js
+++ b/test/tests/citationDialogTest.js
@@ -448,6 +448,24 @@ describe("Citation Dialog", function () {
 			assert.isTrue(dialog.document.getElementById("list-layout").hidden);
 		});
 
+		it("should show the citation preview only when the citation has items", async function () {
+			let prefWas = Zotero.Prefs.get("integration.citationPreviewShown");
+			Zotero.Prefs.set("integration.citationPreviewShown", true);
+			try {
+				IOManager.updateBubbleInput();
+				assert.isTrue(dialog.document.getElementById("citation-preview").hidden);
+				assert.isTrue(dialog.document.getElementById("display-preview-button").hidden);
+
+				let item = await createDataObject('item');
+				await IOManager.addItemsToCitation([item]);
+				assert.isFalse(dialog.document.getElementById("citation-preview").hidden);
+				assert.isFalse(dialog.document.getElementById("display-preview-button").hidden);
+			}
+			finally {
+				Zotero.Prefs.set("integration.citationPreviewShown", prefWas);
+			}
+		});
+
 		it("should highlight bubbles whose items are selected", async function () {
 			let itemOne = await createDataObject('item');
 			let itemTwo = await createDataObject('item');