diff --git a/.changeset/nervous-cherries-bathe.md b/.changeset/nervous-cherries-bathe.md
new file mode 100644
index 0000000000..22ddc1baa5
--- /dev/null
+++ b/.changeset/nervous-cherries-bathe.md
@@ -0,0 +1,5 @@
+---
+"@undp-data/svelte-undp-components": patch
+---
+
+chore: upgrade svelte-awesome-colorpicker to v4 (svelte5)
diff --git a/packages/svelte-undp-components/package.json b/packages/svelte-undp-components/package.json
index e89090c1d4..173c1f7012 100644
--- a/packages/svelte-undp-components/package.json
+++ b/packages/svelte-undp-components/package.json
@@ -102,7 +102,7 @@
 		"lodash-es": "^4.17.21",
 		"maplibre-gl": "^5.5.0",
 		"simple-statistics": "^7.8.8",
-		"svelte-awesome-color-picker": "^3.1.4",
+		"svelte-awesome-color-picker": "^4.0.0",
 		"svelte-copy": "^2.0.0",
 		"svelte-range-slider-pips": "^3.2.2",
 		"svelte-tippy": "^1.3.2",
diff --git a/packages/svelte-undp-components/src/lib/components/ui/ColorPicker.svelte b/packages/svelte-undp-components/src/lib/components/ui/ColorPicker.svelte
index 099c793234..ba2e7c7778 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/ColorPicker.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/ColorPicker.svelte
@@ -10,7 +10,7 @@
 	let { color = $bindable(), onchange = () => {} }: Props = $props();
 
 	const changeColor = debounce((e) => {
-		const newRgba: RgbaColor = e.detail.color.rgba;
+		const newRgba: RgbaColor = e.color.rgba;
 		if (
 			color.r === newRgba.r &&
 			color.g === newRgba.g &&
@@ -32,7 +32,7 @@
 		isAlpha={true}
 		sliderDirection="horizontal"
 		isOpen={true}
-		on:input={changeColor}
+		onInput={changeColor}
 		rgb={color}
 	/>
 </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5ad1aa3be..26ed269892 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -394,8 +394,8 @@ importers:
         specifier: ^7.8.8
         version: 7.8.8
       svelte-awesome-color-picker:
-        specifier: ^3.1.4
-        version: 3.1.4(svelte@5.28.6)
+        specifier: ^4.0.0
+        version: 4.0.1(svelte@5.28.6)
       svelte-copy:
         specifier: ^2.0.0
         version: 2.0.0(svelte@5.28.6)
@@ -956,8 +956,8 @@ importers:
         specifier: ^5.28.6
         version: 5.28.6
       svelte-awesome-color-picker:
-        specifier: ^3.1.4
-        version: 3.1.4(svelte@5.28.6)
+        specifier: ^4.0.0
+        version: 4.0.1(svelte@5.28.6)
       svelte-carousel:
         specifier: ^1.0.25
         version: 1.0.25
@@ -5540,15 +5540,15 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  svelte-awesome-color-picker@3.1.4:
-    resolution: {integrity: sha512-tiFakxvSpCwodOSFW6CflnLVSldSlDY77rDipHfW7hvB+4gTP3y6uO+Dm9O9e7P5N7K+CNyNjjdjbZOHYkMyNQ==}
+  svelte-awesome-color-picker@4.0.1:
+    resolution: {integrity: sha512-n9Lcvi8cYCl5RbT1YzjZAL1AeGXZcEynul25xy1tektkII7xW56en5iaqJFKZHmwRLmZ9Wh4CCEqYIXDtq9sDQ==}
     peerDependencies:
-      svelte: ^3.55.1 || ^4.0.0 || ^5.0.0
+      svelte: ^5.0.0
 
-  svelte-awesome-slider@1.1.2:
-    resolution: {integrity: sha512-HFIWwq6rtX6aXyc6ns2R0P6pDLYIr6nRjTPyAddAiTAgZqsohAoEfOEwKKqMmZ6Q+CH48zzcFdyo6lFkBJvyQw==}
+  svelte-awesome-slider@2.0.0:
+    resolution: {integrity: sha512-YBkOdYm1Feaqsn2JkJBRs+Kc/X3Qy/3GuVmI7GmoYDjBaHkjx9uH4khTuED22z57Hg3gGWeDhp/clIjWDdLNaw==}
     peerDependencies:
-      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0
+      svelte: ^5.0.0
 
   svelte-carousel@1.0.25:
     resolution: {integrity: sha512-vR/AbGYwlh3fgWaB5PJg+iqZFvoVCJq4JWdmlXvPtdG9TLlKJWBcoiKlMZt3MnFF7AqNW46tOH/O+uVMWQzyWQ==}
@@ -11177,13 +11177,13 @@ snapshots:
       svelte: 5.28.6
       zimmerframe: 1.1.2
 
-  svelte-awesome-color-picker@3.1.4(svelte@5.28.6):
+  svelte-awesome-color-picker@4.0.1(svelte@5.28.6):
     dependencies:
       colord: 2.9.3
       svelte: 5.28.6
-      svelte-awesome-slider: 1.1.2(svelte@5.28.6)
+      svelte-awesome-slider: 2.0.0(svelte@5.28.6)
 
-  svelte-awesome-slider@1.1.2(svelte@5.28.6):
+  svelte-awesome-slider@2.0.0(svelte@5.28.6):
     dependencies:
       svelte: 5.28.6
 
diff --git a/sites/geohub/package.json b/sites/geohub/package.json
index 193b3d7347..142c6949a5 100644
--- a/sites/geohub/package.json
+++ b/sites/geohub/package.json
@@ -114,7 +114,7 @@
 		"prettier-plugin-svelte": "^3.3.3",
 		"sass": "^1.88.0",
 		"svelte": "^5.28.6",
-		"svelte-awesome-color-picker": "^3.1.4",
+		"svelte-awesome-color-picker": "^4.0.0",
 		"svelte-carousel": "^1.0.25",
 		"svelte-check": "^4.1.7",
 		"svelte-htm": "^1.2.0",