diff --git a/packages/visualizations-react/stories/Legend/CategoryLegendTemplate.tsx b/packages/visualizations-react/stories/Legend/CategoryLegendTemplate.tsx
deleted file mode 100644
index 41296045..00000000
--- a/packages/visualizations-react/stories/Legend/CategoryLegendTemplate.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-import { CategoryLegendType } from '@opendatasoft/visualizations';
-import { CategoryLegend } from '../../src';
-import { SimpleProps } from '../../src/components/Props';
-
-const CategoryLegendTemplate: ComponentStory<typeof CategoryLegend> = (
-    args: SimpleProps<CategoryLegendType>
-) => (
-    <div
-        style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }}
-    >
-        <CategoryLegend {...args} style={{ width: '60vw' }} />
-    </div>
-);
-
-export default CategoryLegendTemplate;
\ No newline at end of file
diff --git a/packages/visualizations-react/stories/Legend/CategoryLegend.stories.tsx b/packages/visualizations-react/stories/UtilsComponents/Legend/CategoryLegend.stories.tsx
similarity index 58%
rename from packages/visualizations-react/stories/Legend/CategoryLegend.stories.tsx
rename to packages/visualizations-react/stories/UtilsComponents/Legend/CategoryLegend.stories.tsx
index a610f07c..e6cb17d4 100644
--- a/packages/visualizations-react/stories/Legend/CategoryLegend.stories.tsx
+++ b/packages/visualizations-react/stories/UtilsComponents/Legend/CategoryLegend.stories.tsx
@@ -1,18 +1,32 @@
-import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import type { CategoryLegendType } from '@opendatasoft/visualizations';
 import { CATEGORY_ITEM_VARIANT } from '@opendatasoft/visualizations';
-import { CategoryLegend } from '../../src';
-import { SimpleProps } from '../../src/components/Props';
-import CategoryLegendTemplate from './CategoryLegendTemplate';
+import { CategoryLegend } from '../../../src';
+import { SimpleProps } from '../../../src/components/Props';
 
 const meta: ComponentMeta<typeof CategoryLegend> = {
-    title: 'Legend',
+    title: 'Utils/Legend',
     component: CategoryLegend,
 };
 
 export default meta;
 
-export const CategoryCircleLegend = CategoryLegendTemplate.bind({});
+const Template: ComponentStory<typeof CategoryLegend> = (
+    args: SimpleProps<CategoryLegendType>
+) => (
+    <div
+        style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}
+    >
+        <CategoryLegend {...args} style={{ width: '60vw' }} />
+    </div>
+);
+
+export const CategoryCircleLegend = Template.bind({});
 const CategoryCircleLegendArgs: SimpleProps<CategoryLegendType> = {
     legendOptions: {
         type: 'category' as const,
diff --git a/packages/visualizations/src/components/Chart/Chart.svelte b/packages/visualizations/src/components/Chart/Chart.svelte
index c6285416..b51261dc 100644
--- a/packages/visualizations/src/components/Chart/Chart.svelte
+++ b/packages/visualizations/src/components/Chart/Chart.svelte
@@ -8,8 +8,8 @@
     import { generateId } from '../utils';
     import SourceLink from '../utils/SourceLink.svelte';
     import { defaultNumberFormat } from '../utils/formatter';
-    import CategoryLegend from '../Legend/CategoryLegend.svelte';
-    import type { LegendPositions, CategoryLegendType } from '../Legend/types';
+    import CategoryLegend from '../utils/Legend/CategoryLegend.svelte';
+    import type { LegendPositions, CategoryLegendType } from '../utils/Legend/types';
     import { ChartSeriesType } from './types';
     import type { ChartOptions, ChartSeries } from './types';
     import { defaultValue } from './utils';
diff --git a/packages/visualizations/src/components/Chart/legend.ts b/packages/visualizations/src/components/Chart/legend.ts
index e63cbc9a..2cbf185a 100644
--- a/packages/visualizations/src/components/Chart/legend.ts
+++ b/packages/visualizations/src/components/Chart/legend.ts
@@ -3,7 +3,7 @@ import type { _DeepPartialObject } from 'chart.js/types/utils';
 import type { ChartOptions } from './types';
 import { assureMaxLength } from '../utils/formatter';
 import { defaultValue, DEFAULT_GREY_COLOR } from './utils';
-import { CATEGORY_ITEM_VARIANT } from '../Legend/types';
+import { CATEGORY_ITEM_VARIANT } from '../utils/Legend/types';
 
 const LEGEND_MAX_LENGTH = 50;
 
diff --git a/packages/visualizations/src/components/Chart/types.ts b/packages/visualizations/src/components/Chart/types.ts
index ebc21f10..86992eec 100644
--- a/packages/visualizations/src/components/Chart/types.ts
+++ b/packages/visualizations/src/components/Chart/types.ts
@@ -1,5 +1,5 @@
 import type { Color, Source } from '../types';
-import type { LegendConfiguration } from '../Legend/types';
+import type { LegendConfiguration } from '../utils/Legend/types';
 
 export interface ChartOptions {
     /** Specify label column in DataFrame */
diff --git a/packages/visualizations/src/components/Legend/index.ts b/packages/visualizations/src/components/Legend/index.ts
deleted file mode 100644
index 3403eaea..00000000
--- a/packages/visualizations/src/components/Legend/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import CategoryLegendImpl from './CategoryLegend.svelte';
-import SvelteSimpleImpl from '../SvelteSimpleImpl';
-import type { CategoryLegendType } from './types';
-
-export default class CategoryLegendComponent extends SvelteSimpleImpl<CategoryLegendType> {
-    protected getSvelteSimpleComponentClass(): typeof CategoryLegendImpl {
-        return CategoryLegendImpl;
-    }
-}
\ No newline at end of file
diff --git a/packages/visualizations/src/components/Map/WebGl/MapRender.svelte b/packages/visualizations/src/components/Map/WebGl/MapRender.svelte
index 3b05cfee..2420bf9d 100644
--- a/packages/visualizations/src/components/Map/WebGl/MapRender.svelte
+++ b/packages/visualizations/src/components/Map/WebGl/MapRender.svelte
@@ -17,11 +17,11 @@
     import type { BBox } from 'geojson';
     import SourceLink from '../../utils/SourceLink.svelte';
     import { computeMaxZoomFromGeoJsonFeatures, getFixedTooltips } from '../utils';
-    import ColorsLegend from '../../Legend/ColorsLegend.svelte';
+    import ColorsLegend from '../../utils/Legend/ColorsLegend.svelte';
     import BackButton from '../../utils/BackButton.svelte';
     import MiniMap from '../../utils/MiniMap.svelte';
     import type { ColorScale, DataBounds, Source } from '../../types';
-    import type { LegendVariant } from '../../Legend/types';
+    import type { LegendVariant } from '../../utils/Legend/types';
     import type {
         ChoroplethFixedTooltipDescription,
         MapLayer,
diff --git a/packages/visualizations/src/components/Map/types.ts b/packages/visualizations/src/components/Map/types.ts
index 24ca1943..f574eb22 100644
--- a/packages/visualizations/src/components/Map/types.ts
+++ b/packages/visualizations/src/components/Map/types.ts
@@ -1,7 +1,7 @@
 import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
 import type { FillLayerSpecification, Popup } from 'maplibre-gl';
 import type { DebouncedFunc } from 'lodash';
-import type { LegendPositions } from '../Legend/types';
+import type { LegendPositions } from '../utils/Legend/types';
 import type { ColorScale, Color, Source } from '../types';
 
 export interface ChoroplethOptions {
diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
index 578765a9..f91b73aa 100644
--- a/packages/visualizations/src/components/MapPoi/MapRender.svelte
+++ b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -4,8 +4,8 @@
     import type { BBox } from 'geojson';
     import type { LngLatBoundsLike, LngLatLike, MapOptions, StyleSpecification } from 'maplibre-gl';
     import { onDestroy, onMount } from 'svelte';
-    import CategoryLegend from '../Legend/CategoryLegend.svelte';
-    import type { CategoryLegendType } from '../Legend/types';
+    import CategoryLegend from '../utils/Legend/CategoryLegend.svelte';
+    import type { CategoryLegendType } from '../utils/Legend/types';
     import SourceLink from '../utils/SourceLink.svelte';
     import type { Source } from '../types';
 
diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/MapPoi/types.ts
index cd26a052..773e45ca 100644
--- a/packages/visualizations/src/components/MapPoi/types.ts
+++ b/packages/visualizations/src/components/MapPoi/types.ts
@@ -7,7 +7,7 @@ import type {
 import type { BBox, GeoJsonProperties } from 'geojson';
 
 import type { Color, Source } from '../types';
-import type { CategoryLegendType } from '../Legend/types';
+import type { CategoryLegendType } from '../utils/Legend/types';
 
 // To render data layers on the map
 export type PoiMapData = Partial<{
diff --git a/packages/visualizations/src/components/Legend/CategoryLegend.svelte b/packages/visualizations/src/components/utils/Legend/CategoryLegend.svelte
similarity index 100%
rename from packages/visualizations/src/components/Legend/CategoryLegend.svelte
rename to packages/visualizations/src/components/utils/Legend/CategoryLegend.svelte
diff --git a/packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItem.svelte b/packages/visualizations/src/components/utils/Legend/CategoryLegend/Item/CategoryLegendItem.svelte
similarity index 100%
rename from packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItem.svelte
rename to packages/visualizations/src/components/utils/Legend/CategoryLegend/Item/CategoryLegendItem.svelte
diff --git a/packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItemLabel.svelte b/packages/visualizations/src/components/utils/Legend/CategoryLegend/Item/CategoryLegendItemLabel.svelte
similarity index 100%
rename from packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItemLabel.svelte
rename to packages/visualizations/src/components/utils/Legend/CategoryLegend/Item/CategoryLegendItemLabel.svelte
diff --git a/packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItemSymbol.svelte b/packages/visualizations/src/components/utils/Legend/CategoryLegend/Item/CategoryLegendItemSymbol.svelte
similarity index 100%
rename from packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItemSymbol.svelte
rename to packages/visualizations/src/components/utils/Legend/CategoryLegend/Item/CategoryLegendItemSymbol.svelte
diff --git a/packages/visualizations/src/components/Legend/CategoryLegend/Symbols/BoxSymbol.svelte b/packages/visualizations/src/components/utils/Legend/CategoryLegend/Symbols/BoxSymbol.svelte
similarity index 100%
rename from packages/visualizations/src/components/Legend/CategoryLegend/Symbols/BoxSymbol.svelte
rename to packages/visualizations/src/components/utils/Legend/CategoryLegend/Symbols/BoxSymbol.svelte
diff --git a/packages/visualizations/src/components/Legend/CategoryLegend/Symbols/CircleSymbol.svelte b/packages/visualizations/src/components/utils/Legend/CategoryLegend/Symbols/CircleSymbol.svelte
similarity index 100%
rename from packages/visualizations/src/components/Legend/CategoryLegend/Symbols/CircleSymbol.svelte
rename to packages/visualizations/src/components/utils/Legend/CategoryLegend/Symbols/CircleSymbol.svelte
diff --git a/packages/visualizations/src/components/Legend/CategoryLegend/Symbols/LineSymbol.svelte b/packages/visualizations/src/components/utils/Legend/CategoryLegend/Symbols/LineSymbol.svelte
similarity index 100%
rename from packages/visualizations/src/components/Legend/CategoryLegend/Symbols/LineSymbol.svelte
rename to packages/visualizations/src/components/utils/Legend/CategoryLegend/Symbols/LineSymbol.svelte
diff --git a/packages/visualizations/src/components/Legend/ColorsLegend.svelte b/packages/visualizations/src/components/utils/Legend/ColorsLegend.svelte
similarity index 98%
rename from packages/visualizations/src/components/Legend/ColorsLegend.svelte
rename to packages/visualizations/src/components/utils/Legend/ColorsLegend.svelte
index 8321f1ac..e4eadcbd 100644
--- a/packages/visualizations/src/components/Legend/ColorsLegend.svelte
+++ b/packages/visualizations/src/components/utils/Legend/ColorsLegend.svelte
@@ -3,9 +3,9 @@
 <script lang="ts">
     import { onDestroy } from 'svelte';
     import { debounce } from 'lodash';
-    import type { DataBounds, ColorScale } from '../types';
+    import type { DataBounds, ColorScale } from '../../types';
     import type { LegendVariant, LegendPositions } from './types';
-    import { defaultCompactLegendNumberFormat } from '../utils/formatter';
+    import { defaultCompactLegendNumberFormat } from '../formatter';
 
     // options to customize the component
     export let dataBounds: DataBounds;
diff --git a/packages/visualizations/src/components/Legend/types.ts b/packages/visualizations/src/components/utils/Legend/types.ts
similarity index 97%
rename from packages/visualizations/src/components/Legend/types.ts
rename to packages/visualizations/src/components/utils/Legend/types.ts
index e95150a3..4d577ac3 100644
--- a/packages/visualizations/src/components/Legend/types.ts
+++ b/packages/visualizations/src/components/utils/Legend/types.ts
@@ -1,4 +1,4 @@
-import type { Color } from '../types';
+import type { Color } from '../../types';
 
 export const LEGEND_POSITIONS = {
     bottom: 'bottom',
diff --git a/packages/visualizations/src/components/SvelteSimpleImpl.ts b/packages/visualizations/src/components/utils/SvelteUtilsImpl.ts
similarity index 94%
rename from packages/visualizations/src/components/SvelteSimpleImpl.ts
rename to packages/visualizations/src/components/utils/SvelteUtilsImpl.ts
index 67841fbf..eeca8d2a 100644
--- a/packages/visualizations/src/components/SvelteSimpleImpl.ts
+++ b/packages/visualizations/src/components/utils/SvelteUtilsImpl.ts
@@ -1,5 +1,5 @@
 import type { SvelteComponent } from 'svelte';
-import { SimpleComponent } from '../types';
+import { SimpleComponent } from '../../types';
 
 export default abstract class SvelteImpl<Options> extends SimpleComponent<Options> {
     protected abstract getSvelteSimpleComponentClass(): typeof SvelteComponent;
@@ -26,4 +26,4 @@ export default abstract class SvelteImpl<Options> extends SimpleComponent<Option
         this.svelteComponent?.$destroy();
         this.svelteComponent = undefined;
     }
-}
\ No newline at end of file
+}
diff --git a/packages/visualizations/src/components/utils/index.ts b/packages/visualizations/src/components/utils/index.ts
index f2b93d87..f80d8449 100644
--- a/packages/visualizations/src/components/utils/index.ts
+++ b/packages/visualizations/src/components/utils/index.ts
@@ -1,5 +1,12 @@
-/* eslint-disable import/prefer-default-export */
+import CategoryLegendImpl from './Legend/CategoryLegend.svelte';
+import SvelteUtilsImpl from './SvelteUtilsImpl';
+import type { CategoryLegendType } from './Legend/types';
 
+export class CategoryLegend extends SvelteUtilsImpl<CategoryLegendType> {
+    protected getSvelteSimpleComponentClass(): typeof CategoryLegendImpl {
+        return CategoryLegendImpl;
+    }
+}
 /**
  * Check (in the compiler) that a switch block is exhaustive.
  * Documentation: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking
diff --git a/packages/visualizations/src/index.ts b/packages/visualizations/src/index.ts
index b0f7a838..a85438bf 100644
--- a/packages/visualizations/src/index.ts
+++ b/packages/visualizations/src/index.ts
@@ -4,7 +4,7 @@ export { default as KpiCard } from './components/KpiCard';
 export { ChoroplethGeoJson, ChoroplethVectorTiles } from './components/Map/WebGl';
 export { default as ChoroplethSvg } from './components/Map/Svg';
 export { default as PoiMap } from './components/MapPoi';
-export { default as CategoryLegend } from './components/Legend';
+export { CategoryLegend } from './components/utils';
 
 export * from './types';
 export * from './components/types';
@@ -13,4 +13,4 @@ export * from './components/KpiCard/types';
 export * from './components/Map/types';
 export * from './components/MarkdownText/types';
 export * from './components/MapPoi/types';
-export * from './components/Legend/types';
+export * from './components/utils/Legend/types';