diff --git a/src/front/Components/DesignSystem/RadioBox/index.tsx b/src/front/Components/DesignSystem/RadioBox/index.tsx
index 8653e8de..e856e346 100644
--- a/src/front/Components/DesignSystem/RadioBox/index.tsx
+++ b/src/front/Components/DesignSystem/RadioBox/index.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import Tooltip from "../ToolTip";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 import classes from "./classes.module.scss";
+import classNames from "classnames";
 
 type IProps = {
 	name: string;
@@ -23,7 +24,7 @@ export default class RadioBox extends React.Component<IProps> {
 	public override render(): JSX.Element {
 		return (
 			<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
-				<label className={classes["root"]}>
+				<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
 					<input
 						type="radio"
 						name={this.props.name}
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index ed14fef5..b07965e7 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -86,6 +86,54 @@ export default function DesignSystem() {
 			<Newsletter isOpen={false} />
 			<div className={classes["root"]}>
 				<div />
+				<div className={classes["rows"]}>
+					<CheckboxesInputElement
+						option={{
+							label: "Default",
+							value: "all",
+							description: "Description",
+						}}
+						toolTip="test"
+					/>
+					<CheckboxesInputElement
+						option={{
+							label: "Checked",
+							value: "all",
+							description: "Description",
+						}}
+						toolTip="test"
+						checked={true}
+					/>
+					<CheckboxesInputElement
+						option={{
+							label: "Disabled",
+							value: "all",
+							description: "Description",
+						}}
+						toolTip="test"
+						disabled={true}
+					/>
+				</div>
+
+				<div className={classes["rows"]}>
+					<RadioBox name="document" value={"new client"} description="Test" label="Créer un document" toolTip="test" />
+					<RadioBox
+						name="document"
+						value={"new client"}
+						description="Test"
+						label="Créer un document"
+						toolTip="test"
+						defaultChecked={true}
+					/>
+					<RadioBox
+						name="document"
+						value={"new client"}
+						description="Test"
+						label="Créer un document"
+						toolTip="test"
+						disabled={true}
+					/>
+				</div>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Autocomplete Multi Select</Typography>
 
@@ -946,54 +994,6 @@ export default function DesignSystem() {
 						variant={EAlertVariant.NEUTRAL}
 					/>
 				</div>
-				<div className={classes["rows"]}>
-					<CheckboxesInputElement
-						option={{
-							label: "Default",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-					/>
-					<CheckboxesInputElement
-						option={{
-							label: "Checked",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-						checked={true}
-					/>
-					<CheckboxesInputElement
-						option={{
-							label: "Disabled",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-						disabled={true}
-					/>
-				</div>
-
-				<div className={classes["rows"]}>
-					<RadioBox name="document" value={"new client"} description="Test" label="Créer un document" toolTip="test" />
-					<RadioBox
-						name="document"
-						value={"new client"}
-						description="Test"
-						label="Créer un document"
-						toolTip="test"
-						defaultChecked={true}
-					/>
-					<RadioBox
-						name="document"
-						value={"new client"}
-						description="Test"
-						label="Créer un document"
-						toolTip="test"
-						disabled={true}
-					/>
-				</div>
 
 				<Footer />
 			</div>