diff --git a/package.json b/package.json
index f68839b7f..466e082e2 100644
--- a/package.json
+++ b/package.json
@@ -31,9 +31,6 @@
 		"i18n:check": "yarn workspace site i18n:check",
 		"i18n:translate": "yarn workspace site i18n:translate"
 	},
-	"resolutions": {
-		"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
-	},
 	"devDependencies": {
 		"@actions/core": "^1.9.0",
 		"@typescript-eslint/eslint-plugin": "^5.25.0",
diff --git a/site/package.json b/site/package.json
index 838746a5d..1587dadb3 100644
--- a/site/package.json
+++ b/site/package.json
@@ -46,16 +46,8 @@
 		"storybook": "start-storybook -p 6006",
 		"build:storybook": "build-storybook"
 	},
-	"resolutions": {
-		"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
-	},
 	"dependencies": {
-		"@emotion/react": "^11.7.1",
-		"@emotion/styled": "^11.6.0",
-		"@icons/material": "^0.4.1",
 		"@internationalized/number": "^3.0.3",
-		"@mui/material": "^5.0.4",
-		"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
 		"@react-aria/accordion": "^3.0.0-alpha.5",
 		"@react-aria/button": "^3.4.1",
 		"@react-aria/checkbox": "^3.2.3",
diff --git a/site/source/components/BetaBanner/index.tsx b/site/source/components/BetaBanner/index.tsx
index cfcc31cd9..36c3b407d 100644
--- a/site/source/components/BetaBanner/index.tsx
+++ b/site/source/components/BetaBanner/index.tsx
@@ -1,5 +1,4 @@
-import { Container } from '@/design-system/layout'
-import { Grid } from '@mui/material'
+import { Container, Grid } from '@/design-system/layout'
 import React from 'react'
 import wipSvg from './undraw_qa_engineers_dg-5-p.svg'
 
@@ -10,7 +9,13 @@ export default function BetaBanner({
 }) {
 	return (
 		<Container backgroundColor={(theme) => theme.colors.bases.tertiary[100]}>
-			<Grid container spacing={4} alignItems="center">
+			<Grid
+				container
+				spacing={4}
+				css={`
+					align-items: center;
+				`}
+			>
 				<Grid item sm={3}>
 					<img src={wipSvg} style={{ width: '100%', padding: '0.25rem' }} />
 				</Grid>
diff --git a/site/source/components/MoreInfosOnUs.tsx b/site/source/components/MoreInfosOnUs.tsx
index bc88c30d2..647e367b0 100644
--- a/site/source/components/MoreInfosOnUs.tsx
+++ b/site/source/components/MoreInfosOnUs.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import { SmallCard } from '@/design-system/card'
 import { H2 } from '@/design-system/typography/heading'
 import { useContext } from 'react'
diff --git a/site/source/components/PageHeader.tsx b/site/source/components/PageHeader.tsx
index 0b3f5f66a..04553617f 100644
--- a/site/source/components/PageHeader.tsx
+++ b/site/source/components/PageHeader.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'
 import { ReactNode } from 'react'
 import styled from 'styled-components'
@@ -8,8 +8,6 @@ const Illustration = styled.img<{ titre: ReactNode }>`
 	width: 100%;
 	vertical-align: bottom;
 	padding-top: ${({ theme }) => theme.spacings.xl};
-	/* transform-origin: center right;
-	transform: scale(1.25); */
 `
 
 export default function PageHeader({
@@ -22,7 +20,13 @@ export default function PageHeader({
 	picture?: string
 }) {
 	return (
-		<Grid container spacing={3} alignItems="center">
+		<Grid
+			container
+			spacing={3}
+			css={`
+				align-items: center;
+			`}
+		>
 			<Grid
 				item
 				sm={12}
@@ -39,17 +43,20 @@ export default function PageHeader({
 			</Grid>
 
 			{picture && (
-				<Grid
-					item
-					className="hide-mobile"
-					md={3}
-					lg={4}
-					alignSelf="flex-end"
-					sx={{ zIndex: '-1', display: { xs: 'none', md: 'block' } }}
-				>
+				<InnerGrid item className="hide-mobile" md={3} lg={4}>
 					<Illustration className="hide-mobile" titre={titre} src={picture} />
-				</Grid>
+				</InnerGrid>
 			)}
 		</Grid>
 	)
 }
+
+const InnerGrid = styled(Grid)`
+	align-self: flex-end;
+	z-index: -1;
+	display: none;
+
+	@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
+		display: block;
+	}
+`
diff --git a/site/source/components/SchemeComparaison.tsx b/site/source/components/SchemeComparaison.tsx
index 622f3d1c9..f0db24680 100644
--- a/site/source/components/SchemeComparaison.tsx
+++ b/site/source/components/SchemeComparaison.tsx
@@ -11,7 +11,7 @@ import { H2, H3 } from '@/design-system/typography/heading'
 import { SmallBody } from '@/design-system/typography/paragraphs'
 import revenusSVG from '@/images/revenus.svg'
 import { situationSelector } from '@/selectors/simulationSelectors'
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import { useCallback, useContext, useMemo, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { useSelector } from 'react-redux'
diff --git a/site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx b/site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx
index 65c404edd..60efcb37b 100644
--- a/site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx
+++ b/site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx
@@ -3,7 +3,7 @@ import { TextField } from '@/design-system/field'
 import { Strong } from '@/design-system/typography'
 import { H3 } from '@/design-system/typography/heading'
 import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import { useContext, useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { TrackingContext } from '../../ATInternetTracking'
diff --git a/site/source/components/ShareSimulationBanner/index.tsx b/site/source/components/ShareSimulationBanner/index.tsx
index a683ed33d..826a48d7f 100644
--- a/site/source/components/ShareSimulationBanner/index.tsx
+++ b/site/source/components/ShareSimulationBanner/index.tsx
@@ -1,12 +1,11 @@
 import Emoji from '@/components/utils/Emoji'
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import {
 	companySituationSelector,
 	situationSelector,
 } from '@/selectors/simulationSelectors'
-import { Grid } from '@mui/material'
 import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -83,7 +82,9 @@ export default function ShareOrSaveSimulationBanner({
 				container
 				className=" print-hidden"
 				spacing={4}
-				justifyContent="center"
+				css={`
+					justify-content: center;
+				`}
 			>
 				{share && (
 					<Grid item xs={12} sm="auto">
diff --git a/site/source/components/Simulation/SimulationGoal.tsx b/site/source/components/Simulation/SimulationGoal.tsx
index 220b40ae8..3c41ba317 100644
--- a/site/source/components/Simulation/SimulationGoal.tsx
+++ b/site/source/components/Simulation/SimulationGoal.tsx
@@ -1,7 +1,7 @@
 import { updateSituation } from '@/actions/actions'
+import { Grid } from '@/design-system/layout'
 import { SmallBody } from '@/design-system/typography/paragraphs'
 import { targetUnitSelector } from '@/selectors/simulationSelectors'
-import { Grid } from '@mui/material'
 import { DottedName } from 'modele-social'
 import { formatValue, PublicodesExpression } from 'publicodes'
 import React, { useCallback, useState } from 'react'
@@ -66,9 +66,11 @@ export function SimulationGoal({
 			<StyledGoal>
 				<Grid
 					container
-					alignItems="baseline"
+					css={`
+						align-items: baseline;
+						justify-content: space-between;
+					`}
 					spacing={2}
-					justifyContent="space-between"
 				>
 					<Grid item md="auto" sm={small ? 9 : 8} xs={8}>
 						<StyledGoalHeader>
@@ -85,13 +87,9 @@ export function SimulationGoal({
 							</SmallBody>
 						</StyledGoalHeader>
 					</Grid>
-					<Grid
-						item
-						md
-						sx={{ display: { sm: 'none', xs: 'none', md: 'block' } }}
-					>
+					<StyledGuideLectureContainer>
 						<StyledGuideLecture small={small} />
-					</Grid>
+					</StyledGuideLectureContainer>
 					{editable ? (
 						<Grid item md={small ? 2 : 3} sm={small ? 3 : 4} xs={4}>
 							{!isFocused && !small && (
@@ -132,6 +130,18 @@ export function SimulationGoal({
 		</Appear>
 	)
 }
+
+const StyledGuideLectureContainer = styled(Grid).attrs({
+	item: true,
+	md: true,
+})`
+	display: none;
+
+	@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
+		display: block;
+	}
+`
+
 const StyledGuideLecture = styled.div.attrs({ 'aria-hidden': true })<{
 	small: boolean
 }>`
diff --git a/site/source/components/Simulation/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoals.tsx
index 27a115433..8639adfef 100644
--- a/site/source/components/Simulation/SimulationGoals.tsx
+++ b/site/source/components/Simulation/SimulationGoals.tsx
@@ -1,6 +1,6 @@
+import { Grid } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
 import { firstStepCompletedSelector } from '@/selectors/simulationSelectors'
-import { Grid } from '@mui/material'
 import React from 'react'
 import { useSelector } from 'react-redux'
 import styled, { css, ThemeProvider } from 'styled-components'
@@ -88,15 +88,16 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) {
 	const inIframe = useIsEmbedded()
 
 	return (
-		<Grid container justifyContent="space-between" gap={1}>
+		<Section>
 			{inIframe && (
 				<Grid
 					item
 					xs={12}
 					sm="auto"
-					container
-					alignItems="flex-end"
-					justifyContent="center"
+					css={`
+						justify-content: center;
+						align-items: flex-end;
+					`}
 				>
 					<LogoContainer
 						href={import.meta.env.VITE_FR_BASE_URL}
@@ -112,10 +113,15 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) {
 					<ToggleSection>{toggles}</ToggleSection>
 				</Grid>
 			)}
-		</Grid>
+		</Section>
 	)
 }
 
+const Section = styled(Grid).attrs({ container: true })`
+	justify-content: space-between;
+	gap: ${({ theme }) => theme.spacings.xs};
+`
+
 const ToggleSection = styled.div`
 	padding: ${({ theme }) => theme.spacings.sm} 0;
 
diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx
index 425d3a0c0..74e55a6c6 100644
--- a/site/source/components/Simulation/index.tsx
+++ b/site/source/components/Simulation/index.tsx
@@ -2,16 +2,16 @@ import { ConversationProps } from '@/components/conversation/Conversation'
 import PageFeedback from '@/components/Feedback'
 import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner'
 import { PopoverWithTrigger } from '@/design-system'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
 import {
 	companySituationSelector,
 	firstStepCompletedSelector,
 } from '@/selectors/simulationSelectors'
-import { Grid, styled } from '@mui/material'
 import React from 'react'
 import { Trans } from 'react-i18next'
 import { useSelector } from 'react-redux'
+import styled from 'styled-components'
 import { TrackPage } from '../../ATInternetTracking'
 import Banner from '../Banner'
 import AnswerList from '../conversation/AnswerList'
@@ -58,7 +58,13 @@ export default function Simulation({
 	return (
 		<>
 			{!firstStepCompleted && <TrackPage name="accueil" />}
-			<Grid container spacing={2} justifyContent="center">
+			<Grid
+				container
+				spacing={2}
+				css={`
+					justify-content: center;
+				`}
+			>
 				<StyledGrid item xl={9} lg={10} md={11} sm={12}>
 					<PrintExportRecover />
 					{children}
diff --git a/site/source/components/company/Details.tsx b/site/source/components/company/Details.tsx
index 41eec8f81..12597a428 100644
--- a/site/source/components/company/Details.tsx
+++ b/site/source/components/company/Details.tsx
@@ -1,9 +1,8 @@
 import { Message } from '@/design-system'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H4 } from '@/design-system/typography/heading'
 import { Body } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { Trans } from 'react-i18next'
 import styled from 'styled-components'
 import SeeAnswersButton from '../conversation/SeeAnswersButton'
@@ -18,8 +17,10 @@ export function CompanyDetails({
 		<StyledCompanyContainer>
 			<Grid
 				container
-				alignItems={'flex-end'}
-				justifyContent={'center'}
+				css={`
+					align-items: flex-end;
+					justify-content: center;
+				`}
 				spacing={3}
 			>
 				<Grid item xs={12} lg>
diff --git a/site/source/components/company/SearchField.tsx b/site/source/components/company/SearchField.tsx
index 3e43cc5c8..815f2a07f 100644
--- a/site/source/components/company/SearchField.tsx
+++ b/site/source/components/company/SearchField.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import { useSearchFieldState } from '@react-stately/searchfield'
 import { FabriqueSocialEntreprise } from '@/api/fabrique-social'
 import { Card } from '@/design-system/card'
diff --git a/site/source/components/conversation/AnswerList.tsx b/site/source/components/conversation/AnswerList.tsx
index 3168104b5..c19e70ca3 100644
--- a/site/source/components/conversation/AnswerList.tsx
+++ b/site/source/components/conversation/AnswerList.tsx
@@ -5,7 +5,7 @@ import { useEngine } from '@/components/utils/EngineContext'
 import { useNextQuestions } from '@/components/utils/useNextQuestion'
 import { Message, PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body } from '@/design-system/typography/paragraphs'
@@ -15,7 +15,6 @@ import {
 	situationSelector,
 } from '@/selectors/simulationSelectors'
 import { evaluateQuestion } from '@/utils'
-import { Grid } from '@mui/material'
 import { DottedName } from 'modele-social'
 import { EvaluatedNode } from 'publicodes'
 import { useCallback, useMemo } from 'react'
@@ -161,13 +160,7 @@ function StepsTable({
 			{rules
 				.filter((rule) => rule.nodeValue !== null)
 				.map((rule) => (
-					<StyledAnswerList
-						container
-						alignItems={'baseline'}
-						justifyContent="flex-end"
-						key={rule.dottedName}
-						gap={2}
-					>
+					<StyledAnswerList container key={rule.dottedName}>
 						<Grid item xs>
 							{rule.title}
 							<ExplicableRule light dottedName={rule.dottedName} />
@@ -241,6 +234,9 @@ const StyledAnswer = styled(Grid)`
 `
 const StyledAnswerList = styled(Grid)`
 	margin: ${({ theme }) => `${theme.spacings.md} 0`};
+	align-items: baseline;
+	justify-content: flex-end;
+	gap: ${({ theme }) => theme.spacings.sm};
 
 	font-family: ${({ theme }) => theme.fonts.main};
 	:nth-child(2n) {
diff --git a/site/source/components/conversation/Conversation.tsx b/site/source/components/conversation/Conversation.tsx
index d84f5c878..c5715c0a6 100644
--- a/site/source/components/conversation/Conversation.tsx
+++ b/site/source/components/conversation/Conversation.tsx
@@ -11,7 +11,7 @@ import Emoji from '@/components/utils/Emoji'
 import { EngineContext } from '@/components/utils/EngineContext'
 import { useNextQuestions } from '@/components/utils/useNextQuestion'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H3 } from '@/design-system/typography/heading'
 import { Body } from '@/design-system/typography/paragraphs'
 import {
@@ -19,7 +19,6 @@ import {
 	situationSelector,
 } from '@/selectors/simulationSelectors'
 import { evaluateQuestion } from '@/utils'
-import { Grid } from '@mui/material'
 import { PublicodesExpression } from 'publicodes'
 import React, { useContext, useEffect } from 'react'
 import { Trans } from 'react-i18next'
@@ -136,7 +135,14 @@ export default function Conversation({
 										→
 									</Button>
 								</Grid>
-								<Grid container item xs={12} sm justifyContent="flex-end">
+								<Grid
+									item
+									xs={12}
+									sm
+									css={`
+										justify-content: flex-end;
+									`}
+								>
 									<SeeAnswersButton>
 										{customSituationVisualisation}
 									</SeeAnswersButton>
@@ -171,7 +177,14 @@ export default function Conversation({
 									</Button>
 								</Grid>
 							)}
-							<Grid container item xs={6} sm justifyContent="flex-end">
+							<Grid
+								item
+								xs={6}
+								sm
+								css={`
+									justify-content: flex-end;
+								`}
+							>
 								<SeeAnswersButton>
 									{customSituationVisualisation}
 								</SeeAnswersButton>
diff --git a/site/source/components/search/SimulatorHits.tsx b/site/source/components/search/SimulatorHits.tsx
index b990b71b9..b2b67698b 100644
--- a/site/source/components/search/SimulatorHits.tsx
+++ b/site/source/components/search/SimulatorHits.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import Emoji from '@/components/utils/Emoji'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { SmallCard } from '@/design-system/card'
diff --git a/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx b/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx
index 37fe13463..dedafa0f9 100644
--- a/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx
+++ b/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx
@@ -1,4 +1,3 @@
-import { Grid } from '@mui/material'
 import Value, {
 	Condition,
 	WhenApplicable,
@@ -8,18 +7,19 @@ import RuleLink from '@/components/RuleLink'
 import { FromBottom } from '@/components/ui/animate'
 import Emoji from '@/components/utils/Emoji'
 import { useEngine } from '@/components/utils/EngineContext'
+import { Message } from '@/design-system'
+import { Grid } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
 import assuranceMaladieSrc from '@/images/assurance-maladie.svg'
 import dgfipSrc from '@/images/logo-dgfip.svg'
 import * as logosSrc from '@/images/logos-caisses-retraite'
 import urssafSrc from '@/images/Urssaf.svg'
+import { targetUnitSelector } from '@/selectors/simulationSelectors'
 import { DottedName } from 'modele-social'
 import { Trans } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { targetUnitSelector } from '@/selectors/simulationSelectors'
 import styled from 'styled-components'
-import { Message } from '@/design-system'
 
 export default function InstitutionsPartenaires() {
 	const unit = useSelector(targetUnitSelector)
diff --git a/site/source/components/simulationExplanation/SalaryExplanation.tsx b/site/source/components/simulationExplanation/SalaryExplanation.tsx
index fc282b4b3..744c332a5 100644
--- a/site/source/components/simulationExplanation/SalaryExplanation.tsx
+++ b/site/source/components/simulationExplanation/SalaryExplanation.tsx
@@ -1,11 +1,10 @@
-import { Grid } from '@mui/material'
 import Distribution from '@/components/Distribution'
 import PaySlip from '@/components/PaySlip'
 import StackedBarChart from '@/components/StackedBarChart'
 import { FromTop } from '@/components/ui/animate'
 import Emoji from '@/components/utils/Emoji'
 import { useInversionFail } from '@/components/utils/EngineContext'
-import { Container, Spacing } from '@/design-system/layout'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { SmallBody } from '@/design-system/typography/paragraphs'
@@ -36,7 +35,12 @@ export default function SalaryExplanation() {
 
 			<Container backgroundColor={(theme) => theme.colors.bases.primary[100]}>
 				<div ref={payslipRef} />
-				<Grid container justifyContent="center">
+				<Grid
+					container
+					css={`
+						justify-content: center;
+					`}
+				>
 					<Grid item xl={9} lg={10}>
 						<H2>
 							<Trans>Fiche de paie</Trans>
diff --git a/site/source/components/ui/Checklist/index.tsx b/site/source/components/ui/Checklist/index.tsx
index 594129560..38c6f705e 100644
--- a/site/source/components/ui/Checklist/index.tsx
+++ b/site/source/components/ui/Checklist/index.tsx
@@ -1,8 +1,7 @@
-import { Grid } from '@mui/material'
 import { Markdown } from '@/components/utils/markdown'
 import { ScrollToElement } from '@/components/utils/Scroll'
 import { Checkbox } from '@/design-system/field'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
 import React, { useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
diff --git a/site/source/design-system/accordion/index.tsx b/site/source/design-system/accordion/index.tsx
index 4327d5e09..ad59c00a5 100644
--- a/site/source/design-system/accordion/index.tsx
+++ b/site/source/design-system/accordion/index.tsx
@@ -116,11 +116,8 @@ const ChevronRightMedium = styled.img.attrs({ src: chevronImg })<{
 		`}
 `
 
-const StyledContent = styled(animated.div)`
+const StyledContent: any = styled(animated.div)`
 	overflow: hidden;
-	${({ theme }) => css`
-		/* border-top: 1px solid ${theme.colors.bases.primary[400]}; */
-	`}
 	> div {
 		margin: ${({ theme }) => theme.spacings.lg};
 	}
diff --git a/site/source/design-system/answer-group/index.tsx b/site/source/design-system/answer-group/index.tsx
index 3823693d9..d59169a45 100644
--- a/site/source/design-system/answer-group/index.tsx
+++ b/site/source/design-system/answer-group/index.tsx
@@ -1,22 +1,21 @@
-import { Grid } from '@mui/material'
-import { Children, ComponentProps, FunctionComponent, ReactNode } from 'react'
+import { Children, FunctionComponent, ReactNode } from 'react'
 
 type AnswerGroupProps = {
 	children: ReactNode
-} & ComponentProps<typeof Grid>
+}
 
-const AnswerGroup: FunctionComponent<AnswerGroupProps> = ({
-	children,
-	...props
-}) => {
+const AnswerGroup: FunctionComponent<AnswerGroupProps> = ({ children }) => {
 	return (
-		<Grid container spacing={3} {...props}>
+		<div
+			css={`
+				display: flex;
+				gap: 18px;
+			`}
+		>
 			{Children.map(children, (c, i) => (
-				<Grid key={`answerGroup-${i}`} item sm={12} md="auto">
-					{c}
-				</Grid>
+				<div key={`answerGroup-${i}`}>{c}</div>
 			))}
-		</Grid>
+		</div>
 	)
 }
 
diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx
index 9ec47b5cb..23bf334ce 100644
--- a/site/source/design-system/card/Card.tsx
+++ b/site/source/design-system/card/Card.tsx
@@ -8,7 +8,6 @@ import {
 	useExternalLinkProps,
 } from '@/design-system/typography/link'
 import { Body } from '@/design-system/typography/paragraphs'
-import { PropsOf } from '@emotion/react'
 import React, { ReactHTML, useRef } from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 
@@ -22,7 +21,7 @@ type CardProps = GenericCardProps & {
 	ctaLabel?: React.ReactNode
 	children: React.ReactNode
 	compact?: boolean
-	bodyAs?: PropsOf<typeof Body>['as']
+	bodyAs?: React.ComponentProps<typeof Body>['as']
 }
 
 export function Card({
diff --git a/site/source/design-system/footer/column.tsx b/site/source/design-system/footer/column.tsx
index 763b80b66..bc298c50a 100644
--- a/site/source/design-system/footer/column.tsx
+++ b/site/source/design-system/footer/column.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'
 import { ReactNode } from 'react'
 import styled from 'styled-components'
diff --git a/site/source/design-system/footer/container.tsx b/site/source/design-system/footer/container.tsx
index 238e20cf7..c7c1ba4f3 100644
--- a/site/source/design-system/footer/container.tsx
+++ b/site/source/design-system/footer/container.tsx
@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid'
+import { Grid } from '@/design-system/layout'
 import { ReactNode } from 'react'
 import styled from 'styled-components'
 
diff --git a/site/source/design-system/layout/Grid.tsx b/site/source/design-system/layout/Grid.tsx
new file mode 100644
index 000000000..fdcb40d54
--- /dev/null
+++ b/site/source/design-system/layout/Grid.tsx
@@ -0,0 +1,146 @@
+import styled, { css } from 'styled-components'
+import { SpacingKey } from '../theme'
+import { useContext, createContext } from 'react'
+
+const breakPoints = ['sm', 'md', 'lg', 'xl'] as Array<SpacingKey>
+
+type ContainerContext = {
+	nbColumns: number
+	rowSpacing: number
+	columnSpacing: number
+}
+
+const GridContainerContext = createContext<ContainerContext>({
+	nbColumns: 12,
+	columnSpacing: 0,
+	rowSpacing: 0,
+})
+
+type BreakpointConfig = number | true | 'auto' | undefined
+const breakPointCss = (
+	breakPointConfig: BreakpointConfig,
+	nbColumns: number
+) => {
+	if (breakPointConfig === undefined) {
+		return ''
+	} else if (breakPointConfig === true) {
+		return css`
+			max-width: 100%;
+			flex-basis: 0;
+			flex-grow: 1;
+		`
+	} else if (breakPointConfig === 'auto') {
+		return css`
+			flex: 0 0 auto;
+			width: auto;
+		`
+	} else {
+		return css`
+			flex-basis: ${(breakPointConfig / nbColumns) * 100}%;
+			flex-grow: 0;
+		`
+	}
+}
+
+type GridProps =
+	| ({ item: true; container?: false } & GridItemProps)
+	| ({ item?: false; container: true } & GridContainerProps)
+
+/**
+ * An hybrid Flexbox/Grid layout component
+ */
+export default function FluidGrid(props: GridProps) {
+	if (props.container === true) {
+		return <GridContainer {...props} />
+	} else if (props?.item === true) {
+		return <GridItem {...props} />
+	}
+
+	return null
+}
+
+const StyledGridContainer = styled.div<GridContainerProps>`
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	margin-left: -${({ theme, columnSpacing }) => theme.spacing[columnSpacing ?? 0]};
+	margin-top: -${({ theme, rowSpacing }) => theme.spacing[rowSpacing ?? 0]};
+`
+
+const StyledGridItem = styled.div<GridItemProps & ContainerContext>`
+	padding-left: ${({ theme, columnSpacing }) =>
+		theme.spacing[columnSpacing ?? 0]};
+	padding-top: ${({ theme, rowSpacing }) => theme.spacing[rowSpacing ?? 0]};
+	${(props) => breakPointCss(props.xs, props.nbColumns)}
+
+	${(props) =>
+		breakPoints
+			.filter((id) => props[id])
+			.map(
+				(id) => css`
+					@media (min-width: ${({ theme }) => theme.breakpointsWidth[id]}) {
+						${breakPointCss(props[id], props.nbColumns)}
+					}
+				`
+			)}
+`
+type GridContainerProps = {
+	columns?: number
+	spacing?: number
+	columnSpacing?: number
+	rowSpacing?: number
+	children: React.ReactNode
+} & React.ComponentPropsWithoutRef<'div'>
+
+function GridContainer({
+	columns = 12,
+	spacing = 0,
+	columnSpacing,
+	rowSpacing,
+	children,
+	...otherProps
+}: GridContainerProps) {
+	return (
+		<GridContainerContext.Provider
+			value={{
+				nbColumns: columns,
+				columnSpacing: columnSpacing ?? spacing,
+				rowSpacing: rowSpacing ?? spacing,
+			}}
+		>
+			<StyledGridContainer
+				columnSpacing={columnSpacing ?? spacing}
+				rowSpacing={rowSpacing ?? spacing}
+				{...otherProps}
+			>
+				{children}
+			</StyledGridContainer>
+		</GridContainerContext.Provider>
+	)
+}
+
+type GridItemProps = {
+	children?: React.ReactNode
+	className?: string
+} & Partial<Record<SpacingKey | 'xs', BreakpointConfig>> &
+	React.ComponentPropsWithoutRef<'div'>
+
+function GridItem({
+	xs,
+	sm,
+	md,
+	lg,
+	xl,
+	children,
+	...otherProps
+}: GridItemProps) {
+	const containerContext = useContext(GridContainerContext)
+
+	return (
+		<StyledGridItem
+			{...{ xs, sm, md, lg, xl, ...containerContext, ...otherProps }}
+		>
+			{children}
+		</StyledGridItem>
+	)
+}
diff --git a/site/source/design-system/layout/index.ts b/site/source/design-system/layout/index.ts
index ed2df9414..4f7a23c01 100644
--- a/site/source/design-system/layout/index.ts
+++ b/site/source/design-system/layout/index.ts
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
 export { default as Container } from './Container'
+export { default as Grid } from './Grid'
 
 export const Spacing = styled.div<
 	| { xxl: true }
diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx
index a3257d0f6..d3e68e2bb 100644
--- a/site/source/design-system/message/index.tsx
+++ b/site/source/design-system/message/index.tsx
@@ -1,11 +1,11 @@
+import { Palette, SmallPalette } from '@/types/styled'
 import React from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
-import baseIcon from './baseIcon.svg'
-import infoIcon from './infoIcon.svg'
-import errorIcon from './errorIcon.svg'
-import successIcon from './successIcon.svg'
 import { Body } from '../typography/paragraphs'
-import { Palette, SmallPalette } from '../styled'
+import baseIcon from './baseIcon.svg'
+import errorIcon from './errorIcon.svg'
+import infoIcon from './infoIcon.svg'
+import successIcon from './successIcon.svg'
 
 type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
 type MessageProps = {
diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx
index 38891cdba..8ef552e97 100644
--- a/site/source/design-system/popover/Popover.tsx
+++ b/site/source/design-system/popover/Popover.tsx
@@ -1,5 +1,5 @@
+import { Grid } from '@/design-system/layout'
 import { getIframeOffset, wrapperDebounceEvents } from '@/utils'
-import { Grid } from '@mui/material'
 import { useButton } from '@react-aria/button'
 import { useDialog } from '@react-aria/dialog'
 import { FocusScope } from '@react-aria/focus'
@@ -73,8 +73,20 @@ export default function Popover(
 			<OverlayContainer>
 				<Underlay {...underlayProps} $offsetTop={offsetTop}>
 					<Container>
-						<Grid container justifyContent="center">
-							<Grid item sm={small ? 10 : 12} md={small ? 8 : 12} zeroMinWidth>
+						<Grid
+							container
+							css={`
+								justify-content: center;
+							`}
+						>
+							<Grid
+								item
+								sm={small ? 10 : 12}
+								md={small ? 8 : 12}
+								css={`
+									min-width: 0;
+								`}
+							>
 								<PopoverContainer
 									{...dialogProps}
 									{...modalProps}
diff --git a/site/source/design-system/root.tsx b/site/source/design-system/root.tsx
index 7674b85bc..6c11b6021 100644
--- a/site/source/design-system/root.tsx
+++ b/site/source/design-system/root.tsx
@@ -1,4 +1,4 @@
-import { theme as urssafTheme } from '@/design-system/theme'
+import urssafTheme from '@/design-system/theme'
 import { ReactNode } from 'react'
 import { ThemeProvider } from 'styled-components'
 
diff --git a/site/source/design-system/styled.d.ts b/site/source/design-system/styled.d.ts
deleted file mode 100644
index eac9cfbe8..000000000
--- a/site/source/design-system/styled.d.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import {
-	Theme as SystemTheme,
-	ThemeOptions as SystemThemeOptions,
-} from '@mui/system'
-import 'styled-components'
-
-type Color = string
-
-type Palette = {
-	100: Color
-	200: Color
-	300: Color
-	400: Color
-	500: Color
-	600: Color
-	700: Color
-	800: Color
-}
-
-type SmallPalette = {
-	100: Color
-	200: Color
-	300: Color
-	400: Color
-	500: Color
-	600: Color
-}
-type Metric = string
-
-type Spacing = Metric
-
-type Font = string
-
-type FontSize = Metric
-
-type ShadowDefinition = string
-
-interface CustomTheme {
-	colors: {
-		bases: {
-			primary: Palette
-			secondary: Palette
-			tertiary: Palette
-		}
-
-		publics: {
-			employeur: Palette
-			particulier: Palette
-			independant: Palette
-			artisteAuteur: Palette
-			marin: Palette
-		}
-
-		extended: {
-			grey: Palette
-			error: SmallPalette
-			success: SmallPalette
-			info: SmallPalette
-		}
-	}
-
-	spacings: {
-		xxs: Spacing
-		xs: Spacing
-		sm: Spacing
-		md: Spacing
-		lg: Spacing
-		xl: Spacing
-		xxl: Spacing
-		xxxl: Spacing
-	}
-
-	fonts: {
-		main: Font
-		heading: Font
-	}
-
-	baseFontSize: FontSize
-
-	box: {
-		borderRadius: Metric
-		borderWidth: Metric
-	}
-
-	elevations: {
-		2: ShadowDefinition
-		3: ShadowDefinition
-		4: ShadowDefinition
-		5: ShadowDefinition
-		6: ShadowDefinition
-	}
-
-	breakpointsWidth: {
-		xl: Metric
-		lg: Metric
-		md: Metric
-		sm: Metric
-	}
-
-	darkMode: boolean
-}
-
-declare module '@mui/material/styles' {
-	export interface Theme extends SystemTheme, CustomTheme {}
-	export interface ThemeOptions extends SystemThemeOptions, CustomTheme {}
-}
-
-declare module 'styled-components' {
-	export interface DefaultTheme extends SystemTheme, CustomTheme {}
-}
diff --git a/site/source/design-system/theme.ts b/site/source/design-system/theme.ts
index 1e9060c62..e7a535a47 100644
--- a/site/source/design-system/theme.ts
+++ b/site/source/design-system/theme.ts
@@ -1,7 +1,6 @@
-import { createTheme } from '@mui/material'
 import { DefaultTheme } from 'styled-components'
 
-export const defaultTheme = {
+const baseTheme = {
 	colors: {
 		bases: {
 			primary: {
@@ -168,22 +167,24 @@ export const defaultTheme = {
 
 // We use the Grid from material-ui, we need to uniformise
 // breakpoints and spacing with the Urssaf design system
-type SpacingKey = keyof typeof defaultTheme.breakpointsWidth
+export type SpacingKey = keyof typeof baseTheme.breakpointsWidth
 const breakpoints = Object.fromEntries(
-	Object.entries(defaultTheme.breakpointsWidth).map(([key, value]) => [
+	Object.entries(baseTheme.breakpointsWidth).map(([key, value]) => [
 		key,
 		Number.parseInt(value),
 	])
 ) as Record<SpacingKey, number>
 
-export const theme: DefaultTheme = createTheme({
+const theme: DefaultTheme = {
 	breakpoints: {
 		values: {
 			xs: 0,
 			...breakpoints,
 		},
 	},
-	spacing: Object.values(defaultTheme.spacings),
+	spacing: Object.values(baseTheme.spacings),
 
-	...defaultTheme,
-})
+	...baseTheme,
+}
+
+export default theme
diff --git a/site/source/pages/Budget/Budget.tsx b/site/source/pages/Budget/Budget.tsx
index debcbea7a..055200156 100644
--- a/site/source/pages/Budget/Budget.tsx
+++ b/site/source/pages/Budget/Budget.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import MoreInfosOnUs from '@/components/MoreInfosOnUs'
 import Emoji from '@/components/utils/Emoji'
 import { Markdown } from '@/components/utils/markdown'
diff --git a/site/source/pages/Creer/CreationChecklist.tsx b/site/source/pages/Creer/CreationChecklist.tsx
index 8c8657ed0..000757e1b 100644
--- a/site/source/pages/Creer/CreationChecklist.tsx
+++ b/site/source/pages/Creer/CreationChecklist.tsx
@@ -10,14 +10,13 @@ import Scroll from '@/components/utils/Scroll'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Button } from '@/design-system/buttons'
 import { Article } from '@/design-system/card'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H1, H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
 import { RootState } from '@/reducers/rootReducer'
 import { LegalStatus } from '@/selectors/companyStatusSelectors'
-import { Grid } from '@mui/material'
 import { useContext } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { Trans, useTranslation } from 'react-i18next'
diff --git a/site/source/pages/Creer/Home.tsx b/site/source/pages/Creer/Home.tsx
index ca748544a..38f00f350 100644
--- a/site/source/pages/Creer/Home.tsx
+++ b/site/source/pages/Creer/Home.tsx
@@ -1,18 +1,18 @@
-import { Grid } from '@mui/material'
 import PageHeader from '@/components/PageHeader'
 import { FromBottom } from '@/components/ui/animate'
 import Meta from '@/components/utils/Meta'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Button } from '@/design-system/buttons'
 import { Card } from '@/design-system/card'
+import { Grid } from '@/design-system/layout'
 import { H2 } from '@/design-system/typography/heading'
 import { Intro, SmallBody } from '@/design-system/typography/paragraphs'
+import { RootState } from '@/reducers/rootReducer'
+import { useNextQuestionUrl } from '@/selectors/companyStatusSelectors'
 import { useContext } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { RootState } from '@/reducers/rootReducer'
-import { useNextQuestionUrl } from '@/selectors/companyStatusSelectors'
 import { TrackPage } from '../../ATInternetTracking'
 import créerSvg from './créer.svg'
 
diff --git a/site/source/pages/Documentation.tsx b/site/source/pages/Documentation.tsx
index 47663c160..d0d7dc7d1 100644
--- a/site/source/pages/Documentation.tsx
+++ b/site/source/pages/Documentation.tsx
@@ -7,13 +7,12 @@ import Meta from '@/components/utils/Meta'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H1, H2, H3, H4, H5 } from '@/design-system/typography/heading'
 import { Link, StyledLink } from '@/design-system/typography/link'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
 import { RootState } from '@/reducers/rootReducer'
-import { Grid } from '@mui/material'
 import rules, { DottedName } from 'modele-social'
 import { getDocumentationSiteMap, RulePage } from 'publicodes-react'
 import { ComponentType, useContext, useMemo } from 'react'
diff --git a/site/source/pages/Landing/Landing.tsx b/site/source/pages/Landing/Landing.tsx
index eed8f1092..0e2f6b262 100644
--- a/site/source/pages/Landing/Landing.tsx
+++ b/site/source/pages/Landing/Landing.tsx
@@ -4,13 +4,13 @@ import PageHeader from '@/components/PageHeader'
 import Meta from '@/components/utils/Meta'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Button } from '@/design-system/buttons'
-import { Container, Spacing } from '@/design-system/layout'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
+import styled from 'styled-components'
 import { TrackPage } from '../../ATInternetTracking'
 import { SimulateurCard } from '../Simulateurs/Home'
 import useSimulatorsData from '../Simulateurs/metadata'
@@ -69,8 +69,10 @@ export default function Landing() {
 				<Grid
 					container
 					spacing={4}
-					alignItems="stretch"
-					justifyContent="center"
+					css={`
+						align-items: stretch;
+						justify-content: center;
+					`}
 				>
 					<SimulateurCard {...simulators.salarié} />
 					<SimulateurCard {...simulators['auto-entrepreneur']} />
@@ -101,13 +103,13 @@ export default function Landing() {
 			</Container>
 			<Container backgroundColor={(theme) => theme.colors.bases.primary[100]}>
 				<Spacing lg />
-				<Grid container alignItems="flex-end">
-					<Grid
-						item
-						xs={2}
-						md={2}
-						sx={{ display: { xs: 'none', md: 'block' } }}
-					>
+				<Grid
+					container
+					css={`
+						align-items: flex-end;
+					`}
+				>
+					<HideOnMobile item xs={2} md={2}>
 						<img
 							src={illustration2Svg}
 							css={`
@@ -116,7 +118,7 @@ export default function Landing() {
 								padding-bottom: 1rem;
 							`}
 						/>
-					</Grid>
+					</HideOnMobile>
 					<Grid item md={10}>
 						<Trans i18nKey="landing.aboutUs">
 							<H2>Qui sommes-nous ?</H2>
@@ -155,3 +157,11 @@ export default function Landing() {
 		</>
 	)
 }
+
+const HideOnMobile = styled(Grid)`
+	display: none;
+
+	@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
+		display: block;
+	}
+`
diff --git a/site/source/pages/Landing/SearchOrCreate.tsx b/site/source/pages/Landing/SearchOrCreate.tsx
index 35b37f76a..0e4cf855a 100644
--- a/site/source/pages/Landing/SearchOrCreate.tsx
+++ b/site/source/pages/Landing/SearchOrCreate.tsx
@@ -10,12 +10,11 @@ import { useEngine } from '@/components/utils/EngineContext'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import AnswerGroup from '@/design-system/answer-group'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H3 } from '@/design-system/typography/heading'
 import { useSetEntreprise } from '@/hooks/useSetEntreprise'
 import { RootState } from '@/reducers/rootReducer'
 import { getCookieValue } from '@/storage/readCookie'
-import { Grid } from '@mui/material'
 import { useCallback, useContext, useEffect } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
diff --git a/site/source/pages/Nouveautes/Nouveautes.tsx b/site/source/pages/Nouveautes/Nouveautes.tsx
index f41485099..02ac5138b 100644
--- a/site/source/pages/Nouveautes/Nouveautes.tsx
+++ b/site/source/pages/Nouveautes/Nouveautes.tsx
@@ -1,4 +1,3 @@
-import { Grid } from '@mui/material'
 import { determinant, hideNewsBanner } from '@/components/layout/NewsBanner'
 import MoreInfosOnUs from '@/components/MoreInfosOnUs'
 import Emoji from '@/components/utils/Emoji'
@@ -7,7 +6,7 @@ import Meta from '@/components/utils/Meta'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Item, Select } from '@/design-system/field/Select'
-import { Container } from '@/design-system/layout'
+import { Container, Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'
 import { GenericButtonOrLinkProps, Link } from '@/design-system/typography/link'
 import { Body } from '@/design-system/typography/paragraphs'
@@ -89,7 +88,7 @@ export default function Nouveautés() {
 				</Body>
 
 				<Grid container spacing={2}>
-					<Grid item xs={12} sx={{ display: { xs: 'block', lg: 'none' } }}>
+					<MobileGridItem>
 						<Select
 							label="Date de la newsletter"
 							value={selectedRelease}
@@ -102,8 +101,8 @@ export default function Nouveautés() {
 								<Item textValue={release.name}>{release.name}</Item>
 							)}
 						</Select>
-					</Grid>
-					<Grid item lg={3} sx={{ display: { xs: 'none', lg: 'block' } }}>
+					</MobileGridItem>
+					<DesktopGridItem>
 						<Sidebar>
 							{data.map(({ name }, index) => (
 								<li key={name}>
@@ -111,7 +110,7 @@ export default function Nouveautés() {
 								</li>
 							))}
 						</Sidebar>
-					</Grid>
+					</DesktopGridItem>
 					<Grid item xs={12} lg={9}>
 						<MainBlock>
 							<MarkdownWithAnchorLinks renderers={{ text: TextRenderer }}>
@@ -148,13 +147,19 @@ const TextRenderer = ({ children }: { children: string }) => (
 	<Emoji emoji={removeGithubIssuesReferences(children)} />
 )
 
-const NewsSection = styled.section`
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
+const MobileGridItem = styled(Grid).attrs({ item: true, xs: 12 })`
+	display: block;
 
-	@media (min-width: 1250px) {
-		margin-left: -175px;
+	@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {
+		display: none;
+	}
+`
+
+const DesktopGridItem = styled(Grid).attrs({ item: true, lg: 3 })`
+	display: none;
+
+	@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {
+		display: block;
 	}
 `
 
diff --git a/site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx b/site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx
index 57534db3a..8db2abdc9 100644
--- a/site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx
+++ b/site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx
@@ -1,8 +1,7 @@
-import { Grid } from '@mui/material'
 import { FromBottom } from '@/components/ui/animate'
 import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H1, H2 } from '@/design-system/typography/heading'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
 import { useContext } from 'react'
diff --git a/site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx b/site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx
index 93ff1c925..258ca417b 100644
--- a/site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx
+++ b/site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx
@@ -1,10 +1,10 @@
-import { Grid } from '@mui/material'
 import PageFeedback from '@/components/Feedback'
 import { FromBottom } from '@/components/ui/animate'
 import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Button } from '@/design-system/buttons'
+import { Grid } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H1, H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
diff --git a/site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx b/site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx
index a23ac3aa5..2007ab024 100644
--- a/site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx
+++ b/site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx
@@ -6,9 +6,8 @@ import {
 	useSynchronizedSituationState,
 } from '@/components/utils/SituationContext'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H3 } from '@/design-system/typography/heading'
-import { Grid } from '@mui/material'
 import { DottedName as ExoCovidDottedNames } from 'exoneration-covid'
 import { PublicodesExpression } from 'publicodes'
 import { useCallback, useEffect } from 'react'
@@ -115,7 +114,7 @@ export const ExonérationCovid = () => {
 
 			<Spacing lg />
 
-			<Grid container justifyContent={step2 ? '' : 'end'}>
+			<Grid container css={step2 ? '' : `justify-content: end`}>
 				<Grid item xs={6} sm="auto">
 					{step2 ? (
 						<Button
diff --git a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx
index ff8325986..2b043d7a3 100644
--- a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx
+++ b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx
@@ -1,11 +1,10 @@
 import { ExplicableRule } from '@/components/conversation/Explicable'
 import Value from '@/components/EngineValue'
 import { Situation } from '@/components/utils/SituationContext'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H3 } from '@/design-system/typography/heading'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { DottedName as ExoCovidDottedNames } from 'exoneration-covid'
 import Engine, {
 	EvaluatedNode,
@@ -161,7 +160,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 						</Trans>
 					</Grid>
 
-					<Grid item xs="auto" alignSelf={'end'}>
+					<Grid
+						item
+						xs="auto"
+						css={`
+							align-self: end;
+						`}
+					>
 						<Total>
 							<Value
 								engine={engine}
@@ -180,7 +185,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 						</Trans>
 					</Grid>
 
-					<Grid item xs="auto" alignSelf={'end'}>
+					<Grid
+						item
+						xs="auto"
+						css={`
+							align-self: end;
+						`}
+					>
 						<Total>
 							<Value
 								engine={engine}
@@ -205,7 +216,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 						</Trans>
 					</Grid>
 
-					<Grid item xs="auto" alignSelf={'end'}>
+					<Grid
+						item
+						xs="auto"
+						css={`
+							align-self: end;
+						`}
+					>
 						<Total>
 							<Value
 								engine={engine}
@@ -237,7 +254,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 						</Trans>
 					</Grid>
 
-					<Grid item xs="auto" alignSelf={'end'}>
+					<Grid
+						item
+						xs="auto"
+						css={`
+							align-self: end;
+						`}
+					>
 						<Total>
 							<Value
 								engine={engine}
diff --git a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx
index bb4b25bab..93e59c599 100644
--- a/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx
+++ b/site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx
@@ -1,10 +1,9 @@
 import Value from '@/components/EngineValue'
 import { Radio, ToggleGroup } from '@/design-system/field'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H3 } from '@/design-system/typography/heading'
 import { Li } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { DottedName as ExoCovidDottedNames } from 'exoneration-covid'
 import { Evaluation, PublicodesExpression } from 'publicodes'
 import { Trans, useTranslation } from 'react-i18next'
@@ -125,7 +124,13 @@ export const FormulaireS2 = ({
 								</Trans>
 							</Grid>
 
-							<Grid item xs="auto" alignSelf={'end'}>
+							<Grid
+								item
+								xs="auto"
+								css={`
+									align-self: end;
+								`}
+							>
 								<Total>
 									<Value
 										engine={engine}
@@ -158,7 +163,13 @@ export const FormulaireS2 = ({
 								</Trans>
 							</Grid>
 
-							<Grid item xs="auto" alignSelf={'end'}>
+							<Grid
+								item
+								xs="auto"
+								css={`
+									align-self: end;
+								`}
+							>
 								<Total>
 									<Value
 										engine={engine}
diff --git a/site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx b/site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx
index 326e0b4a8..d7290c596 100644
--- a/site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx
+++ b/site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx
@@ -1,6 +1,6 @@
 import { Ul } from '@/design-system/typography/list'
 import { baseParagraphStyle } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
+import { Grid } from '@/design-system/layout'
 import styled, { css } from 'styled-components'
 
 export const Recap = styled.div`
diff --git a/site/source/pages/Simulateurs/Home.tsx b/site/source/pages/Simulateurs/Home.tsx
index c9907179e..e6ff35a26 100644
--- a/site/source/pages/Simulateurs/Home.tsx
+++ b/site/source/pages/Simulateurs/Home.tsx
@@ -5,12 +5,12 @@ import Emoji from '@/components/utils/Emoji'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Card } from '@/design-system/card'
 import { SmallCard } from '@/design-system/card/SmallCard'
+import { Grid } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { useContext } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { Trans, useTranslation } from 'react-i18next'
diff --git a/site/source/pages/Simulateurs/NextSteps.tsx b/site/source/pages/Simulateurs/NextSteps.tsx
index 7b6ca5e18..f559bf317 100644
--- a/site/source/pages/Simulateurs/NextSteps.tsx
+++ b/site/source/pages/Simulateurs/NextSteps.tsx
@@ -1,15 +1,15 @@
-import { Grid } from '@mui/material'
 import { Condition } from '@/components/EngineValue'
 import { useEngine } from '@/components/utils/EngineContext'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
+import { Grid } from '@/design-system/layout'
 import { H2 } from '@/design-system/typography/heading'
-import { useContext } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
 import { FAQAutoEntrepreneurArticle } from '@/pages/Creer/CreationChecklist'
 import { GuideURSSAFCard } from '@/pages/Simulateurs/cards/GuideURSSAFCard'
-import { SimulatorRessourceCard } from '@/pages/Simulateurs/cards/SimulatorRessourceCard'
 import { IframeIntegrationCard } from '@/pages/Simulateurs/cards/IframeIntegrationCard'
+import { SimulatorRessourceCard } from '@/pages/Simulateurs/cards/SimulatorRessourceCard'
 import { ExtractFromSimuData } from '@/pages/Simulateurs/metadata'
+import { useContext } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 
 interface NextStepsProps {
 	iframePath: ExtractFromSimuData<'iframePath'>
diff --git a/site/source/pages/Stats/GlobalStats.tsx b/site/source/pages/Stats/GlobalStats.tsx
index 84b6f420b..dcc0bc560 100644
--- a/site/source/pages/Stats/GlobalStats.tsx
+++ b/site/source/pages/Stats/GlobalStats.tsx
@@ -1,6 +1,5 @@
-import { Grid } from '@mui/material'
 import Emoji from '@/components/utils/Emoji'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
 import { useTranslation } from 'react-i18next'
 import { SatisfactionStyle } from './SatisfactionChart'
diff --git a/site/source/pages/Stats/Stats.tsx b/site/source/pages/Stats/Stats.tsx
index b7a046746..9a1bd0029 100644
--- a/site/source/pages/Stats/Stats.tsx
+++ b/site/source/pages/Stats/Stats.tsx
@@ -1,17 +1,18 @@
-import { Grid } from '@mui/material'
 import PagesChart from '@/components/charts/PagesCharts'
 import InfoBulle from '@/components/ui/InfoBulle'
 import Emoji from '@/components/utils/Emoji'
 import { useScrollToHash } from '@/components/utils/markdown'
+import statsJson from '@/data/stats.json'
 import { Radio, ToggleGroup } from '@/design-system/field'
 import { Item, Select } from '@/design-system/field/Select'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { formatValue } from 'publicodes'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Trans } from 'react-i18next'
+import { useSearchParams } from 'react-router-dom-v5-compat'
+import styled from 'styled-components'
 import { toAtString } from '../../ATInternetTracking'
-import statsJson from '@/data/stats.json'
 import { debounce, groupBy } from '../../utils'
 import { SimulateurCard } from '../Simulateurs/Home'
 import useSimulatorsData, { SimulatorData } from '../Simulateurs/metadata'
@@ -21,7 +22,6 @@ import GlobalStats, { BigIndicator } from './GlobalStats'
 import SatisfactionChart from './SatisfactionChart'
 import { Page, PageChapter2, PageSatisfaction, StatsStruct } from './types'
 import { formatDay, formatMonth } from './utils'
-import { useSearchParams } from 'react-router-dom-v5-compat'
 
 const stats = statsJson as unknown as StatsStruct
 
@@ -186,13 +186,12 @@ const StatsDetail = () => {
 	return (
 		<>
 			<H2>Statistiques détaillées</H2>
-			<Grid
-				container
-				spacing={2}
-				justifyContent="space-between"
-				alignItems="flex-end"
-			>
-				<Grid item xs={12} sm={6} md={4}>
+			<Indicators>
+				<div
+					css={`
+						flex-basis: 50%;
+					`}
+				>
 					<SimulateursChoice
 						onChange={setChapter2}
 						value={chapter2}
@@ -202,8 +201,8 @@ const StatsDetail = () => {
 					<Grid container columns={4}>
 						<SelectedSimulator chapter2={chapter2} />
 					</Grid>
-				</Grid>
-				<Grid item>
+				</div>
+				<div>
 					<ToggleGroup onChange={setPeriod as any} defaultValue={period}>
 						<Radio value="jours">
 							<Trans>jours</Trans>
@@ -212,8 +211,8 @@ const StatsDetail = () => {
 							<Trans>mois</Trans>
 						</Radio>
 					</ToggleGroup>
-				</Grid>
-			</Grid>
+				</div>
+			</Indicators>
 
 			<Spacing lg />
 
@@ -289,6 +288,18 @@ const StatsDetail = () => {
 	)
 }
 
+const Indicators = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 12px;
+
+	@media (min-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
+		flex-direction: row;
+		align-items: flex-end;
+	}
+`
+
 export default function Stats() {
 	return (
 		<>
diff --git a/site/source/pages/gerer/declaration-charges-sociales-independant/_components/RésultatSimple.tsx b/site/source/pages/gerer/declaration-charges-sociales-independant/_components/RésultatSimple.tsx
index d563d75f5..df35df5c9 100644
--- a/site/source/pages/gerer/declaration-charges-sociales-independant/_components/RésultatSimple.tsx
+++ b/site/source/pages/gerer/declaration-charges-sociales-independant/_components/RésultatSimple.tsx
@@ -1,4 +1,3 @@
-import { Grid } from '@mui/material'
 import Value, { Condition } from '@/components/EngineValue'
 import RuleLink from '@/components/RuleLink'
 import { FromTop } from '@/components/ui/animate'
@@ -6,12 +5,12 @@ import Emoji from '@/components/utils/Emoji'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Markdown } from '@/components/utils/markdown'
 import { Article } from '@/design-system/card'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
 import { utils } from 'publicodes'
 import { Trans } from 'react-i18next'
-import { Container, Spacing } from '@/design-system/layout'
 
 export default function ResultatsSimples() {
 	const engine = useEngine()
diff --git a/site/source/pages/gerer/declaration-charges-sociales-independant/index.tsx b/site/source/pages/gerer/declaration-charges-sociales-independant/index.tsx
index c15a56413..da28bbed3 100644
--- a/site/source/pages/gerer/declaration-charges-sociales-independant/index.tsx
+++ b/site/source/pages/gerer/declaration-charges-sociales-independant/index.tsx
@@ -6,12 +6,12 @@ import { FromTop } from '@/components/ui/animate'
 import Warning from '@/components/ui/WarningBlock'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import useSimulationConfig from '@/components/utils/useSimulationConfig'
+import { Grid } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
 import { situationSelector } from '@/selectors/simulationSelectors'
-import { Grid } from '@mui/material'
 import { useCallback, useContext } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
diff --git a/site/source/pages/gerer/declaration-revenu-independants/_components/DéclarationRevenu.tsx b/site/source/pages/gerer/declaration-revenu-independants/_components/DéclarationRevenu.tsx
index c015579bc..c32734eb5 100644
--- a/site/source/pages/gerer/declaration-revenu-independants/_components/DéclarationRevenu.tsx
+++ b/site/source/pages/gerer/declaration-revenu-independants/_components/DéclarationRevenu.tsx
@@ -9,12 +9,11 @@ import { useEngine } from '@/components/utils/EngineContext'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Message } from '@/design-system'
 import { Button } from '@/design-system/buttons'
-import { Container, Spacing } from '@/design-system/layout'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H2, H3, H4 } from '@/design-system/typography/heading'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
 import { getMeta } from '@/utils'
-import { Grid } from '@mui/material'
 import { DottedName } from 'modele-social'
 import { Rule, RuleNode } from 'publicodes'
 import { Fragment, useCallback, useContext } from 'react'
@@ -124,8 +123,10 @@ export function DéclarationRevenuSection({ progress }: { progress: number }) {
 				<Grid
 					container
 					spacing={3}
-					alignItems="stretch"
-					flexWrap="wrap-reverse"
+					css={`
+						align-items: stretch;
+						flex-wrap: wrap-reverse;
+					`}
 				>
 					<Grid
 						item
@@ -141,9 +142,11 @@ export function DéclarationRevenuSection({ progress }: { progress: number }) {
 						<Message border={false}>
 							<Grid
 								container
-								alignItems="center"
+								css={`
+									align-items: center;
+									justify-content: space-between;
+								`}
 								spacing={1}
-								justifyContent="space-between"
 							>
 								<SimpleField dottedName="DRI . déclarant" />
 								<DéclarationRevenu editable={déclarationRevenusManuel} />
diff --git a/site/source/pages/gerer/declaration-revenu-independants/_components/NotHandledCase.tsx b/site/source/pages/gerer/declaration-revenu-independants/_components/NotHandledCase.tsx
index b88c0b503..5e4ce64d2 100644
--- a/site/source/pages/gerer/declaration-revenu-independants/_components/NotHandledCase.tsx
+++ b/site/source/pages/gerer/declaration-revenu-independants/_components/NotHandledCase.tsx
@@ -1,9 +1,10 @@
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Message } from '@/design-system'
 import { Button } from '@/design-system/buttons'
+import { Grid } from '@/design-system/layout'
 import { SmallBody } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { useContext } from 'react'
+import styled from 'styled-components'
 import notHandled from './undraw_access_denied_re_awnf.svg'
 
 export default function NotHandledCase({
@@ -15,8 +16,15 @@ export default function NotHandledCase({
 
 	return (
 		<Message type="info">
-			<Grid container justifyContent="center" spacing={3} alignItems="center">
-				<Grid item xs={6} md={3} sx={{ order: { md: 0, xs: 1, sm: 1 } }}>
+			<Grid
+				container
+				css={`
+					justify-content: center;
+					align-items: center;
+				`}
+				spacing={3}
+			>
+				<ReverseOrderOnMobile item xs={6} md={3}>
 					<img
 						src={notHandled}
 						alt=""
@@ -25,7 +33,7 @@ export default function NotHandledCase({
 							padding: 1rem;
 						`}
 					/>
-				</Grid>
+				</ReverseOrderOnMobile>
 				<Grid item md={9}>
 					{children}
 				</Grid>
@@ -46,3 +54,11 @@ export default function NotHandledCase({
 		</Message>
 	)
 }
+
+const ReverseOrderOnMobile = styled(Grid)`
+	order: 1;
+
+	@media (max-width: ${({ theme }) => theme.breakpointsWidth.md}) {
+		order: 0;
+	}
+`
diff --git a/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx b/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx
index e9085ac2b..05c0a61fa 100644
--- a/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx
+++ b/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx
@@ -8,11 +8,10 @@ import { useEngine } from '@/components/utils/EngineContext'
 import { Markdown } from '@/components/utils/markdown'
 import { useSimulationProgress } from '@/components/utils/useNextQuestion'
 import { Message } from '@/design-system'
-import { Container, Spacing } from '@/design-system/layout'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H2, H3 } from '@/design-system/typography/heading'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { SimpleField } from '../_components/Fields'
 import { DéclarationRevenu } from './_components/DéclarationRevenu'
 
diff --git a/site/source/pages/gerer/declaration-revenu-independants/declaration.tsx b/site/source/pages/gerer/declaration-revenu-independants/declaration.tsx
index 931f74544..59191b742 100644
--- a/site/source/pages/gerer/declaration-revenu-independants/declaration.tsx
+++ b/site/source/pages/gerer/declaration-revenu-independants/declaration.tsx
@@ -6,14 +6,13 @@ import { Markdown } from '@/components/utils/markdown'
 import { Message } from '@/design-system'
 import Accordion from '@/design-system/accordion'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H2, H3, H6 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Li, Ol } from '@/design-system/typography/list'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
 import { getMeta } from '@/utils'
-import { Grid } from '@mui/material'
 import { Item } from '@react-stately/collections'
 import { DottedName } from 'modele-social'
 import { RuleNode } from 'publicodes'
@@ -62,7 +61,13 @@ export default function Déclaration() {
 		<>
 			<Condition expression="DRI . déclaration revenus manuelle = non">
 				<TrackPage name="declaration_resultat">
-					<Grid container spacing={2} alignItems="flex-end">
+					<Grid
+						container
+						spacing={2}
+						css={`
+							align-items: flex-end;
+						`}
+					>
 						<Grid item lg={10} xl={8}>
 							<FromTop>
 								<Trans i18nKey="assistant-DRI.declaration.intro">
diff --git a/site/source/pages/gerer/declaration-revenu-independants/entreprise.tsx b/site/source/pages/gerer/declaration-revenu-independants/entreprise.tsx
index 492860450..71a67ac04 100644
--- a/site/source/pages/gerer/declaration-revenu-independants/entreprise.tsx
+++ b/site/source/pages/gerer/declaration-revenu-independants/entreprise.tsx
@@ -17,14 +17,13 @@ import { Markdown } from '@/components/utils/markdown'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Message } from '@/design-system'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
 import { useSetEntreprise } from '@/hooks/useSetEntreprise'
-import { Grid } from '@mui/material'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch } from 'react-redux'
diff --git a/site/source/pages/gerer/declaration-revenu-independants/imposition.tsx b/site/source/pages/gerer/declaration-revenu-independants/imposition.tsx
index 4bed11841..84ce8913e 100644
--- a/site/source/pages/gerer/declaration-revenu-independants/imposition.tsx
+++ b/site/source/pages/gerer/declaration-revenu-independants/imposition.tsx
@@ -15,14 +15,13 @@ import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Message } from '@/design-system'
 import Accordion from '@/design-system/accordion'
 import { Button } from '@/design-system/buttons'
-import { Container, Spacing } from '@/design-system/layout'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import PopoverWithTrigger from '@/design-system/popover/PopoverWithTrigger'
 import { Strong } from '@/design-system/typography'
 import { H2, H3, H5 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
 import { getMeta } from '@/utils'
-import { Grid } from '@mui/material'
 import { Item } from '@react-stately/collections'
 import { formatValue } from 'publicodes'
 import { useCallback, useContext } from 'react'
diff --git a/site/source/pages/gerer/demande-mobilité/EndBlock.tsx b/site/source/pages/gerer/demande-mobilité/EndBlock.tsx
index 53d59da7d..047e0c434 100644
--- a/site/source/pages/gerer/demande-mobilité/EndBlock.tsx
+++ b/site/source/pages/gerer/demande-mobilité/EndBlock.tsx
@@ -4,13 +4,12 @@ import { EngineContext, EngineProvider } from '@/components/utils/EngineContext'
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
 import { Checkbox, TextField } from '@/design-system/field'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H2 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { BlobProvider } from '@react-pdf/renderer'
 import { RuleNode, utils } from 'publicodes'
 import { lazy, Suspense, useContext, useRef, useState } from 'react'
diff --git a/site/source/pages/gerer/demande-mobilité/index.tsx b/site/source/pages/gerer/demande-mobilité/index.tsx
index 1c6fe41cb..47188f89b 100644
--- a/site/source/pages/gerer/demande-mobilité/index.tsx
+++ b/site/source/pages/gerer/demande-mobilité/index.tsx
@@ -8,11 +8,10 @@ import { Markdown } from '@/components/utils/markdown'
 import { usePersistingState } from '@/components/utils/persistState'
 import useSimulationConfig from '@/components/utils/useSimulationConfig'
 import { Button } from '@/design-system/buttons'
-import { Spacing } from '@/design-system/layout'
+import { Spacing, Grid } from '@/design-system/layout'
 import { headings } from '@/design-system/typography'
 import { Intro, SmallBody } from '@/design-system/typography/paragraphs'
 import { evaluateQuestion, getMeta, hash, omit } from '@/utils'
-import { Grid } from '@mui/material'
 import { DottedName } from 'modele-social'
 import Engine, { PublicodesExpression } from 'publicodes'
 import { Fragment, lazy, Suspense, useCallback, useContext } from 'react'
diff --git a/site/source/pages/gerer/index.tsx b/site/source/pages/gerer/index.tsx
index 07b93e910..a47ca6816 100644
--- a/site/source/pages/gerer/index.tsx
+++ b/site/source/pages/gerer/index.tsx
@@ -20,7 +20,7 @@ import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import useSimulationConfig from '@/components/utils/useSimulationConfig'
 import { Message, Popover } from '@/design-system'
 import { Button } from '@/design-system/buttons'
-import { Container, Spacing } from '@/design-system/layout'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H2, H4 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
@@ -30,7 +30,6 @@ import { useQuestionList } from '@/hooks/useQuestionList'
 import { useSetEntreprise } from '@/hooks/useSetEntreprise'
 import { companySituationSelector } from '@/selectors/simulationSelectors'
 import { evaluateQuestion } from '@/utils'
-import { Grid } from '@mui/material'
 import { useOverlayTriggerState } from '@react-stately/overlays'
 import { DottedName } from 'modele-social'
 import Engine, { Evaluation } from 'publicodes'
@@ -267,7 +266,13 @@ function Home() {
 					<FormsImage src={forms} alt="" />
 					<Spacing xs />
 					<H2>Simulateurs pour votre entreprise</H2>
-					<Grid container spacing={3} position="relative">
+					<Grid
+						container
+						spacing={3}
+						css={`
+							position: relative;
+						`}
+					>
 						{dirigeantSimulateur ? (
 							<SimulateurCard fromGérer {...simulateurs[dirigeantSimulateur]} />
 						) : (
@@ -302,7 +307,15 @@ function Home() {
 							/>
 						</WhenApplicable>
 						<Condition expression="entreprise . imposition . IS">
-							<Grid item xs={12} md={6} lg={4} alignSelf="flex-end">
+							<Grid
+								item
+								xs={12}
+								md={6}
+								lg={4}
+								css={`
+									align-self: flex-end;
+								`}
+							>
 								<Grid container spacing={3} columns={2}>
 									<SimulateurCard fromGérer {...simulateurs.is} small />
 									<SimulateurCard fromGérer {...simulateurs.dividendes} small />
@@ -332,35 +345,17 @@ function Home() {
 				</H2>
 				<Body as="div">
 					<span>Vous souhaitez :</span>
-					<Grid component={Ul} container>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							recruter, former vos salariés
-						</Grid>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							financer vos projets d'investissement
-						</Grid>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							résoudre un problème de trésorerie
-						</Grid>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							être conseillé(e) en droit du travail
-						</Grid>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							développer votre activité commerciale
-						</Grid>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							vendre sur internet
-						</Grid>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							vendre ou reprendre une entreprise
-						</Grid>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							améliorer la santé et sécurité au travail
-						</Grid>
-						<Grid component={Li} item xs={12} md={6} lg={4}>
-							entrer dans une démarche de transition écologique & RSE
-						</Grid>
-					</Grid>
+					<UlInColumns>
+						<li>recruter, former vos salariés</li>
+						<li>financer vos projets d'investissement</li>
+						<li>résoudre un problème de trésorerie</li>
+						<li>être conseillé(e) en droit du travail</li>
+						<li>développer votre activité commerciale</li>
+						<li>vendre sur internet</li>
+						<li>vendre ou reprendre une entreprise</li>
+						<li>améliorer la santé et sécurité au travail</li>
+						<li>entrer dans une démarche de transition écologique & RSE</li>
+					</UlInColumns>
 				</Body>
 				<Body>
 					<Strong>
@@ -428,6 +423,15 @@ const companyDetailsConfig = {
 	] as DottedName[],
 }
 
+const UlInColumns = styled.ul`
+	@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
+		columns: 2;
+	}
+	@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {
+		columns: 3;
+	}
+`
+
 export const AskCompanyMissingDetails = () => {
 	const sitePaths = useContext(SitePathsContext)
 	useSimulationConfig(companyDetailsConfig, { path: sitePaths.gérer.index })
@@ -502,7 +506,13 @@ const PopoverOverwriteSituation = ({
 						l'écraser ?
 					</Body>
 				</Message>
-				<Grid container justifyContent="end" spacing={2}>
+				<Grid
+					container
+					css={`
+						justify-content: end;
+					`}
+					spacing={2}
+				>
 					<Grid item>
 						<Button
 							size="XS"
diff --git a/site/source/pages/integration/Iframe.tsx b/site/source/pages/integration/Iframe.tsx
index c70809efb..46534a04b 100644
--- a/site/source/pages/integration/Iframe.tsx
+++ b/site/source/pages/integration/Iframe.tsx
@@ -6,12 +6,11 @@ import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { PopoverWithTrigger } from '@/design-system'
 import { Article } from '@/design-system/card'
 import { Item, Select } from '@/design-system/field/Select'
-import { Spacing } from '@/design-system/layout'
+import { Grid, Spacing } from '@/design-system/layout'
 import { H1, H2, H3 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
 import urssafLogo from '@/images/Urssaf.svg'
-import { Grid } from '@mui/material'
 import { lazy, Suspense, useContext, useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Route } from 'react-router'
@@ -79,7 +78,13 @@ function IntegrationCustomizer() {
 				<Trans>Personnalisez l'intégration</Trans>
 			</H2>
 
-			<Grid container spacing={4} justifyContent={'space-between'}>
+			<Grid
+				container
+				spacing={4}
+				css={`
+					justify-content: space-between;
+				`}
+			>
 				<Grid item xl={4} lg={5} md>
 					<H3>
 						<Trans i18nKey="pages.développeur.module">Quel module ?</Trans>
diff --git a/site/source/pages/integration/Options.tsx b/site/source/pages/integration/Options.tsx
index 20629d60e..36323f8f4 100644
--- a/site/source/pages/integration/Options.tsx
+++ b/site/source/pages/integration/Options.tsx
@@ -3,8 +3,8 @@ import { icons } from '@/components/ui/SocialIcon'
 import Emoji from '@/components/utils/Emoji'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Card } from '@/design-system/card'
+import { Grid } from '@/design-system/layout'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
-import { Grid } from '@mui/material'
 import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Meta from '../../components/utils/Meta'
diff --git a/site/source/types/styled.d.ts b/site/source/types/styled.d.ts
new file mode 100644
index 000000000..1f5251b0c
--- /dev/null
+++ b/site/source/types/styled.d.ts
@@ -0,0 +1,103 @@
+import 'styled-components'
+import { SpacingKey } from '@/design-system/theme'
+
+type Color = string
+
+type Palette = {
+	100: Color
+	200: Color
+	300: Color
+	400: Color
+	500: Color
+	600: Color
+	700: Color
+	800: Color
+}
+
+type SmallPalette = {
+	100: Color
+	200: Color
+	300: Color
+	400: Color
+	500: Color
+	600: Color
+}
+type Metric = string
+
+type Spacing = Metric
+
+type Font = string
+
+type FontSize = Metric
+
+type ShadowDefinition = string
+
+declare module 'styled-components' {
+	export interface DefaultTheme {
+		colors: {
+			bases: {
+				primary: Palette
+				secondary: Palette
+				tertiary: Palette
+			}
+
+			publics: {
+				employeur: Palette
+				particulier: Palette
+				independant: Palette
+				artisteAuteur: Palette
+				marin: Palette
+			}
+
+			extended: {
+				grey: Palette
+				error: SmallPalette
+				success: SmallPalette
+				info: SmallPalette
+			}
+		}
+
+		spacings: {
+			xxs: Spacing
+			xs: Spacing
+			sm: Spacing
+			md: Spacing
+			lg: Spacing
+			xl: Spacing
+			xxl: Spacing
+			xxxl: Spacing
+		}
+
+		fonts: {
+			main: Font
+			heading: Font
+		}
+
+		baseFontSize: FontSize
+
+		box: {
+			borderRadius: Metric
+			borderWidth: Metric
+		}
+
+		elevations: {
+			2: ShadowDefinition
+			3: ShadowDefinition
+			4: ShadowDefinition
+			5: ShadowDefinition
+			6: ShadowDefinition
+		}
+
+		breakpointsWidth: {
+			xl: Metric
+			lg: Metric
+			md: Metric
+			sm: Metric
+		}
+
+		darkMode: boolean
+
+		breakpoints: { values: Record<SpacingKey | 'xs', number> }
+		spacing: Array<string>
+	}
+}
diff --git a/site/tsconfig.json b/site/tsconfig.json
index baa0540cc..434a93e8a 100644
--- a/site/tsconfig.json
+++ b/site/tsconfig.json
@@ -15,7 +15,7 @@
 			"@/*": ["*"]
 		},
 		"types": ["vite/client"],
-		"typeRoots": ["./types/", "./node_modules/@types"],
+		"typeRoots": ["./node_modules/@types", "./types/"],
 		"noEmit": true,
 		"strict": true
 	},
diff --git a/yarn.lock b/yarn.lock
index a4e393515..2e997c0b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1109,7 +1109,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.16.7":
+"@babel/plugin-syntax-jsx@npm:^7.16.7":
   version: 7.16.7
   resolution: "@babel/plugin-syntax-jsx@npm:7.16.7"
   dependencies:
@@ -1849,7 +1849,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.4, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.0, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.4, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.0, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.17.8
   resolution: "@babel/runtime@npm:7.17.8"
   dependencies:
@@ -2031,28 +2031,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.7.1":
-  version: 11.7.2
-  resolution: "@emotion/babel-plugin@npm:11.7.2"
-  dependencies:
-    "@babel/helper-module-imports": ^7.12.13
-    "@babel/plugin-syntax-jsx": ^7.12.13
-    "@babel/runtime": ^7.13.10
-    "@emotion/hash": ^0.8.0
-    "@emotion/memoize": ^0.7.5
-    "@emotion/serialize": ^1.0.2
-    babel-plugin-macros: ^2.6.1
-    convert-source-map: ^1.5.0
-    escape-string-regexp: ^4.0.0
-    find-root: ^1.1.0
-    source-map: ^0.5.7
-    stylis: 4.0.13
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: eb9607356663c3e158b91ae7b8fde7335c74e6302d1671da1ca0b34142f762e1354bac8cb0bdf5baedf1278912eeea01e103b8f5c59ee107746d1b03f56aa664
-  languageName: node
-  linkType: hard
-
 "@emotion/cache@npm:^10.0.27":
   version: 10.0.29
   resolution: "@emotion/cache@npm:10.0.29"
@@ -2065,19 +2043,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^11.7.1":
-  version: 11.7.1
-  resolution: "@emotion/cache@npm:11.7.1"
-  dependencies:
-    "@emotion/memoize": ^0.7.4
-    "@emotion/sheet": ^1.1.0
-    "@emotion/utils": ^1.0.0
-    "@emotion/weak-memoize": ^0.2.5
-    stylis: 4.0.13
-  checksum: cf7aa8fe3bacfdedcda94b53e76a7635e122043439715fcfbf7f1a81340cfe6099a59134481a03ec3e0437466566d18528577d1e6ea92f5b98c372b8b38a8f35
-  languageName: node
-  linkType: hard
-
 "@emotion/core@npm:^10.1.1":
   version: 10.3.1
   resolution: "@emotion/core@npm:10.3.1"
@@ -2105,7 +2070,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:0.8.0, @emotion/hash@npm:^0.8.0":
+"@emotion/hash@npm:0.8.0":
   version: 0.8.0
   resolution: "@emotion/hash@npm:0.8.0"
   checksum: 4b35d88a97e67275c1d990c96d3b0450451d089d1508619488fc0acb882cb1ac91e93246d471346ebd1b5402215941ef4162efe5b51534859b39d8b3a0e3ffaa
@@ -2121,7 +2086,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.1.2":
+"@emotion/is-prop-valid@npm:^1.1.0":
   version: 1.1.2
   resolution: "@emotion/is-prop-valid@npm:1.1.2"
   dependencies:
@@ -2137,36 +2102,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/memoize@npm:^0.7.4, @emotion/memoize@npm:^0.7.5":
+"@emotion/memoize@npm:^0.7.4":
   version: 0.7.5
   resolution: "@emotion/memoize@npm:0.7.5"
   checksum: 83da8d4a7649a92c72f960817692bc6be13cc13e107b9f7e878d63766525ed4402881bfeb3cda61145c050281e7e260f114a0a2870515527346f2ef896b915b3
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.7.1":
-  version: 11.8.2
-  resolution: "@emotion/react@npm:11.8.2"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@emotion/babel-plugin": ^11.7.1
-    "@emotion/cache": ^11.7.1
-    "@emotion/serialize": ^1.0.2
-    "@emotion/utils": ^1.1.0
-    "@emotion/weak-memoize": ^0.2.5
-    hoist-non-react-statics: ^3.3.1
-  peerDependencies:
-    "@babel/core": ^7.0.0
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-    "@types/react":
-      optional: true
-  checksum: a8733f8375f9798953019872137326f39e5171b3286535fe34a695d63067a2c0f0f154beb6d117361206ef04a584fa4adef0ecc450654b6af4695b1d893d2496
-  languageName: node
-  linkType: hard
-
 "@emotion/serialize@npm:^0.11.15, @emotion/serialize@npm:^0.11.16":
   version: 0.11.16
   resolution: "@emotion/serialize@npm:0.11.16"
@@ -2180,19 +2122,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@emotion/serialize@npm:1.0.2"
-  dependencies:
-    "@emotion/hash": ^0.8.0
-    "@emotion/memoize": ^0.7.4
-    "@emotion/unitless": ^0.7.5
-    "@emotion/utils": ^1.0.0
-    csstype: ^3.0.2
-  checksum: ff84fbe09ec06e7ad3deaef5c5b5ea6af6a522e8efe49c2b398b875d06872626284a83b6b18b7f777750c94264a61e7924157d869d9bca2f675731bbb91a6055
-  languageName: node
-  linkType: hard
-
 "@emotion/sheet@npm:0.9.4":
   version: 0.9.4
   resolution: "@emotion/sheet@npm:0.9.4"
@@ -2200,13 +2129,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/sheet@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@emotion/sheet@npm:1.1.0"
-  checksum: a4b74e16a8fea1157413efe4904f5f679d724323cb605d66d20a0b98744422f5d411fca927ceb52e4de454a0a819c5273ca9496db9f011b4ecd17b9f1b212007
-  languageName: node
-  linkType: hard
-
 "@emotion/styled-base@npm:^10.3.0":
   version: 10.3.0
   resolution: "@emotion/styled-base@npm:10.3.0"
@@ -2235,28 +2157,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/styled@npm:^11.6.0":
-  version: 11.8.1
-  resolution: "@emotion/styled@npm:11.8.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@emotion/babel-plugin": ^11.7.1
-    "@emotion/is-prop-valid": ^1.1.2
-    "@emotion/serialize": ^1.0.2
-    "@emotion/utils": ^1.1.0
-  peerDependencies:
-    "@babel/core": ^7.0.0
-    "@emotion/react": ^11.0.0-rc.0
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-    "@types/react":
-      optional: true
-  checksum: 67150fa788785c34e285b90acecc91fe7a63babceaefbeffd053bed0fa31f72a05bfeeb9d15620766e543e007b9ccac2e836812eec2e791f962ec4e52731ae4c
-  languageName: node
-  linkType: hard
-
 "@emotion/stylis@npm:0.8.5, @emotion/stylis@npm:^0.8.4":
   version: 0.8.5
   resolution: "@emotion/stylis@npm:0.8.5"
@@ -2264,7 +2164,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.4, @emotion/unitless@npm:^0.7.5":
+"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.4":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
   checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
@@ -2278,14 +2178,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/utils@npm:^1.0.0, @emotion/utils@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@emotion/utils@npm:1.1.0"
-  checksum: d3b681ca3a23b07033ac6c6937e71010a5549ac8ccec325eb6c91a7e48d9a73db83fa5dadc58be981bb125d7c00fedca868ea4362b1da9e02866615f96be4df1
-  languageName: node
-  linkType: hard
-
-"@emotion/weak-memoize@npm:0.2.5, @emotion/weak-memoize@npm:^0.2.5":
+"@emotion/weak-memoize@npm:0.2.5":
   version: 0.2.5
   resolution: "@emotion/weak-memoize@npm:0.2.5"
   checksum: 27d402b0c683b94658220b6d47840346ee582329ca2a15ec9c233492e0f1a27687ccb233b76eedc922f2e185e444cc89f7b97a81a1d3e5ae9f075bab08e965ea
@@ -2408,15 +2301,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@icons/material@npm:^0.4.1":
-  version: 0.4.1
-  resolution: "@icons/material@npm:0.4.1"
-  peerDependencies:
-    react: "*"
-  checksum: c199c98d72f939faae2da78dc3c573d2a66e4970d153ab7dc9c22ab233e1302145f68a700045050d3f2fb0e8a0b91c599374dd0cd7b5be32a847783177bf7d67
-  languageName: node
-  linkType: hard
-
 "@internationalized/date@npm:3.0.0-alpha.4":
   version: 3.0.0-alpha.4
   resolution: "@internationalized/date@npm:3.0.0-alpha.4"
@@ -2700,149 +2584,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:5.0.0-alpha.74":
-  version: 5.0.0-alpha.74
-  resolution: "@mui/base@npm:5.0.0-alpha.74"
-  dependencies:
-    "@babel/runtime": ^7.17.2
-    "@emotion/is-prop-valid": ^1.1.2
-    "@mui/types": ^7.1.3
-    "@mui/utils": ^5.5.3
-    "@popperjs/core": ^2.11.4
-    clsx: ^1.1.1
-    prop-types: ^15.7.2
-    react-is: ^17.0.2
-  peerDependencies:
-    "@types/react": ^16.8.6 || ^17.0.0
-    react: ^17.0.0
-    react-dom: ^17.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: e66a77933274eff27011bbe5a634c5812efdc0c7b96d1cf00cf7406080459919631fd929c0652ed18c5169d21ea7f3cac041b0f5a7473a984a915dacf9afe751
-  languageName: node
-  linkType: hard
-
-"@mui/material@npm:^5.0.4":
-  version: 5.5.3
-  resolution: "@mui/material@npm:5.5.3"
-  dependencies:
-    "@babel/runtime": ^7.17.2
-    "@mui/base": 5.0.0-alpha.74
-    "@mui/system": ^5.5.3
-    "@mui/types": ^7.1.3
-    "@mui/utils": ^5.5.3
-    "@types/react-transition-group": ^4.4.4
-    clsx: ^1.1.1
-    csstype: ^3.0.11
-    hoist-non-react-statics: ^3.3.2
-    prop-types: ^15.7.2
-    react-is: ^17.0.2
-    react-transition-group: ^4.4.2
-  peerDependencies:
-    "@emotion/react": ^11.5.0
-    "@emotion/styled": ^11.3.0
-    "@types/react": ^16.8.6 || ^17.0.0
-    react: ^17.0.0
-    react-dom: ^17.0.0
-  peerDependenciesMeta:
-    "@emotion/react":
-      optional: true
-    "@emotion/styled":
-      optional: true
-    "@types/react":
-      optional: true
-  checksum: 4a66c00d07aa15ea229a1bb20025d240556d582f195e4d7ac5080a81c4fa45aa2cc294c0fbfc165d0d2acc0d4c545e0e7ba2d09f1cf0ed5ec8d7a38de4955aa3
-  languageName: node
-  linkType: hard
-
-"@mui/private-theming@npm:^5.5.3":
-  version: 5.5.3
-  resolution: "@mui/private-theming@npm:5.5.3"
-  dependencies:
-    "@babel/runtime": ^7.17.2
-    "@mui/utils": ^5.5.3
-    prop-types: ^15.7.2
-  peerDependencies:
-    "@types/react": ^16.8.6 || ^17.0.0
-    react: ^17.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: aa7a0cecc8cdc261650d8ba8639ce59ec2dd69b59cd326fc31c48e7fd7d49d85d2ddbabfb1b3a61d253b9d9c8a4dfdc6c537e0eff0469ea92e3570e0e3a776fa
-  languageName: node
-  linkType: hard
-
-"@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
-  version: 5.5.2
-  resolution: "@mui/styled-engine-sc@npm:5.5.2"
-  dependencies:
-    prop-types: ^15.7.2
-  peerDependencies:
-    "@types/styled-components": ^5.1.14
-    styled-components: ^5.3.1
-  peerDependenciesMeta:
-    "@types/styled-components":
-      optional: true
-  checksum: c4d10f589655f37f56d05c99cb012ce7f44c467c808ae7173a5904a6f3080c9867dba77353e8e2ca85447cfc1fefe105345a9dae9a066fb13412688609a7da99
-  languageName: node
-  linkType: hard
-
-"@mui/system@npm:^5.5.3":
-  version: 5.5.3
-  resolution: "@mui/system@npm:5.5.3"
-  dependencies:
-    "@babel/runtime": ^7.17.2
-    "@mui/private-theming": ^5.5.3
-    "@mui/styled-engine": ^5.5.2
-    "@mui/types": ^7.1.3
-    "@mui/utils": ^5.5.3
-    clsx: ^1.1.1
-    csstype: ^3.0.11
-    prop-types: ^15.7.2
-  peerDependencies:
-    "@emotion/react": ^11.5.0
-    "@emotion/styled": ^11.3.0
-    "@types/react": ^16.8.6 || ^17.0.0
-    react: ^17.0.0
-  peerDependenciesMeta:
-    "@emotion/react":
-      optional: true
-    "@emotion/styled":
-      optional: true
-    "@types/react":
-      optional: true
-  checksum: 7f2e7a1c4b1947e4d6a6efb70197f2978b45c56d09534e047c10d72c641dd338f1399972b7e47077d9e721ccb3ebe6e9161f122e59b99e7e39c1601f2d2c9f39
-  languageName: node
-  linkType: hard
-
-"@mui/types@npm:^7.1.3":
-  version: 7.1.3
-  resolution: "@mui/types@npm:7.1.3"
-  peerDependencies:
-    "@types/react": "*"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 4990f505f1058bdd4c01ea21a6a6f788e5d3ff73b50962879d33bbf9c98ef1f18d8b6664025ce1dbd42544a79d7697d0011834f8fd83d12c9705f2c702829bb4
-  languageName: node
-  linkType: hard
-
-"@mui/utils@npm:^5.5.3":
-  version: 5.5.3
-  resolution: "@mui/utils@npm:5.5.3"
-  dependencies:
-    "@babel/runtime": ^7.17.2
-    "@types/prop-types": ^15.7.4
-    "@types/react-is": ^16.7.1 || ^17.0.0
-    prop-types: ^15.7.2
-    react-is: ^17.0.2
-  peerDependencies:
-    react: ^17.0.0
-  checksum: 0c7c73aaeeb75792620a11aaca66c3c325777b16388559c7ac7ad60d80a9db82e09af40e76b62ae15c9d92a1d90aaad353e05e8774f3f50399f2af9ebb6ef4f5
-  languageName: node
-  linkType: hard
-
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -2946,13 +2687,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.11.4":
-  version: 2.11.4
-  resolution: "@popperjs/core@npm:2.11.4"
-  checksum: 36168d274aa164368a50aef2e7b2f858e1b9145d9250af9dc1315ff719d874a367177760f8285efb75c8cf48267194a50e7dc9cdb41bf0b1958c38805c13564c
-  languageName: node
-  linkType: hard
-
 "@publicodes/api@npm:^1.0.0-beta.43":
   version: 1.0.0-beta.43
   resolution: "@publicodes/api@npm:1.0.0-beta.43"
@@ -6635,7 +6369,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.4":
+"@types/prop-types@npm:*":
   version: 15.7.4
   resolution: "@types/prop-types@npm:15.7.4"
   checksum: ef6e1899e59b876c273811b1bd845022fc66d5a3d11cb38a25b6c566b30514ae38fe20a40f67622f362a4f4f7f9224e22d8da101cff3d6e97e11d7b4c307cfc1
@@ -6696,15 +6430,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-is@npm:^16.7.1 || ^17.0.0":
-  version: 17.0.3
-  resolution: "@types/react-is@npm:17.0.3"
-  dependencies:
-    "@types/react": "*"
-  checksum: 6abb7c47d54f012272650df8a962a28bd82f219291e5ef8b4dfa7fe0bb98ae243b060bf9fbe8ceff6213141794855a006db194b490b00ffd15842ae19d0ce1f0
-  languageName: node
-  linkType: hard
-
 "@types/react-redux@npm:^7.1.20, @types/react-redux@npm:^7.1.23":
   version: 7.1.23
   resolution: "@types/react-redux@npm:7.1.23"
@@ -6738,15 +6463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.4":
-  version: 4.4.4
-  resolution: "@types/react-transition-group@npm:4.4.4"
-  dependencies:
-    "@types/react": "*"
-  checksum: 86e9ff9731798e12bc2afe0304678918769633b531dcf6397f86af81718fb7930ef8648e894eeb3718fc6eab6eb885cfb9b82a44d1d74e10951ee11ebc4643ae
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:*, @types/react@npm:^17.0.0":
   version: 17.0.43
   resolution: "@types/react@npm:17.0.43"
@@ -8461,7 +8177,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-macros@npm:^2.0.0, babel-plugin-macros@npm:^2.6.1":
+"babel-plugin-macros@npm:^2.0.0":
   version: 2.8.0
   resolution: "babel-plugin-macros@npm:2.8.0"
   dependencies:
@@ -10393,7 +10109,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.11, csstype@npm:^3.0.2":
+"csstype@npm:^3.0.2":
   version: 3.0.11
   resolution: "csstype@npm:3.0.11"
   checksum: 95e56abfe9ca219ae065acb4e43f61771a03170eed919127f558dfa168240867aba7629c8d98a201a0dd06d9a5ce82686f0570031c928516c61816adbc7c877f
@@ -10983,16 +10699,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-helpers@npm:^5.0.1":
-  version: 5.2.1
-  resolution: "dom-helpers@npm:5.2.1"
-  dependencies:
-    "@babel/runtime": ^7.8.7
-    csstype: ^3.0.2
-  checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
-  languageName: node
-  linkType: hard
-
 "dom-serializer@npm:^1.0.1, dom-serializer@npm:^1.3.2":
   version: 1.3.2
   resolution: "dom-serializer@npm:1.3.2"
@@ -13855,7 +13561,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -19070,21 +18776,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:^4.4.2":
-  version: 4.4.2
-  resolution: "react-transition-group@npm:4.4.2"
-  dependencies:
-    "@babel/runtime": ^7.5.5
-    dom-helpers: ^5.0.1
-    loose-envify: ^1.4.0
-    prop-types: ^15.6.2
-  peerDependencies:
-    react: ">=16.6.0"
-    react-dom: ">=16.6.0"
-  checksum: b67bf5b3e86dbab72d658b9a52a3589e5960583ab28c7c66272427d8fe30d4c7de422d5046ae96bd2683cdf80cc3264b2516f5ce80cae1dbe6cf3ca6dda392c5
-  languageName: node
-  linkType: hard
-
 "react-use-measure@npm:^2.0.4":
   version: 2.1.1
   resolution: "react-use-measure@npm:2.1.1"
@@ -20337,12 +20028,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "site@workspace:site"
   dependencies:
-    "@emotion/react": ^11.7.1
-    "@emotion/styled": ^11.6.0
-    "@icons/material": ^0.4.1
     "@internationalized/number": ^3.0.3
-    "@mui/material": ^5.0.4
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
     "@react-aria/accordion": ^3.0.0-alpha.5
     "@react-aria/button": ^3.4.1
     "@react-aria/checkbox": ^3.2.3
@@ -21066,13 +20752,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylis@npm:4.0.13":
-  version: 4.0.13
-  resolution: "stylis@npm:4.0.13"
-  checksum: 8ea7a87028b6383c6a982231c4b5b6150031ce028e0fdaf7b2ace82253d28a8af50cc5a9da8a421d3c7c4441592f393086e332795add672aa4a825f0fe3713a3
-  languageName: node
-  linkType: hard
-
 "superagent@npm:^3.7.0":
   version: 3.8.3
   resolution: "superagent@npm:3.8.3"