diff --git a/.changeset/tiny-rocks-drive.md b/.changeset/tiny-rocks-drive.md
new file mode 100644
index 00000000000..207181597ca
--- /dev/null
+++ b/.changeset/tiny-rocks-drive.md
@@ -0,0 +1,7 @@
+---
+'@talend/react-faceted-search': major
+---
+
+feat(faceted-search): replace faceted mode toggle by design system switch component
+
+breaking change: "@talend/design-system": "^2.1.0" added as peer dep
diff --git a/packages/faceted-search/.storybook/preview.js b/packages/faceted-search/.storybook/preview.js
index 9ae35249d25..0f4280b48f0 100644
--- a/packages/faceted-search/.storybook/preview.js
+++ b/packages/faceted-search/.storybook/preview.js
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { ThemeProvider } from '@talend/design-system';
 import { namespaces as tuiNamespaces } from '@talend/locales-tui-components/namespaces';
 import { namespaces as facetedNamespaces } from '@talend/locales-tui-faceted-search/namespaces';
 
@@ -24,8 +24,10 @@ export const decorators = [
 					padding: '3rem',
 					backgroundColor: 'rgba(145, 209, 237, 0.1)',
 				}}
-			>
-				<Story {...context} />
+			>	
+				<ThemeProvider>
+					<Story {...context} />
+				</ThemeProvider>
 			</div>
 		);
 	},
diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json
index 0105aacc3a1..b1ccd1d85b7 100644
--- a/packages/faceted-search/package.json
+++ b/packages/faceted-search/package.json
@@ -48,6 +48,7 @@
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/testing-library": "^0.0.8",
     "@talend/bootstrap-theme": "^6.38.6",
+    "@talend/design-system": "^2.1.0",
     "@talend/icons": "^6.39.0",
     "@talend/locales-tui-components": "^6.42.3",
     "@talend/locales-tui-faceted-search": "^3.5.4",
@@ -65,6 +66,7 @@
     "react-i18next": "^11.15.6"
   },
   "peerDependencies": {
+    "@talend/design-system": "^2.1.0",
     "@talend/react-components": ">= 6.5.1",
     "i18next": "^20.6.1",
     "prop-types": "^15.5.10",
diff --git a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js
index c4b3b27f4f3..fdea756560a 100644
--- a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js
+++ b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Toggle from '@talend/react-components/lib/Toggle';
+import { Form } from '@talend/design-system';
 import { getTheme } from '@talend/react-components/lib/theme';
 
 import { FACETED_MODE, USAGE_TRACKING_TAGS } from '../../constants';
@@ -8,26 +8,15 @@ import cssModule from './FacetedToolbar.scss';
 
 const theme = getTheme(cssModule);
 
-const SwitchFacetedMode = ({ facetedMode, onChange, t }) => {
-	const values = [
-		{
-			value: FACETED_MODE.BASIC,
-			label: t('FACETED_SEARCH_BASIC', { defaultValue: 'Basic' }),
-			dataFeature: USAGE_TRACKING_TAGS.BASIC,
-		},
-		{
-			value: FACETED_MODE.ADVANCED,
-			label: t('FACETED_SEARCH_ADVANCED', { defaultValue: 'Advanced' }),
-			dataFeature: USAGE_TRACKING_TAGS.ADVANCED,
-		},
-	];
-
-	return (
-		<form>
-			<Toggle.Label values={values} value={facetedMode} onChange={onChange} />
-		</form>
-	);
-};
+const SwitchFacetedMode = ({ facetedMode, onChange, t }) => (
+	<Form>
+		<Form.Switch
+			label={t('FACETED_SEARCH_QUERY', 'Query')}
+			onChange={() => onChange(facetedMode === FACETED_MODE.BASIC ? FACETED_MODE.ADVANCED : FACETED_MODE.BASIC)}
+			dataFeature={facetedMode === FACETED_MODE.BASIC ? USAGE_TRACKING_TAGS.BASIC : USAGE_TRACKING_TAGS.ADVANCED}
+		/>
+	</Form>
+);
 
 SwitchFacetedMode.propTypes = {
 	facetedMode: PropTypes.string.isRequired,