diff --git a/src/lib/components/sidebar/details/DetailsSection.svelte b/src/lib/components/sidebar/details/DetailsSection.svelte
index ae1ec4c5..a07de17d 100644
--- a/src/lib/components/sidebar/details/DetailsSection.svelte
+++ b/src/lib/components/sidebar/details/DetailsSection.svelte
@@ -4,14 +4,22 @@
 	interface Props {
 		title: string
 		children: Snippet
+		/** Message to show when section has no content */
+		emptyMessage?: string
+		/** Whether the section is empty (shows emptyMessage instead of children) */
+		empty?: boolean
 	}
 
-	let { title, children }: Props = $props()
+	let { title, children, emptyMessage, empty = false }: Props = $props()
 </script>
 
 <div class="details-section">
 	<h3>{title}</h3>
-	{@render children()}
+	{#if empty && emptyMessage}
+		<p class="empty-message">{emptyMessage}</p>
+	{:else}
+		{@render children()}
+	{/if}
 </div>
 
 <style lang="scss">
@@ -28,5 +36,13 @@
 			color: var(--text-primary);
 			padding: 0 spacing.$unit;
 		}
+
+		.empty-message {
+			text-align: center;
+			color: var(--text-secondary);
+			font-size: typography.$font-small;
+			padding: spacing.$unit-5x spacing.$unit;
+			margin: 0;
+		}
 	}
 </style>