diff --git a/.changeset/orange-jeans-mate.md b/.changeset/orange-jeans-mate.md
new file mode 100644
index 0000000000..08e8462c6d
--- /dev/null
+++ b/.changeset/orange-jeans-mate.md
@@ -0,0 +1,11 @@
+---
+"@undp-data/svelte-geohub-static-image-controls": patch
+"@undp-data/svelte-maplibre-storymap": patch
+"@undp-data/svelte-undp-components": patch
+"@undp-data/svelte-undp-design": patch
+"@undp-data/cgaz-admin-tool": patch
+"@undp-data/style-switcher": patch
+"geohub": patch
+---
+
+fix: fixed lint error for eslint-plugin-svelte v3 changes.
diff --git a/packages/cgaz-admin-tool/package.json b/packages/cgaz-admin-tool/package.json
index 0270b62d63..8ac8204ce0 100644
--- a/packages/cgaz-admin-tool/package.json
+++ b/packages/cgaz-admin-tool/package.json
@@ -48,7 +48,7 @@
 		"@typescript-eslint/parser": "^8.23.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"pmtiles": "^4.2.1",
 		"prettier": "^3.4.2",
diff --git a/packages/style-switcher/package.json b/packages/style-switcher/package.json
index da58e53718..811a63d654 100644
--- a/packages/style-switcher/package.json
+++ b/packages/style-switcher/package.json
@@ -31,7 +31,7 @@
 		"@typescript-eslint/parser": "^8.23.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
diff --git a/packages/svelte-maplibre-storymap/package.json b/packages/svelte-maplibre-storymap/package.json
index 272b00df75..e0853cea1d 100644
--- a/packages/svelte-maplibre-storymap/package.json
+++ b/packages/svelte-maplibre-storymap/package.json
@@ -51,7 +51,7 @@
 		"@typescript-eslint/parser": "^8.23.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
diff --git a/packages/svelte-maplibre-storymap/src/lib/StoryMap.svelte b/packages/svelte-maplibre-storymap/src/lib/StoryMap.svelte
index 4c1b0777f1..ae83c20cc9 100644
--- a/packages/svelte-maplibre-storymap/src/lib/StoryMap.svelte
+++ b/packages/svelte-maplibre-storymap/src/lib/StoryMap.svelte
@@ -288,7 +288,7 @@
 		<StoryMapHeader bind:template />
 
 		{#if $mapStore}
-			{#each config.chapters as chapter}
+			{#each config.chapters as chapter (chapter.id)}
 				<StoryMapChapter {chapter} bind:activeId bind:template />
 			{/each}
 		{/if}
@@ -333,7 +333,7 @@
 							aria-label={config.title}
 						>
 						</button>
-						{#each config.chapters as ch, index}
+						{#each config.chapters as ch, index (ch.id)}
 							<button
 								class="progress-button {slideIndex === index + 1 ? 'is-active' : ''}"
 								use:tippyTooltip={{ content: ch.title }}
diff --git a/packages/svelte-maplibre-storymap/src/routes/+page.svelte b/packages/svelte-maplibre-storymap/src/routes/+page.svelte
index bccc3a2fa1..b656fe3dad 100644
--- a/packages/svelte-maplibre-storymap/src/routes/+page.svelte
+++ b/packages/svelte-maplibre-storymap/src/routes/+page.svelte
@@ -19,7 +19,7 @@
 
 <div class="overlay">
 	<div class="buttons has-addons">
-		{#each cssModes as mode}
+		{#each cssModes as mode (mode.id)}
 			<label class="radio">
 				<input type="radio" name="cssmode" value={mode.id} bind:group={cssMode} />
 				{mode.label}
diff --git a/packages/svelte-static-image-controls/package.json b/packages/svelte-static-image-controls/package.json
index c77f363fb5..640878da04 100644
--- a/packages/svelte-static-image-controls/package.json
+++ b/packages/svelte-static-image-controls/package.json
@@ -49,7 +49,7 @@
 		"@typescript-eslint/parser": "^8.23.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"pmtiles": "^4.2.1",
 		"prettier": "^3.4.2",
diff --git a/packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte b/packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte
index 6cabc2ff1c..4d174d5d14 100644
--- a/packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte
+++ b/packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte
@@ -261,7 +261,7 @@
 				<div class="select is-fullwidth">
 					<select bind:value={selectedPageName} onchange={handlePageSizeChanged}>
 						<option value="custom">Custom</option>
-						{#each Object.keys(PageSizes) as name}
+						{#each Object.keys(PageSizes) as name (name)}
 							{@const size = PageSizes[name]}
 							<option value={name}>{name} ({size[0]} mm x {size[1]} mm)</option>
 						{/each}
diff --git a/packages/svelte-undp-components/package.json b/packages/svelte-undp-components/package.json
index 438c9a6d05..9ebb6625a4 100644
--- a/packages/svelte-undp-components/package.json
+++ b/packages/svelte-undp-components/package.json
@@ -68,7 +68,7 @@
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-storybook": "^0.11.2",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"jsdom": "^26.0.0",
 		"pmtiles": "^4.2.1",
diff --git a/packages/svelte-undp-components/src/lib/components/maplibre/heatmap/HeatmapColor.svelte b/packages/svelte-undp-components/src/lib/components/maplibre/heatmap/HeatmapColor.svelte
index 15d87e1c89..c4be0e1bdb 100644
--- a/packages/svelte-undp-components/src/lib/components/maplibre/heatmap/HeatmapColor.svelte
+++ b/packages/svelte-undp-components/src/lib/components/maplibre/heatmap/HeatmapColor.svelte
@@ -99,8 +99,7 @@
 
 <div class="fixed-grid has-{colorValues.length}-cols">
 	<div class="grid is-gap-1">
-		<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-		{#each colorValues as colorValueRow, index}
+		{#each colorValues as colorValueRow, index (colorValueRow.index)}
 			<div class="cell">
 				<HeatmapColorRow
 					bind:colorRow={colorValues[index]}
diff --git a/packages/svelte-undp-components/src/lib/components/maplibre/raster/RasterResampling.svelte b/packages/svelte-undp-components/src/lib/components/maplibre/raster/RasterResampling.svelte
index 222791eab3..11b71e2df2 100644
--- a/packages/svelte-undp-components/src/lib/components/maplibre/raster/RasterResampling.svelte
+++ b/packages/svelte-undp-components/src/lib/components/maplibre/raster/RasterResampling.svelte
@@ -37,7 +37,7 @@
 
 <div class="select is-fullwidth">
 	<select bind:value onchange={setValue}>
-		{#each options as option}
+		{#each options as option (option.value)}
 			<option value={option.value}>{option.title}</option>
 		{/each}
 	</select>
diff --git a/packages/svelte-undp-components/src/lib/components/maplibre/symbol/IconOverlap.svelte b/packages/svelte-undp-components/src/lib/components/maplibre/symbol/IconOverlap.svelte
index aef838b708..0407419705 100644
--- a/packages/svelte-undp-components/src/lib/components/maplibre/symbol/IconOverlap.svelte
+++ b/packages/svelte-undp-components/src/lib/components/maplibre/symbol/IconOverlap.svelte
@@ -24,7 +24,7 @@
 
 <div data-testid="icon-overlap-slider" class="select is-fullwidth">
 	<select bind:value={selected} onchange={setIconOverlap}>
-		{#each choices as choice}
+		{#each choices as choice (choice)}
 			<option value={choice}
 				>{choice.toLowerCase().replace(/\b(\w)/g, (s) => s.toUpperCase())}</option
 			>
diff --git a/packages/svelte-undp-components/src/lib/components/maplibre/symbol/SymbolPlacement.svelte b/packages/svelte-undp-components/src/lib/components/maplibre/symbol/SymbolPlacement.svelte
index 25875a5daf..b124415260 100644
--- a/packages/svelte-undp-components/src/lib/components/maplibre/symbol/SymbolPlacement.svelte
+++ b/packages/svelte-undp-components/src/lib/components/maplibre/symbol/SymbolPlacement.svelte
@@ -70,7 +70,7 @@
 		title="Icon overlap"
 		onchange={setSymbolPlacement}
 	>
-		{#each choices as choice}
+		{#each choices as choice (choice)}
 			<option class="legend-text" value={choice}>{clean(choice)}</option>
 		{/each}
 	</select>
diff --git a/packages/svelte-undp-components/src/lib/components/maplibre/symbol/TextFont.svelte b/packages/svelte-undp-components/src/lib/components/maplibre/symbol/TextFont.svelte
index ccfbb4aca3..4a37083b74 100644
--- a/packages/svelte-undp-components/src/lib/components/maplibre/symbol/TextFont.svelte
+++ b/packages/svelte-undp-components/src/lib/components/maplibre/symbol/TextFont.svelte
@@ -23,6 +23,7 @@
 	onMount(async () => {
 		const res = await fetch(fontJsonUrl);
 		fonts = await res.json();
+		setValue();
 	});
 
 	const style = $map
@@ -38,14 +39,11 @@
 	const setValue = () => {
 		map.setLayoutProperty(layerId, propertyName, [value]);
 	};
-	onMount(() => {
-		setValue();
-	});
 </script>
 
 <div class="select is-fullwidth">
 	<select bind:value onchange={setValue}>
-		{#each fonts as font}
+		{#each fonts as font (font)}
 			<option value={font}>{font}</option>
 		{/each}
 	</select>
diff --git a/packages/svelte-undp-components/src/lib/components/maplibre/util/PropertySelect.svelte b/packages/svelte-undp-components/src/lib/components/maplibre/util/PropertySelect.svelte
index 6b776cb24b..94ed21a932 100644
--- a/packages/svelte-undp-components/src/lib/components/maplibre/util/PropertySelect.svelte
+++ b/packages/svelte-undp-components/src/lib/components/maplibre/util/PropertySelect.svelte
@@ -112,7 +112,7 @@
 			disabled={readonly}
 		>
 			{#if propertySelectOptions}
-				{#each propertySelectOptions as propertySelectOption}
+				{#each propertySelectOptions as propertySelectOption (propertySelectOption)}
 					<option
 						title="Property Option"
 						data-testid="property-select-option"
diff --git a/packages/svelte-undp-components/src/lib/components/maplibre/util/VectorColorClassification.svelte b/packages/svelte-undp-components/src/lib/components/maplibre/util/VectorColorClassification.svelte
index 1d1b791762..619473a6b2 100644
--- a/packages/svelte-undp-components/src/lib/components/maplibre/util/VectorColorClassification.svelte
+++ b/packages/svelte-undp-components/src/lib/components/maplibre/util/VectorColorClassification.svelte
@@ -414,7 +414,7 @@
 											bind:value={classificationMethod}
 											onchange={handleClassificationMethodChanged}
 										>
-											{#each ClassificationMethods as classificationMethod}
+											{#each ClassificationMethods as classificationMethod (classificationMethod.code)}
 												<option
 													class="legend-text"
 													title="Classification Method"
@@ -469,8 +469,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-					{#each colorMapRows as colorMapRow, index}
+					{#each colorMapRows as colorMapRow, index (colorMapRow.index)}
 						<LegendColorMapRow
 							bind:colorMapRow={colorMapRows[index]}
 							bind:colorMapName
diff --git a/packages/svelte-undp-components/src/lib/components/maplibre/util/VectorValueClassification.svelte b/packages/svelte-undp-components/src/lib/components/maplibre/util/VectorValueClassification.svelte
index 2a610810f0..85296cff24 100644
--- a/packages/svelte-undp-components/src/lib/components/maplibre/util/VectorValueClassification.svelte
+++ b/packages/svelte-undp-components/src/lib/components/maplibre/util/VectorValueClassification.svelte
@@ -308,7 +308,7 @@
 									bind:value={classificationMethod}
 									onchange={handleClassificationMethodChanged}
 								>
-									{#each ClassificationMethods as classificationMethod}
+									{#each ClassificationMethods as classificationMethod (classificationMethod.code)}
 										<option
 											class="legend-text"
 											title="Classification Method"
@@ -352,7 +352,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				{#each colorMapRows as row, index}
+				{#each colorMapRows as row, index (row.index)}
 					<tr data-testid="line-width-row-container">
 						<td style="min-width: 100px;">
 							<div style={legendCssTemplate.replace(/{value}/g, `${row.value}`)}></div>
@@ -373,7 +373,8 @@
 						<td style="min-width: 10px;">
 							<div style="margin-top: 5px;">
 								{#if row.end}
-									{`<`}
+									{@const ope = `<`}
+									{ope}
 								{/if}
 							</div>
 						</td>
diff --git a/packages/svelte-undp-components/src/lib/components/pg_tileserv/VectorSimulation.svelte b/packages/svelte-undp-components/src/lib/components/pg_tileserv/VectorSimulation.svelte
index 4d29632386..d95fe6ceee 100644
--- a/packages/svelte-undp-components/src/lib/components/pg_tileserv/VectorSimulation.svelte
+++ b/packages/svelte-undp-components/src/lib/components/pg_tileserv/VectorSimulation.svelte
@@ -127,7 +127,7 @@
 		</div>
 	</div>
 {:else}
-	{#each Object.entries(args) as [argId, arg]}
+	{#each Object.entries(args) as [argId, arg] (argId)}
 		{@const value = selectedArgs[argId]?.value ?? 0}
 
 		<PropertyEditor
diff --git a/packages/svelte-undp-components/src/lib/components/titiler/RasterAlgorithms.svelte b/packages/svelte-undp-components/src/lib/components/titiler/RasterAlgorithms.svelte
index e7a63aa2fc..9244fb2b87 100644
--- a/packages/svelte-undp-components/src/lib/components/titiler/RasterAlgorithms.svelte
+++ b/packages/svelte-undp-components/src/lib/components/titiler/RasterAlgorithms.svelte
@@ -142,7 +142,7 @@
 			>
 				{#snippet control()}
 					<div>
-						{#each Object.keys(params) as key}
+						{#each Object.keys(params) as key (key)}
 							{@const args = params[key]}
 							<PropertyEditor
 								id={key}
diff --git a/packages/svelte-undp-components/src/lib/components/titiler/RasterClassifyLegend.svelte b/packages/svelte-undp-components/src/lib/components/titiler/RasterClassifyLegend.svelte
index 03468ce1ae..0250f14c1c 100644
--- a/packages/svelte-undp-components/src/lib/components/titiler/RasterClassifyLegend.svelte
+++ b/packages/svelte-undp-components/src/lib/components/titiler/RasterClassifyLegend.svelte
@@ -462,7 +462,7 @@
 									bind:value={classificationMethod}
 									onchange={handleClassificationMethodChange}
 								>
-									{#each ClassificationMethods as classificationMethod}
+									{#each ClassificationMethods as classificationMethod (classificationMethod.code)}
 										<option
 											class="legend-text"
 											title="Classification Method"
@@ -518,7 +518,7 @@
 		</thead>
 		<tbody>
 			<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-			{#each colorMapRows as colorMapRow, index}
+			{#each colorMapRows as colorMapRow, index (colorMapRow.index)}
 				<LegendColorMapRow
 					bind:colorMapRow={colorMapRows[index]}
 					bind:colorMapName
diff --git a/packages/svelte-undp-components/src/lib/components/ui/Breadcrumbs.svelte b/packages/svelte-undp-components/src/lib/components/ui/Breadcrumbs.svelte
index d9a4933f86..c4a8d62d1a 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/Breadcrumbs.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/Breadcrumbs.svelte
@@ -32,7 +32,7 @@
 
 <nav class="breadcrumb has-text-weight-bold is-uppercase is-{size}" aria-label="breadcrumbs">
 	<ul>
-		{#each pages as page, index}
+		{#each pages as page, index (pages.indexOf(page))}
 			{#if index === pages.length - 1}
 				<li class="is-active">
 					<!-- svelte-ignore a11y_missing_attribute -->
diff --git a/packages/svelte-undp-components/src/lib/components/ui/ColorMapPicker.svelte b/packages/svelte-undp-components/src/lib/components/ui/ColorMapPicker.svelte
index ac7f001a52..b39046c551 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/ColorMapPicker.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/ColorMapPicker.svelte
@@ -129,9 +129,9 @@
 
 	<div class="card-color">
 		{#key isReverseColors}
-			{#each colorMapTypes as colorMapType}
+			{#each colorMapTypes as colorMapType (colorMapType.name)}
 				{#if activeColorMapType === colorMapType.name}
-					{#each colorMapType.codes.sort((a, b) => a.localeCompare(b)) as cmName}
+					{#each colorMapType.codes.sort((a, b) => a.localeCompare(b)) as cmName (cmName)}
 						<div
 							class="card {colorMapName.replace('_r', '') === cmName ? 'selected' : ''}"
 							role="button"
diff --git a/packages/svelte-undp-components/src/lib/components/ui/CountrySelector.svelte b/packages/svelte-undp-components/src/lib/components/ui/CountrySelector.svelte
index e0ffe7a4f0..b51d3faa50 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/CountrySelector.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/CountrySelector.svelte
@@ -140,7 +140,7 @@
 	{#if showSelectedCountries && selected.length > 0}
 		<div class="selected-area fixed-grid has-3-cols p-2">
 			<div class="grid">
-				{#each selected as iso3}
+				{#each selected as iso3 (iso3)}
 					<div class="cell">
 						<Chips
 							label={iso3}
@@ -158,7 +158,7 @@
 		{#if countriesFiltered.length === 0}
 			<Notification type="info" showCloseButton={false}>No country found</Notification>
 		{:else}
-			{#each countriesFiltered as country}
+			{#each countriesFiltered as country (country.iso_3)}
 				{@const isSelected = selected.includes(country.iso_3)}
 				<div class="country-item p-1 px-2">
 					<label class="checkbox is-flex is-align-items-center">
diff --git a/packages/svelte-undp-components/src/lib/components/ui/IconImagePicker.svelte b/packages/svelte-undp-components/src/lib/components/ui/IconImagePicker.svelte
index ccf24470fe..233db0d20d 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/IconImagePicker.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/IconImagePicker.svelte
@@ -111,9 +111,9 @@
 	></button>
 
 	<div class="card-icon">
-		{#each iconGroupsByLetter as iconGroup}
+		{#each iconGroupsByLetter as iconGroup (iconGroup.id)}
 			{#if activeIconGroupId === iconGroup.id}
-				{#each iconGroup.values as spriteImage}
+				{#each iconGroup.values as spriteImage (spriteImage.alt)}
 					<div
 						role="button"
 						tabindex="0"
diff --git a/packages/svelte-undp-components/src/lib/components/ui/IconImageSelector.svelte b/packages/svelte-undp-components/src/lib/components/ui/IconImageSelector.svelte
index 78016c1102..0d571b4cb3 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/IconImageSelector.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/IconImageSelector.svelte
@@ -75,7 +75,7 @@
 >
 	{#if iconImage}
 		<span class="icon is-small">
-			<figure class={`image is-24x24`} data-testid="icon-figure">
+			<figure class="image is-24x24" data-testid="icon-figure">
 				<div style={iconImage}></div>
 			</figure>
 		</span>
diff --git a/packages/svelte-undp-components/src/lib/components/ui/MenuButton.svelte b/packages/svelte-undp-components/src/lib/components/ui/MenuButton.svelte
index 09960f879b..784517fa47 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/MenuButton.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/MenuButton.svelte
@@ -61,7 +61,7 @@
 			onmouseleave={() => (isButtonHovered = false)}
 		>
 			<div class="dropdown-content">
-				{#each subButtons as btn}
+				{#each subButtons as btn (subButtons.indexOf(btn))}
 					{#if btn.callback}
 						<!-- svelte-ignore a11y_missing_attribute -->
 						<a
diff --git a/packages/svelte-undp-components/src/lib/components/ui/SDGSelector.svelte b/packages/svelte-undp-components/src/lib/components/ui/SDGSelector.svelte
index 625a68172d..8913acf0ff 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/SDGSelector.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/SDGSelector.svelte
@@ -88,7 +88,7 @@
 </div>
 
 <div bind:this={tooltipContent} class="sdg-content tooltip">
-	{#each sdgNumbers as number}
+	{#each sdgNumbers as number (number)}
 		{@const isSelected = selected.includes(number)}
 		<div class="sdg-item py-2 pl-2 pr-4">
 			<label class="checkbox is-flex is-align-items-center">
diff --git a/packages/svelte-undp-components/src/lib/components/ui/SegmentButtons.svelte b/packages/svelte-undp-components/src/lib/components/ui/SegmentButtons.svelte
index b7d9dea982..80a88f8480 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/SegmentButtons.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/SegmentButtons.svelte
@@ -53,7 +53,7 @@
 </script>
 
 <div class="field has-addons is-flex {wrap ? 'is-flex-wrap-wrap' : ''}">
-	{#each buttons as button}
+	{#each buttons as button (button.value)}
 		<p class="control">
 			<button
 				type="button"
diff --git a/packages/svelte-undp-components/src/lib/components/ui/Tabs.svelte b/packages/svelte-undp-components/src/lib/components/ui/Tabs.svelte
index e545d1fc4e..056068170f 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/Tabs.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/Tabs.svelte
@@ -43,7 +43,7 @@
 		: null} m-0 mt-2 mb-2"
 >
 	<ul>
-		{#each tabs as tab}
+		{#each tabs as tab (tab.id)}
 			<li class={activeTab === tab.id ? 'is-active' : 'inactive-tab'}>
 				<a
 					href={tab.id.startsWith('#') ? tab.id : null}
diff --git a/packages/svelte-undp-components/src/lib/components/ui/TagSelector.svelte b/packages/svelte-undp-components/src/lib/components/ui/TagSelector.svelte
index f59f849ba4..dd05457a65 100644
--- a/packages/svelte-undp-components/src/lib/components/ui/TagSelector.svelte
+++ b/packages/svelte-undp-components/src/lib/components/ui/TagSelector.svelte
@@ -155,7 +155,7 @@
 	{#if showSelectedTags && type === 'multi' && selected.length > 0}
 		<div class="selected-area fixed-grid has-3-cols p-2">
 			<div class="grid">
-				{#each selected as tag}
+				{#each selected as tag (`${tag.key}-${tag.value}`)}
 					<div class="cell">
 						<Chips
 							bind:label={tag.value}
@@ -191,7 +191,7 @@
 				{/if}
 			</div>
 		{:else}
-			{#each tagsFiltered as tag}
+			{#each tagsFiltered as tag (`${tag.key}-${tag.value}`)}
 				{@const isSelected = selected.includes(tag)}
 				<!-- svelte-ignore a11y_interactive_supports_focus -->
 				<div
diff --git a/packages/svelte-undp-design/package.json b/packages/svelte-undp-design/package.json
index 1e07736359..35e1412561 100644
--- a/packages/svelte-undp-design/package.json
+++ b/packages/svelte-undp-design/package.json
@@ -50,7 +50,7 @@
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-storybook": "^0.11.2",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"jsdom": "^26.0.0",
 		"prettier": "^3.4.2",
diff --git a/packages/svelte-undp-design/src/lib/Breadcrumbs/Breadcrumbs.svelte b/packages/svelte-undp-design/src/lib/Breadcrumbs/Breadcrumbs.svelte
index fd20a58634..ed7192b21b 100644
--- a/packages/svelte-undp-design/src/lib/Breadcrumbs/Breadcrumbs.svelte
+++ b/packages/svelte-undp-design/src/lib/Breadcrumbs/Breadcrumbs.svelte
@@ -31,7 +31,7 @@
 {#if breadcrumbs && breadcrumbs.length > 0}
 	<nav aria-label="breadcrumb" data-viewport="true" class="breadcrumb-undp inviewport">
 		<ul>
-			{#each breadcrumbs as breadcrumb, index}
+			{#each breadcrumbs as breadcrumb, index (breadcrumbs.indexOf(breadcrumb))}
 				{#if index === breadcrumbs.length - 1}
 					<li>
 						<span class="icon-text">
diff --git a/packages/svelte-undp-design/src/lib/FluidCarousel/FluidCarousel.svelte b/packages/svelte-undp-design/src/lib/FluidCarousel/FluidCarousel.svelte
index 1d624bd06b..a3615009a3 100644
--- a/packages/svelte-undp-design/src/lib/FluidCarousel/FluidCarousel.svelte
+++ b/packages/svelte-undp-design/src/lib/FluidCarousel/FluidCarousel.svelte
@@ -54,7 +54,7 @@
 			bind:initialPageIndex
 			on:pageChange={handlePageChanged}
 		>
-			{#each contents as content}
+			{#each contents as content (contents.indexOf(content))}
 				<div
 					class="swiper-slide slider-slide"
 					aria-roledescription="slide"
diff --git a/packages/svelte-undp-design/src/lib/Footer/Footer.svelte b/packages/svelte-undp-design/src/lib/Footer/Footer.svelte
index 61440a64ec..d8b7a6d4e9 100644
--- a/packages/svelte-undp-design/src/lib/Footer/Footer.svelte
+++ b/packages/svelte-undp-design/src/lib/Footer/Footer.svelte
@@ -125,7 +125,7 @@
 				<div class="grid-x grid-margin-x" data-accordion="mobile">
 					<div class="cell medium-8">
 						<div class="grid-x grid-margin-x footer-items">
-							{#each Object.keys(footerItems) as pageTitle, index}
+							{#each Object.keys(footerItems) as pageTitle, index (pageTitle)}
 								{@const itemId = `footer-item-${index}`}
 								{@const panelId = `footer-panel-${index}`}
 								<div class="cell footer-item {isInverted ? 'inverted' : ''}">
@@ -160,7 +160,7 @@
 												? 'block'
 												: 'none'}"
 									>
-										{#each footerItems[pageTitle] as item}
+										{#each footerItems[pageTitle] as item (footerItems[pageTitle].indexOf(item))}
 											{#if item.callback}
 												<!-- svelte-ignore a11y_missing_attribute -->
 												<a
diff --git a/packages/svelte-undp-design/src/lib/Header/Header.svelte b/packages/svelte-undp-design/src/lib/Header/Header.svelte
index b300d2690f..2c7657d251 100644
--- a/packages/svelte-undp-design/src/lib/Header/Header.svelte
+++ b/packages/svelte-undp-design/src/lib/Header/Header.svelte
@@ -99,7 +99,7 @@
 					<div class="cell small-1 large-auto align-content-middle top-center">
 						<nav class="menu">
 							<ul class="">
-								{#each links as link, index}
+								{#each links as link, index (links.indexOf(link))}
 									{@const isLast = links.length > 1 && links.length - 1 === index}
 									{#if link.children && link.children.length > 0}
 										<li class="has-submenu">
@@ -123,7 +123,7 @@
 												</a>
 											{/if}
 											<ul class="submenu" data-submenu="true">
-												{#each link.children as child}
+												{#each link.children as child (link.children.indexOf(child))}
 													{#if child.children && child.children.length > 0}
 														<li class="has-submenu {isLast ? 'edge' : ''}">
 															{#if child.callback}
@@ -143,7 +143,7 @@
 																</a>
 															{/if}
 															<ul class="submenu" data-submenu="true">
-																{#each child.children as grandchild}
+																{#each child.children as grandchild (child.children.indexOf(grandchild))}
 																	<li class="">
 																		{#if grandchild.callback}
 																			{@const callback = grandchild.callback}
@@ -266,7 +266,7 @@
 								{actionMenu.title}
 							</button>
 							<ul role="menu">
-								{#each actionMenu.links as actionLink}
+								{#each actionMenu.links as actionLink (actionMenu.links.indexOf(actionLink))}
 									<li role="menuitem">
 										<a href={actionLink.href} tabindex="-1">{actionLink.title}</a>
 									</li>
@@ -295,7 +295,7 @@
 									: ''}"
 							>
 								<ul>
-									{#each links as link}
+									{#each links as link (links.indexOf(link))}
 										<li>
 											{#if link.children && link.children.length > 0}
 												<div
@@ -443,7 +443,7 @@
 									Back
 								</button>
 								<div class="mobile-mega-wrapper">
-									{#each links as link}
+									{#each links as link (links.indexOf(link))}
 										{#if link.children && link.children.length > 0}
 											<div
 												class="mobile-mega-content {link.id === submenuLink?.id
@@ -453,12 +453,12 @@
 											>
 												<h6 class="sub-heading">{link.title}</h6>
 												<ul class="sub-sub-menus">
-													{#each link.children as child}
+													{#each link.children as child (link.children.indexOf(child))}
 														{#if child.children && child.children.length > 0}
 															<li>
 																<span>{child.title}</span>
 																<ul>
-																	{#each child.children as grandchild}
+																	{#each child.children as grandchild (child.children.indexOf(grandchild))}
 																		<li>
 																			{#if grandchild.callback}
 																				{@const callback = grandchild.callback}
@@ -558,7 +558,7 @@
 										<li>
 											<span>{actionMenu.title}</span>
 											<ul>
-												{#each actionMenu.links as link}
+												{#each actionMenu.links as link (actionMenu.links.indexOf(link))}
 													<li><a href={link.href}>{link.title}</a></li>
 												{/each}
 											</ul>
diff --git a/packages/svelte-undp-design/src/lib/MultiSelect/MultiSelect.svelte b/packages/svelte-undp-design/src/lib/MultiSelect/MultiSelect.svelte
index 195b328002..c869e9977d 100644
--- a/packages/svelte-undp-design/src/lib/MultiSelect/MultiSelect.svelte
+++ b/packages/svelte-undp-design/src/lib/MultiSelect/MultiSelect.svelte
@@ -40,7 +40,7 @@
 		aria-hidden="true"
 		class={isFixHeight ? 'fix-height' : ''}
 	>
-		{#each items as item}
+		{#each items as item (item.id)}
 			{#if item.children}
 				<li
 					role="option"
@@ -55,7 +55,7 @@
 						}}>{item.label}</button
 					>
 					<ul role="listbox" class="sub-menu">
-						{#each item.children as child}
+						{#each item.children as child (child.id)}
 							<li role="option" aria-selected={child.checked}>
 								<div class="form-check">
 									<label for={child.id}>{child.label}</label>
diff --git a/packages/svelte-undp-design/src/lib/Radios/Radios.svelte b/packages/svelte-undp-design/src/lib/Radios/Radios.svelte
index 8d5561b673..908259ea9b 100644
--- a/packages/svelte-undp-design/src/lib/Radios/Radios.svelte
+++ b/packages/svelte-undp-design/src/lib/Radios/Radios.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <div class="radio-buttons" style="flex-direction: {isVertical ? 'column' : 'row'};">
-	{#each radios as radio}
+	{#each radios as radio (radio.value)}
 		<label class="radio">
 			<div class="vertical-align is-flex-row">
 				<input
diff --git a/packages/svelte-undp-design/src/lib/Select/Select.svelte b/packages/svelte-undp-design/src/lib/Select/Select.svelte
index f4c9f4ff47..92ca47c582 100644
--- a/packages/svelte-undp-design/src/lib/Select/Select.svelte
+++ b/packages/svelte-undp-design/src/lib/Select/Select.svelte
@@ -49,7 +49,7 @@
 		{/if}
 	</button>
 	<ul class={isOpened ? 'active' : ''} role="listbox" data-select-options="">
-		{#each items as item}
+		{#each items as item (item.value)}
 			<li
 				role="option"
 				tabindex="0"
diff --git a/packages/svelte-undp-design/src/lib/Sidebar/Sidebar.svelte b/packages/svelte-undp-design/src/lib/Sidebar/Sidebar.svelte
index 871321bef9..821fc1a3e1 100644
--- a/packages/svelte-undp-design/src/lib/Sidebar/Sidebar.svelte
+++ b/packages/svelte-undp-design/src/lib/Sidebar/Sidebar.svelte
@@ -64,7 +64,7 @@
 				Menu
 			</h6>
 			<ul>
-				{#each data as item, index}
+				{#each data as item, index (data.indexOf(item))}
 					<li aria-label="Sidebar heading" class={expanded[`${index}`] === true ? 'active' : ''}>
 						{#if item.callback}
 							<!-- svelte-ignore a11y_missing_attribute -->
@@ -97,7 +97,7 @@
 								class="accordion__panel"
 								style="display: {expanded[`${index}`] === true ? 'block' : 'none'};"
 							>
-								{#each item.children as child}
+								{#each item.children as child (item.children.indexOf(child))}
 									<li>
 										{#if child.callback}
 											<!-- svelte-ignore a11y_missing_attribute -->
diff --git a/packages/svelte-undp-design/src/lib/Tabs/Tabs.svelte b/packages/svelte-undp-design/src/lib/Tabs/Tabs.svelte
index 4f6050b0f8..c96c54018d 100644
--- a/packages/svelte-undp-design/src/lib/Tabs/Tabs.svelte
+++ b/packages/svelte-undp-design/src/lib/Tabs/Tabs.svelte
@@ -58,7 +58,7 @@
 		id="tablist_1"
 		role="tablist"
 	>
-		{#each tabs as tab}
+		{#each tabs as tab (tab.id)}
 			<li
 				class="tab-{tab.label} tabs-title {`${
 					activeTab && activeTab === tab.label ? 'is-active' : ''
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a0ddfa4aa..98e8cc73c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,8 +49,8 @@ importers:
         specifier: ^10.0.1
         version: 10.0.1(eslint@9.19.0)
       eslint-plugin-svelte:
-        specifier: ^2.46.1
-        version: 2.46.1(eslint@9.19.0)(svelte@5.19.9)
+        specifier: ^3.0.0
+        version: 3.3.3(eslint@9.19.0)(svelte@5.19.9)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
@@ -125,8 +125,8 @@ importers:
         specifier: ^10.0.1
         version: 10.0.1(eslint@9.19.0)
       eslint-plugin-svelte:
-        specifier: ^2.46.1
-        version: 2.46.1(eslint@9.19.0)(svelte@5.19.9)
+        specifier: ^3.0.0
+        version: 3.3.3(eslint@9.19.0)(svelte@5.19.9)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
@@ -219,8 +219,8 @@ importers:
         specifier: ^10.0.1
         version: 10.0.1(eslint@9.19.0)
       eslint-plugin-svelte:
-        specifier: ^2.46.1
-        version: 2.46.1(eslint@9.19.0)(svelte@5.19.9)
+        specifier: ^3.0.0
+        version: 3.3.3(eslint@9.19.0)(svelte@5.19.9)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
@@ -313,8 +313,8 @@ importers:
         specifier: ^10.0.1
         version: 10.0.1(eslint@9.19.0)
       eslint-plugin-svelte:
-        specifier: ^2.46.1
-        version: 2.46.1(eslint@9.19.0)(svelte@5.19.9)
+        specifier: ^3.0.0
+        version: 3.3.3(eslint@9.19.0)(svelte@5.19.9)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
@@ -482,8 +482,8 @@ importers:
         specifier: ^0.11.2
         version: 0.11.2(eslint@9.19.0)(typescript@5.7.3)
       eslint-plugin-svelte:
-        specifier: ^2.46.1
-        version: 2.46.1(eslint@9.19.0)(svelte@5.19.9)
+        specifier: ^3.0.0
+        version: 3.3.3(eslint@9.19.0)(svelte@5.19.9)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
@@ -621,8 +621,8 @@ importers:
         specifier: ^0.11.2
         version: 0.11.2(eslint@9.19.0)(typescript@5.7.3)
       eslint-plugin-svelte:
-        specifier: ^2.46.1
-        version: 2.46.1(eslint@9.19.0)(svelte@5.19.9)
+        specifier: ^3.0.0
+        version: 3.3.3(eslint@9.19.0)(svelte@5.19.9)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
@@ -887,8 +887,8 @@ importers:
         specifier: ^10.0.1
         version: 10.0.1(eslint@9.19.0)
       eslint-plugin-svelte:
-        specifier: ^2.46.1
-        version: 2.46.1(eslint@9.19.0)(svelte@5.19.9)
+        specifier: ^3.0.0
+        version: 3.3.3(eslint@9.19.0)(svelte@5.19.9)
       filesize:
         specifier: ^10.1.6
         version: 10.1.6
@@ -3687,8 +3687,8 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  eslint-compat-utils@0.5.1:
-    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
+  eslint-compat-utils@0.6.4:
+    resolution: {integrity: sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==}
     engines: {node: '>=12'}
     peerDependencies:
       eslint: '>=6.0.0'
@@ -3705,11 +3705,11 @@ packages:
     peerDependencies:
       eslint: '>=8'
 
-  eslint-plugin-svelte@2.46.1:
-    resolution: {integrity: sha512-7xYr2o4NID/f9OEYMqxsEQsCsj4KaMy4q5sANaKkAb6/QeCjYFxRmDm2S3YC3A3pl1kyPZ/syOx/i7LcWYSbIw==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  eslint-plugin-svelte@3.3.3:
+    resolution: {integrity: sha512-imzGqIgWbfsb/CR14d3k3M8MiVNGet+l9mjPhvo1Rm0Nxi0rNn4/eELqyR8FWlgKBMlGkOp2kshRJm0xpxNfHQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.0-0
+      eslint: ^8.57.1 || ^9.0.0
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
@@ -4991,11 +4991,11 @@ packages:
       tsx:
         optional: true
 
-  postcss-safe-parser@6.0.0:
-    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
-    engines: {node: '>=12.0'}
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
     peerDependencies:
-      postcss: ^8.3.3
+      postcss: ^8.4.31
 
   postcss-scss@4.0.9:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
@@ -5003,8 +5003,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
 
   postcss@8.5.1:
@@ -5573,9 +5573,9 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  svelte-eslint-parser@0.43.0:
-    resolution: {integrity: sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  svelte-eslint-parser@1.1.0:
+    resolution: {integrity: sha512-JP0v/wzDXWxza6c8K9ZjKKHYfgt0KidlbWx1e9n9UV4q+o28GTkk71fR0IDZDmLUDYs3vSq0+Tm9fofDqzGe1w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
@@ -9024,7 +9024,7 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@9.19.0):
+  eslint-compat-utils@0.6.4(eslint@9.19.0):
     dependencies:
       eslint: 9.19.0
       semver: 7.7.1
@@ -9043,20 +9043,19 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-svelte@2.46.1(eslint@9.19.0)(svelte@5.19.9):
+  eslint-plugin-svelte@3.3.3(eslint@9.19.0)(svelte@5.19.9):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.19.0)
       '@jridgewell/sourcemap-codec': 1.5.0
       eslint: 9.19.0
-      eslint-compat-utils: 0.5.1(eslint@9.19.0)
+      eslint-compat-utils: 0.6.4(eslint@9.19.0)
       esutils: 2.0.3
       known-css-properties: 0.35.0
       postcss: 8.5.1
       postcss-load-config: 3.1.4(postcss@8.5.1)
-      postcss-safe-parser: 6.0.0(postcss@8.5.1)
-      postcss-selector-parser: 6.1.2
+      postcss-safe-parser: 7.0.1(postcss@8.5.1)
       semver: 7.7.1
-      svelte-eslint-parser: 0.43.0(svelte@5.19.9)
+      svelte-eslint-parser: 1.1.0(svelte@5.19.9)
     optionalDependencies:
       svelte: 5.19.9
     transitivePeerDependencies:
@@ -9097,7 +9096,7 @@ snapshots:
       eslint-scope: 7.2.2
       eslint-utils: 3.0.0(eslint@8.4.1)
       eslint-visitor-keys: 3.4.3
-      espree: 9.2.0
+      espree: 9.6.1
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -10562,7 +10561,7 @@ snapshots:
       postcss: 8.5.1
     optional: true
 
-  postcss-safe-parser@6.0.0(postcss@8.5.1):
+  postcss-safe-parser@7.0.1(postcss@8.5.1):
     dependencies:
       postcss: 8.5.1
 
@@ -10570,7 +10569,7 @@ snapshots:
     dependencies:
       postcss: 8.5.1
 
-  postcss-selector-parser@6.1.2:
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -11130,13 +11129,14 @@ snapshots:
     dependencies:
       svelte: 5.19.9
 
-  svelte-eslint-parser@0.43.0(svelte@5.19.9):
+  svelte-eslint-parser@1.1.0(svelte@5.19.9):
     dependencies:
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.2.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       postcss: 8.5.1
       postcss-scss: 4.0.9(postcss@8.5.1)
+      postcss-selector-parser: 7.1.0
     optionalDependencies:
       svelte: 5.19.9
 
diff --git a/sites/geohub/package.json b/sites/geohub/package.json
index fb474cabc1..384072c8b6 100644
--- a/sites/geohub/package.json
+++ b/sites/geohub/package.json
@@ -91,7 +91,7 @@
 		"easymde": "^2.18.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"filesize": "^10.1.6",
 		"flag-icons": "^7.3.2",
 		"globals": "^16.0.0",
diff --git a/sites/geohub/src/components/header/UserAccount.svelte b/sites/geohub/src/components/header/UserAccount.svelte
index 19c5444376..ad00aade29 100644
--- a/sites/geohub/src/components/header/UserAccount.svelte
+++ b/sites/geohub/src/components/header/UserAccount.svelte
@@ -72,7 +72,7 @@
 				<span
 					class="initial-avator is-flex is-justify-content-center is-align-items-center has-background-grey-lighter"
 				>
-					{#each names as name}
+					{#each names as name (name)}
 						<p class="is-size-5 has-text-black">
 							{name.slice(0, 1)}
 						</p>
@@ -151,7 +151,7 @@
 					</div>
 				{:then}
 					<div class="changelog-content content">
-						{#each sections as section, index}
+						{#each sections as section, index (sections.indexOf(section))}
 							<div class="changelog-section">
 								<div
 									class="changelog-header py-4 is-flex is-align-items-center"
diff --git a/sites/geohub/src/components/pages/data/datasets/DatasetMapView.svelte b/sites/geohub/src/components/pages/data/datasets/DatasetMapView.svelte
index a90e24949b..a8a777af1a 100644
--- a/sites/geohub/src/components/pages/data/datasets/DatasetMapView.svelte
+++ b/sites/geohub/src/components/pages/data/datasets/DatasetMapView.svelte
@@ -179,7 +179,7 @@
 	{#if clickedFeatures?.length > 0}
 		<div class="tabs is-centered is-boxed">
 			<ul>
-				{#each Array(clickedFeatures.length).keys() as index}
+				{#each Array(clickedFeatures.length).keys() as index (index)}
 					<li class={index === activeFeatureIndex ? 'is-active' : ''}>
 						<!-- svelte-ignore a11y_missing_attribute -->
 						<a
@@ -198,7 +198,7 @@
 				{/each}
 			</ul>
 		</div>
-		{#each clickedFeatures as feature, index}
+		{#each clickedFeatures as feature, index (clickedFeatures.indexOf(feature))}
 			{#if index === activeFeatureIndex}
 				{@const name = clean(feature.properties.name)}
 				{@const description = feature.properties.description}
diff --git a/sites/geohub/src/components/pages/data/datasets/DatasetPreview.svelte b/sites/geohub/src/components/pages/data/datasets/DatasetPreview.svelte
index e9ab87f160..a907a4e54b 100644
--- a/sites/geohub/src/components/pages/data/datasets/DatasetPreview.svelte
+++ b/sites/geohub/src/components/pages/data/datasets/DatasetPreview.svelte
@@ -169,7 +169,7 @@
 						<div class="control">
 							<div class="select is-link is-fullwidth">
 								<select bind:value={selectedVectorLayer} onchange={handleLayerTypeChanged}>
-									{#each tilestatsLayers as layer}
+									{#each tilestatsLayers as layer (layer.layer)}
 										<option value={layer}>{layer.layer}</option>
 									{/each}
 								</select>
diff --git a/sites/geohub/src/components/pages/data/datasets/PublishedDatasetRow.svelte b/sites/geohub/src/components/pages/data/datasets/PublishedDatasetRow.svelte
index 276d0b2fa4..a8cf95ec75 100644
--- a/sites/geohub/src/components/pages/data/datasets/PublishedDatasetRow.svelte
+++ b/sites/geohub/src/components/pages/data/datasets/PublishedDatasetRow.svelte
@@ -111,7 +111,7 @@
 		>
 			{#if sdgs.length > 0}
 				<div class="sdg-grid">
-					{#each sdgs as sdg, index}
+					{#each sdgs as sdg, index (sdg)}
 						{#if index < 3}
 							<span class="icon is-medium">
 								<i class="sdg-{sdg.value}"></i>
@@ -128,7 +128,7 @@
 						</div>
 
 						<div class="tooltip sdg-grid p-2" role="menu" bind:this={tooltipContent}>
-							{#each sdgs.slice(3) as sdg}
+							{#each sdgs.slice(3) as sdg (sdg)}
 								<span class="icon is-medium">
 									<i class="sdg-{sdg.value}"></i>
 								</span>
diff --git a/sites/geohub/src/components/pages/data/datasets/PublishedDatasets.svelte b/sites/geohub/src/components/pages/data/datasets/PublishedDatasets.svelte
index 8020259b26..3d0897e6c8 100644
--- a/sites/geohub/src/components/pages/data/datasets/PublishedDatasets.svelte
+++ b/sites/geohub/src/components/pages/data/datasets/PublishedDatasets.svelte
@@ -379,7 +379,7 @@
 					<div>
 						<div class="select mt-auto">
 							<select bind:value={limit} onchange={handleLimitChanged} disabled={isLoading}>
-								{#each LimitOptions as limit}
+								{#each LimitOptions as limit (limit)}
 									<option value={`${limit}`}>{limit}</option>
 								{/each}
 							</select>
@@ -394,7 +394,7 @@
 					<div>
 						<div class="select mt-auto">
 							<select bind:value={sortby} onchange={handleSortbyChanged} disabled={isLoading}>
-								{#each DatasetSortingColumns as option}
+								{#each DatasetSortingColumns as option (option.value)}
 									<option value={option.value}>{option.label}</option>
 								{/each}
 							</select>
@@ -526,7 +526,7 @@
 						<div>
 							<div class="flex is-flex-wrap-wrap pb-2">
 								{#key selectedContinents}
-									{#each selectedContinents as continent}
+									{#each selectedContinents as continent (continent)}
 										<span class="pl-1">
 											<Chips
 												label={continent}
@@ -553,7 +553,7 @@
 			/>
 		</div>
 		<div hidden={!showAdvancedSearch}>
-			{#each [{ key: 'provider', title: 'DataProviders' }, { key: 'year', title: 'Year' }, { key: 'resolution', title: 'Resolution' }, { key: 'theme', title: 'Theme' }, { key: 'granularity', title: 'Admin level' }] as tagKey}
+			{#each [{ key: 'provider', title: 'DataProviders' }, { key: 'year', title: 'Year' }, { key: 'resolution', title: 'Resolution' }, { key: 'theme', title: 'Theme' }, { key: 'granularity', title: 'Admin level' }] as tagKey (tagKey.key)}
 				<div class="py-1">
 					<FieldControl title={tagKey.title} isFirstCharCapitalized={false} showHelp={false}>
 						{#snippet control()}
@@ -611,7 +611,7 @@
 							</tr>
 						</thead>
 						<tbody>
-							{#each datasets.features as feature}
+							{#each datasets.features as feature (feature.properties.id)}
 								<PublishedDatasetRow {feature} />
 							{/each}
 						</tbody>
@@ -620,7 +620,7 @@
 			</div>
 			<div hidden={viewType !== 'card'}>
 				<div class="columns is-multiline is-mobile">
-					{#each datasets.features as feature}
+					{#each datasets.features as feature (feature.properties.id)}
 						<div class="column is-one-third-tablet is-one-third-desktop is-full-mobile p-2">
 							<CardView {feature} />
 						</div>
diff --git a/sites/geohub/src/components/pages/data/datasets/RasterBandSelectbox.svelte b/sites/geohub/src/components/pages/data/datasets/RasterBandSelectbox.svelte
index 12e1599dc1..a3529a841a 100644
--- a/sites/geohub/src/components/pages/data/datasets/RasterBandSelectbox.svelte
+++ b/sites/geohub/src/components/pages/data/datasets/RasterBandSelectbox.svelte
@@ -69,7 +69,7 @@
 {#if !isRgbTile && bands && bands.length > 0}
 	<div class="select is-fullwidth">
 		<select bind:value={selectedBand} {disabled} onchange={setActiveBand}>
-			{#each bands as band, index}
+			{#each bands as band, index (band)}
 				<option value={band}>{getBandDescription(index)}</option>
 			{/each}
 		</select>
diff --git a/sites/geohub/src/components/pages/data/datasets/UserPermission.svelte b/sites/geohub/src/components/pages/data/datasets/UserPermission.svelte
index 3b70d0e881..010e4a868d 100644
--- a/sites/geohub/src/components/pages/data/datasets/UserPermission.svelte
+++ b/sites/geohub/src/components/pages/data/datasets/UserPermission.svelte
@@ -528,7 +528,7 @@ ${username}`;
 				</tr>
 			</thead>
 			<tbody>
-				{#each permissions as permission}
+				{#each permissions as permission (permission.user_email)}
 					<tr class="border-bottom">
 						<td class="email">
 							{permission.user_email}
@@ -624,7 +624,7 @@ ${username}`;
 								</div>
 								<div class="dropdown-menu user-list-menu" id="dropdown-menu" role="menu">
 									<div class="dropdown-content">
-										{#each userList as user}
+										{#each userList as user (user)}
 											<!-- svelte-ignore a11y_missing_attribute -->
 											<!-- svelte-ignore a11y_interactive_supports_focus -->
 											<a
@@ -657,7 +657,7 @@ ${username}`;
 					{#snippet control()}
 						<div class="select is-fullwidth">
 							<select class="is-capitalized" bind:value={user_permission} disabled={isUpadating}>
-								{#each getPermissionList() as p}
+								{#each getPermissionList() as p (p)}
 									<option value={p}>{getPermissionLabel(p)}</option>
 								{/each}
 							</select>
@@ -726,7 +726,7 @@ ${username}`;
 					{#snippet control()}
 						<div class="select is-fullwidth">
 							<select class="is-capitalized" bind:value={user_permission} disabled={isUpadating}>
-								{#each getPermissionList() as p}
+								{#each getPermissionList() as p (p)}
 									<option value={p}>{getPermissionLabel(p)}</option>
 								{/each}
 							</select>
diff --git a/sites/geohub/src/components/pages/data/ingesting/IngestingDatasetRow.svelte b/sites/geohub/src/components/pages/data/ingesting/IngestingDatasetRow.svelte
index 51e60ba919..a2fd6cb39d 100644
--- a/sites/geohub/src/components/pages/data/ingesting/IngestingDatasetRow.svelte
+++ b/sites/geohub/src/components/pages/data/ingesting/IngestingDatasetRow.svelte
@@ -442,7 +442,7 @@
 </tr>
 
 {#if isDetailsShown && dataset.datasets}
-	{#each dataset.datasets as ds}
+	{#each dataset.datasets as ds (ds.id)}
 		<IngestingDatasetRowDetail dataset={ds} change={handleDatasetRowChanged} />
 	{/each}
 {/if}
diff --git a/sites/geohub/src/components/pages/data/ingesting/IngestingDatasets.svelte b/sites/geohub/src/components/pages/data/ingesting/IngestingDatasets.svelte
index e6efa51160..b03c342138 100644
--- a/sites/geohub/src/components/pages/data/ingesting/IngestingDatasets.svelte
+++ b/sites/geohub/src/components/pages/data/ingesting/IngestingDatasets.svelte
@@ -103,7 +103,7 @@
 				<thead>
 					<tr>
 						<th class="px-1"></th>
-						{#each headerCols as col, index}
+						{#each headerCols as col, index (col.name)}
 							<th class={index === 0 ? 'pl-0' : ''}>
 								{#if col.sortingCol}
 									<VectorTableColumn
@@ -123,7 +123,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					{#each datasets as dataset}
+					{#each datasets as dataset (datasets.indexOf(dataset))}
 						<IngestingDatasetRow {dataset} change={getIngestingDatasets} />
 					{/each}
 				</tbody>
diff --git a/sites/geohub/src/components/pages/map/MapStyleCardList.svelte b/sites/geohub/src/components/pages/map/MapStyleCardList.svelte
index 2ba63a0462..ba3ffbdbd9 100644
--- a/sites/geohub/src/components/pages/map/MapStyleCardList.svelte
+++ b/sites/geohub/src/components/pages/map/MapStyleCardList.svelte
@@ -68,7 +68,7 @@
 						</tr>
 					</thead>
 					<tbody>
-						{#each mapData.styles as style}
+						{#each mapData.styles as style (style.id)}
 							{@const accessIcon = getAccessLevelIcon(style.access_level, true)}
 							{@const selected = selectedId === style.id}
 							<tr
@@ -121,7 +121,7 @@
 			</div>
 		{:else}
 			<div class="columns is-multiline is-mobile">
-				{#each mapData.styles as style}
+				{#each mapData.styles as style (style.id)}
 					{@const styleLink = style.links.find((l) => l.rel === 'static-auto')?.href}
 					{@const accessLevel = style.access_level}
 					{@const accessIcon = getAccessLevelIcon(accessLevel, true)}
@@ -143,7 +143,7 @@
 									image={styleLink.replace('{width}', '298').replace('{height}', '180')}
 									width={298}
 									height={180}
-									linkName={'Explore'}
+									linkName="Explore"
 									accent={accentColor}
 									icon={accessIcon}
 								/>
diff --git a/sites/geohub/src/components/pages/map/data/DataCard.svelte b/sites/geohub/src/components/pages/map/data/DataCard.svelte
index cbf7bcf87b..ea965a5d51 100644
--- a/sites/geohub/src/components/pages/map/data/DataCard.svelte
+++ b/sites/geohub/src/components/pages/map/data/DataCard.svelte
@@ -315,7 +315,7 @@
 						{#if !is_raster && tilestatsLayers?.length > 1}
 							<DataCardInfo bind:feature bind:metadata onStarDeleted={handleStarDeleted} />
 
-							{#each tilestatsLayers as layer, index}
+							{#each tilestatsLayers as layer, index (layer.layer)}
 								<DataVectorCard
 									bind:layer={tilestatsLayers[index]}
 									bind:feature
@@ -332,7 +332,7 @@
 											<MiniMap
 												bind:feature
 												{width}
-												height={'150px'}
+												height="150px"
 												bind:isLoadMap={isExpanded}
 												bind:metadata
 												band={isRgbTile ? undefined : selectedBand}
diff --git a/sites/geohub/src/components/pages/map/data/DataCategoryCardList.svelte b/sites/geohub/src/components/pages/map/data/DataCategoryCardList.svelte
index c7f9dccfa6..7acaf7a9f4 100644
--- a/sites/geohub/src/components/pages/map/data/DataCategoryCardList.svelte
+++ b/sites/geohub/src/components/pages/map/data/DataCategoryCardList.svelte
@@ -48,7 +48,7 @@
 	class="container mt-2 category-container"
 	style="grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))"
 >
-	{#each categories as category}
+	{#each categories as category (categories.indexOf(category))}
 		<DataCategoryCard
 			{category}
 			onclick={() => {
diff --git a/sites/geohub/src/components/pages/map/data/DataVectorCard.svelte b/sites/geohub/src/components/pages/map/data/DataVectorCard.svelte
index cf18ed2bf8..173ea20570 100644
--- a/sites/geohub/src/components/pages/map/data/DataVectorCard.svelte
+++ b/sites/geohub/src/components/pages/map/data/DataVectorCard.svelte
@@ -147,7 +147,7 @@
 							<MiniMap
 								bind:feature
 								{width}
-								height={'200px'}
+								height="200px"
 								bind:isLoadMap={isExpanded}
 								bind:metadata
 								bind:layer
@@ -161,7 +161,7 @@
 						<MiniMap
 							bind:feature
 							{width}
-							height={'200px'}
+							height="200px"
 							bind:isLoadMap={isExpanded}
 							bind:metadata
 							bind:layer
diff --git a/sites/geohub/src/components/pages/map/data/DataView.svelte b/sites/geohub/src/components/pages/map/data/DataView.svelte
index 46fe173793..ed66aacdcb 100644
--- a/sites/geohub/src/components/pages/map/data/DataView.svelte
+++ b/sites/geohub/src/components/pages/map/data/DataView.svelte
@@ -286,7 +286,7 @@
 	<div class="my-2 ml-1 mr-2">
 		<nav class="breadcrumb has-text-weight-bold" aria-label="breadcrumbs">
 			<ul>
-				{#each breadcrumbs as page, index}
+				{#each breadcrumbs as page, index (breadcrumbs.indexOf(page))}
 					<li class={index === breadcrumbs.length - 1 ? 'is-active' : ''}>
 						<!-- svelte-ignore a11y_missing_attribute -->
 						<a
@@ -323,7 +323,7 @@
 	style="height: {totalHeight}px;"
 	bind:this={containerDivElement}
 >
-	{#each breadcrumbs as page, index}
+	{#each breadcrumbs as page, index (breadcrumbs.indexOf(page))}
 		{#if index === breadcrumbs.length - 1}
 			{#if isDatasetLoading() || query?.length > 0}
 				{#if isLoading}
@@ -341,7 +341,7 @@
 							{/if}
 						</Notification>
 					{:else}
-						{#each DataItemFeatureCollection.features as feature}
+						{#each DataItemFeatureCollection.features as feature (feature.properties.id)}
 							<DataCard
 								{feature}
 								bind:isExpanded={expanded[feature.properties.id as string]}
diff --git a/sites/geohub/src/components/pages/map/data/RasterAlgorithmExplorer.svelte b/sites/geohub/src/components/pages/map/data/RasterAlgorithmExplorer.svelte
index 6eeee2f5ae..d0fad8d3a3 100644
--- a/sites/geohub/src/components/pages/map/data/RasterAlgorithmExplorer.svelte
+++ b/sites/geohub/src/components/pages/map/data/RasterAlgorithmExplorer.svelte
@@ -295,7 +295,7 @@
 		<div class="columns is-multiline is-mobile">
 			{#if mode === 'map'}
 				<!-- if map mode, show selected algos first -->
-				{#each ids as name}
+				{#each ids as name (name)}
 					{@const algo = algorithms[name]}
 					{#if isCatalog || (algo.inputs.nbands <= availableBands.length && feature.properties.tags.find((t) => t.key === ALGORITHM_TAG_KEY && t.value === name))}
 						<div class="column is-one-third-tablet is-one-quarter-desktop is-full-mobile">
@@ -317,7 +317,7 @@
 			{/if}
 
 			{#key tagSelectionChanged}
-				{#each ids as name}
+				{#each ids as name (name)}
 					{@const algo = algorithms[name]}
 					{#if isCatalog || algo.inputs.nbands <= availableBands.length}
 						{@const isSelected =
diff --git a/sites/geohub/src/components/pages/map/layers/LayerList.svelte b/sites/geohub/src/components/pages/map/layers/LayerList.svelte
index b40513c38a..8e01e8baca 100644
--- a/sites/geohub/src/components/pages/map/layers/LayerList.svelte
+++ b/sites/geohub/src/components/pages/map/layers/LayerList.svelte
@@ -255,7 +255,7 @@
 		<div class="layer-contents" style="height: {totalHeight}px;">
 			{#key isLayerListChanged}
 				{#key $layerListStore}
-					{#each $layerListStore as layer, index}
+					{#each $layerListStore as layer, index (layer.id)}
 						<LayerTemplate
 							bind:layer={$layerListStore[index]}
 							isExpanded={layer.isExpanded as boolean}
diff --git a/sites/geohub/src/components/pages/map/layers/raster/RasterTransformSimple.svelte b/sites/geohub/src/components/pages/map/layers/raster/RasterTransformSimple.svelte
index 1f8cec6cde..b135f9587d 100644
--- a/sites/geohub/src/components/pages/map/layers/raster/RasterTransformSimple.svelte
+++ b/sites/geohub/src/components/pages/map/layers/raster/RasterTransformSimple.svelte
@@ -245,7 +245,7 @@
 				</div>
 
 				<div class="grid mt-2">
-					{#each RasterComparisonOperators as operator}
+					{#each RasterComparisonOperators as operator (operator.value)}
 						{@const isVisible = !operator.disabled}
 						{#if isVisible}
 							<button
diff --git a/sites/geohub/src/components/pages/map/layers/vector/OperationButtons.svelte b/sites/geohub/src/components/pages/map/layers/vector/OperationButtons.svelte
index 103f6f4390..a98504e8d5 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/OperationButtons.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/OperationButtons.svelte
@@ -51,7 +51,7 @@
 
 <div class="fixed-grid has-3-cols">
 	<div class="grid is-gap-1">
-		{#each operationOptions as operation}
+		{#each operationOptions as operation (operation.value)}
 			<div class="cell">
 				<div
 					data-testid="operation-button"
diff --git a/sites/geohub/src/components/pages/map/layers/vector/Tags.svelte b/sites/geohub/src/components/pages/map/layers/vector/Tags.svelte
index 9cf0b2b3f7..e29ff7c229 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/Tags.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/Tags.svelte
@@ -323,7 +323,7 @@
 	<label for={id} class={labelShow ? '' : 'sr-only'}>{labelText}</label>
 
 	{#if tags.length > 0}
-		{#each tags as tag, i}
+		{#each tags as tag, i (tags.indexOf(tag))}
 			<div
 				class="tags has-addons mb-0"
 				aria-label={typeof tag === 'string' ? clean(tag) : clean(tag[autoCompleteKey])}
@@ -373,7 +373,7 @@
 {#if autoComplete && arrelementsmatch.length > 0}
 	<div style="z-index: 99" class="svelte-tags-input-matchs-parent" hidden={hideOptions}>
 		<ul id="{id}_matchs" class="svelte-tags-input-matchs">
-			{#each arrelementsmatch as element, index}
+			{#each arrelementsmatch as element, index (arrelementsmatch.indexOf(element))}
 				<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 				<li
 					aria-label={element.label}
diff --git a/sites/geohub/src/components/pages/map/layers/vector/ValueInput.svelte b/sites/geohub/src/components/pages/map/layers/vector/ValueInput.svelte
index b35bf2b0af..d0e44aa138 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/ValueInput.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/ValueInput.svelte
@@ -433,10 +433,10 @@
 				<Tags
 					ontags={handleTags}
 					maxTags={acceptSingleTag ? 1 : 100}
-					splitWith={'/'}
+					splitWith="/"
 					onlyUnique={true}
 					removeKeys={[27]}
-					placeholder={'Select a value...'}
+					placeholder="Select a value..."
 					autoComplete={sol}
 					tags={tagsList}
 					allowBlur={true}
@@ -477,7 +477,7 @@
 				/>
 
 				<div class="buttons">
-					{#each svals as v}
+					{#each svals as v (svals.indexOf(v))}
 						<button
 							onclick={(e) => {
 								expressionValue = v;
diff --git a/sites/geohub/src/components/pages/map/layers/vector/VectorFilter.svelte b/sites/geohub/src/components/pages/map/layers/vector/VectorFilter.svelte
index 4ac2e3d0f6..8051ae0b26 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/VectorFilter.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/VectorFilter.svelte
@@ -402,7 +402,7 @@
 						</span>
 					</button>
 					<div class="dropdown-content" bind:this={tooltipContent}>
-						{#each expressionsArray as expr, i}
+						{#each expressionsArray as expr, i (expr.index)}
 							{@const op = VectorFilterOperators.filter((i) => i.value == expr.operator)}
 
 							{#if op && op.length > 0}
diff --git a/sites/geohub/src/components/pages/map/layers/vector/VectorLegend.svelte b/sites/geohub/src/components/pages/map/layers/vector/VectorLegend.svelte
index 5f567d3e12..e0ab73119f 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/VectorLegend.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/VectorLegend.svelte
@@ -351,7 +351,7 @@
 						minValue={0}
 						maxValue={10}
 						stepValue={0.1}
-						propertyName={'line-width'}
+						propertyName="line-width"
 						styleType="paint"
 						legendCssTemplate={`margin-top: 13px; width: 40px; height: {value}px; background-color: ${$defaultColorStore};`}
 						dataLabel="Line width"
diff --git a/sites/geohub/src/components/pages/map/layers/vector/VectorTable.svelte b/sites/geohub/src/components/pages/map/layers/vector/VectorTable.svelte
index 386cc904c1..ba971ddd32 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/VectorTable.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/VectorTable.svelte
@@ -475,7 +475,7 @@
 						</div>
 						<div class="dropdown-menu" id="download-table-dropdown-menu" role="menu">
 							<div class="dropdown-content">
-								{#each SupportedTableFormats as format}
+								{#each SupportedTableFormats as format (format)}
 									{@const fileUrl = tableData?.links?.find((l) => l.rel === format)?.href}
 									{#if fileUrl}
 										<a href={fileUrl} target="_blank" class="dropdown-item">
@@ -494,7 +494,7 @@
 						use:tippyTooltip={{ content: 'Change the maximum rows in the table' }}
 						disabled={!tableData}
 					>
-						{#each limits as limit}
+						{#each limits as limit (limit)}
 							<option value={limit}>{limit}</option>
 						{/each}
 					</select>
@@ -518,7 +518,7 @@
 							<tr>
 								<th class="row-number"></th>
 								{#if columns.length > 0}
-									{#each columns as col, index}
+									{#each columns as col, index (col.name)}
 										<th style="width: {col.width}px;">
 											<VectorTableColumn
 												bind:name={col.name}
@@ -544,7 +544,7 @@
 						</thead>
 
 						<tbody>
-							{#each tableData.features as feature, index}
+							{#each tableData.features as feature, index (tableData.features.indexOf(feature))}
 								{#if feature.properties}
 									<tr
 										class={isEqual(JSON.stringify(selectedRow), JSON.stringify(feature))
@@ -555,7 +555,7 @@
 									>
 										<th class="row-number">{index + 1}</th>
 										{#if columns.length > 0}
-											{#each columns as col}
+											{#each columns as col (col.name)}
 												{@const value = feature.properties[col.name]}
 												<td style="max-width: {col.width}px;">
 													{#if value}
diff --git a/sites/geohub/src/components/pages/map/plugins/MapQueryInfoControl.svelte b/sites/geohub/src/components/pages/map/plugins/MapQueryInfoControl.svelte
index dca4564fee..3d8d25b268 100644
--- a/sites/geohub/src/components/pages/map/plugins/MapQueryInfoControl.svelte
+++ b/sites/geohub/src/components/pages/map/plugins/MapQueryInfoControl.svelte
@@ -499,7 +499,7 @@
 					<Loader size="small" />
 				</div>
 			{:else}
-				{#each features as feature}
+				{#each features as feature (features.indexOf(feature))}
 					<Accordion title={`${feature.properties.name}`} bind:isExpanded={expanded[feature.id]}>
 						{#snippet content()}
 							<div>
@@ -511,7 +511,7 @@
 										</tr>
 									</thead>
 									<tbody>
-										{#each Object.keys(feature.properties) as property}
+										{#each Object.keys(feature.properties) as property (property)}
 											{@const value = feature.properties[property]}
 											{#if value}
 												<tr>
@@ -544,7 +544,7 @@
 					</Accordion>
 				{/each}
 				{#if coordinates && coordinates.length === 2}
-					<Accordion title={`Coordinates`} bind:isExpanded={expanded['coordinates']}>
+					<Accordion title="Coordinates" bind:isExpanded={expanded['coordinates']}>
 						{#snippet content()}
 							<div>
 								<table class="attr-table table is-striped is-narrow is-hoverable s-fullwidth">
diff --git a/sites/geohub/src/components/pages/map/plugins/MaplibreLocationSwitchControl.svelte b/sites/geohub/src/components/pages/map/plugins/MaplibreLocationSwitchControl.svelte
index 9f4d6ba1f6..6dbc877cbb 100644
--- a/sites/geohub/src/components/pages/map/plugins/MaplibreLocationSwitchControl.svelte
+++ b/sites/geohub/src/components/pages/map/plugins/MaplibreLocationSwitchControl.svelte
@@ -85,7 +85,7 @@
 </script>
 
 <div class="location-switch-control" bind:this={contentDiv}>
-	{#each places as place}
+	{#each places as place (place.name)}
 		<button
 			class="button is-light is-fullwidth p-2"
 			onclick={() => {
diff --git a/sites/geohub/src/components/pages/storymap/GeoHubMapSelector.svelte b/sites/geohub/src/components/pages/storymap/GeoHubMapSelector.svelte
index f0b2e6411a..8401f22747 100644
--- a/sites/geohub/src/components/pages/storymap/GeoHubMapSelector.svelte
+++ b/sites/geohub/src/components/pages/storymap/GeoHubMapSelector.svelte
@@ -107,7 +107,7 @@
 					<div>
 						<div class="select mt-auto">
 							<select bind:value={sortby} onchange={handleSortbyChanged}>
-								{#each MapSortingColumns as option}
+								{#each MapSortingColumns as option (option.value)}
 									<option value={option.value}>{option.label}</option>
 								{/each}
 							</select>
diff --git a/sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte b/sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte
index d9736be4b9..6f769ef9b1 100644
--- a/sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte
+++ b/sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte
@@ -404,7 +404,7 @@
 														handleChange();
 													}}
 												>
-													{#each mapControlPositions as item}
+													{#each mapControlPositions as item (item.value)}
 														<option value={item.value}>{item.title}</option>
 													{/each}
 												</select>
diff --git a/sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte b/sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte
index e699b8942e..f7cb144692 100644
--- a/sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte
+++ b/sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte
@@ -169,7 +169,7 @@
 		<table class="table is-striped is-narrow is-hoverable is-fullwidth layer-panel">
 			<tbody>
 				{#key requireUpdated}
-					{#each styleJson.layers as layer}
+					{#each styleJson.layers as layer (layer.id)}
 						{@const isGeoHub = isGeoHubLayer(layer.id)}
 						{#if !showOnlyGeoHubLayers || (showOnlyGeoHubLayers && isGeoHub)}
 							{@const layerName = getLayerName(layer.id)}
diff --git a/sites/geohub/src/components/pages/storymap/StorymapStyleSelector.svelte b/sites/geohub/src/components/pages/storymap/StorymapStyleSelector.svelte
index 1a2e33bd7d..7d9da0f8bb 100644
--- a/sites/geohub/src/components/pages/storymap/StorymapStyleSelector.svelte
+++ b/sites/geohub/src/components/pages/storymap/StorymapStyleSelector.svelte
@@ -171,7 +171,7 @@
 				hidden={activeTab !== 'base_style_id'}
 			>
 				<div class="grid">
-					{#each MapStyles as style}
+					{#each MapStyles as style (style.id)}
 						<label
 							class="cell"
 							use:tippyTooltip={{
@@ -237,7 +237,7 @@
 							<div>
 								<div class="basemap-style-selector fixed-grid has-4-cols">
 									<div class="grid">
-										{#each MapStyles as style}
+										{#each MapStyles as style (style.id)}
 											<label
 												class="cell"
 												use:tippyTooltip={{
diff --git a/sites/geohub/src/components/pages/storymap/StorymapTable.svelte b/sites/geohub/src/components/pages/storymap/StorymapTable.svelte
index 627f279ab0..9131da8cc0 100644
--- a/sites/geohub/src/components/pages/storymap/StorymapTable.svelte
+++ b/sites/geohub/src/components/pages/storymap/StorymapTable.svelte
@@ -42,7 +42,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					{#each storiesData.stories as story}
+					{#each storiesData.stories as story (story.id)}
 						{@const storymapLink = story.links?.find((l) => l.rel === 'storymap')?.href}
 						{@const accessIcon = getAccessLevelIcon(story.access_level as AccessLevel, true)}
 						{#if storymapLink}
@@ -118,7 +118,7 @@
 		</div>
 	{:else}
 		<div class="columns is-multiline is-mobile">
-			{#each storiesData.stories as story}
+			{#each storiesData.stories as story (story.id)}
 				{@const storyLink = story.links?.find((l) => l.rel === 'storymap')?.href}
 				{@const staticLink = story.links?.find((l) => l.rel === 'static-auto')?.href}
 				{@const accessLevel = story.access_level}
diff --git a/sites/geohub/src/components/util/AccessLevelSwitcher.svelte b/sites/geohub/src/components/util/AccessLevelSwitcher.svelte
index a750ee3a40..777328d022 100644
--- a/sites/geohub/src/components/util/AccessLevelSwitcher.svelte
+++ b/sites/geohub/src/components/util/AccessLevelSwitcher.svelte
@@ -82,7 +82,7 @@
 				<div class="select is-fullwidth">
 					<select bind:value={accessLevel} onchange={handleSelectClicked}>
 						<option value={AccessLevel.ALL}>All</option>
-						{#each getSegmentButtons() as item}
+						{#each getSegmentButtons() as item (item.value)}
 							<option value={item.value}>{item.title}</option>
 						{/each}
 					</select>
diff --git a/sites/geohub/src/components/util/stac/StacApiExplorer.svelte b/sites/geohub/src/components/util/stac/StacApiExplorer.svelte
index 7f4740324c..040303f3d0 100644
--- a/sites/geohub/src/components/util/stac/StacApiExplorer.svelte
+++ b/sites/geohub/src/components/util/stac/StacApiExplorer.svelte
@@ -779,7 +779,7 @@
 									disabled={isLoading}
 									onchange={handleMapExtentChanged}
 								>
-									{#each StacSearchLimitOptions as limit}
+									{#each StacSearchLimitOptions as limit (limit)}
 										<option value={limit}>{limit}</option>
 									{/each}
 								</select>
@@ -824,7 +824,7 @@
 
 					<div class="select is-fullwidth">
 						<select bind:value={selectedDateFilterOption} onchange={handleDateFilterOptionChanged}>
-							{#each StacDateFilterOptions as option}
+							{#each StacDateFilterOptions as option (option.value)}
 								<option value={option.value}>{option.label}</option>
 							{/each}
 						</select>
@@ -901,7 +901,7 @@
 											{#if assetList.length > 1}
 												<option value="">Select an asset</option>
 											{/if}
-											{#each assetList as assetName}
+											{#each assetList as assetName (assetName)}
 												{@const asset = feature.assets[assetName]}
 												<option value={assetName}>{asset?.title ? asset.title : assetName}</option>
 											{/each}
@@ -922,7 +922,7 @@
 										>
 											{#if AvailableProducts.find((p) => p.collection_id === collection)}
 												<option value="">Select a product</option>
-												{#each AvailableProducts as product}
+												{#each AvailableProducts as product (product.product_id)}
 													<option value={product.product_id}>{product.description}</option>
 												{/each}
 											{:else}
@@ -944,7 +944,7 @@
 											disabled={isLoading}
 										>
 											<option value="">Select a tool</option>
-											{#each registeredTools as tool}
+											{#each registeredTools as tool (tool.value)}
 												<option value={tool.value}>{clean(tool.value)}</option>
 											{/each}
 										</select>
@@ -954,7 +954,7 @@
 						</FieldControl>
 						{#if selectedAlgorithmName && selectedTool}
 							<!-- eslint-disable-next-line no-unused-vars -->
-							{#each selectedTool.inputs.bands as band}
+							{#each selectedTool.inputs.bands as band (band)}
 								{@const index = selectedTool.inputs.bands.indexOf(band)}
 								{@const bandTitle = selectedTool.inputs.bands[index].title}
 								<FieldControl title={`Please select the ${bandTitle}`} showHelp={true}>
@@ -969,7 +969,7 @@
 													{#if assetList.length > 1}
 														<option value="">Select an asset</option>
 													{/if}
-													{#each assetList as assetName}
+													{#each assetList as assetName (assetName)}
 														{@const asset = feature.assets[assetName]}
 														<option value={assetName}
 															>{asset.title ? asset.title : assetName}</option
@@ -1021,7 +1021,7 @@
 								</tr>
 							</thead>
 							<tbody>
-								{#each clickedFeatures as feature, index}
+								{#each clickedFeatures as feature, index (clickedFeatures.indexOf(feature))}
 									<tr>
 										<td>{index + 1}</td>
 										<td
@@ -1031,7 +1031,11 @@
 											/></td
 										>
 										{#if stacInstance.hasCloudCoverProp}
-											<td>{feature.properties[stacInstance.cloudCoverPropName].toFixed(2)}%</td>
+											<td
+												>{feature.properties[stacInstance.cloudCoverPropName as string].toFixed(
+													2
+												)}%</td
+											>
 										{/if}
 										<td>
 											<button
diff --git a/sites/geohub/src/components/util/stac/StacCatalogDatePicker.svelte b/sites/geohub/src/components/util/stac/StacCatalogDatePicker.svelte
index ae5b8ab189..3d30762e49 100644
--- a/sites/geohub/src/components/util/stac/StacCatalogDatePicker.svelte
+++ b/sites/geohub/src/components/util/stac/StacCatalogDatePicker.svelte
@@ -213,14 +213,14 @@
 			<Loader size="small" />
 		{:else}
 			{@const assets = Object.keys(assetItems).filter(
-				(key) => assetItems[key].type.indexOf('profile=cloud-optimized') !== -1
+				(key) => assetItems[key].type?.indexOf('profile=cloud-optimized') !== -1
 			)}
 			{#if assets.length === 0}
 				No assets in this date
 			{:else}
 				<div class="select">
 					<select bind:value={selectedAsset} onchange={handleAssetChanged}>
-						{#each assets as name}
+						{#each assets as name (name)}
 							{@const asset = assetItems[name]}
 							<option value={asset}>{asset.title ?? name}</option>
 						{/each}
diff --git a/sites/geohub/src/components/util/stac/StacCatalogExplorer.svelte b/sites/geohub/src/components/util/stac/StacCatalogExplorer.svelte
index d7742f90bd..f9e4290411 100644
--- a/sites/geohub/src/components/util/stac/StacCatalogExplorer.svelte
+++ b/sites/geohub/src/components/util/stac/StacCatalogExplorer.svelte
@@ -74,7 +74,7 @@
 	{#if StacBreadcrumbs && StacBreadcrumbs.length > 0}
 		<Breadcrumbs bind:pages={StacBreadcrumbs} size="small" onclick={handleBreadcrumbClicked} />
 
-		{#each StacBreadcrumbs as page, index}
+		{#each StacBreadcrumbs as page, index (StacBreadcrumbs.indexOf(page))}
 			{@const isLastPage = index === StacBreadcrumbs.length - 1}
 			<div hidden={!isLastPage}>
 				{#if page.type === 'Catalog'}
diff --git a/sites/geohub/src/components/util/stac/StacCatalogItem.svelte b/sites/geohub/src/components/util/stac/StacCatalogItem.svelte
index dd5bb8cc73..f5426b7a18 100644
--- a/sites/geohub/src/components/util/stac/StacCatalogItem.svelte
+++ b/sites/geohub/src/components/util/stac/StacCatalogItem.svelte
@@ -329,7 +329,7 @@
 								</tr>
 							</thead>
 							<tbody>
-								{#each metadataProps as prop}
+								{#each metadataProps as prop (prop)}
 									{@const value = itemFeature.properties[prop]}
 									{#if value}
 										<tr>
@@ -365,7 +365,7 @@
 								</tr>
 							</thead>
 							<tbody>
-								{#each viewgeometryProps as prop}
+								{#each viewgeometryProps as prop (prop)}
 									{@const value = itemFeature.properties[prop]}
 									{#if value}
 										<tr>
@@ -401,7 +401,7 @@
 									{#if Object.keys(itemFeature.assets).length > 1}
 										<option value="">Select an asset</option>
 									{/if}
-									{#each Object.keys(itemFeature.assets) as assetName}
+									{#each Object.keys(itemFeature.assets) as assetName (assetName)}
 										{@const asset = itemFeature.assets[assetName]}
 										<!-- it is preferred to use `image/tiff; application=geotiff; profile=cloud-optimized` to check asset type,
 										but we found some of COG from some STAC server, they don't put `profile=cloud-optimized`.
diff --git a/sites/geohub/src/components/util/stac/StacCatalogTool.svelte b/sites/geohub/src/components/util/stac/StacCatalogTool.svelte
index 8d8f060923..edacbd7722 100644
--- a/sites/geohub/src/components/util/stac/StacCatalogTool.svelte
+++ b/sites/geohub/src/components/util/stac/StacCatalogTool.svelte
@@ -177,7 +177,8 @@
 			{#snippet control()}
 				<div>
 					{#if selectedTool.algorithm.inputs.bands}
-						{#each selectedTool.algorithm.inputs.bands as band, index}
+						{@const bands = selectedTool.algorithm.inputs.bands}
+						{#each bands as band, index (bands.indexOf(band))}
 							<div class="field">
 								<!-- svelte-ignore a11y_label_has_associated_control -->
 								<label class="label">{band.title} ({band.required ? 'Required' : 'Optional'})</label
@@ -203,7 +204,7 @@
 							</div>
 						{/each}
 					{:else}
-						{#each listOfbands(selectedTool.algorithm.inputs.nbands) as bandNo}
+						{#each listOfbands(selectedTool.algorithm.inputs.nbands) as bandNo (bandNo)}
 							<div class="field">
 								<!-- svelte-ignore a11y_label_has_associated_control -->
 								<label class="label">Input Band {bandNo}</label>
diff --git a/sites/geohub/src/components/util/stac/StacCatalogTools.svelte b/sites/geohub/src/components/util/stac/StacCatalogTools.svelte
index 4e2d5445fe..4ea6f35729 100644
--- a/sites/geohub/src/components/util/stac/StacCatalogTools.svelte
+++ b/sites/geohub/src/components/util/stac/StacCatalogTools.svelte
@@ -64,7 +64,7 @@
 {/if}
 
 {#if dataset}
-	{#each breadcrumbs as page, index}
+	{#each breadcrumbs as page, index (breadcrumbs.indexOf(page))}
 		{@const isLastPage = index === breadcrumbs.length - 1}
 		<div hidden={!isLastPage}>
 			{#if page.type === 'index'}
diff --git a/sites/geohub/src/components/util/stac/StacCollectionMap.svelte b/sites/geohub/src/components/util/stac/StacCollectionMap.svelte
index 0ed6aecda4..bbaeaa8014 100644
--- a/sites/geohub/src/components/util/stac/StacCollectionMap.svelte
+++ b/sites/geohub/src/components/util/stac/StacCollectionMap.svelte
@@ -658,7 +658,7 @@
 				</thead>
 
 				<tbody>
-					{#each stacCatalogs as catalog}
+					{#each stacCatalogs as catalog (catalog.id)}
 						{@const self = catalog.links.find((l) => l.rel === 'self')}
 						{@const selfUrl = resolveRelativeUrl(self.href, url)}
 						<tr>
@@ -679,7 +679,7 @@
 						</tr>
 					{/each}
 
-					{#each stacCollections as collection}
+					{#each stacCollections as collection (collection.id)}
 						{@const self = collection.links.find((l) => l.rel === 'self')}
 						{@const selfUrl = resolveRelativeUrl(self.href, url)}
 						{@const title = collection.title ?? collection.id}
@@ -705,7 +705,7 @@
 						</tr>
 					{/each}
 
-					{#each stacItems as item}
+					{#each stacItems as item (item.id)}
 						{@const self = item.links.find((l) => l.rel === 'self')}
 						{#if self}
 							{@const selfUrl = resolveRelativeUrl(self.href, url)}
@@ -752,7 +752,7 @@
 		{#if popedFeatures.length > 1}
 			<div class="tabs is-small mb-2">
 				<ul>
-					{#each popedFeatures as f, index}
+					{#each popedFeatures as f, index (popedFeatures.indexOf(f))}
 						<li class={popedFeature === f ? 'is-active' : ''}>
 							<!-- svelte-ignore a11y_missing_attribute -->
 							<a
@@ -814,7 +814,7 @@
 							{#if Object.keys(itemFeature.assets).length > 1}
 								<option value="">Select an asset</option>
 							{/if}
-							{#each Object.keys(itemFeature.assets) as assetName}
+							{#each Object.keys(itemFeature.assets) as assetName (assetName)}
 								{@const asset = itemFeature.assets[assetName]}
 								<!-- it is preferred to use `image/tiff; application=geotiff; profile=cloud-optimized` to check asset type,
 						but we found some of COG from some STAC server, they don't put `profile=cloud-optimized`.
diff --git a/sites/geohub/src/routes/(app)/+page.svelte b/sites/geohub/src/routes/(app)/+page.svelte
index 0fcd4e27fe..73518e6538 100644
--- a/sites/geohub/src/routes/(app)/+page.svelte
+++ b/sites/geohub/src/routes/(app)/+page.svelte
@@ -81,6 +81,7 @@
 					{data.title}
 				</h1>
 				<p class="summary mb-0">
+					<!-- eslint-disable-next-line svelte/no-useless-mustaches -->
 					open-source geospatial services for{'\u00A0'}supporting SDG development
 				</p>
 
@@ -216,6 +217,7 @@
 <section class="solution-section">
 	<h2 class="title is-2">Discover geospatial solutions</h2>
 	<p class="description is-size-4">
+		<!-- eslint-disable-next-line svelte/no-useless-mustaches -->
 		Leverage dashboards and geospatial tools for{'\u00A0'}informed decision-making
 	</p>
 	<DashboardsExplorer />
@@ -241,7 +243,7 @@
 					{/if}
 				{/if}
 				{#await loadDynamicDatasets() then datasets}
-					{#each datasets.features as dataset}
+					{#each datasets.features as dataset (dataset.properties.id)}
 						{@const datasetUrl = dataset.properties.links?.find((l) => l.rel === 'dataset')?.href}
 						{@const sdgs = dataset.properties.tags
 							?.filter((t) => t.key === 'sdg_goal')
@@ -300,7 +302,7 @@
 				</div>
 			{:then stories}
 				<div class="columns is-multiline is-mobile">
-					{#each stories.stories as story}
+					{#each stories.stories as story (story.id)}
 						{@const storyLink = story.links?.find((l) => l.rel === 'storymap')?.href}
 						{@const staticLink = story.links?.find((l) => l.rel === 'static-auto')?.href}
 
diff --git a/sites/geohub/src/routes/(app)/auth/signIn/+page.svelte b/sites/geohub/src/routes/(app)/auth/signIn/+page.svelte
index 9b11c985f9..6ea92d1927 100644
--- a/sites/geohub/src/routes/(app)/auth/signIn/+page.svelte
+++ b/sites/geohub/src/routes/(app)/auth/signIn/+page.svelte
@@ -27,7 +27,7 @@
 	<div class="p-5">
 		{#if data.providers?.length > 0}
 			<p class="is-6 has-text-justified has-text-dark pb-4">GeoHub allows you to login with:</p>
-			{#each data.providers as provider, index}
+			{#each data.providers as provider, index (provider.id)}
 				<button
 					class="login-button button is-medium is-fullwidth is-link"
 					onclick={() => signIn(provider.id, { callbackUrl: previousPage.href })}
diff --git a/sites/geohub/src/routes/(app)/dashboards/+page.svelte b/sites/geohub/src/routes/(app)/dashboards/+page.svelte
index 99a23c3f22..865b965c73 100644
--- a/sites/geohub/src/routes/(app)/dashboards/+page.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/+page.svelte
@@ -14,6 +14,7 @@
 <section class="solution-section">
 	<h2 class="title is-2">Discover geospatial solutions</h2>
 	<p class="description is-size-4">
+		<!-- eslint-disable-next-line svelte/no-useless-mustaches -->
 		Leverage dashboards and geospatial tools for{'\u00A0'}informed decision-making
 	</p>
 
diff --git a/sites/geohub/src/routes/(app)/dashboards/ceei/+page@.svelte b/sites/geohub/src/routes/(app)/dashboards/ceei/+page@.svelte
index 2033a2c516..6c3288bcda 100644
--- a/sites/geohub/src/routes/(app)/dashboards/ceei/+page@.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/ceei/+page@.svelte
@@ -314,7 +314,7 @@
 						</div>
 					</div>
 
-					{#each $layerStore as l, i}
+					{#each $layerStore as l, i (l.layerId)}
 						<div>
 							<LayerControl layerDetails={l} index={i} />
 						</div>
diff --git a/sites/geohub/src/routes/(app)/dashboards/ceei/components/DropdownSearch.svelte b/sites/geohub/src/routes/(app)/dashboards/ceei/components/DropdownSearch.svelte
index 572d578de4..57210defc5 100644
--- a/sites/geohub/src/routes/(app)/dashboards/ceei/components/DropdownSearch.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/ceei/components/DropdownSearch.svelte
@@ -68,7 +68,7 @@
 		<div class="dropdown-content">
 			<hr class="dropdown-divider" />
 			<div class="search-results">
-				{#each filteredItemResults.length ? filteredItemResults : items as item}
+				{#each filteredItemResults.length ? filteredItemResults : items as item (item.value)}
 					<button
 						class="dropdown-item"
 						class:is-active={selectedItem?.value === item.value}
diff --git a/sites/geohub/src/routes/(app)/dashboards/ceei/components/LayerControl.svelte b/sites/geohub/src/routes/(app)/dashboards/ceei/components/LayerControl.svelte
index bc87b1fd1e..8d8a37780e 100644
--- a/sites/geohub/src/routes/(app)/dashboards/ceei/components/LayerControl.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/ceei/components/LayerControl.svelte
@@ -467,7 +467,7 @@
 	</div>
 	<div class="is-background-light p-3 is-flex is-flex-direction-column is-gap-1">
 		<div class="is-flex" style="gap: 1px;">
-			{#each colorGroups as cg}
+			{#each colorGroups as cg, index (index)}
 				<div class="is-flex-grow-1 bar" style="background: {cg}"></div>
 			{/each}
 		</div>
@@ -532,7 +532,7 @@
 							</div>
 						</div>
 						<div style="background: #F7F7F7; padding: 8px 4px 8px 4px;">
-							{#each sliders as { id, percentage, label, locked }}
+							{#each sliders as { id, percentage, label, locked }, index (index)}
 								{#if [1, 2, 3, 4].includes(id)}
 									<div style="margin: auto;">
 										<div class="slider-field-sm">
@@ -609,7 +609,7 @@
 							</div>
 						</div>
 						<div style="background: #F7F7F7; padding: 8px 4px 8px 4px;">
-							{#each sliders as { id, percentage, label, locked }}
+							{#each sliders as { id, percentage, label, locked }, index (index)}
 								{#if [12, 13, 14, 15].includes(id)}
 									<div style="margin: auto;">
 										<div class="slider-field-sm">
@@ -686,7 +686,7 @@
 						</div>
 					</div>
 					<div style="background: #F7F7F7; padding: 8px 4px 8px 4px;">
-						{#each sliders as { id, percentage, label, locked }}
+						{#each sliders as { id, percentage, label, locked }, index (index)}
 							{#if [5, 6, 7, 8, 9, 10, 11].includes(id)}
 								<div style="margin: auto;">
 									<div class="slider-field-sm">
diff --git a/sites/geohub/src/routes/(app)/dashboards/ceei/components/PopupTable.svelte b/sites/geohub/src/routes/(app)/dashboards/ceei/components/PopupTable.svelte
index a3ab865c5c..ca9d704a3b 100644
--- a/sites/geohub/src/routes/(app)/dashboards/ceei/components/PopupTable.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/ceei/components/PopupTable.svelte
@@ -199,7 +199,7 @@
 		<thead>
 			<tr>
 				<th></th>
-				{#each formattedFeatures as feature}
+				{#each formattedFeatures as feature (feature.name)}
 					<th class="has-text-right">{feature.name}</th>
 				{/each}
 			</tr>
@@ -207,14 +207,14 @@
 		<tbody>
 			<tr class="my-4">
 				<th>CEEI</th>
-				{#each formattedFeatures as feature}
+				{#each formattedFeatures as feature (feature.name)}
 					{@const prop = feature['CEEI']}
 					<th class="has-text-right">
 						{typeof prop === 'number' ? prop.toFixed(2) : prop}
 					</th>
 				{/each}
 			</tr>
-			{#each Object.entries(pillarGroups) as [pgName, pgMembers]}
+			{#each Object.entries(pillarGroups) as [pgName, pgMembers], index (index)}
 				<tr on:click={() => handleAccordionSelect(pgName)}>
 					<th colspan={formattedFeatures.length + 1}>
 						<div class="is-flex is-gap-1 accordion-button" class:clicked={showPillars[pgName]}>
@@ -223,7 +223,7 @@
 					</th>
 				</tr>
 				{#if showPillars[pgName]}
-					{#each pgMembers as key}
+					{#each pgMembers as key (key)}
 						<tr>
 							<td class="pillar-group-key">
 								<div>
@@ -235,7 +235,7 @@
 								<div class="is-italic is-size-7">
 									<span>source: </span>
 									<ul class="source-list">
-										{#each featureDetails[key].source as source}
+										{#each featureDetails[key].source as source, index (index)}
 											<li>
 												<a href={source.url}>{source.name}</a>
 											</li>
@@ -243,7 +243,7 @@
 									</ul>
 								</div>
 							</td>
-							{#each formattedFeatures as feature}
+							{#each formattedFeatures as feature (feature.name)}
 								{@const prop = feature[key]}
 								<td class="has-text-right">
 									{typeof prop === 'number' ? prop.toFixed(2) : prop}
diff --git a/sites/geohub/src/routes/(app)/dashboards/ceei/components/UploadDataErrorToast.svelte b/sites/geohub/src/routes/(app)/dashboards/ceei/components/UploadDataErrorToast.svelte
index fb525d9db5..9c3204c5ed 100644
--- a/sites/geohub/src/routes/(app)/dashboards/ceei/components/UploadDataErrorToast.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/ceei/components/UploadDataErrorToast.svelte
@@ -8,7 +8,7 @@
 
 <p>Errors were found while parsing your file</p>
 <ul style="max-height: 500px; overflow-y: scroll;">
-	{#each dataErrors as err}
+	{#each dataErrors as err, index (index)}
 		{@const errList = err.error.message.split('. ')}
 		<li>
 			{#if errList.length <= 1}
@@ -16,7 +16,7 @@
 			{:else}
 				<div>Row {err.index}:</div>
 				<ul>
-					{#each errList as errItem}
+					{#each errList as errItem, j (j)}
 						<li>- {errItem}</li>
 					{/each}
 				</ul>
diff --git a/sites/geohub/src/routes/(app)/dashboards/electricity/+page@.svelte b/sites/geohub/src/routes/(app)/dashboards/electricity/+page@.svelte
index 55d4f725df..1f3cfd09b4 100644
--- a/sites/geohub/src/routes/(app)/dashboards/electricity/+page@.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/electricity/+page@.svelte
@@ -460,7 +460,7 @@
 <ModalTemplate title="Download data" bind:show={showDialog}>
 	{#snippet content()}
 		<div class="download-contents">
-			{#each layers as l}
+			{#each layers as l, index (index)}
 				<div
 					class="is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-center a-box p-4 mt-4"
 				>
@@ -475,7 +475,7 @@
 							<div class="select">
 								<select bind:value={l.format}>
 									{#if $hrea}
-										{#each $hrea as dataset}
+										{#each $hrea as dataset (dataset.year)}
 											{#if 'years' in l && dataset.year >= l.years[0] && dataset.year <= l.years[1]}
 												<option value={dataset.year.toString()}>{dataset.year}</option>
 											{/if}
@@ -486,7 +486,7 @@
 						{:else}
 							<div class="select">
 								<select bind:value={l.format}>
-									{#each formats as f}
+									{#each formats as f (f)}
 										<option value={f}>{f}</option>
 									{/each}
 								</select>
diff --git a/sites/geohub/src/routes/(app)/dashboards/electricity/components/AnalyzeBivariate.svelte b/sites/geohub/src/routes/(app)/dashboards/electricity/components/AnalyzeBivariate.svelte
index c023930f0d..e49ee94187 100644
--- a/sites/geohub/src/routes/(app)/dashboards/electricity/components/AnalyzeBivariate.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/electricity/components/AnalyzeBivariate.svelte
@@ -127,9 +127,9 @@
 				</div>
 				<div>
 					<div class="is-flex is-flex-direction-column">
-						{#each colorGrid as row, rowIndex}
+						{#each colorGrid as row, rowIndex (rowIndex)}
 							<div class="is-flex">
-								{#each row as color, colIndex}
+								{#each row as color, colIndex (colIndex)}
 									<button
 										class="a-legend__item"
 										class:selected={selectedRow === rowIndex && selectedCol === colIndex}
diff --git a/sites/geohub/src/routes/(app)/dashboards/electricity/components/ElectricityControl.svelte b/sites/geohub/src/routes/(app)/dashboards/electricity/components/ElectricityControl.svelte
index a6520b63ef..f7906cb03d 100644
--- a/sites/geohub/src/routes/(app)/dashboards/electricity/components/ElectricityControl.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/electricity/components/ElectricityControl.svelte
@@ -10,7 +10,7 @@
 
 <div>
 	<div class="button-container mt-2">
-		{#each electricityDataTypes as choice}
+		{#each electricityDataTypes as choice (choice.value)}
 			<button
 				class="button data-option pl-3 {`${JSON.stringify(choice.value) === JSON.stringify(electricityDataType) ? 'is-active' : ''}`}"
 				onclick={() => {
diff --git a/sites/geohub/src/routes/(app)/dashboards/electricity/components/IntroductionPanel.svelte b/sites/geohub/src/routes/(app)/dashboards/electricity/components/IntroductionPanel.svelte
index 614794c377..b8c9c34ade 100644
--- a/sites/geohub/src/routes/(app)/dashboards/electricity/components/IntroductionPanel.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/electricity/components/IntroductionPanel.svelte
@@ -59,7 +59,7 @@
 			></button>
 		</div>
 
-		{#each dashboardSelections as dbs}
+		{#each dashboardSelections as dbs, index (index)}
 			<button
 				class="a-reset a-box p-4 is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-center my-4"
 				onclick={() => {
diff --git a/sites/geohub/src/routes/(app)/dashboards/electricity/stores/index.ts b/sites/geohub/src/routes/(app)/dashboards/electricity/stores/index.ts
index bdb8e140ce..d47145a5d4 100644
--- a/sites/geohub/src/routes/(app)/dashboards/electricity/stores/index.ts
+++ b/sites/geohub/src/routes/(app)/dashboards/electricity/stores/index.ts
@@ -1,10 +1,10 @@
 import type { Map } from 'maplibre-gl';
 import { writable } from 'svelte/store';
-import type { Dataset } from '../interfaces';
+import type { DashBoardDataset } from '../+page@.svelte';
 
 // map store for maplibre-gl object
 export const map = writable<Map>(undefined);
 
 export const admin = writable({});
 
-export const hrea = writable<Dataset[]>(undefined);
+export const hrea = writable<DashBoardDataset[]>(undefined);
diff --git a/sites/geohub/src/routes/(app)/dashboards/zanzibar/+page@.svelte b/sites/geohub/src/routes/(app)/dashboards/zanzibar/+page@.svelte
index 45fc848c14..69fc0c5c1e 100644
--- a/sites/geohub/src/routes/(app)/dashboards/zanzibar/+page@.svelte
+++ b/sites/geohub/src/routes/(app)/dashboards/zanzibar/+page@.svelte
@@ -682,7 +682,7 @@
 					isUppercase={true}
 				></Tabs>
 			{/if}
-			{#each clickedFeatures as f}
+			{#each clickedFeatures as f, index (index)}
 				{@const contents = getFeatureData(f)}
 				<div hidden={`${f.id}` !== selectedTab}>
 					<FieldControl title={f.properties.name} showHelp={false} fontWeight="bold">
@@ -697,7 +697,7 @@
 											autoplayProgressVisible
 											arrows={true}
 										>
-											{#each images as imageSrc}
+											{#each images as imageSrc, j (j)}
 												<img src={imageSrc} alt={f.properties.name} class="photo" loading="eager" />
 											{/each}
 										</Carousel>
@@ -716,7 +716,7 @@
 							<div>
 								<table class="table is-narrow is-hoverable is-fullwidth">
 									<tbody>
-										{#each Object.keys(contents) as key}
+										{#each Object.keys(contents) as key (key)}
 											{#if contents[key] && contents[key].length > 0}
 												<tr>
 													<th><p class="is-capitalized">{key}</p></th>
diff --git a/sites/geohub/src/routes/(app)/data/[[id]]/edit/+page.svelte b/sites/geohub/src/routes/(app)/data/[[id]]/edit/+page.svelte
index f21c58ccf1..3b83656450 100644
--- a/sites/geohub/src/routes/(app)/data/[[id]]/edit/+page.svelte
+++ b/sites/geohub/src/routes/(app)/data/[[id]]/edit/+page.svelte
@@ -443,7 +443,7 @@
 
 	<div class="tabs is-uppercase has-text-weight-bold">
 		<ul>
-			{#each tabs as tab}
+			{#each tabs as tab (tab.id)}
 				{@const isGeneralInfoFilled = name && license && description && providers.length > 0}
 				{@const isCoverageFilled =
 					isGlobal === 'global' ||
@@ -603,7 +603,7 @@
 						<div class="select is-fullwidth {license.length > 0 ? 'is-success' : 'is-danger'}">
 							<select bind:value={license} disabled={isRegistering} name="license">
 								<option value="">Select a data license</option>
-								{#each licenses as lc}
+								{#each licenses as lc (lc.id)}
 									<option value={lc.name}>{lc.name}</option>
 								{/each}
 							</select>
@@ -627,7 +627,7 @@
 				{#snippet control()}
 					<div>
 						<div class="flex is-flex-wrap-wrap pb-2">
-							{#each providers as provider}
+							{#each providers as provider (provider.value)}
 								<span class="pl-1">
 									<Chips
 										label={provider.value}
@@ -776,7 +776,7 @@
 					{#snippet control()}
 						<div>
 							<div class="flex is-flex-wrap-wrap pb-2">
-								{#each countries as country}
+								{#each countries as country (country.value)}
 									<span class="pl-1">
 										<Chips
 											label={country.value}
@@ -860,7 +860,7 @@
 				{#snippet control()}
 					<div>
 						<div class="flex is-flex-wrap-wrap pb-2">
-							{#each units as unit}
+							{#each units as unit (unit.value)}
 								<span class="pl-1">
 									<Chips
 										label={unit.value}
@@ -900,7 +900,7 @@
 				{#snippet control()}
 					<div>
 						<div class="flex is-flex-wrap-wrap pb-2">
-							{#each years as year}
+							{#each years as year (year.value)}
 								<span class="pl-1">
 									<Chips
 										label={year.value}
@@ -940,7 +940,7 @@
 				{#snippet control()}
 					<div>
 						<div class="flex is-flex-wrap-wrap pb-2">
-							{#each resolutions as resolution}
+							{#each resolutions as resolution (resolution.value)}
 								<span class="pl-1">
 									<Chips
 										label={resolution.value}
@@ -981,7 +981,7 @@
 				{#snippet control()}
 					<div>
 						<div class="flex is-flex-wrap-wrap pb-2">
-							{#each granularities as granularity}
+							{#each granularities as granularity (granularity.value)}
 								<span class="pl-1">
 									<Chips
 										label={granularity.value}
@@ -1021,7 +1021,7 @@
 				{#snippet control()}
 					<div>
 						<div class="flex is-flex-wrap-wrap pb-2">
-							{#each themes as theme}
+							{#each themes as theme (theme.value)}
 								<span class="pl-1">
 									<Chips
 										label={theme.value}
@@ -1058,7 +1058,7 @@
 				{#snippet control()}
 					<div>
 						<div class="flex is-flex-wrap-wrap pb-2">
-							{#each sdg_targets as sdg_target}
+							{#each sdg_targets as sdg_target (sdg_target.value)}
 								<span class="pl-1">
 									<Chips
 										label={sdg_target.value}
diff --git a/sites/geohub/src/routes/(app)/data/[id]/+page.svelte b/sites/geohub/src/routes/(app)/data/[id]/+page.svelte
index efb27b3ce4..228bf5a34b 100644
--- a/sites/geohub/src/routes/(app)/data/[id]/+page.svelte
+++ b/sites/geohub/src/routes/(app)/data/[id]/+page.svelte
@@ -354,7 +354,7 @@
 						{#snippet control()}
 							<div>
 								<div class="sdg-grid">
-									{#each sdgs as sdg}
+									{#each sdgs as sdg (sdg.value)}
 										<span class="icon is-large">
 											<i class="sdg-{sdg.value}"></i>
 										</span>
@@ -512,7 +512,7 @@
 								{:else}
 									<div class="select mb-2">
 										<select bind:value={selectedFgbLayer}>
-											{#each fgbUrls as url}
+											{#each fgbUrls as url, index (index)}
 												{@const layer = url.rel.split('-')[1]}
 												<option value={url.rel}>{layer}</option>
 											{/each}
diff --git a/sites/geohub/src/routes/(app)/data/[id]/style/edit/+page.svelte b/sites/geohub/src/routes/(app)/data/[id]/style/edit/+page.svelte
index 2a15050ab9..3132d727b9 100644
--- a/sites/geohub/src/routes/(app)/data/[id]/style/edit/+page.svelte
+++ b/sites/geohub/src/routes/(app)/data/[id]/style/edit/+page.svelte
@@ -419,7 +419,7 @@
 													onchange={handleLayerSelected}
 													disabled={isLoading}
 												>
-													{#each tilestatsLayers as layer}
+													{#each tilestatsLayers as layer (layer.layer)}
 														<option value={layer}>{layer.layer}</option>
 													{/each}
 												</select>
diff --git a/sites/geohub/src/routes/(app)/data/supported-formats/+page.svelte b/sites/geohub/src/routes/(app)/data/supported-formats/+page.svelte
index 62830196de..804ae88ab3 100644
--- a/sites/geohub/src/routes/(app)/data/supported-formats/+page.svelte
+++ b/sites/geohub/src/routes/(app)/data/supported-formats/+page.svelte
@@ -25,7 +25,7 @@
 		</p>
 	</div>
 
-	{#each ['raster', 'vector'] as type}
+	{#each ['raster', 'vector'] as type (type)}
 		<h2 class="title is-2 is-capitalized">{type} Formats Supported</h2>
 
 		<div class="table-container has-content-centered mt-5">
@@ -37,14 +37,14 @@
 					</tr>
 				</thead>
 				<tbody>
-					{#each AccepedExtensions as item}
+					{#each AccepedExtensions as item, index (index)}
 						{#if item.name !== 'Archive Formats'}
 							{#if item.dataTypes?.includes(type)}
 								<tr>
 									<td><DefaultLink title={item.name} href={item.href} target="_blank" /></td>
 									<td>
 										<div class="extensions">
-											{#each item.extensions as ext}
+											{#each item.extensions as ext (ext)}
 												<span
 													class="{item.requiredExtensions?.includes(ext)
 														? 'is-danger'
@@ -73,7 +73,7 @@
 			<p class="is-size-5">
 				These file formats listed in the above sections can be supplied in their original formats or
 				as archives as
-				{#each archiveFormat.extensions as ext}
+				{#each archiveFormat.extensions as ext (ext)}
 					<span class="is-info is-light tag is-medium ml-1">
 						.{ext}
 					</span>
diff --git a/sites/geohub/src/routes/(app)/data/upload/+page.svelte b/sites/geohub/src/routes/(app)/data/upload/+page.svelte
index a8b919a5a7..f4c692e947 100644
--- a/sites/geohub/src/routes/(app)/data/upload/+page.svelte
+++ b/sites/geohub/src/routes/(app)/data/upload/+page.svelte
@@ -613,7 +613,7 @@
 							</tr>
 						</thead>
 						<tbody>
-							{#each filesToUpload as file, index}
+							{#each filesToUpload as file, index (index)}
 								{@const name = file.name}
 								{@const path = file.path}
 								<tr>
@@ -650,7 +650,7 @@
 													{#if !path}
 														<!-- Shapefiles that have been zipped by selecting multiple files for it will have no `path` property. This condition will only be true if shapefiles are selected-->
 														<div>
-															{#each zipFiles as zipFile}
+															{#each zipFiles as zipFile, j (j)}
 																<span class="tag is-info is-medium is-light ml-1">
 																	<small>.{zipFile.name.split('.').at(-1)}</small>
 																</span>
@@ -766,7 +766,7 @@
 		</div>
 
 		{#if showErrorMessages}
-			{#each errorMessages as message}
+			{#each errorMessages as message, index (index)}
 				<div class="mt-3">
 					<Notification
 						type="danger"
diff --git a/sites/geohub/src/routes/(app)/license/+page.svelte b/sites/geohub/src/routes/(app)/license/+page.svelte
index 4b1c7526d5..5d440e3061 100644
--- a/sites/geohub/src/routes/(app)/license/+page.svelte
+++ b/sites/geohub/src/routes/(app)/license/+page.svelte
@@ -55,7 +55,7 @@
 		The platform uses the following open source softwares in the frontend side.
 	</p>
 
-	{#each Object.keys(licenses) as key}
+	{#each Object.keys(licenses) as key (key)}
 		{@const licenseList = licenses[key]}
 		{@const title = key.replace('(', '').replace(')', '').trim()}
 		<Accordion {title} bind:isExpanded={expanded[key]}>
@@ -77,7 +77,7 @@
 								</tr>
 							</thead>
 							<tbody>
-								{#each licenseList as l}
+								{#each licenseList as l (l.name)}
 									<tr>
 										<td>{l.name}</td>
 										<td>{l.versions.join(', ')}</td>
diff --git a/sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte b/sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte
index 7448f14084..887a481381 100644
--- a/sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte
+++ b/sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte
@@ -39,7 +39,7 @@
 		<thead>
 			<tr>
 				<th>No.</th>
-				{#each Object.keys(layers[0]) as col}
+				{#each Object.keys(layers[0]) as col (col)}
 					{#if !skipCols.includes(col)}
 						<th>
 							{col}
@@ -50,13 +50,13 @@
 			</tr>
 		</thead>
 		<tbody>
-			{#each layers as layer, index}
+			{#each layers as layer, index (layer.id)}
 				{@const publishUrl = getPublishLink(layer)}
 				{@const unregistered = publishUrl.startsWith('/data')}
 				{#if !(hideRegistered && !unregistered)}
 					<tr>
 						<td>{index + 1}</td>
-						{#each Object.keys(layer) as col}
+						{#each Object.keys(layer) as col (col)}
 							{#if !skipCols.includes(col)}
 								<td>
 									{#if col === 'detailurl'}
@@ -81,7 +81,7 @@
 		<tfoot>
 			<tr>
 				<th>No.</th>
-				{#each Object.keys(layers[0]) as col}
+				{#each Object.keys(layers[0]) as col (col)}
 					{#if !skipCols.includes(col)}
 						<th>{col}</th>
 					{/if}
diff --git a/sites/geohub/src/routes/(app)/management/stac/+page.svelte b/sites/geohub/src/routes/(app)/management/stac/+page.svelte
index 08e6ed6f72..f0a462df30 100644
--- a/sites/geohub/src/routes/(app)/management/stac/+page.svelte
+++ b/sites/geohub/src/routes/(app)/management/stac/+page.svelte
@@ -116,7 +116,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			{#each data.stacs as stac}
+			{#each data.stacs as stac (stac.id)}
 				<tr>
 					<td>
 						<DefaultLink title={stac.id} href="/management/stac/{stac.type}/{stac.id}" target="" />
@@ -291,22 +291,24 @@
 							</p>
 							<table class="mt-2 table is-striped is-narrow is-hoverable is-fullwidth">
 								<tbody>
-									{#each registerStac.providers as provider}
-										<tr>
-											<td>
-												<span>{provider}</span>
-											</td>
-											<td>
-												<button
-													class="delete"
-													type="button"
-													onclick={() => {
-														handleDeleteProvider(provider);
-													}}>Delete</button
-												>
-											</td>
-										</tr>
-									{/each}
+									{#if registerStac.providers}
+										{#each registerStac.providers as provider (provider)}
+											<tr>
+												<td>
+													<span>{provider}</span>
+												</td>
+												<td>
+													<button
+														class="delete"
+														type="button"
+														onclick={() => {
+															handleDeleteProvider(provider);
+														}}>Delete</button
+													>
+												</td>
+											</tr>
+										{/each}
+									{/if}
 								</tbody>
 							</table>
 							<input
diff --git a/sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte b/sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte
index 7393a462af..b05a4eae62 100644
--- a/sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte
+++ b/sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte
@@ -236,7 +236,7 @@
 						</thead>
 						<tbody>
 							{#if filteredCollection}
-								{#each filteredCollection as collection, index}
+								{#each filteredCollection as collection, index (collection.id)}
 									{@const registred = !!geohubDatasets.features.find((f) => {
 										const id = f.properties.tags.find((t) => t.key === 'collection');
 										return id.value === collection.id;
@@ -318,7 +318,7 @@
 					<div class="select is-fullwidth">
 						<select bind:value={selectedAlgorithmId}>
 							<option value="">Select a tool</option>
-							{#each Object.keys(algorithms) as id}
+							{#each Object.keys(algorithms) as id (id)}
 								{#if toolTags.findIndex((t) => t.value === id) === -1}
 									<option value={id}>{algorithms[id].title}</option>
 								{/if}
@@ -341,7 +341,7 @@
 					>
 				</div>
 				<div class="tags my-2">
-					{#each toolTags as tag}
+					{#each toolTags as tag (tag.value)}
 						<div class="tags has-addons m-1">
 							<span class="tag is-link">{tag.value}</span>
 							<button
diff --git a/sites/geohub/src/routes/(app)/management/stac/api/[id]/[collection]/+page.svelte b/sites/geohub/src/routes/(app)/management/stac/api/[id]/[collection]/+page.svelte
index c220ab25b6..aeb7448e12 100644
--- a/sites/geohub/src/routes/(app)/management/stac/api/[id]/[collection]/+page.svelte
+++ b/sites/geohub/src/routes/(app)/management/stac/api/[id]/[collection]/+page.svelte
@@ -107,7 +107,7 @@
 		<label class="label">Providers</label>
 		<div class="control">
 			{#if collection.providers}
-				{#each collection.providers as provider, index}
+				{#each collection.providers as provider, index (index)}
 					{#if index > 0}
 						,
 					{/if}
diff --git a/sites/geohub/src/routes/(app)/management/stac/catalog/[id]/+page.svelte b/sites/geohub/src/routes/(app)/management/stac/catalog/[id]/+page.svelte
index 794fc0bbe9..f84bd82f69 100644
--- a/sites/geohub/src/routes/(app)/management/stac/catalog/[id]/+page.svelte
+++ b/sites/geohub/src/routes/(app)/management/stac/catalog/[id]/+page.svelte
@@ -327,7 +327,7 @@
 									<div class="select is-fullwidth">
 										<select bind:value={selectedAlgorithmId}>
 											<option value="">Select a tool</option>
-											{#each Object.keys(algorithms) as id}
+											{#each Object.keys(algorithms) as id (id)}
 												{#if toolTags.findIndex((t) => t.value === id) === -1}
 													<option value={id}>{algorithms[id].title}</option>
 												{/if}
@@ -350,7 +350,7 @@
 									>
 								</div>
 								<div class="tags my-2">
-									{#each toolTags as tag}
+									{#each toolTags as tag (tag.value)}
 										<div class="tags has-addons m-1">
 											<span class="tag is-link">{tag.value}</span>
 											<button
diff --git a/sites/geohub/src/routes/(app)/maps/+page.svelte b/sites/geohub/src/routes/(app)/maps/+page.svelte
index 201137c2e5..c5be58da76 100644
--- a/sites/geohub/src/routes/(app)/maps/+page.svelte
+++ b/sites/geohub/src/routes/(app)/maps/+page.svelte
@@ -265,7 +265,7 @@
 						<div>
 							<div class="select mt-auto">
 								<select bind:value={limit} onchange={handleLimitChanged}>
-									{#each LimitOptions as limit}
+									{#each LimitOptions as limit (limit)}
 										<option value={limit}>{limit}</option>
 									{/each}
 								</select>
@@ -280,7 +280,7 @@
 						<div>
 							<div class="select mt-auto">
 								<select bind:value={sortby} onchange={handleSortbyChanged}>
-									{#each MapSortingColumns as option}
+									{#each MapSortingColumns as option (option.value)}
 										<option value={option.value}>{option.label}</option>
 									{/each}
 								</select>
diff --git a/sites/geohub/src/routes/(app)/maps/[id]/+page.svelte b/sites/geohub/src/routes/(app)/maps/[id]/+page.svelte
index 595a3a4085..a0c9612603 100644
--- a/sites/geohub/src/routes/(app)/maps/[id]/+page.svelte
+++ b/sites/geohub/src/routes/(app)/maps/[id]/+page.svelte
@@ -516,7 +516,7 @@
 		{/if}
 
 		<p class="mt-4 title is-size-5">Static image api</p>
-		{#each [staticAutoLink, staticBBOXLink, staticCenterLink] as link, index}
+		{#each [staticAutoLink, staticBBOXLink, staticCenterLink] as link, index (index)}
 			<FieldControl
 				title="Static image api ({index === 0
 					? 'Auto centered'
diff --git a/sites/geohub/src/routes/(app)/settings/+page.svelte b/sites/geohub/src/routes/(app)/settings/+page.svelte
index 7218af747d..9c9e0c9724 100644
--- a/sites/geohub/src/routes/(app)/settings/+page.svelte
+++ b/sites/geohub/src/routes/(app)/settings/+page.svelte
@@ -269,7 +269,7 @@
 							<div>
 								<div class="select is-fullwidth">
 									<select name="MapPageSearchLimit" bind:value={userSettings.MapPageSearchLimit}>
-										{#each MapPageLimitOptions as limit}
+										{#each MapPageLimitOptions as limit (limit)}
 											<option value={limit}>{limit}</option>
 										{/each}
 									</select>
@@ -289,7 +289,7 @@
 										name="MapPageSortingColumn"
 										bind:value={userSettings.MapPageSortingColumn}
 									>
-										{#each MapSortingColumns as column}
+										{#each MapSortingColumns as column (column.value)}
 											<option value={column.value}>{column.label}</option>
 										{/each}
 									</select>
@@ -340,7 +340,7 @@
 							<div>
 								<div class="select is-fullwidth">
 									<select name="DataPageSearchLimit" bind:value={userSettings.DataPageSearchLimit}>
-										{#each DataPageLimitOptions as limit}
+										{#each DataPageLimitOptions as limit (limit)}
 											<option value={limit}>{limit}</option>
 										{/each}
 									</select>
@@ -367,7 +367,7 @@
 										name="DataPageSearchQueryOperator"
 										bind:value={userSettings.DataPageSearchQueryOperator}
 									>
-										{#each ['and', 'or'] as operator}
+										{#each ['and', 'or'] as operator (operator)}
 											<option value={operator}>
 												{#if operator === 'and'}
 													Match all words typed (AND)
@@ -400,7 +400,7 @@
 										name="DataPageTagSearchOperator"
 										bind:value={userSettings.DataPageTagSearchOperator}
 									>
-										{#each ['and', 'or'] as operator}
+										{#each ['and', 'or'] as operator (operator)}
 											<option value={operator}>
 												{#if operator === 'and'}
 													Match all selected tags (AND)
@@ -425,7 +425,7 @@
 										name="DataPageSortingColumn"
 										bind:value={userSettings.DataPageSortingColumn}
 									>
-										{#each DatasetSortingColumns as column}
+										{#each DatasetSortingColumns as column (column.value)}
 											<option value={column.value}>{column.label}</option>
 										{/each}
 									</select>
@@ -449,7 +449,7 @@
 										name="DataPageIngestingSortingColumn"
 										bind:value={userSettings.DataPageIngestingSortingColumn}
 									>
-										{#each IngestingDatasetSortingColumns as column}
+										{#each IngestingDatasetSortingColumns as column (column.value)}
 											<option value={column.value}>{column.label}</option>
 										{/each}
 									</select>
@@ -523,7 +523,7 @@
 							<div>
 								<div class="select is-fullwidth">
 									<select name="StacSearchLimit" bind:value={userSettings.StacSearchLimit}>
-										{#each StacSearchLimitOptions as limit}
+										{#each StacSearchLimitOptions as limit (limit)}
 											<option value={limit}>{limit}</option>
 										{/each}
 									</select>
@@ -580,7 +580,7 @@
 										name="StacDateFilterOption"
 										bind:value={userSettings.StacDateFilterOption}
 									>
-										{#each StacDateFilterOptions as option}
+										{#each StacDateFilterOptions as option (option.value)}
 											<option value={option.value}>{option.label}</option>
 										{/each}
 									</select>
@@ -599,7 +599,7 @@
 						{/snippet}
 						{#snippet control()}
 							<div class="is-flex">
-								{#each MapStyles as style}
+								{#each MapStyles as style (style.id)}
 									<label
 										class="m-1"
 										use:tippyTooltip={{
@@ -634,7 +634,7 @@
 						{#snippet control()}
 							<div>
 								<div class="columns is-mobile">
-									{#each ['left', 'right'] as pos}
+									{#each ['left', 'right'] as pos (pos)}
 										<label
 											class="column"
 											use:tippyTooltip={{
@@ -698,7 +698,7 @@
 							<div>
 								<div class="select is-fullwidth">
 									<select name="DatasetSearchLimit" bind:value={userSettings.DatasetSearchLimit}>
-										{#each DatasetLimitOptions as limit}
+										{#each DatasetLimitOptions as limit (limit)}
 											<option value={limit}>{limit}</option>
 										{/each}
 									</select>
@@ -726,7 +726,7 @@
 										name="DatasetSearchQueryOperator"
 										bind:value={userSettings.DatasetSearchQueryOperator}
 									>
-										{#each ['and', 'or'] as operator}
+										{#each ['and', 'or'] as operator (operator)}
 											<option value={operator}>
 												{#if operator === 'and'}
 													Match all words typed (AND)
@@ -753,7 +753,7 @@
 											name="DatasetSortingColumn"
 											bind:value={userSettings.DatasetSortingColumn}
 										>
-											{#each DatasetSortingColumns as column}
+											{#each DatasetSortingColumns as column (column.value)}
 												<option value={column.value}>{column.label}</option>
 											{/each}
 										</select>
@@ -779,7 +779,7 @@
 							<div>
 								<div class="select is-fullwidth">
 									<select name="TagSearchOperator" bind:value={userSettings.TagSearchOperator}>
-										{#each ['and', 'or'] as operator}
+										{#each ['and', 'or'] as operator (operator)}
 											<option value={operator}>
 												{#if operator === 'and'}
 													Match all selected tags (AND)
@@ -811,7 +811,7 @@
 										name="ClassificationMethod"
 										bind:value={userSettings.ClassificationMethod}
 									>
-										{#each ClassificationMethods as classificationMethod}
+										{#each ClassificationMethods as classificationMethod (classificationMethod.code)}
 											<option value={classificationMethod.code}>{classificationMethod.name}</option>
 										{/each}
 									</select>
@@ -977,7 +977,7 @@
 							<div>
 								<div class="select is-fullwidth">
 									<select name="IconOverlapPriority" bind:value={userSettings.IconOverlapPriority}>
-										{#each IconOverlapPriority as overlapPriority}
+										{#each IconOverlapPriority as overlapPriority (overlapPriority.value)}
 											<option value={overlapPriority.value}>{overlapPriority.label}</option>
 										{/each}
 									</select>
@@ -1032,7 +1032,7 @@
 										name="RasterResamplingMethod"
 										bind:value={userSettings.RasterResamplingMethod}
 									>
-										{#each RasterResamplingMethods as resamplingMethod}
+										{#each RasterResamplingMethods as resamplingMethod (resamplingMethod.value)}
 											<option value={resamplingMethod.value}>{resamplingMethod.label}</option>
 										{/each}
 									</select>
@@ -1051,7 +1051,7 @@
 							<div>
 								<div class="select is-fullwidth">
 									<select name="LabelTextFont" bind:value={userSettings.LabelTextFont}>
-										{#each data.fonts as font}
+										{#each data.fonts as font (font)}
 											<option value={font}>{font}</option>
 										{/each}
 									</select>
@@ -1140,7 +1140,7 @@
 										name="StorymapPageSearchLimit"
 										bind:value={userSettings.StorymapPageSearchLimit}
 									>
-										{#each StorymapPageLimitOptions as limit}
+										{#each StorymapPageLimitOptions as limit (limit)}
 											<option value={limit}>{limit}</option>
 										{/each}
 									</select>
@@ -1160,7 +1160,7 @@
 										name="StorymapPageSortingColumn"
 										bind:value={userSettings.StorymapPageSortingColumn}
 									>
-										{#each StorymapSortingColumns as column}
+										{#each StorymapSortingColumns as column (column.value)}
 											<option value={column.value}>{column.label}</option>
 										{/each}
 									</select>
@@ -1245,7 +1245,7 @@
 						{#snippet control()}
 							<div class="select is-fullwidth">
 								<select bind:value={userSettings.StorymapChapterNavigationControlPosition}>
-									{#each [{ title: 'top-left', value: 'top-left' }, { title: 'top-right', value: 'top-right' }, { title: 'bottom-left', value: 'bottom-left' }, { title: 'bottom-right', value: 'bottom-right' }] as item}
+									{#each [{ title: 'top-left', value: 'top-left' }, { title: 'top-right', value: 'top-right' }, { title: 'bottom-left', value: 'bottom-left' }, { title: 'bottom-right', value: 'bottom-right' }] as item, index (index)}
 										<option value={item.value}>{item.title}</option>
 									{/each}
 								</select>
diff --git a/sites/geohub/src/routes/(app)/storymaps/+page.svelte b/sites/geohub/src/routes/(app)/storymaps/+page.svelte
index 5f86edbf8f..ed18adabae 100644
--- a/sites/geohub/src/routes/(app)/storymaps/+page.svelte
+++ b/sites/geohub/src/routes/(app)/storymaps/+page.svelte
@@ -272,7 +272,7 @@
 						<div>
 							<div class="select mt-auto">
 								<select bind:value={limit} onchange={handleLimitChanged}>
-									{#each LimitOptions as limit}
+									{#each LimitOptions as limit (limit)}
 										<option value={limit}>{limit}</option>
 									{/each}
 								</select>
@@ -287,7 +287,7 @@
 						<div>
 							<div class="select mt-auto">
 								<select bind:value={sortby} onchange={handleSortbyChanged}>
-									{#each StorymapSortingColumns as option}
+									{#each StorymapSortingColumns as option (option.value)}
 										<option value={option.value}>{option.label}</option>
 									{/each}
 								</select>
diff --git a/sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte b/sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte
index 0255c1e013..ac303d4b6b 100644
--- a/sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte
+++ b/sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte
@@ -628,7 +628,7 @@
 					{/key}
 
 					{#key requireUpdated}
-						{#each $configStore.chapters as chapter, index}
+						{#each $configStore.chapters as chapter, index (chapter.id)}
 							{@const slideNo = index + 2}
 							{@const isActive = $activeStorymapChapterStore?.id === chapter.id}
 							<button
diff --git a/sites/geohub/src/routes/(app)/tools/+page.svelte b/sites/geohub/src/routes/(app)/tools/+page.svelte
index 3b871f1288..6fe7c64d01 100644
--- a/sites/geohub/src/routes/(app)/tools/+page.svelte
+++ b/sites/geohub/src/routes/(app)/tools/+page.svelte
@@ -324,7 +324,7 @@
 />
 
 <div class="m-6 tools">
-	{#each breadcrumbs as page, index}
+	{#each breadcrumbs as page, index (index)}
 		{@const isLastPage = index === breadcrumbs.length - 1}
 		<div hidden={!isLastPage}>
 			{#if page.type === 'Tools'}
@@ -352,7 +352,7 @@
 							/>
 						</div>
 
-						{#each geohubAlgos as name}
+						{#each geohubAlgos as name (name)}
 							{@const algo = algorithms[name]}
 							<div class="column is-one-third-tablet is-one-quarter-desktop is-full-mobile">
 								<Card
@@ -378,7 +378,7 @@
 					<h3 class="title is-3 mt-6">Simulation add-ons</h3>
 
 					<div class="columns is-multiline is-mobile">
-						{#each data.datasets.features as dataset}
+						{#each data.datasets.features as dataset (dataset.properties.id)}
 							{@const datasetUrl = dataset.properties.links?.find((l) => l.rel === 'dataset')?.href}
 							{@const sdgs = dataset.properties.tags
 								?.filter((t) => t.key === 'sdg_goal')
@@ -403,7 +403,7 @@
 					<h3 class="title is-3 mt-6">Terrain add-ons</h3>
 
 					<div class="columns is-multiline is-mobile">
-						{#each terrainAlgos as name}
+						{#each terrainAlgos as name (name)}
 							{@const algo = algorithms[name]}
 							<div class="column is-one-third-tablet is-one-quarter-desktop is-full-mobile">
 								<Card
@@ -455,7 +455,7 @@
 								</tr>
 							</thead>
 							<tbody>
-								{#each datasets.features as feature}
+								{#each datasets.features as feature (feature.properties.id)}
 									<PublishedDatasetRow
 										{feature}
 										dispatchEvent={true}
diff --git a/sites/static-image-api/package-lock.json b/sites/static-image-api/package-lock.json
index 5d626336f9..8077b98730 100644
--- a/sites/static-image-api/package-lock.json
+++ b/sites/static-image-api/package-lock.json
@@ -35,7 +35,7 @@
 				"@undp-data/undp-bulma": "^2.0.1",
 				"eslint": "^9.19.0",
 				"eslint-config-prettier": "^10.0.1",
-				"eslint-plugin-svelte": "^2.46.1",
+				"eslint-plugin-svelte": "^3.0.0",
 				"globals": "^16.0.0",
 				"maplibre-gl": "^5.1.0",
 				"prettier": "^3.4.2",
@@ -4167,9 +4167,9 @@
 			}
 		},
 		"node_modules/eslint-compat-utils": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
-			"integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
+			"version": "0.6.4",
+			"resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.6.4.tgz",
+			"integrity": "sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -4196,32 +4196,31 @@
 			}
 		},
 		"node_modules/eslint-plugin-svelte": {
-			"version": "2.46.1",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.1.tgz",
-			"integrity": "sha512-7xYr2o4NID/f9OEYMqxsEQsCsj4KaMy4q5sANaKkAb6/QeCjYFxRmDm2S3YC3A3pl1kyPZ/syOx/i7LcWYSbIw==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-3.3.3.tgz",
+			"integrity": "sha512-imzGqIgWbfsb/CR14d3k3M8MiVNGet+l9mjPhvo1Rm0Nxi0rNn4/eELqyR8FWlgKBMlGkOp2kshRJm0xpxNfHQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.4.0",
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"eslint-compat-utils": "^0.5.1",
+				"@eslint-community/eslint-utils": "^4.4.1",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"eslint-compat-utils": "^0.6.4",
 				"esutils": "^2.0.3",
 				"known-css-properties": "^0.35.0",
-				"postcss": "^8.4.38",
+				"postcss": "^8.4.49",
 				"postcss-load-config": "^3.1.4",
-				"postcss-safe-parser": "^6.0.0",
-				"postcss-selector-parser": "^6.1.0",
-				"semver": "^7.6.2",
-				"svelte-eslint-parser": "^0.43.0"
+				"postcss-safe-parser": "^7.0.0",
+				"semver": "^7.6.3",
+				"svelte-eslint-parser": "^1.0.1"
 			},
 			"engines": {
-				"node": "^14.17.0 || >=16.0.0"
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/ota-meshi"
 			},
 			"peerDependencies": {
-				"eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
+				"eslint": "^8.57.1 || ^9.0.0",
 				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
@@ -6730,20 +6729,30 @@
 			}
 		},
 		"node_modules/postcss-safe-parser": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
-			"integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+			"integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
 			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
 			"license": "MIT",
 			"engines": {
-				"node": ">=12.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
+				"node": ">=18.0"
 			},
 			"peerDependencies": {
-				"postcss": "^8.3.3"
+				"postcss": "^8.4.31"
 			}
 		},
 		"node_modules/postcss-scss": {
@@ -6774,9 +6783,9 @@
 			}
 		},
 		"node_modules/postcss-selector-parser": {
-			"version": "6.1.2",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-			"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+			"integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -7781,20 +7790,21 @@
 			}
 		},
 		"node_modules/svelte-eslint-parser": {
-			"version": "0.43.0",
-			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.43.0.tgz",
-			"integrity": "sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.1.0.tgz",
+			"integrity": "sha512-JP0v/wzDXWxza6c8K9ZjKKHYfgt0KidlbWx1e9n9UV4q+o28GTkk71fR0IDZDmLUDYs3vSq0+Tm9fofDqzGe1w==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"eslint-scope": "^7.2.2",
-				"eslint-visitor-keys": "^3.4.3",
-				"espree": "^9.6.1",
-				"postcss": "^8.4.39",
-				"postcss-scss": "^4.0.9"
+				"eslint-scope": "^8.2.0",
+				"eslint-visitor-keys": "^4.0.0",
+				"espree": "^10.0.0",
+				"postcss": "^8.4.49",
+				"postcss-scss": "^4.0.9",
+				"postcss-selector-parser": "^7.0.0"
 			},
 			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/ota-meshi"
@@ -7808,36 +7818,14 @@
 				}
 			}
 		},
-		"node_modules/svelte-eslint-parser/node_modules/eslint-scope": {
-			"version": "7.2.2",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-			"integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"esrecurse": "^4.3.0",
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/svelte-eslint-parser/node_modules/espree": {
-			"version": "9.6.1",
-			"resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-			"integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+		"node_modules/svelte-eslint-parser/node_modules/eslint-visitor-keys": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+			"integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
 			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"acorn": "^8.9.0",
-				"acorn-jsx": "^5.3.2",
-				"eslint-visitor-keys": "^3.4.1"
-			},
+			"license": "Apache-2.0",
 			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			},
 			"funding": {
 				"url": "https://opencollective.com/eslint"
diff --git a/sites/static-image-api/package.json b/sites/static-image-api/package.json
index 110f815d07..a24f7fdead 100644
--- a/sites/static-image-api/package.json
+++ b/sites/static-image-api/package.json
@@ -29,7 +29,7 @@
 		"@undp-data/undp-bulma": "^2.0.1",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"maplibre-gl": "^5.1.0",
 		"prettier": "^3.4.2",
diff --git a/sites/static-image-api/src/routes/+page.svelte b/sites/static-image-api/src/routes/+page.svelte
index c0bf67c82d..4b01897fdc 100644
--- a/sites/static-image-api/src/routes/+page.svelte
+++ b/sites/static-image-api/src/routes/+page.svelte
@@ -178,7 +178,7 @@
 									</div>
 									<div class="dropdown-menu" id="dropdown-menu" role="menu">
 										<div class="dropdown-content">
-											{#each data.examples as example}
+											{#each data.examples as example (data.examples.indexOf(example))}
 												<!-- svelte-ignore a11y_missing_attribute -->
 												<a
 													class="dropdown-item"