diff --git a/.changeset/popover-layercontrols.md b/.changeset/popover-layercontrols.md
new file mode 100644
index 000000000..5b49dcc0f
--- /dev/null
+++ b/.changeset/popover-layercontrols.md
@@ -0,0 +1,5 @@
+---
+'@ldn-viz/ui': minor
+---
+
+CHANGED: use `Popover` component in `ColorPicker`/`OpacityControl`/`ResizeControl`, rather than duplicating implementation
diff --git a/packages/ui/src/lib/layerControl/ColorPicker.svelte b/packages/ui/src/lib/layerControl/ColorPicker.svelte
index 4a8ddac1d..125d6d072 100644
--- a/packages/ui/src/lib/layerControl/ColorPicker.svelte
+++ b/packages/ui/src/lib/layerControl/ColorPicker.svelte
@@ -1,17 +1,5 @@
 <script lang="ts">
-	import { createPopover } from '@melt-ui/svelte';
-	import { fade } from 'svelte/transition';
-
-	import { XMark } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
-
-	const {
-		elements: { trigger, content, arrow, close },
-		states: { open }
-	} = createPopover({
-		forceVisible: true,
-		positioning: { placement: 'top' }
-	});
+	import Popover from '../popover/Popover.svelte';
 
 	export let color = 1;
 
@@ -29,52 +17,31 @@
 		'#353D42',
 		'#000000'
 	];
-</script>
-
-<div {...$trigger} use:trigger class="w-fit h-fit" title="Set layer color">
-	<div class="w-6 h-6 bg-white">
-		<div class="w-4 h-4 relative left-[4px] top-[4px]" style:background={color}></div>
-	</div>
-</div>
 
-{#if $open}
-	<div
-		{...$content}
-		use:content
-		transition:fade={{ duration: 100 }}
-		class="z-50 w-64 bg-core-grey-50 p-4 shadow"
-	>
-		<div {...$arrow} use:arrow />
-
-		<div class="text-sm flex flex-col space-y-2 text-core-grey-800">
-			<p class="font-bold">Color</p>
-			<span class="text-sm">Click to assign a color to this layer.</span>
+	let openStore;
+</script>
 
-			<div class="flex flex-wrap gap-2">
-				{#each colors as colorOption}
-					<button
-						class="w-6 h-6 bg-white"
-						style:background={colorOption}
-						on:click={() => {
-							color = colorOption;
-						}}
-						use:close
-					></button>
-				{/each}
-			</div>
+<Popover bind:openStore>
+	<svelte:fragment slot="hint">
+		<div class="w-6 h-6 bg-white">
+			<div class="w-4 h-4 relative left-[4px] top-[4px]" style:background={color}></div>
 		</div>
-
-		<button class="close" {...$close} use:close>
-			<Icon src={XMark} theme="solid" class="w-8 h-8" aria-hidden="true" />
-		</button>
+	</svelte:fragment>
+
+	<svelte:fragment slot="title">Color</svelte:fragment>
+
+	<span class="text-sm">Click to assign a color to this layer.</span>
+
+	<div class="flex flex-wrap gap-2">
+		{#each colors as colorOption}
+			<button
+				class="w-6 h-6 bg-white"
+				style:background={colorOption}
+				on:click={() => {
+					color = colorOption;
+					$openStore = false;
+				}}
+			/>
+		{/each}
 	</div>
-{/if}
-
-<style>
-	.close {
-		@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center;
-		@apply text-white transition-colors hover:bg-core-grey-100 hover:text-core-grey-800;
-		@apply focus-visible:ring focus-visible:ring-core-blue-600 focus-visible:ring-offset-2;
-		@apply bg-core-grey-800 p-0 text-sm font-medium;
-	}
-</style>
+</Popover>
diff --git a/packages/ui/src/lib/layerControl/OpacityControl.svelte b/packages/ui/src/lib/layerControl/OpacityControl.svelte
index d134fcfb7..fc61fab9f 100644
--- a/packages/ui/src/lib/layerControl/OpacityControl.svelte
+++ b/packages/ui/src/lib/layerControl/OpacityControl.svelte
@@ -1,59 +1,23 @@
 <script lang="ts">
-	import { createPopover } from '@melt-ui/svelte';
-	import { fade } from 'svelte/transition';
-
 	import Input from '../input/Input.svelte';
 
 	import TransparencyIcon from './TransparencyIcon.svelte';
-	import { XMark } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
-
-	const {
-		elements: { trigger, content, arrow, close },
-		states: { open }
-	} = createPopover({
-		forceVisible: true,
-		positioning: { placement: 'top' }
-	});
+	import Popover from '../popover/Popover.svelte';
 
 	export let opacity = 1;
 </script>
 
-<div {...$trigger} use:trigger class="w-fit h-fit" title="Set layer opacity">
-	<TransparencyIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
-</div>
-
-{#if $open}
-	<div
-		{...$content}
-		use:content
-		transition:fade={{ duration: 100 }}
-		class="z-50 w-64 bg-core-grey-50 p-4 shadow"
-	>
-		<div {...$arrow} use:arrow />
+<Popover>
+	<svelte:fragment slot="hint">
+		<TransparencyIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
+	</svelte:fragment>
 
-		<div class="text-sm flex flex-col space-y-2 text-core-grey-800">
-			<p class="font-bold">Opacity</p>
+	<svelte:fragment slot="title">Opacity</svelte:fragment>
 
-			<div class="flex gap-4 items-center pt-2">
-				<div class="w-40">
-					<input type="range" bind:value={opacity} min="0" max="1" step="0.01" />
-				</div>
-				<div class="w-16"><Input bind:value={opacity} type="number" min="0" max="1"></Input></div>
-			</div>
+	<div class="flex gap-4 items-center pt-2">
+		<div class="w-32">
+			<input type="range" class="w-32" bind:value={opacity} min="0" max="1" step="0.01" />
 		</div>
-
-		<button class="close" {...$close} use:close>
-			<Icon src={XMark} theme="solid" class="w-8 h-8" aria-hidden="true" />
-		</button>
+		<div class="w-16"><Input bind:value={opacity} type="number" min="0" max="1"></Input></div>
 	</div>
-{/if}
-
-<style>
-	.close {
-		@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center;
-		@apply text-white transition-colors hover:bg-core-grey-100 hover:text-core-grey-800;
-		@apply focus-visible:ring focus-visible:ring-core-blue-600 focus-visible:ring-offset-2;
-		@apply bg-core-grey-800 p-0 text-sm font-medium;
-	}
-</style>
+</Popover>
diff --git a/packages/ui/src/lib/layerControl/ResizeControl.svelte b/packages/ui/src/lib/layerControl/ResizeControl.svelte
index 83cdb5f60..c7022ac1d 100644
--- a/packages/ui/src/lib/layerControl/ResizeControl.svelte
+++ b/packages/ui/src/lib/layerControl/ResizeControl.svelte
@@ -1,18 +1,6 @@
 <script lang="ts">
-	import { createPopover } from '@melt-ui/svelte';
-	import { fade } from 'svelte/transition';
-
 	import ResizeIcon from './ResizeIcon.svelte';
-	import { XMark } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
-
-	const {
-		elements: { trigger, content, arrow, close },
-		states: { open }
-	} = createPopover({
-		forceVisible: true,
-		positioning: { placement: 'top' }
-	});
+	import Popover from '../popover/Popover.svelte';
 
 	export let size = 1;
 
@@ -20,40 +8,16 @@
 	export let maxSize;
 </script>
 
-<div {...$trigger} use:trigger class="w-fit h-fit" title="Adjust marker size">
-	<ResizeIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
-</div>
-
-{#if $open}
-	<div
-		{...$content}
-		use:content
-		transition:fade={{ duration: 100 }}
-		class="z-50 w-64 bg-core-grey-50 p-4 shadow"
-	>
-		<div {...$arrow} use:arrow />
+<Popover>
+	<svelte:fragment slot="hint">
+		<ResizeIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
+	</svelte:fragment>
 
-		<div class="text-sm flex flex-col space-y-2 text-core-grey-800">
-			<p class="font-bold">Marker size</p>
+	<svelte:fragment slot="title">Marker size</svelte:fragment>
 
-			<div class="flex gap-4 items-center pt-2">
-				<div class="w-40">
-					<input type="range" bind:value={size} min={minSize} max={maxSize} step="0.01" />
-				</div>
-			</div>
+	<div class="flex gap-4 items-center pt-2">
+		<div class="w-40">
+			<input type="range" bind:value={size} min={minSize} max={maxSize} step="0.01" />
 		</div>
-
-		<button class="close" {...$close} use:close>
-			<Icon src={XMark} theme="solid" class="w-8 h-8" aria-hidden="true" />
-		</button>
 	</div>
-{/if}
-
-<style>
-	.close {
-		@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center;
-		@apply text-white transition-colors hover:bg-core-grey-100 hover:text-core-grey-800;
-		@apply focus-visible:ring focus-visible:ring-core-blue-600 focus-visible:ring-offset-2;
-		@apply bg-core-grey-800 p-0 text-sm font-medium;
-	}
-</style>
+</Popover>
diff --git a/packages/ui/src/lib/popover/Popover.svelte b/packages/ui/src/lib/popover/Popover.svelte
index df482a8fc..488c84abd 100644
--- a/packages/ui/src/lib/popover/Popover.svelte
+++ b/packages/ui/src/lib/popover/Popover.svelte
@@ -34,6 +34,12 @@
 	 * text size for the tooltip target
 	 */
 	export let hintSize: 'sm' | 'md' | 'lg' | undefined = undefined;
+
+	/**
+	 * Store controlling whether popover is open.
+	 */
+	export let openStore;
+	$: openStore = open;
 </script>
 
 <Button variant="text" size={hintSize} class="!p-0" emphasis="secondary">