diff --git a/apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte b/apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
index 665fb75d3..1dbf8edcd 100644
--- a/apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
+++ b/apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
@@ -52,6 +52,12 @@
 	let dragId = $state<string | null>(null);
 
 	function handleDragStart(e: DragEvent, id: string) {
+		// Only allow page reorder drag from the drag-handle, not from items inside the page
+		const target = e.target as HTMLElement;
+		if (!target.closest('.drag-handle')) {
+			e.preventDefault();
+			return;
+		}
 		dragId = id;
 		if (e.dataTransfer) {
 			e.dataTransfer.effectAllowed = 'move';
@@ -94,7 +100,6 @@
 			<div
 				class="page-drag-wrapper"
 				class:dragging={dragId === p.id}
-				draggable={true}
 				ondragstart={(e) => handleDragStart(e, p.id)}
 				ondragover={handleDragOver}
 				ondrop={(e) => handleDrop(e, p.id)}
diff --git a/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte b/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
index 1c6ec608a..102343467 100644
--- a/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
+++ b/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
@@ -114,7 +114,7 @@
 		: ''}"
 >
 	<div class="drag-handle-bar">
-		<span class="drag-handle"><DotsSixVertical size={14} /></span>
+		<span class="drag-handle" draggable="true"><DotsSixVertical size={14} /></span>
 	</div>
 
 	<!-- Header -->