diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte
index bf36970929..ea707b0d2d 100644
--- a/src/lib/components/notes/NoteEditor.svelte
+++ b/src/lib/components/notes/NoteEditor.svelte
@@ -583,19 +583,48 @@ ${content}
 
 			// STEP 1. Get a DOM node to render
 			const html = note.data?.content?.html ?? '';
+			const isDarkMode = document.documentElement.classList.contains('dark');
+
 			let node;
 			if (html instanceof HTMLElement) {
 				node = html;
 			} else {
-				// If it's HTML string, render to a temporary hidden element
+				const virtualWidth = 800; // px, fixed width for cloned element
+
+				// Clone and style
 				node = document.createElement('div');
-				node.innerHTML = html;
+
+				// title node
+				const titleNode = document.createElement('div');
+				titleNode.textContent = note.title;
+				titleNode.style.fontSize = '24px';
+				titleNode.style.fontWeight = 'medium';
+				titleNode.style.paddingBottom = '20px';
+				titleNode.style.color = isDarkMode ? 'white' : 'black';
+				node.appendChild(titleNode);
+
+				const contentNode = document.createElement('div');
+
+				contentNode.innerHTML = html;
+
+				node.appendChild(contentNode);
+
+				node.classList.add('text-black');
+				node.classList.add('dark:text-white');
+				node.style.width = `${virtualWidth}px`;
+				node.style.position = 'absolute';
+				node.style.left = '-9999px';
+				node.style.height = 'auto';
+				node.style.padding = '40px 40px';
+
+				console.log(node);
 				document.body.appendChild(node);
 			}
 
 			// Render to canvas with predefined width
 			const canvas = await html2canvas(node, {
 				useCORS: true,
+				backgroundColor: isDarkMode ? '#000' : '#fff',
 				scale: 2, // Keep at 1x to avoid unexpected enlargements
 				width: virtualWidth, // Set fixed virtual screen width
 				windowWidth: virtualWidth, // Ensure consistent rendering
@@ -612,7 +641,14 @@ ${content}
 			// A4 page settings
 			const pdf = new jsPDF('p', 'mm', 'a4');
 			const imgWidth = 210; // A4 width in mm
+			const pageWidthMM = 210; // A4 width in mm
 			const pageHeight = 297; // A4 height in mm
+			const pageHeightMM = 297; // A4 height in mm
+
+			if (isDarkMode) {
+				pdf.setFillColor(0, 0, 0);
+				pdf.rect(0, 0, pageWidthMM, pageHeightMM, 'F'); // black bg
+			}
 
 			// Maintain aspect ratio
 			const imgHeight = (canvas.height * imgWidth) / canvas.width;
@@ -627,6 +663,11 @@ ${content}
 				position -= pageHeight;
 				pdf.addPage();
 
+				if (isDarkMode) {
+					pdf.setFillColor(0, 0, 0);
+					pdf.rect(0, 0, pageWidthMM, pageHeightMM, 'F'); // black bg
+				}
+
 				pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
 				heightLeft -= pageHeight;
 			}