diff --git a/akeneo-design-system/package.json b/akeneo-design-system/package.json
index 6c72031d8714..4b643cd6a394 100644
--- a/akeneo-design-system/package.json
+++ b/akeneo-design-system/package.json
@@ -15,7 +15,7 @@
     "test:visual:run": "jest --config ./jest.visual.config.js",
     "test:unit:watch": "jest --watch",
     "eslint": "eslint --config .eslintrc.json --quiet src/**/*.tsx",
-    "lint:fix": "prettier --config .prettierrc.json --parser typescript --write \"./src/**/*.ts\";",
+    "lint:fix": "prettier --config .prettierrc.json --parser typescript --write \"./src/**/*.{ts,tsx}\";",
     "lint:check": "prettier --config .prettierrc.json --parser typescript --check \"./src/**/*.ts\" && eslint --config .eslintrc.json --quiet src/**/*.{ts,tsx}",
     "storybook:start": "start-storybook -p 6006",
     "storybook:ci": "start-storybook -p 6006 --ci",
diff --git a/akeneo-design-system/src/components/Checkbox/Checkbox.tsx b/akeneo-design-system/src/components/Checkbox/Checkbox.tsx
index e46c4a51b564..ec69c16224ee 100644
--- a/akeneo-design-system/src/components/Checkbox/Checkbox.tsx
+++ b/akeneo-design-system/src/components/Checkbox/Checkbox.tsx
@@ -15,7 +15,7 @@ to {
 `;
 
 const Container = styled.div`
-    display: flex;
+  display: flex;
 `;
 
 const TickIcon = styled(CheckIcon)`
@@ -27,7 +27,7 @@ const TickIcon = styled(CheckIcon)`
   transition: opacity 0.1s ease-out;
 `;
 
-const CheckboxContainer = styled.div <{ checked: boolean, readOnly: boolean }>`
+const CheckboxContainer = styled.div<{checked: boolean; readOnly: boolean}>`
   background-color: transparent;
   height: 20px;
   width: 20px;
@@ -35,8 +35,9 @@ const CheckboxContainer = styled.div <{ checked: boolean, readOnly: boolean }>`
   border-radius: 3px;
   outline: none;
 
-  ${props =>
-    (props.checked) && css`
+  ${(props) =>
+    props.checked &&
+    css`
       background-color: ${({theme}) => theme.palette.checkbox.checked.backgroundColor};
       ${TickIcon} {
         animation-delay: 0.2s;
@@ -45,59 +46,64 @@ const CheckboxContainer = styled.div <{ checked: boolean, readOnly: boolean }>`
         opacity: 1;
         transition-delay: 0s;
       }
-  `}
+    `}
 
-  ${props =>
-    props.checked && props.readOnly && css`
+  ${(props) =>
+    props.checked &&
+    props.readOnly &&
+    css`
       background-color: ${({theme}) => theme.palette.checkbox.checkedAndDisabled.backgroundColor};
       border-color: ${({theme}) => theme.palette.checkbox.checkedAndDisabled.borderColor};
-  `}
+    `}
 
-  ${props =>
-    !props.checked && props.readOnly && css`
+  ${(props) =>
+    !props.checked &&
+    props.readOnly &&
+    css`
       background-color: ${({theme}) => theme.palette.checkbox.disabled.backgroundColor};
       border-color: ${({theme}) => theme.palette.checkbox.disabled.borderColor};
-  `}
+    `}
 `;
 
-const LabelContainer = styled.div <{ readOnly: boolean }>`
+const LabelContainer = styled.div<{readOnly: boolean}>`
   color: ${({theme}) => theme.palette.formLabel.color};
   font-weight: 400;
   font-size: 15px;
   padding-left: 10px;
 
-  ${props =>
-    props.readOnly && css`
+  ${(props) =>
+    props.readOnly &&
+    css`
       color: ${({theme}) => theme.palette.formLabel.disabled.color};
-  `}
+    `}
 `;
 
 type CheckboxProps = {
   /**
    * State of the Checkbox
    */
-  checked: boolean,
+  checked: boolean;
 
   /**
    * Displays the value of the input, but does not allow changes.s
    */
-  readOnly?: boolean,
+  readOnly?: boolean;
 
   /**
    * The undetermined state comes into play when the checkbox contains a sublist of selections,
    * some of which are selected, and others aren't.
    */
-  undetermined?: boolean,
+  undetermined?: boolean;
 
   /**
    * Provide a description of the Checkbox, the label appears on the right of the checkboxes.
    */
-  label?: string,
+  label?: string;
 
   /**
    * The handler called when clicking on Checkbox
    */
-  onChange?: (value: boolean) => void,
+  onChange?: (value: boolean) => void;
 };
 
 /**
@@ -113,17 +119,9 @@ const Checkbox = ({label, checked, onChange, undetermined = false, readOnly = fa
   return (
     <Container onClick={handleChange}>
       <CheckboxContainer checked={checked || undetermined} readOnly={readOnly}>
-        {undetermined ? (
-          <PartialCheckIcon height={20} width={20}/>
-        ) :
-          <TickIcon height={20} width={20}/>
-        }
+        {undetermined ? <PartialCheckIcon height={20} width={20} /> : <TickIcon height={20} width={20} />}
       </CheckboxContainer>
-      {label ? (
-        <LabelContainer readOnly={readOnly}>
-          {label}
-        </LabelContainer>
-      ) : null}
+      {label ? <LabelContainer readOnly={readOnly}>{label}</LabelContainer> : null}
     </Container>
   );
 };
diff --git a/akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx b/akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx
index 7909cac53027..841f5782034b 100644
--- a/akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx
+++ b/akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx
@@ -4,9 +4,7 @@ import {Checkbox} from './Checkbox';
 
 it('it calls onChange handler when user clicks on checkbox', () => {
   const onChange = jest.fn();
-  const {getByText} = render(
-    <Checkbox checked={true} onChange={onChange} label="Checkbox"/>
-  );
+  const {getByText} = render(<Checkbox checked={true} onChange={onChange} label="Checkbox" />);
 
   const checkbox = getByText('Checkbox');
   fireEvent.click(checkbox);
@@ -16,9 +14,7 @@ it('it calls onChange handler when user clicks on checkbox', () => {
 
 it('it does not call onChange handler when read-only', () => {
   const onChange = jest.fn();
-  const {getByText} = render(
-    <Checkbox checked={true} readOnly={true} onChange={onChange} label="Checkbox"/>
-  );
+  const {getByText} = render(<Checkbox checked={true} readOnly={true} onChange={onChange} label="Checkbox" />);
 
   const checkbox = getByText('Checkbox');
   fireEvent.click(checkbox);
@@ -28,6 +24,6 @@ it('it does not call onChange handler when read-only', () => {
 
 it('it cannot be instantiated without handler when not readonly', () => {
   expect(() => {
-    render(<Checkbox checked={true} label="Checkbox"/>);
+    render(<Checkbox checked={true} label="Checkbox" />);
   }).toThrow('A Checkbox element expect an onChange attribute if not readOnly');
 });
diff --git a/akeneo-design-system/src/components/Dummy/Dummy.tsx b/akeneo-design-system/src/components/Dummy/Dummy.tsx
index 067fb66f5de9..745c82fb02da 100644
--- a/akeneo-design-system/src/components/Dummy/Dummy.tsx
+++ b/akeneo-design-system/src/components/Dummy/Dummy.tsx
@@ -1,7 +1,7 @@
 import React, {ReactNode} from 'react';
 import styled from 'styled-components';
 
-const DummyContainer = styled.div<{size: number, type: Type}>`
+const DummyContainer = styled.div<{size: number; type: Type}>`
   font-size: ${({size}) => size}px;
   line-height: ${({size}) => size + 5}px;
   color: ${({type}) => (type === 'primary' ? 'blue' : 'green')};
diff --git a/akeneo-design-system/src/icons/CheckIcon.tsx b/akeneo-design-system/src/icons/CheckIcon.tsx
index b39bb9fbce04..03e7b9d95abd 100644
--- a/akeneo-design-system/src/icons/CheckIcon.tsx
+++ b/akeneo-design-system/src/icons/CheckIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const CheckIcon = ({width = 24, height = 24, className = ''}: {width: number, height: number, className?: string}) => (
+const CheckIcon = ({width = 24, height = 24, className = ''}: {width: number; height: number; className?: string}) => (
   <svg width={width} height={height} viewBox="0 0 24 24">
     <path
       className={className}
diff --git a/akeneo-design-system/src/icons/PartialCheckIcon.tsx b/akeneo-design-system/src/icons/PartialCheckIcon.tsx
index fe6e67653053..9ad7e8727495 100644
--- a/akeneo-design-system/src/icons/PartialCheckIcon.tsx
+++ b/akeneo-design-system/src/icons/PartialCheckIcon.tsx
@@ -1,8 +1,17 @@
 import React from 'react';
 
-const PartialCheckIcon = ({width = 24, height = 24}) => (
+const PartialCheckIcon = ({
+  width = 24,
+  height = 24,
+  className = '',
+}: {
+  width: number;
+  height: number;
+  className?: string;
+}) => (
   <svg width={width} height={height} viewBox="0 0 24 24">
     <path
+      className={className}
       d="M2 12.5h20"
       stroke="#FFFFFF"
       fill="none"
diff --git a/akeneo-design-system/src/shared/test-util.tsx b/akeneo-design-system/src/shared/test-util.tsx
index c6d8a4816241..2a02ca9778bc 100644
--- a/akeneo-design-system/src/shared/test-util.tsx
+++ b/akeneo-design-system/src/shared/test-util.tsx
@@ -1,18 +1,14 @@
 import React, {ComponentType, ReactElement, ReactNode} from 'react';
 import {render, RenderOptions} from '@testing-library/react';
 import AkeneoPim from '../themes/akeneo-pim';
-import { ThemeProvider } from 'styled-components';
+import {ThemeProvider} from 'styled-components';
 
 const AllTheProviders = ({children}: {children: ReactNode}) => {
-  return (
-    <ThemeProvider theme={AkeneoPim}>
-      {children}
-    </ThemeProvider>
-  );
+  return <ThemeProvider theme={AkeneoPim}>{children}</ThemeProvider>;
 };
 
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) =>
-  render(ui, { wrapper: AllTheProviders as ComponentType, ...options });
+  render(ui, {wrapper: AllTheProviders as ComponentType, ...options});
 
 export * from '@testing-library/react';
-export { customRender as render };
+export {customRender as render};
diff --git a/akeneo-design-system/src/themes/akeneo-pim.tsx b/akeneo-design-system/src/themes/akeneo-pim.tsx
index 55dc87dac085..eafa70c2f437 100644
--- a/akeneo-design-system/src/themes/akeneo-pim.tsx
+++ b/akeneo-design-system/src/themes/akeneo-pim.tsx
@@ -67,8 +67,8 @@ export default {
     formLabel: {
       color: colorRange.grey140,
       disabled: {
-        color: colorRange.grey100
+        color: colorRange.grey100,
       },
-    }
+    },
   },
 };