diff --git a/src/lib/components/sidebar/details/DetailRow.svelte b/src/lib/components/sidebar/details/DetailRow.svelte
new file mode 100644
index 00000000..5f153590
--- /dev/null
+++ b/src/lib/components/sidebar/details/DetailRow.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		label: string
+		value?: string | number | null | undefined
+		children?: Snippet
+		/** Disable hover state for editable rows */
+		noHover?: boolean
+		/** Remove padding for inline edit contexts */
+		noPadding?: boolean
+	}
+
+	let { label, value, children, noHover = false, noPadding = false }: Props = $props()
+</script>
+
+<div class="detail-row" class:no-hover={noHover} class:no-padding={noPadding}>
+	<span class="label">{label}</span>
+	<span class="value">
+		{#if children}
+			{@render children()}
+		{:else}
+			{value ?? '—'}
+		{/if}
+	</span>
+</div>
+
+<style lang="scss">
+	@use '$src/themes/colors' as colors;
+	@use '$src/themes/layout' as layout;
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+
+	.detail-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: calc(spacing.$unit * 1.5) spacing.$unit;
+
+		&:not(.no-hover):hover {
+			background: var(--page-hover);
+			border-radius: layout.$item-corner;
+		}
+
+		&.no-padding {
+			padding: 0;
+		}
+
+		&:last-child {
+			border-bottom: none;
+		}
+
+		.label {
+			font-size: typography.$font-regular;
+			color: var(--text-secondary, colors.$grey-50);
+		}
+
+		.value {
+			font-size: typography.$font-regular;
+			color: var(--text-primary, colors.$grey-10);
+			font-weight: typography.$medium;
+			text-align: right;
+		}
+	}
+</style>
diff --git a/src/lib/components/sidebar/details/DetailsSection.svelte b/src/lib/components/sidebar/details/DetailsSection.svelte
new file mode 100644
index 00000000..ae1ec4c5
--- /dev/null
+++ b/src/lib/components/sidebar/details/DetailsSection.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		title: string
+		children: Snippet
+	}
+
+	let { title, children }: Props = $props()
+</script>
+
+<div class="details-section">
+	<h3>{title}</h3>
+	{@render children()}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+
+	.details-section {
+		padding: 0 spacing.$unit;
+
+		h3 {
+			margin: 0 0 calc(spacing.$unit * 1.5) 0;
+			font-size: typography.$font-name;
+			font-weight: typography.$medium;
+			color: var(--text-primary);
+			padding: 0 spacing.$unit;
+		}
+	}
+</style>