diff --git a/src/lib/components/chat/Overview/Node.svelte b/src/lib/components/chat/Overview/Node.svelte
index ecc20a32da..49725a84df 100644
--- a/src/lib/components/chat/Overview/Node.svelte
+++ b/src/lib/components/chat/Overview/Node.svelte
@@ -89,6 +89,14 @@
 			</div>
 		{/if}
 	</Tooltip>
-	<Handle type="target" position={Position.Top} class="w-2 rounded-full dark:bg-gray-900" />
-	<Handle type="source" position={Position.Bottom} class="w-2 rounded-full dark:bg-gray-900" />
+	<Handle
+		type="target"
+		position={data?.direction === 'horizontal' ? Position.Left : Position.Top}
+		class="w-2 rounded-full dark:bg-gray-900"
+	/>
+	<Handle
+		type="source"
+		position={data?.direction === 'horizontal' ? Position.Right : Position.Bottom}
+		class="w-2 rounded-full dark:bg-gray-900"
+	/>
 </div>
diff --git a/src/lib/components/chat/Overview/View.svelte b/src/lib/components/chat/Overview/View.svelte
index edd0f48571..3559154238 100644
--- a/src/lib/components/chat/Overview/View.svelte
+++ b/src/lib/components/chat/Overview/View.svelte
@@ -105,7 +105,8 @@
 				data: {
 					user: chatUser ?? $user,
 					message: history.messages[id],
-					model: $models.find((model) => model.id === history.messages[id].model)
+					model: $models.find((model) => model.id === history.messages[id].model),
+					direction
 				},
 				position: { x, y }
 			});