diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3ca992d4a63289a6bf16276fae1483b76f17790c..bebf60a861ec7d68cb7291e9ffda595b275add63 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -142,6 +142,7 @@
     "testid",
     "Tétris",
     "timestep",
+    "timesteps",
     "TIMESTEP",
     "UNCOMING",
     "Unstarted",
diff --git a/package.json b/package.json
index 790f8c1c0f2c075632d1bec60edc2f9ade564652..776b16ee9287c37d699f5ed3b64a1133df9393b4 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,6 @@
     "cozy-jobs-cli": "^2.0.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.2.3",
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
index ab0df6dcc0593ce40246251ac0df36376d72b145..cf6cc00505123e43982dd9e58a8caae962f7ca0e 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
@@ -14,7 +14,6 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockedNavigate,
 }))
 const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
-const mockToggleModal = jest.fn()
 const mockHandleCloseClick = jest.fn()
 
 describe('ExpiredConsentModal component', () => {
@@ -23,17 +22,17 @@ describe('ExpiredConsentModal component', () => {
     jest.clearAllMocks()
   })
   it('should be rendered correctly', () => {
-    const { container } = render(
+    const { baseElement } = render(
       <Provider store={store}>
         <ExpiredConsentModal
           open={true}
           handleCloseClick={jest.fn()}
           fluidType={FluidType.ELECTRICITY}
-          toggleModal={mockToggleModal}
+          toggleModal={jest.fn()}
         />
       </Provider>
     )
-    expect(container).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
   it('should launch the update consent process for GRDF', async () => {
     render(
@@ -42,7 +41,7 @@ describe('ExpiredConsentModal component', () => {
           open={true}
           handleCloseClick={jest.fn()}
           fluidType={FluidType.GAS}
-          toggleModal={mockToggleModal}
+          toggleModal={jest.fn()}
         />
       </Provider>
     )
@@ -62,7 +61,7 @@ describe('ExpiredConsentModal component', () => {
           open={true}
           handleCloseClick={jest.fn()}
           fluidType={FluidType.ELECTRICITY}
-          toggleModal={mockToggleModal}
+          toggleModal={jest.fn()}
         />
       </Provider>
     )
@@ -79,7 +78,7 @@ describe('ExpiredConsentModal component', () => {
           open={true}
           handleCloseClick={mockHandleCloseClick}
           fluidType={FluidType.ELECTRICITY}
-          toggleModal={mockToggleModal}
+          toggleModal={jest.fn()}
         />
       </Provider>
     )
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index f600c7c130db6ca9dff8c4088724c93395a0a3d3..63df43d816ffddbb1d15973cdf1e753ca5127fa5 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -1,7 +1,135 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
-<div
-  aria-hidden="true"
-/>
+<body
+  style="padding-right: 0px; overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+  >
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
+    >
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
+      >
+        <div
+          id="accessibility-title"
+        >
+          consumption_visualizer.modal.window_title
+        </div>
+        <button
+          aria-label="consumption_visualizer.modal.close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="expired-consent-modal"
+        >
+          <div
+            class="icon-main"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="135"
+              width="135"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </div>
+          <div
+            class="text-20-bold title electricity"
+          >
+            consent_outdated.title.0
+          </div>
+          <div>
+            consent_outdated.text1.0
+          </div>
+          <div
+            class="text-16-bold"
+          >
+            consent_outdated.text2.0
+          </div>
+          <div
+            class="buttons"
+          >
+            <button
+              aria-label="consent_outdated.later"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                consent_outdated.no
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+            <button
+              aria-label="consent_outdated.go"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                consent_outdated.yes
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx
index a2dc737bed579aed519340cd83a9210d901dec6d..9826c86b36f19a970fdf49bf23a18ff45ca65ae1 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx
+++ b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx
@@ -5,14 +5,14 @@ import DeleteGRDFAccountModal from './DeleteGRDFAccountModal'
 
 describe('DeleteGRDFAccountModal component', () => {
   it('should be rendered correctly', () => {
-    const { container } = render(
+    const { baseElement } = render(
       <DeleteGRDFAccountModal
         open={true}
         handleCloseClick={jest.fn()}
         deleteAccount={jest.fn()}
       />
     )
-    expect(container).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
   it('should launch the deletion process and close modal', async () => {
     const mockDelete = jest.fn()
diff --git a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
index fccb539c7f7e15d784baea2ddbee70b1e04f3155..e5abef42856191fc37712230da818725bbc1536b 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
+++ b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
@@ -1,7 +1,137 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
-<div
-  aria-hidden="true"
-/>
+<body
+  style="padding-right: 0px; overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+  >
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
+    >
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
+      >
+        <div
+          id="accessibility-title"
+        >
+          consumption_visualizer.modal.window_title
+        </div>
+        <button
+          aria-label="consumption_visualizer.modal.close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="delete-grdf-modal"
+        >
+          <div
+            class="icon-main"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="135"
+              width="135"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </div>
+          <div
+            class="text-15-normal text1"
+          >
+            delete_grdf_modal.text1
+          </div>
+          <div
+            class="text-16-normal text2"
+          >
+            delete_grdf_modal.text2
+          </div>
+          <div
+            class="text-15-normal text3"
+          >
+            delete_grdf_modal.text3
+          </div>
+          <div
+            class="buttons"
+          >
+            <button
+              aria-label="delete_grdf_modal.cancel"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                delete_grdf_modal.cancel
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+            <button
+              aria-label="delete_grdf_modal.go"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                delete_grdf_modal.go
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
index 50e7cddf1f334da7c3ff332e1a7e77b328524e80..c9ff69e6525aa1d2e4a0dbf18c4f52017af31b9c 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
@@ -4,9 +4,9 @@ import NoDataModal from './NoDataModal'
 
 describe('NoDataModal component', () => {
   it('should render correctly', async () => {
-    const { container } = render(
+    const { baseElement } = render(
       <NoDataModal open={true} handleCloseClick={jest.fn()} />
     )
-    expect(container).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 })
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index 051488da021c91f20999a61614d2b53a0a6e573c..971b2e6f4b797334794ace1f0a9db07b5491ff43 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -1,7 +1,127 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NoDataModal component should render correctly 1`] = `
-<div
-  aria-hidden="true"
-/>
+<body
+  style="padding-right: 0px; overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+  >
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
+    >
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
+      >
+        <div
+          id="accessibility-title"
+        >
+          consumption_visualizer.modal.window_title
+        </div>
+        <button
+          aria-label="consumption_visualizer.modal.close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="nodata-modal"
+        >
+          <div
+            class="question-mark"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="36"
+              width="36"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </div>
+          <div
+            class="text-20-normal title"
+          >
+            consumption_visualizer.why_no_data
+          </div>
+          <div
+            class="text-16-normal"
+          >
+            consumption_visualizer.dataModal.list_title
+          </div>
+          <ul>
+            <li>
+              consumption_visualizer.dataModal.item1
+            </li>
+            <li>
+              consumption_visualizer.dataModal.item2
+            </li>
+            <li>
+              consumption_visualizer.dataModal.item3
+            </li>
+            <li>
+              consumption_visualizer.dataModal.item4
+            </li>
+          </ul>
+          <button
+            aria-label="ecogesture_info_modal.button_close"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              ecogesture_info_modal.button_close
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx
index 4f26b7be1a47c5e48378b25712069ade3571ef97..1708d74e8b7efe019174f6b90eddb8126c5acab5 100644
--- a/src/components/DateNavigator/DateNavigator.spec.tsx
+++ b/src/components/DateNavigator/DateNavigator.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { userEvent } from '@testing-library/user-event'
+import userEvent from '@testing-library/user-event'
 import { TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import React from 'react'
diff --git a/src/components/Duel/DuelError/DuelError.spec.tsx b/src/components/Duel/DuelError/DuelError.spec.tsx
index c8763df63e5fbb524b73033abcabce425d044f75..7e2f3d3ee2a67e00a24793530c55245205d474d7 100644
--- a/src/components/Duel/DuelError/DuelError.spec.tsx
+++ b/src/components/Duel/DuelError/DuelError.spec.tsx
@@ -1,10 +1,10 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import React from 'react'
 import DuelError from './DuelError'
 
 describe('DuelError component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<DuelError />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(<DuelError />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap b/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
index 9274f35b21ddc379c85abaf5a643ec2b3dd3f535..4680b10b3f5a98ffc276d6707a66fcd1045dee4d 100644
--- a/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
+++ b/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
@@ -1,24 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DuelError component should be rendered correctly 1`] = `
-<div
-  className="duel-error-container"
->
+<div>
   <div
-    className="duel-error-message"
+    class="duel-error-container"
   >
-    duel.global_error
-  </div>
-  <div
-    className="duel-error-button"
-  >
-    <WithStyles(ForwardRef(Button))
-      aria-label="duel.accessibility.button_go_back"
-      className="btnSecondary"
-      onClick={[Function]}
+    <div
+      class="duel-error-message"
+    >
+      duel.global_error
+    </div>
+    <div
+      class="duel-error-button"
     >
-      duel.button_go_back
-    </WithStyles(ForwardRef(Button))>
+      <button
+        aria-label="duel.accessibility.button_go_back"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          duel.button_go_back
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
index 4a73f4cf35e6d2c5551678bb6a8639c2fdf4607c..e107a11882ffe40520dafa7e02130f7cf1a23952 100644
--- a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
+++ b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
@@ -1,13 +1,13 @@
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import DuelResultModal from './DuelResultModal'
 
 describe('DuelResultModal component', () => {
-  it('should render correctly', async () => {
-    const wrapper = mount(
+  it('should render correctly', () => {
+    const { baseElement } = render(
       <DuelResultModal
         open={true}
         handleCloseClick={jest.fn()}
@@ -15,8 +15,7 @@ describe('DuelResultModal component', () => {
         win={true}
       />
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
   it('should render a loss modal', async () => {
     const wrapper = mount(
diff --git a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
index f8d9e72b69362e0156b0c3b5eb3bce59263180aa..aa23ded2d78cd0d202f78d5202ed92f1a4540c17 100644
--- a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
+++ b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
@@ -1,1039 +1,104 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DuelResultModal component should render correctly 1`] = `
-<DuelResultModal
-  handleCloseClick={[MockFunction]}
-  open={true}
-  userChallenge={
-    Object {
-      "action": Object {
-        "ecogesture": null,
-        "startDate": null,
-        "state": 0,
-      },
-      "description": "Description challenge 2",
-      "duel": Object {
-        "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-        "duration": "P30D",
-        "fluidTypes": Array [],
-        "id": "DUEL001",
-        "startDate": null,
-        "state": 0,
-        "threshold": 0,
-        "title": "Title DUEL001",
-        "userConsumption": 0,
-      },
-      "endingDate": null,
-      "exploration": Object {
-        "complementary_description": "Refaire un tour dans son profil si déjà fait",
-        "date": null,
-        "description": "Avoir complété son profil",
-        "ecogesture_id": "",
-        "fluid_condition": Array [],
-        "id": "EXPLORATION001",
-        "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-        "progress": 0,
-        "state": 0,
-        "target": 1,
-        "type": 1,
-      },
-      "id": "CHALLENGE0002",
-      "progress": Object {
-        "actionProgress": 0,
-        "explorationProgress": 0,
-        "quizProgress": 0,
-      },
-      "quiz": Object {
-        "customQuestion": Object {
-          "interval": 20,
-          "period": Object {},
-          "questionLabel": "Custom1",
-          "result": 0,
-          "singleFluid": false,
-          "timeStep": 20,
-          "type": 0,
-        },
-        "id": "QUIZ001",
-        "questions": Array [
-          Object {
-            "answers": Array [
-              Object {
-                "answerLabel": "86 km",
-                "isTrue": true,
-              },
-              Object {
-                "answerLabel": "78 km",
-                "isTrue": false,
-              },
-              Object {
-                "answerLabel": "56 km",
-                "isTrue": false,
-              },
-            ],
-            "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-            "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-            "result": 0,
-            "source": "string",
-          },
-          Object {
-            "answers": Array [
-              Object {
-                "answerLabel": "1 point d’eau public pour 800 habitants.",
-                "isTrue": true,
-              },
-              Object {
-                "answerLabel": "1 point d’eau public pour 400 habitants.",
-                "isTrue": false,
-              },
-              Object {
-                "answerLabel": "1 point d’eau public pour 200 habitants.",
-                "isTrue": false,
-              },
-            ],
-            "explanation": "string",
-            "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-            "result": 0,
-            "source": "string",
-          },
-          Object {
-            "answers": Array [
-              Object {
-                "answerLabel": "François Mitterrand",
-                "isTrue": false,
-              },
-              Object {
-                "answerLabel": "Napoléon Ier",
-                "isTrue": true,
-              },
-              Object {
-                "answerLabel": "Napoléon III",
-                "isTrue": false,
-              },
-            ],
-            "explanation": "string",
-            "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-            "result": 0,
-            "source": "string",
-          },
-          Object {
-            "answers": Array [
-              Object {
-                "answerLabel": "string",
-                "isTrue": false,
-              },
-              Object {
-                "answerLabel": "string",
-                "isTrue": false,
-              },
-              Object {
-                "answerLabel": "Aristide Dumont",
-                "isTrue": true,
-              },
-            ],
-            "explanation": "string",
-            "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-            "result": 0,
-            "source": "string",
-          },
-        ],
-        "result": 0,
-        "startDate": null,
-        "state": 0,
-      },
-      "startDate": null,
-      "state": 4,
-      "success": 1,
-      "target": 15,
-      "title": "Challenge 2",
-    }
-  }
-  win={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper blue-border",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper blue-border",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        duel_result_modal.accessibility.window_title
-                      </div>
-                      <div
-                        class="duel-result-modal-root"
-                      >
-                        <div
-                          class="imgResultContainer"
-                        >
-                          <svg
-                            class="challengeWon styles__icon___23x3R"
-                            height="300"
-                            width="300"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                          <svg
-                            class="imgResult styles__icon___23x3R"
-                            height="180"
-                            width="180"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="text-28-normal-uppercase title"
-                        >
-                          duel_result_modal.success.title
-                        </div>
-                        <div
-                          class="text-18-bold"
-                        >
-                          duel_result_modal.success.message1
-                        </div>
-                        <div
-                          class="text-18-bold"
-                        >
-                          duel_result_modal.success.message2
-                        </div>
-                        <button
-                          aria-label="duel_result_modal.accessibility.button_validate"
-                          class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label"
-                          >
-                            duel_result_modal.success.button_validate
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          duel_result_modal.accessibility.window_title
+        </div>
+        <div
+          class="duel-result-modal-root"
+        >
+          <div
+            class="imgResultContainer"
+          >
+            <svg
+              class="challengeWon styles__icon___23x3R"
+              height="300"
+              width="300"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <svg
+              class="imgResult styles__icon___23x3R"
+              height="180"
+              width="180"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </div>
+          <div
+            class="text-28-normal-uppercase title"
+          >
+            duel_result_modal.success.title
+          </div>
+          <div
+            class="text-18-bold"
+          >
+            duel_result_modal.success.message1
+          </div>
+          <div
+            class="text-18-bold"
+          >
+            duel_result_modal.success.message2
+          </div>
+          <button
+            aria-label="duel_result_modal.accessibility.button_validate"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+            tabindex="0"
+            type="button"
           >
-            <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+            <span
+              class="MuiButton-label"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
-              >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
-              >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              duel_result_modal.accessibility.window_title
-                            </div>
-                            <div
-                              className="duel-result-modal-root"
-                            >
-                              <div
-                                className="imgResultContainer"
-                              >
-                                <Icon
-                                  className="challengeWon"
-                                  icon="test-file-stub"
-                                  size={300}
-                                  spin={false}
-                                >
-                                  <Component
-                                    className="challengeWon styles__icon___23x3R"
-                                    height={300}
-                                    style={Object {}}
-                                    width={300}
-                                  >
-                                    <svg
-                                      className="challengeWon styles__icon___23x3R"
-                                      height={300}
-                                      style={Object {}}
-                                      width={300}
-                                    >
-                                      <use
-                                        xlinkHref="#test-file-stub"
-                                      />
-                                    </svg>
-                                  </Component>
-                                </Icon>
-                                <Icon
-                                  className="imgResult"
-                                  icon="test-file-stub"
-                                  size={180}
-                                  spin={false}
-                                >
-                                  <Component
-                                    className="imgResult styles__icon___23x3R"
-                                    height={180}
-                                    style={Object {}}
-                                    width={180}
-                                  >
-                                    <svg
-                                      className="imgResult styles__icon___23x3R"
-                                      height={180}
-                                      style={Object {}}
-                                      width={180}
-                                    >
-                                      <use
-                                        xlinkHref="#test-file-stub"
-                                      />
-                                    </svg>
-                                  </Component>
-                                </Icon>
-                              </div>
-                              <div
-                                className="text-28-normal-uppercase title"
-                              >
-                                duel_result_modal.success.title
-                              </div>
-                              <div
-                                className="text-18-bold"
-                              >
-                                duel_result_modal.success.message1
-                              </div>
-                              <div
-                                className="text-18-bold"
-                              >
-                                duel_result_modal.success.message2
-                              </div>
-                              <WithStyles(ForwardRef(Button))
-                                aria-label="duel_result_modal.accessibility.button_validate"
-                                className="btnSecondary"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(Button)
-                                  aria-label="duel_result_modal.accessibility.button_validate"
-                                  className="btnSecondary"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiButton-colorInherit",
-                                      "contained": "MuiButton-contained",
-                                      "containedPrimary": "MuiButton-containedPrimary",
-                                      "containedSecondary": "MuiButton-containedSecondary",
-                                      "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                      "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                      "disableElevation": "MuiButton-disableElevation",
-                                      "disabled": "Mui-disabled",
-                                      "endIcon": "MuiButton-endIcon",
-                                      "focusVisible": "Mui-focusVisible",
-                                      "fullWidth": "MuiButton-fullWidth",
-                                      "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                      "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                      "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                      "label": "MuiButton-label",
-                                      "outlined": "MuiButton-outlined",
-                                      "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                      "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                      "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                      "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                      "root": "MuiButton-root",
-                                      "sizeLarge": "MuiButton-sizeLarge",
-                                      "sizeSmall": "MuiButton-sizeSmall",
-                                      "startIcon": "MuiButton-startIcon",
-                                      "text": "MuiButton-text",
-                                      "textPrimary": "MuiButton-textPrimary",
-                                      "textSecondary": "MuiButton-textSecondary",
-                                      "textSizeLarge": "MuiButton-textSizeLarge",
-                                      "textSizeSmall": "MuiButton-textSizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    aria-label="duel_result_modal.accessibility.button_validate"
-                                    className="MuiButton-root MuiButton-text btnSecondary"
-                                    component="button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    focusVisibleClassName="Mui-focusVisible"
-                                    onClick={[MockFunction]}
-                                    type="button"
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      aria-label="duel_result_modal.accessibility.button_validate"
-                                      className="MuiButton-root MuiButton-text btnSecondary"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <button
-                                        aria-label="duel_result_modal.accessibility.button_validate"
-                                        className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiButton-label"
-                                        >
-                                          duel_result_modal.success.button_validate
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={false}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={false}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(Button)>
-                              </WithStyles(ForwardRef(Button))>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
-            </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</DuelResultModal>
+              duel_result_modal.success.button_validate
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index 7d00ebf2f1864fd6dbf382541bd91ae3b7664ee1..94080d04db0112ac94524c000602b89c7c440d93 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -1,878 +1,106 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`lastDuelModal component should render correctly 1`] = `
-<LastDuelModal
-  handleCloseClick={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper blue-light-border",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper blue-light-border",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        last_duel_modal.title
-                      </div>
-                      <div
-                        class="duel-last-modal-root"
-                      >
-                        <button
-                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="16"
-                              width="16"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                        <svg
-                          aria-hidden="true"
-                          class="icon styles__icon___23x3R"
-                          height="48"
-                          width="48"
-                        >
-                          <use
-                            xlink:href="#test-file-stub"
-                          />
-                        </svg>
-                        <h1
-                          class="text-28-bold"
-                        >
-                          last_duel_modal.title
-                        </h1>
-                        <div>
-                          <h2
-                            class="text-22-bold"
-                          >
-                            last_duel_modal.subtitle
-                          </h2>
-                          <p
-                            class="text-18-normal"
-                          >
-                            last_duel_modal.message1
-                          </p>
-                          <p
-                            class="text-18-normal"
-                          >
-                            last_duel_modal.message2
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          last_duel_modal.title
+        </div>
+        <div
+          class="duel-last-modal-root"
+        >
+          <button
+            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            tabindex="0"
+            type="button"
           >
-            <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+            <span
+              class="MuiIconButton-label"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
-              >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
+              <svg
+                class="styles__icon___23x3R"
+                height="16"
+                width="16"
               >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
+                <use
+                  xlink:href="#test-file-stub"
                 />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              last_duel_modal.title
-                            </div>
-                            <div
-                              className="duel-last-modal-root"
-                            >
-                              <WithStyles(ForwardRef(IconButton))
-                                className="modal-paper-close-button"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(IconButton)
-                                  className="modal-paper-close-button"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiIconButton-colorInherit",
-                                      "colorPrimary": "MuiIconButton-colorPrimary",
-                                      "colorSecondary": "MuiIconButton-colorSecondary",
-                                      "disabled": "Mui-disabled",
-                                      "edgeEnd": "MuiIconButton-edgeEnd",
-                                      "edgeStart": "MuiIconButton-edgeStart",
-                                      "label": "MuiIconButton-label",
-                                      "root": "MuiIconButton-root",
-                                      "sizeSmall": "MuiIconButton-sizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      centerRipple={true}
-                                      className="MuiIconButton-root modal-paper-close-button"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      disabled={false}
-                                      focusRipple={true}
-                                      onClick={[MockFunction]}
-                                    >
-                                      <button
-                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiIconButton-label"
-                                        >
-                                          <Icon
-                                            icon="test-file-stub"
-                                            size={16}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <svg
-                                                className="styles__icon___23x3R"
-                                                height={16}
-                                                style={Object {}}
-                                                width={16}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={true}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={true}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(IconButton)>
-                              </WithStyles(ForwardRef(IconButton))>
-                              <StyledIcon
-                                className="icon"
-                                icon="test-file-stub"
-                                size={48}
-                              >
-                                <Icon
-                                  aria-hidden={true}
-                                  className="icon"
-                                  icon="test-file-stub"
-                                  size={48}
-                                  spin={false}
-                                >
-                                  <Component
-                                    aria-hidden={true}
-                                    className="icon styles__icon___23x3R"
-                                    height={48}
-                                    style={Object {}}
-                                    width={48}
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="icon styles__icon___23x3R"
-                                      height={48}
-                                      style={Object {}}
-                                      width={48}
-                                    >
-                                      <use
-                                        xlinkHref="#test-file-stub"
-                                      />
-                                    </svg>
-                                  </Component>
-                                </Icon>
-                              </StyledIcon>
-                              <h1
-                                className="text-28-bold"
-                              >
-                                last_duel_modal.title
-                              </h1>
-                              <div>
-                                <h2
-                                  className="text-22-bold"
-                                >
-                                  last_duel_modal.subtitle
-                                </h2>
-                                <p
-                                  className="text-18-normal"
-                                >
-                                  last_duel_modal.message1
-                                </p>
-                                <p
-                                  className="text-18-normal"
-                                >
-                                  last_duel_modal.message2
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
-            </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</LastDuelModal>
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <svg
+            aria-hidden="true"
+            class="icon styles__icon___23x3R"
+            height="48"
+            width="48"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <h1
+            class="text-28-bold"
+          >
+            last_duel_modal.title
+          </h1>
+          <div>
+            <h2
+              class="text-22-bold"
+            >
+              last_duel_modal.subtitle
+            </h2>
+            <p
+              class="text-18-normal"
+            >
+              last_duel_modal.message1
+            </p>
+            <p
+              class="text-18-normal"
+            >
+              last_duel_modal.message2
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx
index ed1f8b01bfd824f6031c9d867e765570efac1432..b2496be0e9bd3e3351dffef9666ec7ed43c3e1c7 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx
@@ -1,15 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
 import React from 'react'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import LastDuelModal from './lastDuelModal'
 
 describe('lastDuelModal component', () => {
-  it('should render correctly', async () => {
-    const wrapper = mount(
+  it('should render correctly', () => {
+    const { baseElement } = render(
       <LastDuelModal open={true} handleCloseClick={jest.fn()} />
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 })
diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx
index d00c057dc48a14e90d9d74f237f72e37e0f51fb6..4bb4deaf40cd412c0305cb3c6510d41c9d042b26 100644
--- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx
+++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx
@@ -1,6 +1,6 @@
+import { render, waitFor } from '@testing-library/react'
 import EcogestureCard from 'components/Ecogesture/EcogestureCard/EcogestureCard'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
@@ -8,13 +8,13 @@ import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 
 describe('EcogestureCard component', () => {
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <BrowserRouter>
         <EcogestureCard ecogesture={mockedEcogesturesData[0]} />
       </BrowserRouter>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    await waitFor(() => null, { container })
+    expect(container).toMatchSnapshot()
   })
   it('should be with default icon', async () => {
     const wrapper = mount(
diff --git a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
index 4651aef74bf933a342f65549c0b21a2740fb46be..3096c7c182a2bb6559e467571b1def474a743d07 100644
--- a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -1,416 +1,95 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureCard component should be rendered correctly 1`] = `
-<BrowserRouter>
-  <Router
-    location={
-      Object {
-        "hash": "",
-        "key": "default",
-        "pathname": "/",
-        "search": "",
-        "state": null,
-      }
-    }
-    navigationType="POP"
-    navigator={
-      Object {
-        "action": "POP",
-        "createHref": [Function],
-        "encodeLocation": [Function],
-        "go": [Function],
-        "listen": [Function],
-        "location": Object {
-          "hash": "",
-          "key": "default",
-          "pathname": "/",
-          "search": "",
-          "state": null,
-        },
-        "push": [Function],
-        "replace": [Function],
-      }
-    }
+<div>
+  <button
+    class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
+    tabindex="0"
+    type="button"
   >
-    <EcogestureCard
-      ecogesture={
-        Object {
-          "_id": "ECOGESTURE001",
-          "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
-          "_type": "com.grandlyon.ecolyo.ecogesture",
-          "action": false,
-          "actionDuration": 3,
-          "actionName": null,
-          "difficulty": 1,
-          "doing": false,
-          "efficiency": 4,
-          "equipment": false,
-          "equipmentInstallation": true,
-          "equipmentType": Array [],
-          "fluidTypes": Array [
-            0,
-            2,
-          ],
-          "id": "ECOGESTURE001",
-          "impactLevel": 8,
-          "investment": null,
-          "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
-          "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
-          "objective": false,
-          "room": Array [
-            0,
-          ],
-          "season": "Hiver",
-          "shortName": "Bonhomme de neige",
-          "usage": 1,
-          "viewedInSelection": false,
-        }
-      }
+    <div
+      class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
     >
-      <StyledEcogestureCard
-        className="ecogesture-list-item"
-        onClick={[Function]}
+      <div
+        class="ec-content"
       >
-        <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-          className="ecogesture-list-item"
-          onClick={[Function]}
+        <svg
+          aria-hidden="true"
+          class="Icon styles__icon___23x3R"
+          height="50"
+          width="50"
         >
-          <WithStyles(ForwardRef(CardActionArea))
-            className="ecogesture-list-item"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
-              }
-            }
-            onClick={[Function]}
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
+        <div
+          class="ec-content-short-name text-15-bold"
+        >
+          Bonhomme de neige
+        </div>
+        <div
+          class="thunder"
+        >
+          <svg
+            aria-hidden="true"
+            class="star styles__icon___23x3R"
+            height="15"
+            width="15"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <svg
+            aria-hidden="true"
+            class="star styles__icon___23x3R"
+            height="15"
+            width="15"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <svg
+            aria-hidden="true"
+            class="star styles__icon___23x3R"
+            height="15"
+            width="15"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <svg
+            aria-hidden="true"
+            class="star styles__icon___23x3R"
+            height="15"
+            width="15"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <svg
+            aria-hidden="true"
+            class="star styles__icon___23x3R"
+            height="15"
+            width="15"
           >
-            <ForwardRef(CardActionArea)
-              className="ecogesture-list-item"
-              classes={
-                Object {
-                  "focusHighlight": "MuiCardActionArea-focusHighlight",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                >
-                  <button
-                    className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <WithStyles(WithStyles(ForwardRef(CardContent)))>
-                      <WithStyles(ForwardRef(CardContent))
-                        classes={
-                          Object {
-                            "root": "WithStyles(ForwardRef(CardContent))-root-2",
-                          }
-                        }
-                      >
-                        <ForwardRef(CardContent)
-                          classes={
-                            Object {
-                              "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
-                            }
-                          }
-                        >
-                          <div
-                            className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
-                          >
-                            <div
-                              className="ec-content"
-                            >
-                              <StyledIcon
-                                className="Icon"
-                                icon="test-file-stub"
-                                size={50}
-                              >
-                                <Icon
-                                  aria-hidden={true}
-                                  className="Icon"
-                                  icon="test-file-stub"
-                                  size={50}
-                                  spin={false}
-                                >
-                                  <Component
-                                    aria-hidden={true}
-                                    className="Icon styles__icon___23x3R"
-                                    height={50}
-                                    style={Object {}}
-                                    width={50}
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="Icon styles__icon___23x3R"
-                                      height={50}
-                                      style={Object {}}
-                                      width={50}
-                                    >
-                                      <use
-                                        xlinkHref="#test-file-stub"
-                                      />
-                                    </svg>
-                                  </Component>
-                                </Icon>
-                              </StyledIcon>
-                              <div
-                                className="ec-content-short-name text-15-bold"
-                              >
-                                Bonhomme de neige
-                              </div>
-                              <EfficiencyRating
-                                result={4}
-                              >
-                                <div
-                                  className="thunder"
-                                >
-                                  <StyledIcon
-                                    className="star"
-                                    icon="test-file-stub"
-                                    key="1"
-                                    size={15}
-                                  >
-                                    <Icon
-                                      aria-hidden={true}
-                                      className="star"
-                                      icon="test-file-stub"
-                                      size={15}
-                                      spin={false}
-                                    >
-                                      <Component
-                                        aria-hidden={true}
-                                        className="star styles__icon___23x3R"
-                                        height={15}
-                                        style={Object {}}
-                                        width={15}
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="star styles__icon___23x3R"
-                                          height={15}
-                                          style={Object {}}
-                                          width={15}
-                                        >
-                                          <use
-                                            xlinkHref="#test-file-stub"
-                                          />
-                                        </svg>
-                                      </Component>
-                                    </Icon>
-                                  </StyledIcon>
-                                  <StyledIcon
-                                    className="star"
-                                    icon="test-file-stub"
-                                    key="2"
-                                    size={15}
-                                  >
-                                    <Icon
-                                      aria-hidden={true}
-                                      className="star"
-                                      icon="test-file-stub"
-                                      size={15}
-                                      spin={false}
-                                    >
-                                      <Component
-                                        aria-hidden={true}
-                                        className="star styles__icon___23x3R"
-                                        height={15}
-                                        style={Object {}}
-                                        width={15}
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="star styles__icon___23x3R"
-                                          height={15}
-                                          style={Object {}}
-                                          width={15}
-                                        >
-                                          <use
-                                            xlinkHref="#test-file-stub"
-                                          />
-                                        </svg>
-                                      </Component>
-                                    </Icon>
-                                  </StyledIcon>
-                                  <StyledIcon
-                                    className="star"
-                                    icon="test-file-stub"
-                                    key="3"
-                                    size={15}
-                                  >
-                                    <Icon
-                                      aria-hidden={true}
-                                      className="star"
-                                      icon="test-file-stub"
-                                      size={15}
-                                      spin={false}
-                                    >
-                                      <Component
-                                        aria-hidden={true}
-                                        className="star styles__icon___23x3R"
-                                        height={15}
-                                        style={Object {}}
-                                        width={15}
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="star styles__icon___23x3R"
-                                          height={15}
-                                          style={Object {}}
-                                          width={15}
-                                        >
-                                          <use
-                                            xlinkHref="#test-file-stub"
-                                          />
-                                        </svg>
-                                      </Component>
-                                    </Icon>
-                                  </StyledIcon>
-                                  <StyledIcon
-                                    className="star"
-                                    icon="test-file-stub"
-                                    key="4"
-                                    size={15}
-                                  >
-                                    <Icon
-                                      aria-hidden={true}
-                                      className="star"
-                                      icon="test-file-stub"
-                                      size={15}
-                                      spin={false}
-                                    >
-                                      <Component
-                                        aria-hidden={true}
-                                        className="star styles__icon___23x3R"
-                                        height={15}
-                                        style={Object {}}
-                                        width={15}
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="star styles__icon___23x3R"
-                                          height={15}
-                                          style={Object {}}
-                                          width={15}
-                                        >
-                                          <use
-                                            xlinkHref="#test-file-stub"
-                                          />
-                                        </svg>
-                                      </Component>
-                                    </Icon>
-                                  </StyledIcon>
-                                  <StyledIcon
-                                    className="star"
-                                    icon="test-file-stub"
-                                    key="5"
-                                    size={15}
-                                  >
-                                    <Icon
-                                      aria-hidden={true}
-                                      className="star"
-                                      icon="test-file-stub"
-                                      size={15}
-                                      spin={false}
-                                    >
-                                      <Component
-                                        aria-hidden={true}
-                                        className="star styles__icon___23x3R"
-                                        height={15}
-                                        style={Object {}}
-                                        width={15}
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="star styles__icon___23x3R"
-                                          height={15}
-                                          style={Object {}}
-                                          width={15}
-                                        >
-                                          <use
-                                            xlinkHref="#test-file-stub"
-                                          />
-                                        </svg>
-                                      </Component>
-                                    </Icon>
-                                  </StyledIcon>
-                                </div>
-                              </EfficiencyRating>
-                            </div>
-                          </div>
-                        </ForwardRef(CardContent)>
-                      </WithStyles(ForwardRef(CardContent))>
-                    </WithStyles(WithStyles(ForwardRef(CardContent)))>
-                    <span
-                      className="MuiCardActionArea-focusHighlight"
-                    />
-                    <WithStyles(memo)
-                      center={false}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={false}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(CardActionArea)>
-          </WithStyles(ForwardRef(CardActionArea))>
-        </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-      </StyledEcogestureCard>
-    </EcogestureCard>
-  </Router>
-</BrowserRouter>
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <span
+      class="MuiCardActionArea-focusHighlight"
+    />
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
 `;
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
index f1681bd29989772457cdc93c82980f7298244024..650084258d585c8cee9829dc983aff1a3fca2e4c 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
@@ -1,6 +1,6 @@
 import Button from '@material-ui/core/Button'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import EcogestureEmptyList from './EcogestureEmptyList'
 
@@ -14,7 +14,7 @@ const mockHandleClick = jest.fn()
 
 describe('EcogestureEmptyList component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { container } = render(
       <EcogestureEmptyList
         setTab={mockChangeTab}
         isObjective={true}
@@ -22,7 +22,7 @@ describe('EcogestureEmptyList component', () => {
         handleReinitClick={mockHandleClick}
       />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
   it('should return to all ecogestures', () => {
     const wrapper = mount(
diff --git a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
index ed4aae32b588201d413d319aabb63ce229524270..3fcc1897fd30e95764ae4a513e3220b41e039d85 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
@@ -1,320 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
-<EcogestureEmptyList
-  handleReinitClick={[MockFunction]}
-  isObjective={true}
-  isSelectionDone={false}
-  setTab={[MockFunction]}
->
+<div>
   <div
-    className="ec-empty-container"
+    class="ec-empty-container"
   >
     <div
-      className="ec-empty-content"
+      class="ec-empty-content"
     >
-      <StyledIcon
-        className="icon-big"
-        icon="test-file-stub"
-        size={150}
+      <svg
+        aria-hidden="true"
+        class="icon-big styles__icon___23x3R"
+        height="150"
+        width="150"
       >
-        <Icon
-          aria-hidden={true}
-          className="icon-big"
-          icon="test-file-stub"
-          size={150}
-          spin={false}
-        >
-          <Component
-            aria-hidden={true}
-            className="icon-big styles__icon___23x3R"
-            height={150}
-            style={Object {}}
-            width={150}
-          >
-            <svg
-              aria-hidden={true}
-              className="icon-big styles__icon___23x3R"
-              height={150}
-              style={Object {}}
-              width={150}
-            >
-              <use
-                xlinkHref="#test-file-stub"
-              />
-            </svg>
-          </Component>
-        </Icon>
-      </StyledIcon>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
       <div
-        className="text-16-normal"
+        class="text-16-normal"
       >
         ecogesture.emptyList.obj1
       </div>
       <div
-        className="text-16-normal"
+        class="text-16-normal"
       >
         ecogesture.emptyList.obj2
       </div>
       <div
-        className="buttons"
+        class="buttons"
       >
-        <WithStyles(ForwardRef(Button))
+        <button
           aria-label="ecogesture.emptyList.btn1"
-          className="btnSecondary"
-          onClick={[Function]}
+          class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+          tabindex="0"
+          type="button"
         >
-          <ForwardRef(Button)
-            aria-label="ecogesture.emptyList.btn1"
-            className="btnSecondary"
-            classes={
-              Object {
-                "colorInherit": "MuiButton-colorInherit",
-                "contained": "MuiButton-contained",
-                "containedPrimary": "MuiButton-containedPrimary",
-                "containedSecondary": "MuiButton-containedSecondary",
-                "containedSizeLarge": "MuiButton-containedSizeLarge",
-                "containedSizeSmall": "MuiButton-containedSizeSmall",
-                "disableElevation": "MuiButton-disableElevation",
-                "disabled": "Mui-disabled",
-                "endIcon": "MuiButton-endIcon",
-                "focusVisible": "Mui-focusVisible",
-                "fullWidth": "MuiButton-fullWidth",
-                "iconSizeLarge": "MuiButton-iconSizeLarge",
-                "iconSizeMedium": "MuiButton-iconSizeMedium",
-                "iconSizeSmall": "MuiButton-iconSizeSmall",
-                "label": "MuiButton-label",
-                "outlined": "MuiButton-outlined",
-                "outlinedPrimary": "MuiButton-outlinedPrimary",
-                "outlinedSecondary": "MuiButton-outlinedSecondary",
-                "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                "root": "MuiButton-root",
-                "sizeLarge": "MuiButton-sizeLarge",
-                "sizeSmall": "MuiButton-sizeSmall",
-                "startIcon": "MuiButton-startIcon",
-                "text": "MuiButton-text",
-                "textPrimary": "MuiButton-textPrimary",
-                "textSecondary": "MuiButton-textSecondary",
-                "textSizeLarge": "MuiButton-textSizeLarge",
-                "textSizeSmall": "MuiButton-textSizeSmall",
-              }
-            }
-            onClick={[Function]}
+          <span
+            class="MuiButton-label"
           >
-            <WithStyles(ForwardRef(ButtonBase))
-              aria-label="ecogesture.emptyList.btn1"
-              className="MuiButton-root MuiButton-text btnSecondary"
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <ForwardRef(ButtonBase)
-                aria-label="ecogesture.emptyList.btn1"
-                className="MuiButton-root MuiButton-text btnSecondary"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
-                component="button"
-                disabled={false}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <button
-                  aria-label="ecogesture.emptyList.btn1"
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                  disabled={false}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  <span
-                    className="MuiButton-label"
-                  >
-                    ecogesture.emptyList.btn1
-                  </span>
-                  <WithStyles(memo)
-                    center={false}
-                  >
-                    <ForwardRef(TouchRipple)
-                      center={false}
-                      classes={
-                        Object {
-                          "child": "MuiTouchRipple-child",
-                          "childLeaving": "MuiTouchRipple-childLeaving",
-                          "childPulsate": "MuiTouchRipple-childPulsate",
-                          "ripple": "MuiTouchRipple-ripple",
-                          "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                          "rippleVisible": "MuiTouchRipple-rippleVisible",
-                          "root": "MuiTouchRipple-root",
-                        }
-                      }
-                    >
-                      <span
-                        className="MuiTouchRipple-root"
-                      >
-                        <TransitionGroup
-                          childFactory={[Function]}
-                          component={null}
-                          exit={true}
-                        />
-                      </span>
-                    </ForwardRef(TouchRipple)>
-                  </WithStyles(memo)>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(Button)>
-        </WithStyles(ForwardRef(Button))>
-        <WithStyles(ForwardRef(Button))
+            ecogesture.emptyList.btn1
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
           aria-label="ecogesture.emptyList.btn2"
-          className="btnPrimary"
-          onClick={[Function]}
+          class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+          tabindex="0"
+          type="button"
         >
-          <ForwardRef(Button)
-            aria-label="ecogesture.emptyList.btn2"
-            className="btnPrimary"
-            classes={
-              Object {
-                "colorInherit": "MuiButton-colorInherit",
-                "contained": "MuiButton-contained",
-                "containedPrimary": "MuiButton-containedPrimary",
-                "containedSecondary": "MuiButton-containedSecondary",
-                "containedSizeLarge": "MuiButton-containedSizeLarge",
-                "containedSizeSmall": "MuiButton-containedSizeSmall",
-                "disableElevation": "MuiButton-disableElevation",
-                "disabled": "Mui-disabled",
-                "endIcon": "MuiButton-endIcon",
-                "focusVisible": "Mui-focusVisible",
-                "fullWidth": "MuiButton-fullWidth",
-                "iconSizeLarge": "MuiButton-iconSizeLarge",
-                "iconSizeMedium": "MuiButton-iconSizeMedium",
-                "iconSizeSmall": "MuiButton-iconSizeSmall",
-                "label": "MuiButton-label",
-                "outlined": "MuiButton-outlined",
-                "outlinedPrimary": "MuiButton-outlinedPrimary",
-                "outlinedSecondary": "MuiButton-outlinedSecondary",
-                "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                "root": "MuiButton-root",
-                "sizeLarge": "MuiButton-sizeLarge",
-                "sizeSmall": "MuiButton-sizeSmall",
-                "startIcon": "MuiButton-startIcon",
-                "text": "MuiButton-text",
-                "textPrimary": "MuiButton-textPrimary",
-                "textSecondary": "MuiButton-textSecondary",
-                "textSizeLarge": "MuiButton-textSizeLarge",
-                "textSizeSmall": "MuiButton-textSizeSmall",
-              }
-            }
-            onClick={[Function]}
+          <span
+            class="MuiButton-label"
           >
-            <WithStyles(ForwardRef(ButtonBase))
-              aria-label="ecogesture.emptyList.btn2"
-              className="MuiButton-root MuiButton-text btnPrimary"
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <ForwardRef(ButtonBase)
-                aria-label="ecogesture.emptyList.btn2"
-                className="MuiButton-root MuiButton-text btnPrimary"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
-                component="button"
-                disabled={false}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <button
-                  aria-label="ecogesture.emptyList.btn2"
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                  disabled={false}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  <span
-                    className="MuiButton-label"
-                  >
-                    ecogesture.emptyList.btn2
-                  </span>
-                  <WithStyles(memo)
-                    center={false}
-                  >
-                    <ForwardRef(TouchRipple)
-                      center={false}
-                      classes={
-                        Object {
-                          "child": "MuiTouchRipple-child",
-                          "childLeaving": "MuiTouchRipple-childLeaving",
-                          "childPulsate": "MuiTouchRipple-childPulsate",
-                          "ripple": "MuiTouchRipple-ripple",
-                          "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                          "rippleVisible": "MuiTouchRipple-rippleVisible",
-                          "root": "MuiTouchRipple-root",
-                        }
-                      }
-                    >
-                      <span
-                        className="MuiTouchRipple-root"
-                      >
-                        <TransitionGroup
-                          childFactory={[Function]}
-                          component={null}
-                          exit={true}
-                        />
-                      </span>
-                    </ForwardRef(TouchRipple)>
-                  </WithStyles(memo)>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(Button)>
-        </WithStyles(ForwardRef(Button))>
+            ecogesture.emptyList.btn2
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
       </div>
     </div>
   </div>
-</EcogestureEmptyList>
+</div>
 `;
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
index 7f04115005180020e5dbc90cd4dda9735670ef71..dde721578578d724cae9afc64681a0aab0e85ddc 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import EcogestureInitModal from './EcogestureInitModal'
 
@@ -8,14 +8,14 @@ const mockHandleClose = jest.fn()
 const mockHandleLaunchForm = jest.fn()
 describe('EcogestureInitModal component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <EcogestureInitModal
         open={true}
         handleCloseClick={mockHandleClose}
         handleLaunchForm={mockHandleLaunchForm}
       />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
   it('should close modal', () => {
     const wrapper = mount(
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index 60906791ed06582f143c96c29eff16b057ec25a6..553d5fd25832abc984ad52b2ee0b720c102afe3d 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -1,1120 +1,124 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureInitModal component should be rendered correctly 1`] = `
-<EcogestureInitModal
-  handleCloseClick={[MockFunction]}
-  handleLaunchForm={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        feedback.accessibility.window_title
-                      </div>
-                      <button
-                        aria-label="feedback.accessibility.button_close"
-                        class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label"
-                        >
-                          <svg
-                            class="styles__icon___23x3R"
-                            height="16"
-                            width="16"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                      <div
-                        class="eg-init-modal"
-                      >
-                        <div
-                          class="title text-20-bold"
-                        >
-                          ecogesture.initModal.title
-                        </div>
-                        <div
-                          class="text-16-normal"
-                        >
-                          ecogesture.initModal.text1
-                        </div>
-                        <div
-                          class="text-16-normal"
-                        >
-                          ecogesture.initModal.text2
-                        </div>
-                        <div
-                          class="buttons-container"
-                        >
-                          <button
-                            aria-label="ecogesture.initModal.btn1"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label"
-                            >
-                              ecogesture.initModal.btn1
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                          <button
-                            aria-label="ecogesture.initModal.btn2"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label"
-                            >
-                              ecogesture.initModal.btn2
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          feedback.accessibility.window_title
+        </div>
+        <button
+          aria-label="feedback.accessibility.button_close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="eg-init-modal"
+        >
+          <div
+            class="title text-20-bold"
+          >
+            ecogesture.initModal.title
+          </div>
+          <div
+            class="text-16-normal"
+          >
+            ecogesture.initModal.text1
+          </div>
+          <div
+            class="text-16-normal"
+          >
+            ecogesture.initModal.text2
+          </div>
+          <div
+            class="buttons-container"
+          >
+            <button
+              aria-label="ecogesture.initModal.btn1"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
               >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
+                ecogesture.initModal.btn1
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+            <button
+              aria-label="ecogesture.initModal.btn2"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
               >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              feedback.accessibility.window_title
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-label="feedback.accessibility.button_close"
-                              className="modal-paper-close-button"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-label="feedback.accessibility.button_close"
-                                className="modal-paper-close-button"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="feedback.accessibility.button_close"
-                                  centerRipple={true}
-                                  className="MuiIconButton-root modal-paper-close-button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="feedback.accessibility.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <button
-                                      aria-label="feedback.accessibility.button_close"
-                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <Icon
-                                          icon="test-file-stub"
-                                          size={16}
-                                          spin={false}
-                                        >
-                                          <Component
-                                            className="styles__icon___23x3R"
-                                            height={16}
-                                            style={Object {}}
-                                            width={16}
-                                          >
-                                            <svg
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <use
-                                                xlinkHref="#test-file-stub"
-                                              />
-                                            </svg>
-                                          </Component>
-                                        </Icon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                            <div
-                              className="eg-init-modal"
-                            >
-                              <div
-                                className="title text-20-bold"
-                              >
-                                ecogesture.initModal.title
-                              </div>
-                              <div
-                                className="text-16-normal"
-                              >
-                                ecogesture.initModal.text1
-                              </div>
-                              <div
-                                className="text-16-normal"
-                              >
-                                ecogesture.initModal.text2
-                              </div>
-                              <div
-                                className="buttons-container"
-                              >
-                                <WithStyles(ForwardRef(Button))
-                                  aria-label="ecogesture.initModal.btn1"
-                                  className="btnSecondary"
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(Button)
-                                    aria-label="ecogesture.initModal.btn1"
-                                    className="btnSecondary"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiButton-colorInherit",
-                                        "contained": "MuiButton-contained",
-                                        "containedPrimary": "MuiButton-containedPrimary",
-                                        "containedSecondary": "MuiButton-containedSecondary",
-                                        "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                        "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                        "disableElevation": "MuiButton-disableElevation",
-                                        "disabled": "Mui-disabled",
-                                        "endIcon": "MuiButton-endIcon",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "fullWidth": "MuiButton-fullWidth",
-                                        "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                        "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                        "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                        "label": "MuiButton-label",
-                                        "outlined": "MuiButton-outlined",
-                                        "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                        "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                        "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                        "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                        "root": "MuiButton-root",
-                                        "sizeLarge": "MuiButton-sizeLarge",
-                                        "sizeSmall": "MuiButton-sizeSmall",
-                                        "startIcon": "MuiButton-startIcon",
-                                        "text": "MuiButton-text",
-                                        "textPrimary": "MuiButton-textPrimary",
-                                        "textSecondary": "MuiButton-textSecondary",
-                                        "textSizeLarge": "MuiButton-textSizeLarge",
-                                        "textSizeSmall": "MuiButton-textSizeSmall",
-                                      }
-                                    }
-                                    onClick={[MockFunction]}
-                                  >
-                                    <WithStyles(ForwardRef(ButtonBase))
-                                      aria-label="ecogesture.initModal.btn1"
-                                      className="MuiButton-root MuiButton-text btnSecondary"
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <ForwardRef(ButtonBase)
-                                        aria-label="ecogesture.initModal.btn1"
-                                        className="MuiButton-root MuiButton-text btnSecondary"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <button
-                                          aria-label="ecogesture.initModal.btn1"
-                                          className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
-                                        >
-                                          <span
-                                            className="MuiButton-label"
-                                          >
-                                            ecogesture.initModal.btn1
-                                          </span>
-                                          <WithStyles(memo)
-                                            center={false}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={false}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(Button)>
-                                </WithStyles(ForwardRef(Button))>
-                                <WithStyles(ForwardRef(Button))
-                                  aria-label="ecogesture.initModal.btn2"
-                                  className="btnPrimary"
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(Button)
-                                    aria-label="ecogesture.initModal.btn2"
-                                    className="btnPrimary"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiButton-colorInherit",
-                                        "contained": "MuiButton-contained",
-                                        "containedPrimary": "MuiButton-containedPrimary",
-                                        "containedSecondary": "MuiButton-containedSecondary",
-                                        "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                        "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                        "disableElevation": "MuiButton-disableElevation",
-                                        "disabled": "Mui-disabled",
-                                        "endIcon": "MuiButton-endIcon",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "fullWidth": "MuiButton-fullWidth",
-                                        "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                        "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                        "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                        "label": "MuiButton-label",
-                                        "outlined": "MuiButton-outlined",
-                                        "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                        "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                        "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                        "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                        "root": "MuiButton-root",
-                                        "sizeLarge": "MuiButton-sizeLarge",
-                                        "sizeSmall": "MuiButton-sizeSmall",
-                                        "startIcon": "MuiButton-startIcon",
-                                        "text": "MuiButton-text",
-                                        "textPrimary": "MuiButton-textPrimary",
-                                        "textSecondary": "MuiButton-textSecondary",
-                                        "textSizeLarge": "MuiButton-textSizeLarge",
-                                        "textSizeSmall": "MuiButton-textSizeSmall",
-                                      }
-                                    }
-                                    onClick={[MockFunction]}
-                                  >
-                                    <WithStyles(ForwardRef(ButtonBase))
-                                      aria-label="ecogesture.initModal.btn2"
-                                      className="MuiButton-root MuiButton-text btnPrimary"
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <ForwardRef(ButtonBase)
-                                        aria-label="ecogesture.initModal.btn2"
-                                        className="MuiButton-root MuiButton-text btnPrimary"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <button
-                                          aria-label="ecogesture.initModal.btn2"
-                                          className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
-                                        >
-                                          <span
-                                            className="MuiButton-label"
-                                          >
-                                            ecogesture.initModal.btn2
-                                          </span>
-                                          <WithStyles(memo)
-                                            center={false}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={false}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(Button)>
-                                </WithStyles(ForwardRef(Button))>
-                              </div>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
-            </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</EcogestureInitModal>
+                ecogesture.initModal.btn2
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
index ca1e30237f57c3d658950d100824c3bef2866c7d..c6be11ce126c2999165f23cce9ad8169473c78d8 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
@@ -1,6 +1,6 @@
 import { Button, MenuItem } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
@@ -27,7 +27,7 @@ describe('EcogesturesList component', () => {
     mockAppDispatch.mockClear()
   })
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <BrowserRouter>
           <EcogestureList
@@ -40,8 +40,7 @@ describe('EcogesturesList component', () => {
         </BrowserRouter>
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
   it('should open the filter menu and select all ecogesture', async () => {
diff --git a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
index f5da3ffbcbde4deb8ca85cd977576cc7c7fdf192..536577972c3d8ff109992cace617895fd5fd1a6b 100644
--- a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
@@ -1,2066 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogesturesList component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <BrowserRouter>
-    <Router
-      location={
-        Object {
-          "hash": "",
-          "key": "default",
-          "pathname": "/",
-          "search": "",
-          "state": null,
-        }
-      }
-      navigationType="POP"
-      navigator={
-        Object {
-          "action": "POP",
-          "createHref": [Function],
-          "encodeLocation": [Function],
-          "go": [Function],
-          "listen": [Function],
-          "location": Object {
-            "hash": "",
-            "key": "default",
-            "pathname": "/",
-            "search": "",
-            "state": null,
-          },
-          "push": [Function],
-          "replace": [Function],
-        }
-      }
+<div>
+  <div
+    class="ecogesture-root"
+  >
+    <div
+      class="efficiency-button-content"
     >
-      <EcogestureList
-        displaySelection={false}
-        handleReinitClick={[MockFunction]}
-        list={
-          Array [
-            Object {
-              "_id": "ECOGESTURE001",
-              "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
-              "_type": "com.grandlyon.ecolyo.ecogesture",
-              "action": false,
-              "actionDuration": 3,
-              "actionName": null,
-              "difficulty": 1,
-              "doing": false,
-              "efficiency": 4,
-              "equipment": false,
-              "equipmentInstallation": true,
-              "equipmentType": Array [],
-              "fluidTypes": Array [
-                0,
-                2,
-              ],
-              "id": "ECOGESTURE001",
-              "impactLevel": 8,
-              "investment": null,
-              "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
-              "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
-              "objective": false,
-              "room": Array [
-                0,
-              ],
-              "season": "Hiver",
-              "shortName": "Bonhomme de neige",
-              "usage": 1,
-              "viewedInSelection": false,
-            },
-            Object {
-              "_id": "ECOGESTURE002",
-              "_rev": "1-ef7ddd778254e3b7d331a88fd17f606d",
-              "_type": "com.grandlyon.ecolyo.ecogesture",
-              "action": false,
-              "actionDuration": 3,
-              "actionName": null,
-              "difficulty": 1,
-              "doing": false,
-              "efficiency": 4,
-              "equipment": true,
-              "equipmentInstallation": true,
-              "equipmentType": Array [
-                "AIR_CONDITIONING",
-              ],
-              "fluidTypes": Array [
-                0,
-              ],
-              "id": "ECOGESTURE002",
-              "impactLevel": 8,
-              "investment": null,
-              "longDescription": "Cela permet de garder la fraîcheur à l'intérieur. Le climatiseur n'est pas là pour refroidir la rue mais bien la pièce.",
-              "longName": "Je ferme mes fenêtres quand la climatisation est en marche",
-              "objective": false,
-              "room": Array [
-                0,
-              ],
-              "season": "Eté",
-              "shortName": "Coup de vent",
-              "usage": 2,
-              "viewedInSelection": false,
-            },
-            Object {
-              "_id": "ECOGESTURE0013",
-              "_rev": "1-0b2761dd4aef79556c7aef144060fde6",
-              "_type": "com.grandlyon.ecolyo.ecogesture",
-              "action": true,
-              "actionDuration": 3,
-              "actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.",
-              "difficulty": 1,
-              "doing": false,
-              "efficiency": 1,
-              "equipment": false,
-              "equipmentInstallation": true,
-              "equipmentType": Array [
-                "WASHING_MACHINE",
-                "DISHWASHER",
-              ],
-              "fluidTypes": Array [
-                1,
-              ],
-              "id": "ECOGESTURE0013",
-              "impactLevel": 2,
-              "investment": null,
-              "longDescription": "Utilisez la température la plus basse possible : de nombreux produits nettoyants sont efficaces à froid et un cycle à 90 °C consomme 3 fois plus d'énergie qu'un lavage à 40 °C. En effet, 80 % de l'énergie consommée par un lave-linge ou un lave-vaisselle sert au chauffage de l'eau ! Que ce soit pour la vaisselle ou le linge, les programmes de lavage intensif consomment jusqu'à 40 % de plus. Si possible, rincez à l'eau froide : la température de rinçage n'a pas d'effet sur le nettoyage du linge ou de la vaisselle. Attention cependant avec les tissus qui peuvent rétrécir : ce qui fait rétrécir, c'est le passage d'une température à une autre. Mieux vaut alors faire le cycle complet à l'eau froide pour les premiers lavages de tissus sensibles. Pour du linge ou de la vaisselle peu sales, utilisez la touche \\"Eco\\". Elle réduit la température de lavage et allonge sa durée (c’est le chauffage de l’eau qui consomme le plus). Vous économiserez jusqu’à 45 % par rapport aux cycles longs. Néanmoins, pour vous prémunir contre les bouchons de graisse dans les canalisations, faites quand même un cycle à chaud une fois par mois environ.",
-              "longName": "J’utilise le plus souvent les cycles courts à basse température pour laver le linge et la vaisselle.",
-              "objective": false,
-              "room": Array [
-                1,
-                3,
-                2,
-              ],
-              "season": "Sans saison",
-              "shortName": "Accelerateur de particules",
-              "usage": 5,
-              "viewedInSelection": false,
-            },
-          ]
-        }
-        selectionTotal={0}
-        selectionViewed={0}
+      <button
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        aria-label="ecogesture.MENU_TITLE"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall"
+        tabindex="0"
+        type="button"
       >
-        <div
-          className="ecogesture-root"
+        <span
+          class="MuiButton-label"
         >
-          <div
-            className="efficiency-button-content"
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="20"
+            width="20"
           >
-            <WithStyles(ForwardRef(Button))
-              aria-controls="simple-menu"
-              aria-haspopup="true"
-              aria-label="ecogesture.MENU_TITLE"
-              className="btnSecondary btnFilter"
-              onClick={[Function]}
-              size="small"
-            >
-              <ForwardRef(Button)
-                aria-controls="simple-menu"
-                aria-haspopup="true"
-                aria-label="ecogesture.MENU_TITLE"
-                className="btnSecondary btnFilter"
-                classes={
-                  Object {
-                    "colorInherit": "MuiButton-colorInherit",
-                    "contained": "MuiButton-contained",
-                    "containedPrimary": "MuiButton-containedPrimary",
-                    "containedSecondary": "MuiButton-containedSecondary",
-                    "containedSizeLarge": "MuiButton-containedSizeLarge",
-                    "containedSizeSmall": "MuiButton-containedSizeSmall",
-                    "disableElevation": "MuiButton-disableElevation",
-                    "disabled": "Mui-disabled",
-                    "endIcon": "MuiButton-endIcon",
-                    "focusVisible": "Mui-focusVisible",
-                    "fullWidth": "MuiButton-fullWidth",
-                    "iconSizeLarge": "MuiButton-iconSizeLarge",
-                    "iconSizeMedium": "MuiButton-iconSizeMedium",
-                    "iconSizeSmall": "MuiButton-iconSizeSmall",
-                    "label": "MuiButton-label",
-                    "outlined": "MuiButton-outlined",
-                    "outlinedPrimary": "MuiButton-outlinedPrimary",
-                    "outlinedSecondary": "MuiButton-outlinedSecondary",
-                    "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                    "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                    "root": "MuiButton-root",
-                    "sizeLarge": "MuiButton-sizeLarge",
-                    "sizeSmall": "MuiButton-sizeSmall",
-                    "startIcon": "MuiButton-startIcon",
-                    "text": "MuiButton-text",
-                    "textPrimary": "MuiButton-textPrimary",
-                    "textSecondary": "MuiButton-textSecondary",
-                    "textSizeLarge": "MuiButton-textSizeLarge",
-                    "textSizeSmall": "MuiButton-textSizeSmall",
-                  }
-                }
-                onClick={[Function]}
-                size="small"
-              >
-                <WithStyles(ForwardRef(ButtonBase))
-                  aria-controls="simple-menu"
-                  aria-haspopup="true"
-                  aria-label="ecogesture.MENU_TITLE"
-                  className="MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall"
-                  component="button"
-                  disabled={false}
-                  focusRipple={true}
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <ForwardRef(ButtonBase)
-                    aria-controls="simple-menu"
-                    aria-haspopup="true"
-                    aria-label="ecogesture.MENU_TITLE"
-                    className="MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "focusVisible": "Mui-focusVisible",
-                        "root": "MuiButtonBase-root",
-                      }
-                    }
-                    component="button"
-                    disabled={false}
-                    focusRipple={true}
-                    focusVisibleClassName="Mui-focusVisible"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <button
-                      aria-controls="simple-menu"
-                      aria-haspopup="true"
-                      aria-label="ecogesture.MENU_TITLE"
-                      className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall"
-                      disabled={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={0}
-                      type="button"
-                    >
-                      <span
-                        className="MuiButton-label"
-                      >
-                        <StyledIcon
-                          icon="test-file-stub"
-                          size={20}
-                        >
-                          <Icon
-                            aria-hidden={true}
-                            icon="test-file-stub"
-                            size={20}
-                            spin={false}
-                          >
-                            <Component
-                              aria-hidden={true}
-                              className="styles__icon___23x3R"
-                              height={20}
-                              style={Object {}}
-                              width={20}
-                            >
-                              <svg
-                                aria-hidden={true}
-                                className="styles__icon___23x3R"
-                                height={20}
-                                style={Object {}}
-                                width={20}
-                              >
-                                <use
-                                  xlinkHref="#test-file-stub"
-                                />
-                              </svg>
-                            </Component>
-                          </Icon>
-                        </StyledIcon>
-                        <span
-                          className=""
-                        >
-                          ecogesture.MENU_TITLE
-                        </span>
-                      </span>
-                      <WithStyles(memo)
-                        center={false}
-                      >
-                        <ForwardRef(TouchRipple)
-                          center={false}
-                          classes={
-                            Object {
-                              "child": "MuiTouchRipple-child",
-                              "childLeaving": "MuiTouchRipple-childLeaving",
-                              "childPulsate": "MuiTouchRipple-childPulsate",
-                              "ripple": "MuiTouchRipple-ripple",
-                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                              "root": "MuiTouchRipple-root",
-                            }
-                          }
-                        >
-                          <span
-                            className="MuiTouchRipple-root"
-                          >
-                            <TransitionGroup
-                              childFactory={[Function]}
-                              component={null}
-                              exit={true}
-                            />
-                          </span>
-                        </ForwardRef(TouchRipple)>
-                      </WithStyles(memo)>
-                    </button>
-                  </ForwardRef(ButtonBase)>
-                </WithStyles(ForwardRef(ButtonBase))>
-              </ForwardRef(Button)>
-            </WithStyles(ForwardRef(Button))>
-            <WithStyles(ForwardRef(Menu))
-              MenuListProps={
-                Object {
-                  "className": "filter-menu-list",
-                }
-              }
-              PopoverClasses={
-                Object {
-                  "paper": "filter-menu",
-                }
-              }
-              anchorEl={null}
-              keepMounted={true}
-              onClose={[Function]}
-              open={false}
-              variant="menu"
-            >
-              <ForwardRef(Menu)
-                MenuListProps={
-                  Object {
-                    "className": "filter-menu-list",
-                  }
-                }
-                PopoverClasses={
-                  Object {
-                    "paper": "filter-menu",
-                  }
-                }
-                anchorEl={null}
-                classes={
-                  Object {
-                    "list": "MuiMenu-list",
-                    "paper": "MuiMenu-paper",
-                  }
-                }
-                keepMounted={true}
-                onClose={[Function]}
-                open={false}
-                variant="menu"
-              >
-                <WithStyles(ForwardRef(Popover))
-                  PaperProps={
-                    Object {
-                      "classes": Object {
-                        "root": "MuiMenu-paper",
-                      },
-                    }
-                  }
-                  TransitionProps={
-                    Object {
-                      "onEntering": [Function],
-                    }
-                  }
-                  anchorEl={null}
-                  anchorOrigin={
-                    Object {
-                      "horizontal": "left",
-                      "vertical": "top",
-                    }
-                  }
-                  classes={
-                    Object {
-                      "paper": "filter-menu",
-                    }
-                  }
-                  getContentAnchorEl={[Function]}
-                  keepMounted={true}
-                  onClose={[Function]}
-                  open={false}
-                  transformOrigin={
-                    Object {
-                      "horizontal": "left",
-                      "vertical": "top",
-                    }
-                  }
-                  transitionDuration="auto"
-                >
-                  <ForwardRef(Popover)
-                    PaperProps={
-                      Object {
-                        "classes": Object {
-                          "root": "MuiMenu-paper",
-                        },
-                      }
-                    }
-                    TransitionProps={
-                      Object {
-                        "onEntering": [Function],
-                      }
-                    }
-                    anchorEl={null}
-                    anchorOrigin={
-                      Object {
-                        "horizontal": "left",
-                        "vertical": "top",
-                      }
-                    }
-                    classes={
-                      Object {
-                        "paper": "MuiPopover-paper filter-menu",
-                        "root": "MuiPopover-root",
-                      }
-                    }
-                    getContentAnchorEl={[Function]}
-                    keepMounted={true}
-                    onClose={[Function]}
-                    open={false}
-                    transformOrigin={
-                      Object {
-                        "horizontal": "left",
-                        "vertical": "top",
-                      }
-                    }
-                    transitionDuration="auto"
-                  >
-                    <ForwardRef(Modal)
-                      BackdropProps={
-                        Object {
-                          "invisible": true,
-                        }
-                      }
-                      className="MuiPopover-root"
-                      keepMounted={true}
-                      onClose={[Function]}
-                      open={false}
-                    >
-                      <ForwardRef(Portal)
-                        disablePortal={false}
-                      >
-                        <Portal
-                          containerInfo={
-                            <body>
-                              <div
-                                aria-hidden="true"
-                                class="MuiPopover-root"
-                                role="presentation"
-                                style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px; visibility: hidden;"
-                              >
-                                <div
-                                  data-test="sentinelStart"
-                                  tabindex="0"
-                                />
-                                <div
-                                  class="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
-                                  style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;"
-                                  tabindex="-1"
-                                >
-                                  <ul
-                                    class="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
-                                    role="menu"
-                                    tabindex="-1"
-                                  >
-                                    <li
-                                      aria-disabled="false"
-                                      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
-                                      role="menuitem"
-                                      tabindex="-1"
-                                    >
-                                      ecogesture.ALL
-                                      <div
-                                        class="MuiListItemIcon-root filter-menu-icon"
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          class="styles__icon___23x3R"
-                                          height="13"
-                                          width="13"
-                                        >
-                                          <use
-                                            xlink:href="#test-file-stub"
-                                          />
-                                        </svg>
-                                      </div>
-                                      <span
-                                        class="MuiTouchRipple-root"
-                                      />
-                                    </li>
-                                    <li
-                                      aria-disabled="false"
-                                      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                      role="menuitem"
-                                      tabindex="-1"
-                                    >
-                                      ecogesture.HEATING
-                                      <span
-                                        class="MuiTouchRipple-root"
-                                      />
-                                    </li>
-                                    <li
-                                      aria-disabled="false"
-                                      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                      role="menuitem"
-                                      tabindex="-1"
-                                    >
-                                      ecogesture.AIR_CONDITIONING
-                                      <span
-                                        class="MuiTouchRipple-root"
-                                      />
-                                    </li>
-                                    <li
-                                      aria-disabled="false"
-                                      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                      role="menuitem"
-                                      tabindex="-1"
-                                    >
-                                      ecogesture.ECS
-                                      <span
-                                        class="MuiTouchRipple-root"
-                                      />
-                                    </li>
-                                    <li
-                                      aria-disabled="false"
-                                      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                      role="menuitem"
-                                      tabindex="-1"
-                                    >
-                                      ecogesture.COLD_WATER
-                                      <span
-                                        class="MuiTouchRipple-root"
-                                      />
-                                    </li>
-                                    <li
-                                      aria-disabled="false"
-                                      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                      role="menuitem"
-                                      tabindex="-1"
-                                    >
-                                      ecogesture.ELECTRICITY_SPECIFIC
-                                      <span
-                                        class="MuiTouchRipple-root"
-                                      />
-                                    </li>
-                                    <li
-                                      aria-disabled="false"
-                                      class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                      role="menuitem"
-                                      tabindex="-1"
-                                    >
-                                      ecogesture.COOKING
-                                      <span
-                                        class="MuiTouchRipple-root"
-                                      />
-                                    </li>
-                                  </ul>
-                                </div>
-                                <div
-                                  data-test="sentinelEnd"
-                                  tabindex="0"
-                                />
-                              </div>
-                            </body>
-                          }
-                        >
-                          <div
-                            className="MuiPopover-root"
-                            onKeyDown={[Function]}
-                            role="presentation"
-                            style={
-                              Object {
-                                "bottom": 0,
-                                "left": 0,
-                                "position": "fixed",
-                                "right": 0,
-                                "top": 0,
-                                "visibility": "hidden",
-                                "zIndex": 1300,
-                              }
-                            }
-                          >
-                            <ForwardRef(SimpleBackdrop)
-                              invisible={true}
-                              onClick={[Function]}
-                              open={false}
-                            />
-                            <Unstable_TrapFocus
-                              disableAutoFocus={false}
-                              disableEnforceFocus={false}
-                              disableRestoreFocus={false}
-                              getDoc={[Function]}
-                              isEnabled={[Function]}
-                              open={false}
-                            >
-                              <div
-                                data-test="sentinelStart"
-                                tabIndex={0}
-                              />
-                              <ForwardRef(Grow)
-                                appear={true}
-                                in={false}
-                                onEnter={[Function]}
-                                onEntering={[Function]}
-                                onExited={[Function]}
-                                tabIndex="-1"
-                                timeout="auto"
-                              >
-                                <Transition
-                                  addEndListener={[Function]}
-                                  appear={true}
-                                  enter={true}
-                                  exit={true}
-                                  in={false}
-                                  mountOnEnter={false}
-                                  onEnter={[Function]}
-                                  onEntered={[Function]}
-                                  onEntering={[Function]}
-                                  onExit={[Function]}
-                                  onExited={[Function]}
-                                  onExiting={[Function]}
-                                  tabIndex="-1"
-                                  timeout={null}
-                                  unmountOnExit={false}
-                                >
-                                  <WithStyles(ForwardRef(Paper))
-                                    className="MuiPopover-paper filter-menu"
-                                    classes={
-                                      Object {
-                                        "root": "MuiMenu-paper",
-                                      }
-                                    }
-                                    elevation={8}
-                                    style={
-                                      Object {
-                                        "opacity": 0,
-                                        "transform": "scale(0.75, 0.5625)",
-                                        "visibility": "hidden",
-                                      }
-                                    }
-                                    tabIndex="-1"
-                                  >
-                                    <ForwardRef(Paper)
-                                      className="MuiPopover-paper filter-menu"
-                                      classes={
-                                        Object {
-                                          "elevation0": "MuiPaper-elevation0",
-                                          "elevation1": "MuiPaper-elevation1",
-                                          "elevation10": "MuiPaper-elevation10",
-                                          "elevation11": "MuiPaper-elevation11",
-                                          "elevation12": "MuiPaper-elevation12",
-                                          "elevation13": "MuiPaper-elevation13",
-                                          "elevation14": "MuiPaper-elevation14",
-                                          "elevation15": "MuiPaper-elevation15",
-                                          "elevation16": "MuiPaper-elevation16",
-                                          "elevation17": "MuiPaper-elevation17",
-                                          "elevation18": "MuiPaper-elevation18",
-                                          "elevation19": "MuiPaper-elevation19",
-                                          "elevation2": "MuiPaper-elevation2",
-                                          "elevation20": "MuiPaper-elevation20",
-                                          "elevation21": "MuiPaper-elevation21",
-                                          "elevation22": "MuiPaper-elevation22",
-                                          "elevation23": "MuiPaper-elevation23",
-                                          "elevation24": "MuiPaper-elevation24",
-                                          "elevation3": "MuiPaper-elevation3",
-                                          "elevation4": "MuiPaper-elevation4",
-                                          "elevation5": "MuiPaper-elevation5",
-                                          "elevation6": "MuiPaper-elevation6",
-                                          "elevation7": "MuiPaper-elevation7",
-                                          "elevation8": "MuiPaper-elevation8",
-                                          "elevation9": "MuiPaper-elevation9",
-                                          "outlined": "MuiPaper-outlined",
-                                          "root": "MuiPaper-root MuiMenu-paper",
-                                          "rounded": "MuiPaper-rounded",
-                                        }
-                                      }
-                                      elevation={8}
-                                      style={
-                                        Object {
-                                          "opacity": 0,
-                                          "transform": "scale(0.75, 0.5625)",
-                                          "visibility": "hidden",
-                                        }
-                                      }
-                                      tabIndex="-1"
-                                    >
-                                      <div
-                                        className="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
-                                        style={
-                                          Object {
-                                            "opacity": 0,
-                                            "transform": "scale(0.75, 0.5625)",
-                                            "visibility": "hidden",
-                                          }
-                                        }
-                                        tabIndex="-1"
-                                      >
-                                        <ForwardRef(MenuList)
-                                          actions={
-                                            Object {
-                                              "current": Object {
-                                                "adjustStyleForScrollbar": [Function],
-                                              },
-                                            }
-                                          }
-                                          autoFocus={false}
-                                          autoFocusItem={false}
-                                          className="MuiMenu-list filter-menu-list"
-                                          onKeyDown={[Function]}
-                                          variant="menu"
-                                        >
-                                          <WithStyles(ForwardRef(List))
-                                            className="MuiMenu-list filter-menu-list"
-                                            onKeyDown={[Function]}
-                                            role="menu"
-                                            tabIndex={-1}
-                                          >
-                                            <ForwardRef(List)
-                                              className="MuiMenu-list filter-menu-list"
-                                              classes={
-                                                Object {
-                                                  "dense": "MuiList-dense",
-                                                  "padding": "MuiList-padding",
-                                                  "root": "MuiList-root",
-                                                  "subheader": "MuiList-subheader",
-                                                }
-                                              }
-                                              onKeyDown={[Function]}
-                                              role="menu"
-                                              tabIndex={-1}
-                                            >
-                                              <ul
-                                                className="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
-                                                onKeyDown={[Function]}
-                                                role="menu"
-                                                tabIndex={-1}
-                                              >
-                                                <WithStyles(ForwardRef(MenuItem))
-                                                  classes={
-                                                    Object {
-                                                      "root": "item-active",
-                                                    }
-                                                  }
-                                                  key=".$.$0"
-                                                  onClick={[Function]}
-                                                  selected={true}
-                                                >
-                                                  <ForwardRef(MenuItem)
-                                                    classes={
-                                                      Object {
-                                                        "dense": "MuiMenuItem-dense",
-                                                        "gutters": "MuiMenuItem-gutters",
-                                                        "root": "MuiMenuItem-root item-active",
-                                                        "selected": "Mui-selected",
-                                                      }
-                                                    }
-                                                    onClick={[Function]}
-                                                    selected={true}
-                                                  >
-                                                    <WithStyles(ForwardRef(ListItem))
-                                                      button={true}
-                                                      className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
-                                                      classes={
-                                                        Object {
-                                                          "dense": "MuiMenuItem-dense",
-                                                        }
-                                                      }
-                                                      component="li"
-                                                      disableGutters={false}
-                                                      onClick={[Function]}
-                                                      role="menuitem"
-                                                      selected={true}
-                                                      tabIndex={-1}
-                                                    >
-                                                      <ForwardRef(ListItem)
-                                                        button={true}
-                                                        className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
-                                                        classes={
-                                                          Object {
-                                                            "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
-                                                            "button": "MuiListItem-button",
-                                                            "container": "MuiListItem-container",
-                                                            "dense": "MuiListItem-dense MuiMenuItem-dense",
-                                                            "disabled": "Mui-disabled",
-                                                            "divider": "MuiListItem-divider",
-                                                            "focusVisible": "Mui-focusVisible",
-                                                            "gutters": "MuiListItem-gutters",
-                                                            "root": "MuiListItem-root",
-                                                            "secondaryAction": "MuiListItem-secondaryAction",
-                                                            "selected": "Mui-selected",
-                                                          }
-                                                        }
-                                                        component="li"
-                                                        disableGutters={false}
-                                                        onClick={[Function]}
-                                                        role="menuitem"
-                                                        selected={true}
-                                                        tabIndex={-1}
-                                                      >
-                                                        <WithStyles(ForwardRef(ButtonBase))
-                                                          className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
-                                                          component="li"
-                                                          disabled={false}
-                                                          focusVisibleClassName="Mui-focusVisible"
-                                                          onClick={[Function]}
-                                                          role="menuitem"
-                                                          tabIndex={-1}
-                                                        >
-                                                          <ForwardRef(ButtonBase)
-                                                            className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
-                                                            classes={
-                                                              Object {
-                                                                "disabled": "Mui-disabled",
-                                                                "focusVisible": "Mui-focusVisible",
-                                                                "root": "MuiButtonBase-root",
-                                                              }
-                                                            }
-                                                            component="li"
-                                                            disabled={false}
-                                                            focusVisibleClassName="Mui-focusVisible"
-                                                            onClick={[Function]}
-                                                            role="menuitem"
-                                                            tabIndex={-1}
-                                                          >
-                                                            <li
-                                                              aria-disabled={false}
-                                                              className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
-                                                              onBlur={[Function]}
-                                                              onClick={[Function]}
-                                                              onDragLeave={[Function]}
-                                                              onFocus={[Function]}
-                                                              onKeyDown={[Function]}
-                                                              onKeyUp={[Function]}
-                                                              onMouseDown={[Function]}
-                                                              onMouseLeave={[Function]}
-                                                              onMouseUp={[Function]}
-                                                              onTouchEnd={[Function]}
-                                                              onTouchMove={[Function]}
-                                                              onTouchStart={[Function]}
-                                                              role="menuitem"
-                                                              tabIndex={-1}
-                                                            >
-                                                              ecogesture.ALL
-                                                              <WithStyles(ForwardRef(ListItemIcon))
-                                                                classes={
-                                                                  Object {
-                                                                    "root": "filter-menu-icon",
-                                                                  }
-                                                                }
-                                                                key=".1"
-                                                              >
-                                                                <ForwardRef(ListItemIcon)
-                                                                  classes={
-                                                                    Object {
-                                                                      "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
-                                                                      "root": "MuiListItemIcon-root filter-menu-icon",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <div
-                                                                    className="MuiListItemIcon-root filter-menu-icon"
-                                                                  >
-                                                                    <StyledIcon
-                                                                      icon="test-file-stub"
-                                                                      size={13}
-                                                                    >
-                                                                      <Icon
-                                                                        aria-hidden={true}
-                                                                        icon="test-file-stub"
-                                                                        size={13}
-                                                                        spin={false}
-                                                                      >
-                                                                        <Component
-                                                                          aria-hidden={true}
-                                                                          className="styles__icon___23x3R"
-                                                                          height={13}
-                                                                          style={Object {}}
-                                                                          width={13}
-                                                                        >
-                                                                          <svg
-                                                                            aria-hidden={true}
-                                                                            className="styles__icon___23x3R"
-                                                                            height={13}
-                                                                            style={Object {}}
-                                                                            width={13}
-                                                                          >
-                                                                            <use
-                                                                              xlinkHref="#test-file-stub"
-                                                                            />
-                                                                          </svg>
-                                                                        </Component>
-                                                                      </Icon>
-                                                                    </StyledIcon>
-                                                                  </div>
-                                                                </ForwardRef(ListItemIcon)>
-                                                              </WithStyles(ForwardRef(ListItemIcon))>
-                                                              <WithStyles(memo)
-                                                                center={false}
-                                                              >
-                                                                <ForwardRef(TouchRipple)
-                                                                  center={false}
-                                                                  classes={
-                                                                    Object {
-                                                                      "child": "MuiTouchRipple-child",
-                                                                      "childLeaving": "MuiTouchRipple-childLeaving",
-                                                                      "childPulsate": "MuiTouchRipple-childPulsate",
-                                                                      "ripple": "MuiTouchRipple-ripple",
-                                                                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                                      "root": "MuiTouchRipple-root",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <span
-                                                                    className="MuiTouchRipple-root"
-                                                                  >
-                                                                    <TransitionGroup
-                                                                      childFactory={[Function]}
-                                                                      component={null}
-                                                                      exit={true}
-                                                                    />
-                                                                  </span>
-                                                                </ForwardRef(TouchRipple)>
-                                                              </WithStyles(memo)>
-                                                            </li>
-                                                          </ForwardRef(ButtonBase)>
-                                                        </WithStyles(ForwardRef(ButtonBase))>
-                                                      </ForwardRef(ListItem)>
-                                                    </WithStyles(ForwardRef(ListItem))>
-                                                  </ForwardRef(MenuItem)>
-                                                </WithStyles(ForwardRef(MenuItem))>
-                                                <WithStyles(ForwardRef(MenuItem))
-                                                  classes={
-                                                    Object {
-                                                      "root": "",
-                                                    }
-                                                  }
-                                                  key=".$.$1"
-                                                  onClick={[Function]}
-                                                  selected={false}
-                                                >
-                                                  <ForwardRef(MenuItem)
-                                                    classes={
-                                                      Object {
-                                                        "dense": "MuiMenuItem-dense",
-                                                        "gutters": "MuiMenuItem-gutters",
-                                                        "root": "MuiMenuItem-root",
-                                                        "selected": "Mui-selected",
-                                                      }
-                                                    }
-                                                    onClick={[Function]}
-                                                    selected={false}
-                                                  >
-                                                    <WithStyles(ForwardRef(ListItem))
-                                                      button={true}
-                                                      className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                      classes={
-                                                        Object {
-                                                          "dense": "MuiMenuItem-dense",
-                                                        }
-                                                      }
-                                                      component="li"
-                                                      disableGutters={false}
-                                                      onClick={[Function]}
-                                                      role="menuitem"
-                                                      selected={false}
-                                                      tabIndex={-1}
-                                                    >
-                                                      <ForwardRef(ListItem)
-                                                        button={true}
-                                                        className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                        classes={
-                                                          Object {
-                                                            "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
-                                                            "button": "MuiListItem-button",
-                                                            "container": "MuiListItem-container",
-                                                            "dense": "MuiListItem-dense MuiMenuItem-dense",
-                                                            "disabled": "Mui-disabled",
-                                                            "divider": "MuiListItem-divider",
-                                                            "focusVisible": "Mui-focusVisible",
-                                                            "gutters": "MuiListItem-gutters",
-                                                            "root": "MuiListItem-root",
-                                                            "secondaryAction": "MuiListItem-secondaryAction",
-                                                            "selected": "Mui-selected",
-                                                          }
-                                                        }
-                                                        component="li"
-                                                        disableGutters={false}
-                                                        onClick={[Function]}
-                                                        role="menuitem"
-                                                        selected={false}
-                                                        tabIndex={-1}
-                                                      >
-                                                        <WithStyles(ForwardRef(ButtonBase))
-                                                          className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                          component="li"
-                                                          disabled={false}
-                                                          focusVisibleClassName="Mui-focusVisible"
-                                                          onClick={[Function]}
-                                                          role="menuitem"
-                                                          tabIndex={-1}
-                                                        >
-                                                          <ForwardRef(ButtonBase)
-                                                            className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                            classes={
-                                                              Object {
-                                                                "disabled": "Mui-disabled",
-                                                                "focusVisible": "Mui-focusVisible",
-                                                                "root": "MuiButtonBase-root",
-                                                              }
-                                                            }
-                                                            component="li"
-                                                            disabled={false}
-                                                            focusVisibleClassName="Mui-focusVisible"
-                                                            onClick={[Function]}
-                                                            role="menuitem"
-                                                            tabIndex={-1}
-                                                          >
-                                                            <li
-                                                              aria-disabled={false}
-                                                              className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                              onBlur={[Function]}
-                                                              onClick={[Function]}
-                                                              onDragLeave={[Function]}
-                                                              onFocus={[Function]}
-                                                              onKeyDown={[Function]}
-                                                              onKeyUp={[Function]}
-                                                              onMouseDown={[Function]}
-                                                              onMouseLeave={[Function]}
-                                                              onMouseUp={[Function]}
-                                                              onTouchEnd={[Function]}
-                                                              onTouchMove={[Function]}
-                                                              onTouchStart={[Function]}
-                                                              role="menuitem"
-                                                              tabIndex={-1}
-                                                            >
-                                                              ecogesture.HEATING
-                                                              <WithStyles(memo)
-                                                                center={false}
-                                                              >
-                                                                <ForwardRef(TouchRipple)
-                                                                  center={false}
-                                                                  classes={
-                                                                    Object {
-                                                                      "child": "MuiTouchRipple-child",
-                                                                      "childLeaving": "MuiTouchRipple-childLeaving",
-                                                                      "childPulsate": "MuiTouchRipple-childPulsate",
-                                                                      "ripple": "MuiTouchRipple-ripple",
-                                                                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                                      "root": "MuiTouchRipple-root",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <span
-                                                                    className="MuiTouchRipple-root"
-                                                                  >
-                                                                    <TransitionGroup
-                                                                      childFactory={[Function]}
-                                                                      component={null}
-                                                                      exit={true}
-                                                                    />
-                                                                  </span>
-                                                                </ForwardRef(TouchRipple)>
-                                                              </WithStyles(memo)>
-                                                            </li>
-                                                          </ForwardRef(ButtonBase)>
-                                                        </WithStyles(ForwardRef(ButtonBase))>
-                                                      </ForwardRef(ListItem)>
-                                                    </WithStyles(ForwardRef(ListItem))>
-                                                  </ForwardRef(MenuItem)>
-                                                </WithStyles(ForwardRef(MenuItem))>
-                                                <WithStyles(ForwardRef(MenuItem))
-                                                  classes={
-                                                    Object {
-                                                      "root": "",
-                                                    }
-                                                  }
-                                                  key=".$.$2"
-                                                  onClick={[Function]}
-                                                  selected={false}
-                                                >
-                                                  <ForwardRef(MenuItem)
-                                                    classes={
-                                                      Object {
-                                                        "dense": "MuiMenuItem-dense",
-                                                        "gutters": "MuiMenuItem-gutters",
-                                                        "root": "MuiMenuItem-root",
-                                                        "selected": "Mui-selected",
-                                                      }
-                                                    }
-                                                    onClick={[Function]}
-                                                    selected={false}
-                                                  >
-                                                    <WithStyles(ForwardRef(ListItem))
-                                                      button={true}
-                                                      className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                      classes={
-                                                        Object {
-                                                          "dense": "MuiMenuItem-dense",
-                                                        }
-                                                      }
-                                                      component="li"
-                                                      disableGutters={false}
-                                                      onClick={[Function]}
-                                                      role="menuitem"
-                                                      selected={false}
-                                                      tabIndex={-1}
-                                                    >
-                                                      <ForwardRef(ListItem)
-                                                        button={true}
-                                                        className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                        classes={
-                                                          Object {
-                                                            "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
-                                                            "button": "MuiListItem-button",
-                                                            "container": "MuiListItem-container",
-                                                            "dense": "MuiListItem-dense MuiMenuItem-dense",
-                                                            "disabled": "Mui-disabled",
-                                                            "divider": "MuiListItem-divider",
-                                                            "focusVisible": "Mui-focusVisible",
-                                                            "gutters": "MuiListItem-gutters",
-                                                            "root": "MuiListItem-root",
-                                                            "secondaryAction": "MuiListItem-secondaryAction",
-                                                            "selected": "Mui-selected",
-                                                          }
-                                                        }
-                                                        component="li"
-                                                        disableGutters={false}
-                                                        onClick={[Function]}
-                                                        role="menuitem"
-                                                        selected={false}
-                                                        tabIndex={-1}
-                                                      >
-                                                        <WithStyles(ForwardRef(ButtonBase))
-                                                          className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                          component="li"
-                                                          disabled={false}
-                                                          focusVisibleClassName="Mui-focusVisible"
-                                                          onClick={[Function]}
-                                                          role="menuitem"
-                                                          tabIndex={-1}
-                                                        >
-                                                          <ForwardRef(ButtonBase)
-                                                            className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                            classes={
-                                                              Object {
-                                                                "disabled": "Mui-disabled",
-                                                                "focusVisible": "Mui-focusVisible",
-                                                                "root": "MuiButtonBase-root",
-                                                              }
-                                                            }
-                                                            component="li"
-                                                            disabled={false}
-                                                            focusVisibleClassName="Mui-focusVisible"
-                                                            onClick={[Function]}
-                                                            role="menuitem"
-                                                            tabIndex={-1}
-                                                          >
-                                                            <li
-                                                              aria-disabled={false}
-                                                              className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                              onBlur={[Function]}
-                                                              onClick={[Function]}
-                                                              onDragLeave={[Function]}
-                                                              onFocus={[Function]}
-                                                              onKeyDown={[Function]}
-                                                              onKeyUp={[Function]}
-                                                              onMouseDown={[Function]}
-                                                              onMouseLeave={[Function]}
-                                                              onMouseUp={[Function]}
-                                                              onTouchEnd={[Function]}
-                                                              onTouchMove={[Function]}
-                                                              onTouchStart={[Function]}
-                                                              role="menuitem"
-                                                              tabIndex={-1}
-                                                            >
-                                                              ecogesture.AIR_CONDITIONING
-                                                              <WithStyles(memo)
-                                                                center={false}
-                                                              >
-                                                                <ForwardRef(TouchRipple)
-                                                                  center={false}
-                                                                  classes={
-                                                                    Object {
-                                                                      "child": "MuiTouchRipple-child",
-                                                                      "childLeaving": "MuiTouchRipple-childLeaving",
-                                                                      "childPulsate": "MuiTouchRipple-childPulsate",
-                                                                      "ripple": "MuiTouchRipple-ripple",
-                                                                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                                      "root": "MuiTouchRipple-root",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <span
-                                                                    className="MuiTouchRipple-root"
-                                                                  >
-                                                                    <TransitionGroup
-                                                                      childFactory={[Function]}
-                                                                      component={null}
-                                                                      exit={true}
-                                                                    />
-                                                                  </span>
-                                                                </ForwardRef(TouchRipple)>
-                                                              </WithStyles(memo)>
-                                                            </li>
-                                                          </ForwardRef(ButtonBase)>
-                                                        </WithStyles(ForwardRef(ButtonBase))>
-                                                      </ForwardRef(ListItem)>
-                                                    </WithStyles(ForwardRef(ListItem))>
-                                                  </ForwardRef(MenuItem)>
-                                                </WithStyles(ForwardRef(MenuItem))>
-                                                <WithStyles(ForwardRef(MenuItem))
-                                                  classes={
-                                                    Object {
-                                                      "root": "",
-                                                    }
-                                                  }
-                                                  key=".$.$3"
-                                                  onClick={[Function]}
-                                                  selected={false}
-                                                >
-                                                  <ForwardRef(MenuItem)
-                                                    classes={
-                                                      Object {
-                                                        "dense": "MuiMenuItem-dense",
-                                                        "gutters": "MuiMenuItem-gutters",
-                                                        "root": "MuiMenuItem-root",
-                                                        "selected": "Mui-selected",
-                                                      }
-                                                    }
-                                                    onClick={[Function]}
-                                                    selected={false}
-                                                  >
-                                                    <WithStyles(ForwardRef(ListItem))
-                                                      button={true}
-                                                      className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                      classes={
-                                                        Object {
-                                                          "dense": "MuiMenuItem-dense",
-                                                        }
-                                                      }
-                                                      component="li"
-                                                      disableGutters={false}
-                                                      onClick={[Function]}
-                                                      role="menuitem"
-                                                      selected={false}
-                                                      tabIndex={-1}
-                                                    >
-                                                      <ForwardRef(ListItem)
-                                                        button={true}
-                                                        className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                        classes={
-                                                          Object {
-                                                            "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
-                                                            "button": "MuiListItem-button",
-                                                            "container": "MuiListItem-container",
-                                                            "dense": "MuiListItem-dense MuiMenuItem-dense",
-                                                            "disabled": "Mui-disabled",
-                                                            "divider": "MuiListItem-divider",
-                                                            "focusVisible": "Mui-focusVisible",
-                                                            "gutters": "MuiListItem-gutters",
-                                                            "root": "MuiListItem-root",
-                                                            "secondaryAction": "MuiListItem-secondaryAction",
-                                                            "selected": "Mui-selected",
-                                                          }
-                                                        }
-                                                        component="li"
-                                                        disableGutters={false}
-                                                        onClick={[Function]}
-                                                        role="menuitem"
-                                                        selected={false}
-                                                        tabIndex={-1}
-                                                      >
-                                                        <WithStyles(ForwardRef(ButtonBase))
-                                                          className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                          component="li"
-                                                          disabled={false}
-                                                          focusVisibleClassName="Mui-focusVisible"
-                                                          onClick={[Function]}
-                                                          role="menuitem"
-                                                          tabIndex={-1}
-                                                        >
-                                                          <ForwardRef(ButtonBase)
-                                                            className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                            classes={
-                                                              Object {
-                                                                "disabled": "Mui-disabled",
-                                                                "focusVisible": "Mui-focusVisible",
-                                                                "root": "MuiButtonBase-root",
-                                                              }
-                                                            }
-                                                            component="li"
-                                                            disabled={false}
-                                                            focusVisibleClassName="Mui-focusVisible"
-                                                            onClick={[Function]}
-                                                            role="menuitem"
-                                                            tabIndex={-1}
-                                                          >
-                                                            <li
-                                                              aria-disabled={false}
-                                                              className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                              onBlur={[Function]}
-                                                              onClick={[Function]}
-                                                              onDragLeave={[Function]}
-                                                              onFocus={[Function]}
-                                                              onKeyDown={[Function]}
-                                                              onKeyUp={[Function]}
-                                                              onMouseDown={[Function]}
-                                                              onMouseLeave={[Function]}
-                                                              onMouseUp={[Function]}
-                                                              onTouchEnd={[Function]}
-                                                              onTouchMove={[Function]}
-                                                              onTouchStart={[Function]}
-                                                              role="menuitem"
-                                                              tabIndex={-1}
-                                                            >
-                                                              ecogesture.ECS
-                                                              <WithStyles(memo)
-                                                                center={false}
-                                                              >
-                                                                <ForwardRef(TouchRipple)
-                                                                  center={false}
-                                                                  classes={
-                                                                    Object {
-                                                                      "child": "MuiTouchRipple-child",
-                                                                      "childLeaving": "MuiTouchRipple-childLeaving",
-                                                                      "childPulsate": "MuiTouchRipple-childPulsate",
-                                                                      "ripple": "MuiTouchRipple-ripple",
-                                                                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                                      "root": "MuiTouchRipple-root",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <span
-                                                                    className="MuiTouchRipple-root"
-                                                                  >
-                                                                    <TransitionGroup
-                                                                      childFactory={[Function]}
-                                                                      component={null}
-                                                                      exit={true}
-                                                                    />
-                                                                  </span>
-                                                                </ForwardRef(TouchRipple)>
-                                                              </WithStyles(memo)>
-                                                            </li>
-                                                          </ForwardRef(ButtonBase)>
-                                                        </WithStyles(ForwardRef(ButtonBase))>
-                                                      </ForwardRef(ListItem)>
-                                                    </WithStyles(ForwardRef(ListItem))>
-                                                  </ForwardRef(MenuItem)>
-                                                </WithStyles(ForwardRef(MenuItem))>
-                                                <WithStyles(ForwardRef(MenuItem))
-                                                  classes={
-                                                    Object {
-                                                      "root": "",
-                                                    }
-                                                  }
-                                                  key=".$.$4"
-                                                  onClick={[Function]}
-                                                  selected={false}
-                                                >
-                                                  <ForwardRef(MenuItem)
-                                                    classes={
-                                                      Object {
-                                                        "dense": "MuiMenuItem-dense",
-                                                        "gutters": "MuiMenuItem-gutters",
-                                                        "root": "MuiMenuItem-root",
-                                                        "selected": "Mui-selected",
-                                                      }
-                                                    }
-                                                    onClick={[Function]}
-                                                    selected={false}
-                                                  >
-                                                    <WithStyles(ForwardRef(ListItem))
-                                                      button={true}
-                                                      className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                      classes={
-                                                        Object {
-                                                          "dense": "MuiMenuItem-dense",
-                                                        }
-                                                      }
-                                                      component="li"
-                                                      disableGutters={false}
-                                                      onClick={[Function]}
-                                                      role="menuitem"
-                                                      selected={false}
-                                                      tabIndex={-1}
-                                                    >
-                                                      <ForwardRef(ListItem)
-                                                        button={true}
-                                                        className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                        classes={
-                                                          Object {
-                                                            "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
-                                                            "button": "MuiListItem-button",
-                                                            "container": "MuiListItem-container",
-                                                            "dense": "MuiListItem-dense MuiMenuItem-dense",
-                                                            "disabled": "Mui-disabled",
-                                                            "divider": "MuiListItem-divider",
-                                                            "focusVisible": "Mui-focusVisible",
-                                                            "gutters": "MuiListItem-gutters",
-                                                            "root": "MuiListItem-root",
-                                                            "secondaryAction": "MuiListItem-secondaryAction",
-                                                            "selected": "Mui-selected",
-                                                          }
-                                                        }
-                                                        component="li"
-                                                        disableGutters={false}
-                                                        onClick={[Function]}
-                                                        role="menuitem"
-                                                        selected={false}
-                                                        tabIndex={-1}
-                                                      >
-                                                        <WithStyles(ForwardRef(ButtonBase))
-                                                          className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                          component="li"
-                                                          disabled={false}
-                                                          focusVisibleClassName="Mui-focusVisible"
-                                                          onClick={[Function]}
-                                                          role="menuitem"
-                                                          tabIndex={-1}
-                                                        >
-                                                          <ForwardRef(ButtonBase)
-                                                            className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                            classes={
-                                                              Object {
-                                                                "disabled": "Mui-disabled",
-                                                                "focusVisible": "Mui-focusVisible",
-                                                                "root": "MuiButtonBase-root",
-                                                              }
-                                                            }
-                                                            component="li"
-                                                            disabled={false}
-                                                            focusVisibleClassName="Mui-focusVisible"
-                                                            onClick={[Function]}
-                                                            role="menuitem"
-                                                            tabIndex={-1}
-                                                          >
-                                                            <li
-                                                              aria-disabled={false}
-                                                              className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                              onBlur={[Function]}
-                                                              onClick={[Function]}
-                                                              onDragLeave={[Function]}
-                                                              onFocus={[Function]}
-                                                              onKeyDown={[Function]}
-                                                              onKeyUp={[Function]}
-                                                              onMouseDown={[Function]}
-                                                              onMouseLeave={[Function]}
-                                                              onMouseUp={[Function]}
-                                                              onTouchEnd={[Function]}
-                                                              onTouchMove={[Function]}
-                                                              onTouchStart={[Function]}
-                                                              role="menuitem"
-                                                              tabIndex={-1}
-                                                            >
-                                                              ecogesture.COLD_WATER
-                                                              <WithStyles(memo)
-                                                                center={false}
-                                                              >
-                                                                <ForwardRef(TouchRipple)
-                                                                  center={false}
-                                                                  classes={
-                                                                    Object {
-                                                                      "child": "MuiTouchRipple-child",
-                                                                      "childLeaving": "MuiTouchRipple-childLeaving",
-                                                                      "childPulsate": "MuiTouchRipple-childPulsate",
-                                                                      "ripple": "MuiTouchRipple-ripple",
-                                                                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                                      "root": "MuiTouchRipple-root",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <span
-                                                                    className="MuiTouchRipple-root"
-                                                                  >
-                                                                    <TransitionGroup
-                                                                      childFactory={[Function]}
-                                                                      component={null}
-                                                                      exit={true}
-                                                                    />
-                                                                  </span>
-                                                                </ForwardRef(TouchRipple)>
-                                                              </WithStyles(memo)>
-                                                            </li>
-                                                          </ForwardRef(ButtonBase)>
-                                                        </WithStyles(ForwardRef(ButtonBase))>
-                                                      </ForwardRef(ListItem)>
-                                                    </WithStyles(ForwardRef(ListItem))>
-                                                  </ForwardRef(MenuItem)>
-                                                </WithStyles(ForwardRef(MenuItem))>
-                                                <WithStyles(ForwardRef(MenuItem))
-                                                  classes={
-                                                    Object {
-                                                      "root": "",
-                                                    }
-                                                  }
-                                                  key=".$.$5"
-                                                  onClick={[Function]}
-                                                  selected={false}
-                                                >
-                                                  <ForwardRef(MenuItem)
-                                                    classes={
-                                                      Object {
-                                                        "dense": "MuiMenuItem-dense",
-                                                        "gutters": "MuiMenuItem-gutters",
-                                                        "root": "MuiMenuItem-root",
-                                                        "selected": "Mui-selected",
-                                                      }
-                                                    }
-                                                    onClick={[Function]}
-                                                    selected={false}
-                                                  >
-                                                    <WithStyles(ForwardRef(ListItem))
-                                                      button={true}
-                                                      className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                      classes={
-                                                        Object {
-                                                          "dense": "MuiMenuItem-dense",
-                                                        }
-                                                      }
-                                                      component="li"
-                                                      disableGutters={false}
-                                                      onClick={[Function]}
-                                                      role="menuitem"
-                                                      selected={false}
-                                                      tabIndex={-1}
-                                                    >
-                                                      <ForwardRef(ListItem)
-                                                        button={true}
-                                                        className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                        classes={
-                                                          Object {
-                                                            "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
-                                                            "button": "MuiListItem-button",
-                                                            "container": "MuiListItem-container",
-                                                            "dense": "MuiListItem-dense MuiMenuItem-dense",
-                                                            "disabled": "Mui-disabled",
-                                                            "divider": "MuiListItem-divider",
-                                                            "focusVisible": "Mui-focusVisible",
-                                                            "gutters": "MuiListItem-gutters",
-                                                            "root": "MuiListItem-root",
-                                                            "secondaryAction": "MuiListItem-secondaryAction",
-                                                            "selected": "Mui-selected",
-                                                          }
-                                                        }
-                                                        component="li"
-                                                        disableGutters={false}
-                                                        onClick={[Function]}
-                                                        role="menuitem"
-                                                        selected={false}
-                                                        tabIndex={-1}
-                                                      >
-                                                        <WithStyles(ForwardRef(ButtonBase))
-                                                          className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                          component="li"
-                                                          disabled={false}
-                                                          focusVisibleClassName="Mui-focusVisible"
-                                                          onClick={[Function]}
-                                                          role="menuitem"
-                                                          tabIndex={-1}
-                                                        >
-                                                          <ForwardRef(ButtonBase)
-                                                            className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                            classes={
-                                                              Object {
-                                                                "disabled": "Mui-disabled",
-                                                                "focusVisible": "Mui-focusVisible",
-                                                                "root": "MuiButtonBase-root",
-                                                              }
-                                                            }
-                                                            component="li"
-                                                            disabled={false}
-                                                            focusVisibleClassName="Mui-focusVisible"
-                                                            onClick={[Function]}
-                                                            role="menuitem"
-                                                            tabIndex={-1}
-                                                          >
-                                                            <li
-                                                              aria-disabled={false}
-                                                              className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                              onBlur={[Function]}
-                                                              onClick={[Function]}
-                                                              onDragLeave={[Function]}
-                                                              onFocus={[Function]}
-                                                              onKeyDown={[Function]}
-                                                              onKeyUp={[Function]}
-                                                              onMouseDown={[Function]}
-                                                              onMouseLeave={[Function]}
-                                                              onMouseUp={[Function]}
-                                                              onTouchEnd={[Function]}
-                                                              onTouchMove={[Function]}
-                                                              onTouchStart={[Function]}
-                                                              role="menuitem"
-                                                              tabIndex={-1}
-                                                            >
-                                                              ecogesture.ELECTRICITY_SPECIFIC
-                                                              <WithStyles(memo)
-                                                                center={false}
-                                                              >
-                                                                <ForwardRef(TouchRipple)
-                                                                  center={false}
-                                                                  classes={
-                                                                    Object {
-                                                                      "child": "MuiTouchRipple-child",
-                                                                      "childLeaving": "MuiTouchRipple-childLeaving",
-                                                                      "childPulsate": "MuiTouchRipple-childPulsate",
-                                                                      "ripple": "MuiTouchRipple-ripple",
-                                                                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                                      "root": "MuiTouchRipple-root",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <span
-                                                                    className="MuiTouchRipple-root"
-                                                                  >
-                                                                    <TransitionGroup
-                                                                      childFactory={[Function]}
-                                                                      component={null}
-                                                                      exit={true}
-                                                                    />
-                                                                  </span>
-                                                                </ForwardRef(TouchRipple)>
-                                                              </WithStyles(memo)>
-                                                            </li>
-                                                          </ForwardRef(ButtonBase)>
-                                                        </WithStyles(ForwardRef(ButtonBase))>
-                                                      </ForwardRef(ListItem)>
-                                                    </WithStyles(ForwardRef(ListItem))>
-                                                  </ForwardRef(MenuItem)>
-                                                </WithStyles(ForwardRef(MenuItem))>
-                                                <WithStyles(ForwardRef(MenuItem))
-                                                  classes={
-                                                    Object {
-                                                      "root": "",
-                                                    }
-                                                  }
-                                                  key=".$.$6"
-                                                  onClick={[Function]}
-                                                  selected={false}
-                                                >
-                                                  <ForwardRef(MenuItem)
-                                                    classes={
-                                                      Object {
-                                                        "dense": "MuiMenuItem-dense",
-                                                        "gutters": "MuiMenuItem-gutters",
-                                                        "root": "MuiMenuItem-root",
-                                                        "selected": "Mui-selected",
-                                                      }
-                                                    }
-                                                    onClick={[Function]}
-                                                    selected={false}
-                                                  >
-                                                    <WithStyles(ForwardRef(ListItem))
-                                                      button={true}
-                                                      className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                      classes={
-                                                        Object {
-                                                          "dense": "MuiMenuItem-dense",
-                                                        }
-                                                      }
-                                                      component="li"
-                                                      disableGutters={false}
-                                                      onClick={[Function]}
-                                                      role="menuitem"
-                                                      selected={false}
-                                                      tabIndex={-1}
-                                                    >
-                                                      <ForwardRef(ListItem)
-                                                        button={true}
-                                                        className="MuiMenuItem-root MuiMenuItem-gutters"
-                                                        classes={
-                                                          Object {
-                                                            "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
-                                                            "button": "MuiListItem-button",
-                                                            "container": "MuiListItem-container",
-                                                            "dense": "MuiListItem-dense MuiMenuItem-dense",
-                                                            "disabled": "Mui-disabled",
-                                                            "divider": "MuiListItem-divider",
-                                                            "focusVisible": "Mui-focusVisible",
-                                                            "gutters": "MuiListItem-gutters",
-                                                            "root": "MuiListItem-root",
-                                                            "secondaryAction": "MuiListItem-secondaryAction",
-                                                            "selected": "Mui-selected",
-                                                          }
-                                                        }
-                                                        component="li"
-                                                        disableGutters={false}
-                                                        onClick={[Function]}
-                                                        role="menuitem"
-                                                        selected={false}
-                                                        tabIndex={-1}
-                                                      >
-                                                        <WithStyles(ForwardRef(ButtonBase))
-                                                          className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                          component="li"
-                                                          disabled={false}
-                                                          focusVisibleClassName="Mui-focusVisible"
-                                                          onClick={[Function]}
-                                                          role="menuitem"
-                                                          tabIndex={-1}
-                                                        >
-                                                          <ForwardRef(ButtonBase)
-                                                            className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                            classes={
-                                                              Object {
-                                                                "disabled": "Mui-disabled",
-                                                                "focusVisible": "Mui-focusVisible",
-                                                                "root": "MuiButtonBase-root",
-                                                              }
-                                                            }
-                                                            component="li"
-                                                            disabled={false}
-                                                            focusVisibleClassName="Mui-focusVisible"
-                                                            onClick={[Function]}
-                                                            role="menuitem"
-                                                            tabIndex={-1}
-                                                          >
-                                                            <li
-                                                              aria-disabled={false}
-                                                              className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
-                                                              onBlur={[Function]}
-                                                              onClick={[Function]}
-                                                              onDragLeave={[Function]}
-                                                              onFocus={[Function]}
-                                                              onKeyDown={[Function]}
-                                                              onKeyUp={[Function]}
-                                                              onMouseDown={[Function]}
-                                                              onMouseLeave={[Function]}
-                                                              onMouseUp={[Function]}
-                                                              onTouchEnd={[Function]}
-                                                              onTouchMove={[Function]}
-                                                              onTouchStart={[Function]}
-                                                              role="menuitem"
-                                                              tabIndex={-1}
-                                                            >
-                                                              ecogesture.COOKING
-                                                              <WithStyles(memo)
-                                                                center={false}
-                                                              >
-                                                                <ForwardRef(TouchRipple)
-                                                                  center={false}
-                                                                  classes={
-                                                                    Object {
-                                                                      "child": "MuiTouchRipple-child",
-                                                                      "childLeaving": "MuiTouchRipple-childLeaving",
-                                                                      "childPulsate": "MuiTouchRipple-childPulsate",
-                                                                      "ripple": "MuiTouchRipple-ripple",
-                                                                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                                      "root": "MuiTouchRipple-root",
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <span
-                                                                    className="MuiTouchRipple-root"
-                                                                  >
-                                                                    <TransitionGroup
-                                                                      childFactory={[Function]}
-                                                                      component={null}
-                                                                      exit={true}
-                                                                    />
-                                                                  </span>
-                                                                </ForwardRef(TouchRipple)>
-                                                              </WithStyles(memo)>
-                                                            </li>
-                                                          </ForwardRef(ButtonBase)>
-                                                        </WithStyles(ForwardRef(ButtonBase))>
-                                                      </ForwardRef(ListItem)>
-                                                    </WithStyles(ForwardRef(ListItem))>
-                                                  </ForwardRef(MenuItem)>
-                                                </WithStyles(ForwardRef(MenuItem))>
-                                              </ul>
-                                            </ForwardRef(List)>
-                                          </WithStyles(ForwardRef(List))>
-                                        </ForwardRef(MenuList)>
-                                      </div>
-                                    </ForwardRef(Paper)>
-                                  </WithStyles(ForwardRef(Paper))>
-                                </Transition>
-                              </ForwardRef(Grow)>
-                              <div
-                                data-test="sentinelEnd"
-                                tabIndex={0}
-                              />
-                            </Unstable_TrapFocus>
-                          </div>
-                        </Portal>
-                      </ForwardRef(Portal)>
-                    </ForwardRef(Modal)>
-                  </ForwardRef(Popover)>
-                </WithStyles(ForwardRef(Popover))>
-              </ForwardRef(Menu)>
-            </WithStyles(ForwardRef(Menu))>
-          </div>
-          <div
-            className="ecogesture-content"
-          >
-            <mock-ecogesturecard
-              ecogesture={
-                Object {
-                  "_id": "ECOGESTURE001",
-                  "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
-                  "_type": "com.grandlyon.ecolyo.ecogesture",
-                  "action": false,
-                  "actionDuration": 3,
-                  "actionName": null,
-                  "difficulty": 1,
-                  "doing": false,
-                  "efficiency": 4,
-                  "equipment": false,
-                  "equipmentInstallation": true,
-                  "equipmentType": Array [],
-                  "fluidTypes": Array [
-                    0,
-                    2,
-                  ],
-                  "id": "ECOGESTURE001",
-                  "impactLevel": 8,
-                  "investment": null,
-                  "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
-                  "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
-                  "objective": false,
-                  "room": Array [
-                    0,
-                  ],
-                  "season": "Hiver",
-                  "shortName": "Bonhomme de neige",
-                  "usage": 1,
-                  "viewedInSelection": false,
-                }
-              }
-              key="ECOGESTURE001"
-            />
-            <mock-ecogesturecard
-              ecogesture={
-                Object {
-                  "_id": "ECOGESTURE002",
-                  "_rev": "1-ef7ddd778254e3b7d331a88fd17f606d",
-                  "_type": "com.grandlyon.ecolyo.ecogesture",
-                  "action": false,
-                  "actionDuration": 3,
-                  "actionName": null,
-                  "difficulty": 1,
-                  "doing": false,
-                  "efficiency": 4,
-                  "equipment": true,
-                  "equipmentInstallation": true,
-                  "equipmentType": Array [
-                    "AIR_CONDITIONING",
-                  ],
-                  "fluidTypes": Array [
-                    0,
-                  ],
-                  "id": "ECOGESTURE002",
-                  "impactLevel": 8,
-                  "investment": null,
-                  "longDescription": "Cela permet de garder la fraîcheur à l'intérieur. Le climatiseur n'est pas là pour refroidir la rue mais bien la pièce.",
-                  "longName": "Je ferme mes fenêtres quand la climatisation est en marche",
-                  "objective": false,
-                  "room": Array [
-                    0,
-                  ],
-                  "season": "Eté",
-                  "shortName": "Coup de vent",
-                  "usage": 2,
-                  "viewedInSelection": false,
-                }
-              }
-              key="ECOGESTURE002"
+            <use
+              xlink:href="#test-file-stub"
             />
-            <mock-ecogesturecard
-              ecogesture={
-                Object {
-                  "_id": "ECOGESTURE0013",
-                  "_rev": "1-0b2761dd4aef79556c7aef144060fde6",
-                  "_type": "com.grandlyon.ecolyo.ecogesture",
-                  "action": true,
-                  "actionDuration": 3,
-                  "actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.",
-                  "difficulty": 1,
-                  "doing": false,
-                  "efficiency": 1,
-                  "equipment": false,
-                  "equipmentInstallation": true,
-                  "equipmentType": Array [
-                    "WASHING_MACHINE",
-                    "DISHWASHER",
-                  ],
-                  "fluidTypes": Array [
-                    1,
-                  ],
-                  "id": "ECOGESTURE0013",
-                  "impactLevel": 2,
-                  "investment": null,
-                  "longDescription": "Utilisez la température la plus basse possible : de nombreux produits nettoyants sont efficaces à froid et un cycle à 90 °C consomme 3 fois plus d'énergie qu'un lavage à 40 °C. En effet, 80 % de l'énergie consommée par un lave-linge ou un lave-vaisselle sert au chauffage de l'eau ! Que ce soit pour la vaisselle ou le linge, les programmes de lavage intensif consomment jusqu'à 40 % de plus. Si possible, rincez à l'eau froide : la température de rinçage n'a pas d'effet sur le nettoyage du linge ou de la vaisselle. Attention cependant avec les tissus qui peuvent rétrécir : ce qui fait rétrécir, c'est le passage d'une température à une autre. Mieux vaut alors faire le cycle complet à l'eau froide pour les premiers lavages de tissus sensibles. Pour du linge ou de la vaisselle peu sales, utilisez la touche \\"Eco\\". Elle réduit la température de lavage et allonge sa durée (c’est le chauffage de l’eau qui consomme le plus). Vous économiserez jusqu’à 45 % par rapport aux cycles longs. Néanmoins, pour vous prémunir contre les bouchons de graisse dans les canalisations, faites quand même un cycle à chaud une fois par mois environ.",
-                  "longName": "J’utilise le plus souvent les cycles courts à basse température pour laver le linge et la vaisselle.",
-                  "objective": false,
-                  "room": Array [
-                    1,
-                    3,
-                    2,
-                  ],
-                  "season": "Sans saison",
-                  "shortName": "Accelerateur de particules",
-                  "usage": 5,
-                  "viewedInSelection": false,
-                }
-              }
-              key="ECOGESTURE0013"
-            />
-            <WithStyles(ForwardRef(Button))
-              className="btnSecondary"
-              onClick={[MockFunction]}
-            >
-              <ForwardRef(Button)
-                className="btnSecondary"
-                classes={
-                  Object {
-                    "colorInherit": "MuiButton-colorInherit",
-                    "contained": "MuiButton-contained",
-                    "containedPrimary": "MuiButton-containedPrimary",
-                    "containedSecondary": "MuiButton-containedSecondary",
-                    "containedSizeLarge": "MuiButton-containedSizeLarge",
-                    "containedSizeSmall": "MuiButton-containedSizeSmall",
-                    "disableElevation": "MuiButton-disableElevation",
-                    "disabled": "Mui-disabled",
-                    "endIcon": "MuiButton-endIcon",
-                    "focusVisible": "Mui-focusVisible",
-                    "fullWidth": "MuiButton-fullWidth",
-                    "iconSizeLarge": "MuiButton-iconSizeLarge",
-                    "iconSizeMedium": "MuiButton-iconSizeMedium",
-                    "iconSizeSmall": "MuiButton-iconSizeSmall",
-                    "label": "MuiButton-label",
-                    "outlined": "MuiButton-outlined",
-                    "outlinedPrimary": "MuiButton-outlinedPrimary",
-                    "outlinedSecondary": "MuiButton-outlinedSecondary",
-                    "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                    "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                    "root": "MuiButton-root",
-                    "sizeLarge": "MuiButton-sizeLarge",
-                    "sizeSmall": "MuiButton-sizeSmall",
-                    "startIcon": "MuiButton-startIcon",
-                    "text": "MuiButton-text",
-                    "textPrimary": "MuiButton-textPrimary",
-                    "textSecondary": "MuiButton-textSecondary",
-                    "textSizeLarge": "MuiButton-textSizeLarge",
-                    "textSizeSmall": "MuiButton-textSizeSmall",
-                  }
-                }
-                onClick={[MockFunction]}
-              >
-                <WithStyles(ForwardRef(ButtonBase))
-                  className="MuiButton-root MuiButton-text btnSecondary"
-                  component="button"
-                  disabled={false}
-                  focusRipple={true}
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[MockFunction]}
-                  type="button"
-                >
-                  <ForwardRef(ButtonBase)
-                    className="MuiButton-root MuiButton-text btnSecondary"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "focusVisible": "Mui-focusVisible",
-                        "root": "MuiButtonBase-root",
-                      }
-                    }
-                    component="button"
-                    disabled={false}
-                    focusRipple={true}
-                    focusVisibleClassName="Mui-focusVisible"
-                    onClick={[MockFunction]}
-                    type="button"
-                  >
-                    <button
-                      className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                      disabled={false}
-                      onBlur={[Function]}
-                      onClick={[MockFunction]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={0}
-                      type="button"
-                    >
-                      <span
-                        className="MuiButton-label"
-                      >
-                        ecogesture.reinit
-                      </span>
-                      <WithStyles(memo)
-                        center={false}
-                      >
-                        <ForwardRef(TouchRipple)
-                          center={false}
-                          classes={
-                            Object {
-                              "child": "MuiTouchRipple-child",
-                              "childLeaving": "MuiTouchRipple-childLeaving",
-                              "childPulsate": "MuiTouchRipple-childPulsate",
-                              "ripple": "MuiTouchRipple-ripple",
-                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                              "root": "MuiTouchRipple-root",
-                            }
-                          }
-                        >
-                          <span
-                            className="MuiTouchRipple-root"
-                          >
-                            <TransitionGroup
-                              childFactory={[Function]}
-                              component={null}
-                              exit={true}
-                            />
-                          </span>
-                        </ForwardRef(TouchRipple)>
-                      </WithStyles(memo)>
-                    </button>
-                  </ForwardRef(ButtonBase)>
-                </WithStyles(ForwardRef(ButtonBase))>
-              </ForwardRef(Button)>
-            </WithStyles(ForwardRef(Button))>
-          </div>
-        </div>
-      </EcogestureList>
-    </Router>
-  </BrowserRouter>
-</Provider>
+          </svg>
+          <span
+            class=""
+          >
+            ecogesture.MENU_TITLE
+          </span>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+    <div
+      class="ecogesture-content"
+    >
+      <mock-ecogesturecard
+        ecogesture="[object Object]"
+      />
+      <mock-ecogesturecard
+        ecogesture="[object Object]"
+      />
+      <mock-ecogesturecard
+        ecogesture="[object Object]"
+      />
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          ecogesture.reinit
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </div>
+</div>
 `;
diff --git a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
index 2fda3b550431c1b0b25d65a40c8bf539eb4e9ecb..60e0cfa1fac12399a020142ee9496d870dd7c837 100644
--- a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
+++ b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import EcogestureNotFound from './EcogestureNotFound'
 
@@ -16,11 +16,10 @@ jest.mock('components/Content/Content', () => 'mock-content')
 
 describe('EcogestureNotFound component', () => {
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <EcogestureNotFound text="test" returnPage="ecogestures" />
     )
-
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
   it('should click on button and be redirected', () => {
     const wrapper = mount(
diff --git a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
index 3c2efdfc0cee38ccf7f38a71f72db085f1ff45f7..a991c215c20992f6faf548741dfa93c8fe97e850 100644
--- a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
@@ -1,189 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureNotFound component should be rendered correctly 1`] = `
-<EcogestureNotFound
-  returnPage="ecogestures"
-  text="test"
->
+<div>
   <mock-cozybar
-    titleKey="error_page.main"
+    titlekey="error_page.main"
   />
   <mock-header
-    desktopTitleKey="error_page.main"
-    setHeaderHeight={[Function]}
+    desktoptitlekey="error_page.main"
   />
   <mock-content
-    heightOffset={0}
+    heightoffset="0"
   >
     <div
-      className="error-container"
+      class="error-container"
     >
-      <StyledIcon
-        className="profile-icon"
-        icon="test-file-stub"
-        size={250}
+      <svg
+        aria-hidden="true"
+        class="profile-icon styles__icon___23x3R"
+        height="250"
+        width="250"
       >
-        <Icon
-          aria-hidden={true}
-          className="profile-icon"
-          icon="test-file-stub"
-          size={250}
-          spin={false}
-        >
-          <Component
-            aria-hidden={true}
-            className="profile-icon styles__icon___23x3R"
-            height={250}
-            style={Object {}}
-            width={250}
-          >
-            <svg
-              aria-hidden={true}
-              className="profile-icon styles__icon___23x3R"
-              height={250}
-              style={Object {}}
-              width={250}
-            >
-              <use
-                xlinkHref="#test-file-stub"
-              />
-            </svg>
-          </Component>
-        </Icon>
-      </StyledIcon>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
       <div
-        className="text-18-bold head"
+        class="text-18-bold head"
       >
         test
       </div>
-      <WithStyles(ForwardRef(Button))
+      <button
         aria-label="error_page.back"
-        className="btnPrimary"
-        onClick={[Function]}
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+        tabindex="0"
+        type="button"
       >
-        <ForwardRef(Button)
-          aria-label="error_page.back"
-          className="btnPrimary"
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[Function]}
+        <span
+          class="MuiButton-label"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            aria-label="error_page.back"
-            className="MuiButton-root MuiButton-text btnPrimary"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
-          >
-            <ForwardRef(ButtonBase)
-              aria-label="error_page.back"
-              className="MuiButton-root MuiButton-text btnPrimary"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <button
-                aria-label="error_page.back"
-                className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label"
-                >
-                  error_page.back
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
+          error_page.back
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
   </mock-content>
-</EcogestureNotFound>
+</div>
 `;
diff --git a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx
index 5f9148b0379bd6bb81982b521e23bd2b3e489304..a37d0c48f64a214b5eddc8553bfaa81331dc50c6 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx
@@ -1,17 +1,16 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
 import React from 'react'
 import EcogestureReinitModal from './EcogestureReinitModal'
 
 describe('EcogestureReinitModal component', () => {
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <EcogestureReinitModal
         open={true}
         handleCloseClick={jest.fn()}
         handleLaunchReinit={jest.fn()}
       />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 })
diff --git a/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
index a34f440cd19320c31a7f4fe466f497b4b7f23970..18d92802a010d3557aee5ec1a19713867e41f0d7 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
@@ -1,1186 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
-<EcogestureReinitModal
-  handleCloseClick={[MockFunction]}
-  handleLaunchReinit={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        feedback.accessibility.window_title
-                      </div>
-                      <button
-                        aria-label="feedback.accessibility.button_close"
-                        class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label"
-                        >
-                          <svg
-                            class="styles__icon___23x3R"
-                            height="16"
-                            width="16"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                      <div
-                        class="eg-reinit-modal"
-                      >
-                        <svg
-                          class="styles__icon___23x3R"
-                          height="63"
-                          width="63"
-                        >
-                          <use
-                            xlink:href="#test-file-stub"
-                          />
-                        </svg>
-                        <div
-                          class="title text-20-bold"
-                        >
-                          ecogesture.reinitModal.title_part1
-                          <span
-                            class="warn-title"
-                          >
-                            ecogesture.reinitModal.title_part2
-                          </span>
-                          ecogesture.reinitModal.title_part3
-                          <span
-                            class="warn-title"
-                          >
-                            ecogesture.reinitModal.title_part4
-                          </span>
-                          ecogesture.reinitModal.title_part5
-                          <span
-                            class="warn-title"
-                          >
-                            ecogesture.reinitModal.title_part6
-                          </span>
-                        </div>
-                        <div
-                          class="text-16-normal text"
-                        >
-                          ecogesture.reinitModal.text1
-                        </div>
-                        <div
-                          class="text-16-bold text"
-                        >
-                          ecogesture.reinitModal.text2
-                        </div>
-                        <div
-                          class="buttons-container"
-                        >
-                          <button
-                            aria-label="ecogesture.reinitModal.btn1"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label"
-                            >
-                              ecogesture.reinitModal.btn1
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                          <button
-                            aria-label="ecogesture.reinitModal.btn2"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label"
-                            >
-                              ecogesture.reinitModal.btn2
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          feedback.accessibility.window_title
+        </div>
+        <button
+          aria-label="feedback.accessibility.button_close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="eg-reinit-modal"
+        >
+          <svg
+            class="styles__icon___23x3R"
+            height="63"
+            width="63"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <div
+            class="title text-20-bold"
+          >
+            ecogesture.reinitModal.title_part1
+            <span
+              class="warn-title"
+            >
+              ecogesture.reinitModal.title_part2
+            </span>
+            ecogesture.reinitModal.title_part3
+            <span
+              class="warn-title"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
+              ecogesture.reinitModal.title_part4
+            </span>
+            ecogesture.reinitModal.title_part5
+            <span
+              class="warn-title"
+            >
+              ecogesture.reinitModal.title_part6
+            </span>
+          </div>
+          <div
+            class="text-16-normal text"
+          >
+            ecogesture.reinitModal.text1
+          </div>
+          <div
+            class="text-16-bold text"
+          >
+            ecogesture.reinitModal.text2
+          </div>
+          <div
+            class="buttons-container"
+          >
+            <button
+              aria-label="ecogesture.reinitModal.btn1"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
               >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
+                ecogesture.reinitModal.btn1
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+            <button
+              aria-label="ecogesture.reinitModal.btn2"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
               >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              feedback.accessibility.window_title
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-label="feedback.accessibility.button_close"
-                              className="modal-paper-close-button"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-label="feedback.accessibility.button_close"
-                                className="modal-paper-close-button"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="feedback.accessibility.button_close"
-                                  centerRipple={true}
-                                  className="MuiIconButton-root modal-paper-close-button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="feedback.accessibility.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <button
-                                      aria-label="feedback.accessibility.button_close"
-                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <Icon
-                                          icon="test-file-stub"
-                                          size={16}
-                                          spin={false}
-                                        >
-                                          <Component
-                                            className="styles__icon___23x3R"
-                                            height={16}
-                                            style={Object {}}
-                                            width={16}
-                                          >
-                                            <svg
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <use
-                                                xlinkHref="#test-file-stub"
-                                              />
-                                            </svg>
-                                          </Component>
-                                        </Icon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                            <div
-                              className="eg-reinit-modal"
-                            >
-                              <Icon
-                                icon="test-file-stub"
-                                size={63}
-                                spin={false}
-                              >
-                                <Component
-                                  className="styles__icon___23x3R"
-                                  height={63}
-                                  style={Object {}}
-                                  width={63}
-                                >
-                                  <svg
-                                    className="styles__icon___23x3R"
-                                    height={63}
-                                    style={Object {}}
-                                    width={63}
-                                  >
-                                    <use
-                                      xlinkHref="#test-file-stub"
-                                    />
-                                  </svg>
-                                </Component>
-                              </Icon>
-                              <div
-                                className="title text-20-bold"
-                              >
-                                ecogesture.reinitModal.title_part1
-                                <span
-                                  className="warn-title"
-                                >
-                                  ecogesture.reinitModal.title_part2
-                                </span>
-                                ecogesture.reinitModal.title_part3
-                                <span
-                                  className="warn-title"
-                                >
-                                  ecogesture.reinitModal.title_part4
-                                </span>
-                                ecogesture.reinitModal.title_part5
-                                <span
-                                  className="warn-title"
-                                >
-                                  ecogesture.reinitModal.title_part6
-                                </span>
-                              </div>
-                              <div
-                                className="text-16-normal text"
-                              >
-                                ecogesture.reinitModal.text1
-                              </div>
-                              <div
-                                className="text-16-bold text"
-                              >
-                                ecogesture.reinitModal.text2
-                              </div>
-                              <div
-                                className="buttons-container"
-                              >
-                                <WithStyles(ForwardRef(Button))
-                                  aria-label="ecogesture.reinitModal.btn1"
-                                  className="btnSecondary"
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(Button)
-                                    aria-label="ecogesture.reinitModal.btn1"
-                                    className="btnSecondary"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiButton-colorInherit",
-                                        "contained": "MuiButton-contained",
-                                        "containedPrimary": "MuiButton-containedPrimary",
-                                        "containedSecondary": "MuiButton-containedSecondary",
-                                        "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                        "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                        "disableElevation": "MuiButton-disableElevation",
-                                        "disabled": "Mui-disabled",
-                                        "endIcon": "MuiButton-endIcon",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "fullWidth": "MuiButton-fullWidth",
-                                        "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                        "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                        "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                        "label": "MuiButton-label",
-                                        "outlined": "MuiButton-outlined",
-                                        "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                        "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                        "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                        "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                        "root": "MuiButton-root",
-                                        "sizeLarge": "MuiButton-sizeLarge",
-                                        "sizeSmall": "MuiButton-sizeSmall",
-                                        "startIcon": "MuiButton-startIcon",
-                                        "text": "MuiButton-text",
-                                        "textPrimary": "MuiButton-textPrimary",
-                                        "textSecondary": "MuiButton-textSecondary",
-                                        "textSizeLarge": "MuiButton-textSizeLarge",
-                                        "textSizeSmall": "MuiButton-textSizeSmall",
-                                      }
-                                    }
-                                    onClick={[MockFunction]}
-                                  >
-                                    <WithStyles(ForwardRef(ButtonBase))
-                                      aria-label="ecogesture.reinitModal.btn1"
-                                      className="MuiButton-root MuiButton-text btnSecondary"
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <ForwardRef(ButtonBase)
-                                        aria-label="ecogesture.reinitModal.btn1"
-                                        className="MuiButton-root MuiButton-text btnSecondary"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <button
-                                          aria-label="ecogesture.reinitModal.btn1"
-                                          className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
-                                        >
-                                          <span
-                                            className="MuiButton-label"
-                                          >
-                                            ecogesture.reinitModal.btn1
-                                          </span>
-                                          <WithStyles(memo)
-                                            center={false}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={false}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(Button)>
-                                </WithStyles(ForwardRef(Button))>
-                                <WithStyles(ForwardRef(Button))
-                                  aria-label="ecogesture.reinitModal.btn2"
-                                  className="btnPrimary"
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(Button)
-                                    aria-label="ecogesture.reinitModal.btn2"
-                                    className="btnPrimary"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiButton-colorInherit",
-                                        "contained": "MuiButton-contained",
-                                        "containedPrimary": "MuiButton-containedPrimary",
-                                        "containedSecondary": "MuiButton-containedSecondary",
-                                        "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                        "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                        "disableElevation": "MuiButton-disableElevation",
-                                        "disabled": "Mui-disabled",
-                                        "endIcon": "MuiButton-endIcon",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "fullWidth": "MuiButton-fullWidth",
-                                        "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                        "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                        "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                        "label": "MuiButton-label",
-                                        "outlined": "MuiButton-outlined",
-                                        "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                        "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                        "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                        "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                        "root": "MuiButton-root",
-                                        "sizeLarge": "MuiButton-sizeLarge",
-                                        "sizeSmall": "MuiButton-sizeSmall",
-                                        "startIcon": "MuiButton-startIcon",
-                                        "text": "MuiButton-text",
-                                        "textPrimary": "MuiButton-textPrimary",
-                                        "textSecondary": "MuiButton-textSecondary",
-                                        "textSizeLarge": "MuiButton-textSizeLarge",
-                                        "textSizeSmall": "MuiButton-textSizeSmall",
-                                      }
-                                    }
-                                    onClick={[MockFunction]}
-                                  >
-                                    <WithStyles(ForwardRef(ButtonBase))
-                                      aria-label="ecogesture.reinitModal.btn2"
-                                      className="MuiButton-root MuiButton-text btnPrimary"
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <ForwardRef(ButtonBase)
-                                        aria-label="ecogesture.reinitModal.btn2"
-                                        className="MuiButton-root MuiButton-text btnPrimary"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <button
-                                          aria-label="ecogesture.reinitModal.btn2"
-                                          className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
-                                        >
-                                          <span
-                                            className="MuiButton-label"
-                                          >
-                                            ecogesture.reinitModal.btn2
-                                          </span>
-                                          <WithStyles(memo)
-                                            center={false}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={false}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(Button)>
-                                </WithStyles(ForwardRef(Button))>
-                              </div>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
-            </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</EcogestureReinitModal>
+                ecogesture.reinitModal.btn2
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Ecogesture/EcogestureTabsView.spec.tsx b/src/components/Ecogesture/EcogestureTabsView.spec.tsx
index f9eb724daac10611df25dc09f03a69a68ea564eb..4f90bd9c3dc01bab95999eebcce39cf63909699a 100644
--- a/src/components/Ecogesture/EcogestureTabsView.spec.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.spec.tsx
@@ -1,7 +1,7 @@
 import { IconButton, Tab } from '@material-ui/core'
+import { render, screen, waitFor } from '@testing-library/react'
 import EcogestureTabsView from 'components/Ecogesture/EcogestureTabsView'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as profileActions from 'store/profile/profile.slice'
@@ -50,15 +50,14 @@ describe('EcogestureView component', () => {
   const store = createMockEcolyoStore()
 
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureTabsView />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-
-    expect(wrapper.find(Tab).length).toBe(3)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    await waitFor(() => null, { container })
+    expect(screen.getAllByRole('button').length).toBe(3)
+    expect(container).toMatchSnapshot()
   })
 
   it('should render ecogesture init modal', async () => {
diff --git a/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx b/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx
index 0ac6b73e5884385bfddb078699cf61d6c1a1de39..17445f0947099ba9f3abdc61e6da0e97300844ac 100644
--- a/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx
+++ b/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx
@@ -1,11 +1,10 @@
+import { render } from '@testing-library/react'
 import EfficiencyRating from 'components/Ecogesture/EfficiencyRating/EfficiencyRating'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 
 describe('EfficiencyRating component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(<EfficiencyRating result={3} />)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    const { container } = render(<EfficiencyRating result={3} />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap b/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
index 9b1d8405abc6fc7a30d13bd2375d2472bdd79414..8ffd02507109a5c68be5b8335ec138d4feb61564 100644
--- a/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
+++ b/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
@@ -1,182 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EfficiencyRating component should be rendered correctly 1`] = `
-<EfficiencyRating
-  result={3}
->
+<div>
   <div
-    className="thunder"
+    class="thunder"
   >
-    <StyledIcon
-      className="star"
-      icon="test-file-stub"
-      key="1"
-      size={15}
+    <svg
+      aria-hidden="true"
+      class="star styles__icon___23x3R"
+      height="15"
+      width="15"
     >
-      <Icon
-        aria-hidden={true}
-        className="star"
-        icon="test-file-stub"
-        size={15}
-        spin={false}
-      >
-        <Component
-          aria-hidden={true}
-          className="star styles__icon___23x3R"
-          height={15}
-          style={Object {}}
-          width={15}
-        >
-          <svg
-            aria-hidden={true}
-            className="star styles__icon___23x3R"
-            height={15}
-            style={Object {}}
-            width={15}
-          >
-            <use
-              xlinkHref="#test-file-stub"
-            />
-          </svg>
-        </Component>
-      </Icon>
-    </StyledIcon>
-    <StyledIcon
-      className="star"
-      icon="test-file-stub"
-      key="2"
-      size={15}
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      class="star styles__icon___23x3R"
+      height="15"
+      width="15"
     >
-      <Icon
-        aria-hidden={true}
-        className="star"
-        icon="test-file-stub"
-        size={15}
-        spin={false}
-      >
-        <Component
-          aria-hidden={true}
-          className="star styles__icon___23x3R"
-          height={15}
-          style={Object {}}
-          width={15}
-        >
-          <svg
-            aria-hidden={true}
-            className="star styles__icon___23x3R"
-            height={15}
-            style={Object {}}
-            width={15}
-          >
-            <use
-              xlinkHref="#test-file-stub"
-            />
-          </svg>
-        </Component>
-      </Icon>
-    </StyledIcon>
-    <StyledIcon
-      className="star"
-      icon="test-file-stub"
-      key="3"
-      size={15}
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      class="star styles__icon___23x3R"
+      height="15"
+      width="15"
     >
-      <Icon
-        aria-hidden={true}
-        className="star"
-        icon="test-file-stub"
-        size={15}
-        spin={false}
-      >
-        <Component
-          aria-hidden={true}
-          className="star styles__icon___23x3R"
-          height={15}
-          style={Object {}}
-          width={15}
-        >
-          <svg
-            aria-hidden={true}
-            className="star styles__icon___23x3R"
-            height={15}
-            style={Object {}}
-            width={15}
-          >
-            <use
-              xlinkHref="#test-file-stub"
-            />
-          </svg>
-        </Component>
-      </Icon>
-    </StyledIcon>
-    <StyledIcon
-      className="star"
-      icon="test-file-stub"
-      key="4"
-      size={15}
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      class="star styles__icon___23x3R"
+      height="15"
+      width="15"
     >
-      <Icon
-        aria-hidden={true}
-        className="star"
-        icon="test-file-stub"
-        size={15}
-        spin={false}
-      >
-        <Component
-          aria-hidden={true}
-          className="star styles__icon___23x3R"
-          height={15}
-          style={Object {}}
-          width={15}
-        >
-          <svg
-            aria-hidden={true}
-            className="star styles__icon___23x3R"
-            height={15}
-            style={Object {}}
-            width={15}
-          >
-            <use
-              xlinkHref="#test-file-stub"
-            />
-          </svg>
-        </Component>
-      </Icon>
-    </StyledIcon>
-    <StyledIcon
-      className="star"
-      icon="test-file-stub"
-      key="5"
-      size={15}
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
+    <svg
+      aria-hidden="true"
+      class="star styles__icon___23x3R"
+      height="15"
+      width="15"
     >
-      <Icon
-        aria-hidden={true}
-        className="star"
-        icon="test-file-stub"
-        size={15}
-        spin={false}
-      >
-        <Component
-          aria-hidden={true}
-          className="star styles__icon___23x3R"
-          height={15}
-          style={Object {}}
-          width={15}
-        >
-          <svg
-            aria-hidden={true}
-            className="star styles__icon___23x3R"
-            height={15}
-            style={Object {}}
-            width={15}
-          >
-            <use
-              xlinkHref="#test-file-stub"
-            />
-          </svg>
-        </Component>
-      </Icon>
-    </StyledIcon>
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
   </div>
-</EfficiencyRating>
+</div>
 `;
diff --git a/src/components/Ecogesture/SingleEcogestureView.spec.tsx b/src/components/Ecogesture/SingleEcogestureView.spec.tsx
index 6f96223ab2bd6d147f16ddb66bb582b7065916d3..a2ec8525df0ca5410f63b68d8e0ec084b25277c6 100644
--- a/src/components/Ecogesture/SingleEcogestureView.spec.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.spec.tsx
@@ -1,5 +1,5 @@
+import { render, waitFor } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
@@ -28,13 +28,13 @@ describe('SingleEcogesture component', () => {
   const store = createMockEcolyoStore()
   it('should be rendered correctly', async () => {
     mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]])
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <SingleEcogestureView />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    await waitFor(() => null, { container })
+    expect(container).toMatchSnapshot()
   })
 
   it('should change doing status', async () => {
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index ba9558c108d3adb28241bdad7ffd4fecbf231eeb..e8cc3b0ab9978a7ae15890857254b607675de568 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -1,2356 +1,241 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureView component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
+<div
+  aria-hidden="true"
 >
-  <EcogestureTabsView>
-    <mock-cozybar
-      titleKey="common.title_ecogestures"
-    />
-    <mock-header
-      desktopTitleKey="common.title_ecogestures"
-      setHeaderHeight={[Function]}
+  <mock-cozybar
+    titlekey="common.title_ecogestures"
+  />
+  <mock-header
+    desktoptitlekey="common.title_ecogestures"
+  >
+    <div
+      class="MuiTabs-root ecogestures-tabs"
     >
-      <WithStyles(ForwardRef(Tabs))
-        TabIndicatorProps={
-          Object {
-            "className": "indicator-tab",
-          }
-        }
-        aria-label="ecogestures-tabs"
-        centered={true}
-        className="ecogestures-tabs"
-        onChange={[Function]}
-        value={0}
+      <div
+        class="MuiTabs-scroller MuiTabs-fixed"
+        style="overflow: hidden;"
       >
-        <ForwardRef(Tabs)
-          TabIndicatorProps={
-            Object {
-              "className": "indicator-tab",
-            }
-          }
+        <div
           aria-label="ecogestures-tabs"
-          centered={true}
-          className="ecogestures-tabs"
-          classes={
-            Object {
-              "centered": "MuiTabs-centered",
-              "fixed": "MuiTabs-fixed",
-              "flexContainer": "MuiTabs-flexContainer",
-              "flexContainerVertical": "MuiTabs-flexContainerVertical",
-              "indicator": "MuiTabs-indicator",
-              "root": "MuiTabs-root",
-              "scrollButtons": "MuiTabs-scrollButtons",
-              "scrollButtonsDesktop": "MuiTabs-scrollButtonsDesktop",
-              "scrollable": "MuiTabs-scrollable",
-              "scroller": "MuiTabs-scroller",
-              "vertical": "MuiTabs-vertical",
-            }
-          }
-          onChange={[Function]}
-          value={0}
+          class="MuiTabs-flexContainer MuiTabs-centered"
+          role="tablist"
         >
-          <div
-            className="MuiTabs-root ecogestures-tabs"
+          <button
+            aria-controls="simple-tabpanel-0"
+            aria-selected="true"
+            class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
+            id="simple-tab-0"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <div
-              className="MuiTabs-scroller MuiTabs-fixed"
-              onScroll={[Function]}
-              style={
-                Object {
-                  "marginBottom": null,
-                  "overflow": "hidden",
-                }
-              }
+            <span
+              class="MuiTab-wrapper"
             >
-              <div
-                aria-label="ecogestures-tabs"
-                className="MuiTabs-flexContainer MuiTabs-centered"
-                onKeyDown={[Function]}
-                role="tablist"
-              >
-                <WithStyles(ForwardRef(Tab))
-                  aria-controls="simple-tabpanel-0"
-                  className="single-tab active"
-                  fullWidth={false}
-                  id="simple-tab-0"
-                  indicator={false}
-                  key=".0"
-                  label={
-                    <React.Fragment>
-                      ecogesture.title_tab_0
-                      <br />
-                      (0)
-                    </React.Fragment>
-                  }
-                  onChange={[Function]}
-                  selected={true}
-                  tabIndex={0}
-                  textColor="inherit"
-                  value={0}
-                >
-                  <ForwardRef(Tab)
-                    aria-controls="simple-tabpanel-0"
-                    className="single-tab active"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "fullWidth": "MuiTab-fullWidth",
-                        "labelIcon": "MuiTab-labelIcon",
-                        "root": "MuiTab-root",
-                        "selected": "Mui-selected",
-                        "textColorInherit": "MuiTab-textColorInherit",
-                        "textColorPrimary": "MuiTab-textColorPrimary",
-                        "textColorSecondary": "MuiTab-textColorSecondary",
-                        "wrapped": "MuiTab-wrapped",
-                        "wrapper": "MuiTab-wrapper",
-                      }
-                    }
-                    fullWidth={false}
-                    id="simple-tab-0"
-                    indicator={false}
-                    label={
-                      <React.Fragment>
-                        ecogesture.title_tab_0
-                        <br />
-                        (0)
-                      </React.Fragment>
-                    }
-                    onChange={[Function]}
-                    selected={true}
-                    tabIndex={0}
-                    textColor="inherit"
-                    value={0}
-                  >
-                    <WithStyles(ForwardRef(ButtonBase))
-                      aria-controls="simple-tabpanel-0"
-                      aria-selected={true}
-                      className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
-                      disabled={false}
-                      focusRipple={true}
-                      id="simple-tab-0"
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      role="tab"
-                      tabIndex={0}
-                    >
-                      <ForwardRef(ButtonBase)
-                        aria-controls="simple-tabpanel-0"
-                        aria-selected={true}
-                        className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
-                        classes={
-                          Object {
-                            "disabled": "Mui-disabled",
-                            "focusVisible": "Mui-focusVisible",
-                            "root": "MuiButtonBase-root",
-                          }
-                        }
-                        disabled={false}
-                        focusRipple={true}
-                        id="simple-tab-0"
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        role="tab"
-                        tabIndex={0}
-                      >
-                        <button
-                          aria-controls="simple-tabpanel-0"
-                          aria-selected={true}
-                          className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
-                          disabled={false}
-                          id="simple-tab-0"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onDragLeave={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                          onTouchEnd={[Function]}
-                          onTouchMove={[Function]}
-                          onTouchStart={[Function]}
-                          role="tab"
-                          tabIndex={0}
-                          type="button"
-                        >
-                          <span
-                            className="MuiTab-wrapper"
-                          >
-                            ecogesture.title_tab_0
-                            <br />
-                            (0)
-                          </span>
-                          <WithStyles(memo)
-                            center={false}
-                          >
-                            <ForwardRef(TouchRipple)
-                              center={false}
-                              classes={
-                                Object {
-                                  "child": "MuiTouchRipple-child",
-                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                  "ripple": "MuiTouchRipple-ripple",
-                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                  "root": "MuiTouchRipple-root",
-                                }
-                              }
-                            >
-                              <span
-                                className="MuiTouchRipple-root"
-                              >
-                                <TransitionGroup
-                                  childFactory={[Function]}
-                                  component={null}
-                                  exit={true}
-                                />
-                              </span>
-                            </ForwardRef(TouchRipple)>
-                          </WithStyles(memo)>
-                        </button>
-                      </ForwardRef(ButtonBase)>
-                    </WithStyles(ForwardRef(ButtonBase))>
-                  </ForwardRef(Tab)>
-                </WithStyles(ForwardRef(Tab))>
-                <WithStyles(ForwardRef(Tab))
-                  aria-controls="simple-tabpanel-1"
-                  className="single-tab"
-                  fullWidth={false}
-                  id="simple-tab-1"
-                  indicator={false}
-                  key=".1"
-                  label={
-                    <React.Fragment>
-                      ecogesture.title_tab_1
-                      <br />
-                      (0)
-                    </React.Fragment>
-                  }
-                  onChange={[Function]}
-                  selected={false}
-                  tabIndex={0}
-                  textColor="inherit"
-                  value={1}
-                >
-                  <ForwardRef(Tab)
-                    aria-controls="simple-tabpanel-1"
-                    className="single-tab"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "fullWidth": "MuiTab-fullWidth",
-                        "labelIcon": "MuiTab-labelIcon",
-                        "root": "MuiTab-root",
-                        "selected": "Mui-selected",
-                        "textColorInherit": "MuiTab-textColorInherit",
-                        "textColorPrimary": "MuiTab-textColorPrimary",
-                        "textColorSecondary": "MuiTab-textColorSecondary",
-                        "wrapped": "MuiTab-wrapped",
-                        "wrapper": "MuiTab-wrapper",
-                      }
-                    }
-                    fullWidth={false}
-                    id="simple-tab-1"
-                    indicator={false}
-                    label={
-                      <React.Fragment>
-                        ecogesture.title_tab_1
-                        <br />
-                        (0)
-                      </React.Fragment>
-                    }
-                    onChange={[Function]}
-                    selected={false}
-                    tabIndex={0}
-                    textColor="inherit"
-                    value={1}
-                  >
-                    <WithStyles(ForwardRef(ButtonBase))
-                      aria-controls="simple-tabpanel-1"
-                      aria-selected={false}
-                      className="MuiTab-root MuiTab-textColorInherit single-tab"
-                      disabled={false}
-                      focusRipple={true}
-                      id="simple-tab-1"
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      role="tab"
-                      tabIndex={0}
-                    >
-                      <ForwardRef(ButtonBase)
-                        aria-controls="simple-tabpanel-1"
-                        aria-selected={false}
-                        className="MuiTab-root MuiTab-textColorInherit single-tab"
-                        classes={
-                          Object {
-                            "disabled": "Mui-disabled",
-                            "focusVisible": "Mui-focusVisible",
-                            "root": "MuiButtonBase-root",
-                          }
-                        }
-                        disabled={false}
-                        focusRipple={true}
-                        id="simple-tab-1"
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        role="tab"
-                        tabIndex={0}
-                      >
-                        <button
-                          aria-controls="simple-tabpanel-1"
-                          aria-selected={false}
-                          className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
-                          disabled={false}
-                          id="simple-tab-1"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onDragLeave={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                          onTouchEnd={[Function]}
-                          onTouchMove={[Function]}
-                          onTouchStart={[Function]}
-                          role="tab"
-                          tabIndex={0}
-                          type="button"
-                        >
-                          <span
-                            className="MuiTab-wrapper"
-                          >
-                            ecogesture.title_tab_1
-                            <br />
-                            (0)
-                          </span>
-                          <WithStyles(memo)
-                            center={false}
-                          >
-                            <ForwardRef(TouchRipple)
-                              center={false}
-                              classes={
-                                Object {
-                                  "child": "MuiTouchRipple-child",
-                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                  "ripple": "MuiTouchRipple-ripple",
-                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                  "root": "MuiTouchRipple-root",
-                                }
-                              }
-                            >
-                              <span
-                                className="MuiTouchRipple-root"
-                              >
-                                <TransitionGroup
-                                  childFactory={[Function]}
-                                  component={null}
-                                  exit={true}
-                                />
-                              </span>
-                            </ForwardRef(TouchRipple)>
-                          </WithStyles(memo)>
-                        </button>
-                      </ForwardRef(ButtonBase)>
-                    </WithStyles(ForwardRef(ButtonBase))>
-                  </ForwardRef(Tab)>
-                </WithStyles(ForwardRef(Tab))>
-                <WithStyles(ForwardRef(Tab))
-                  aria-controls="simple-tabpanel-2"
-                  className="single-tab"
-                  fullWidth={false}
-                  id="simple-tab-2"
-                  indicator={false}
-                  key=".2"
-                  label={
-                    <React.Fragment>
-                      ecogesture.title_tab_2
-                      <br />
-                      (0)
-                    </React.Fragment>
-                  }
-                  onChange={[Function]}
-                  selected={false}
-                  tabIndex={0}
-                  textColor="inherit"
-                  value={2}
-                >
-                  <ForwardRef(Tab)
-                    aria-controls="simple-tabpanel-2"
-                    className="single-tab"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "fullWidth": "MuiTab-fullWidth",
-                        "labelIcon": "MuiTab-labelIcon",
-                        "root": "MuiTab-root",
-                        "selected": "Mui-selected",
-                        "textColorInherit": "MuiTab-textColorInherit",
-                        "textColorPrimary": "MuiTab-textColorPrimary",
-                        "textColorSecondary": "MuiTab-textColorSecondary",
-                        "wrapped": "MuiTab-wrapped",
-                        "wrapper": "MuiTab-wrapper",
-                      }
-                    }
-                    fullWidth={false}
-                    id="simple-tab-2"
-                    indicator={false}
-                    label={
-                      <React.Fragment>
-                        ecogesture.title_tab_2
-                        <br />
-                        (0)
-                      </React.Fragment>
-                    }
-                    onChange={[Function]}
-                    selected={false}
-                    tabIndex={0}
-                    textColor="inherit"
-                    value={2}
-                  >
-                    <WithStyles(ForwardRef(ButtonBase))
-                      aria-controls="simple-tabpanel-2"
-                      aria-selected={false}
-                      className="MuiTab-root MuiTab-textColorInherit single-tab"
-                      disabled={false}
-                      focusRipple={true}
-                      id="simple-tab-2"
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      role="tab"
-                      tabIndex={0}
-                    >
-                      <ForwardRef(ButtonBase)
-                        aria-controls="simple-tabpanel-2"
-                        aria-selected={false}
-                        className="MuiTab-root MuiTab-textColorInherit single-tab"
-                        classes={
-                          Object {
-                            "disabled": "Mui-disabled",
-                            "focusVisible": "Mui-focusVisible",
-                            "root": "MuiButtonBase-root",
-                          }
-                        }
-                        disabled={false}
-                        focusRipple={true}
-                        id="simple-tab-2"
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        role="tab"
-                        tabIndex={0}
-                      >
-                        <button
-                          aria-controls="simple-tabpanel-2"
-                          aria-selected={false}
-                          className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
-                          disabled={false}
-                          id="simple-tab-2"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onDragLeave={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                          onTouchEnd={[Function]}
-                          onTouchMove={[Function]}
-                          onTouchStart={[Function]}
-                          role="tab"
-                          tabIndex={0}
-                          type="button"
-                        >
-                          <span
-                            className="MuiTab-wrapper"
-                          >
-                            ecogesture.title_tab_2
-                            <br />
-                            (0)
-                          </span>
-                          <WithStyles(memo)
-                            center={false}
-                          >
-                            <ForwardRef(TouchRipple)
-                              center={false}
-                              classes={
-                                Object {
-                                  "child": "MuiTouchRipple-child",
-                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                  "ripple": "MuiTouchRipple-ripple",
-                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                  "root": "MuiTouchRipple-root",
-                                }
-                              }
-                            >
-                              <span
-                                className="MuiTouchRipple-root"
-                              >
-                                <TransitionGroup
-                                  childFactory={[Function]}
-                                  component={null}
-                                  exit={true}
-                                />
-                              </span>
-                            </ForwardRef(TouchRipple)>
-                          </WithStyles(memo)>
-                        </button>
-                      </ForwardRef(ButtonBase)>
-                    </WithStyles(ForwardRef(ButtonBase))>
-                  </ForwardRef(Tab)>
-                </WithStyles(ForwardRef(Tab))>
-              </div>
-              <WithStyles(ForwardRef(TabIndicator))
-                className="indicator-tab"
-                color="secondary"
-                orientation="horizontal"
-                style={
-                  Object {
-                    "left": 0,
-                    "width": 0,
-                  }
-                }
-              >
-                <ForwardRef(TabIndicator)
-                  className="indicator-tab"
-                  classes={
-                    Object {
-                      "colorPrimary": "PrivateTabIndicator-colorPrimary-2",
-                      "colorSecondary": "PrivateTabIndicator-colorSecondary-3",
-                      "root": "PrivateTabIndicator-root-1",
-                      "vertical": "PrivateTabIndicator-vertical-4",
-                    }
-                  }
-                  color="secondary"
-                  orientation="horizontal"
-                  style={
-                    Object {
-                      "left": 0,
-                      "width": 0,
-                    }
-                  }
-                >
-                  <span
-                    className="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 indicator-tab"
-                    style={
-                      Object {
-                        "left": 0,
-                        "width": 0,
-                      }
-                    }
-                  />
-                </ForwardRef(TabIndicator)>
-              </WithStyles(ForwardRef(TabIndicator))>
-            </div>
-          </div>
-        </ForwardRef(Tabs)>
-      </WithStyles(ForwardRef(Tabs))>
-    </mock-header>
-    <mock-content
-      heightOffset={0}
-    >
-      <TabPanel
-        tab={0}
-        value={0}
-      >
-        <div
-          aria-labelledby="simple-tab-0"
-          hidden={false}
-          id="simple-tabpanel-0"
-          role="tabpanel"
-        >
-          <EcogestureEmptyList
-            handleReinitClick={[Function]}
-            isObjective={true}
-            isSelectionDone={false}
-            setTab={[Function]}
+              ecogesture.title_tab_0
+              <br />
+              (0)
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <button
+            aria-controls="simple-tabpanel-1"
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
+            id="simple-tab-1"
+            role="tab"
+            tabindex="0"
+            type="button"
           >
-            <div
-              className="ec-empty-container"
+            <span
+              class="MuiTab-wrapper"
             >
-              <div
-                className="ec-empty-content"
-              >
-                <StyledIcon
-                  className="icon-big"
-                  icon="test-file-stub"
-                  size={150}
-                >
-                  <Icon
-                    aria-hidden={true}
-                    className="icon-big"
-                    icon="test-file-stub"
-                    size={150}
-                    spin={false}
-                  >
-                    <Component
-                      aria-hidden={true}
-                      className="icon-big styles__icon___23x3R"
-                      height={150}
-                      style={Object {}}
-                      width={150}
-                    >
-                      <svg
-                        aria-hidden={true}
-                        className="icon-big styles__icon___23x3R"
-                        height={150}
-                        style={Object {}}
-                        width={150}
-                      >
-                        <use
-                          xlinkHref="#test-file-stub"
-                        />
-                      </svg>
-                    </Component>
-                  </Icon>
-                </StyledIcon>
-                <div
-                  className="text-16-normal"
-                >
-                  ecogesture.emptyList.obj1
-                </div>
-                <div
-                  className="text-16-normal"
-                >
-                  ecogesture.emptyList.obj2
-                </div>
-                <div
-                  className="buttons"
-                >
-                  <WithStyles(ForwardRef(Button))
-                    aria-label="ecogesture.emptyList.btn1"
-                    className="btnSecondary"
-                    onClick={[Function]}
-                  >
-                    <ForwardRef(Button)
-                      aria-label="ecogesture.emptyList.btn1"
-                      className="btnSecondary"
-                      classes={
-                        Object {
-                          "colorInherit": "MuiButton-colorInherit",
-                          "contained": "MuiButton-contained",
-                          "containedPrimary": "MuiButton-containedPrimary",
-                          "containedSecondary": "MuiButton-containedSecondary",
-                          "containedSizeLarge": "MuiButton-containedSizeLarge",
-                          "containedSizeSmall": "MuiButton-containedSizeSmall",
-                          "disableElevation": "MuiButton-disableElevation",
-                          "disabled": "Mui-disabled",
-                          "endIcon": "MuiButton-endIcon",
-                          "focusVisible": "Mui-focusVisible",
-                          "fullWidth": "MuiButton-fullWidth",
-                          "iconSizeLarge": "MuiButton-iconSizeLarge",
-                          "iconSizeMedium": "MuiButton-iconSizeMedium",
-                          "iconSizeSmall": "MuiButton-iconSizeSmall",
-                          "label": "MuiButton-label",
-                          "outlined": "MuiButton-outlined",
-                          "outlinedPrimary": "MuiButton-outlinedPrimary",
-                          "outlinedSecondary": "MuiButton-outlinedSecondary",
-                          "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                          "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                          "root": "MuiButton-root",
-                          "sizeLarge": "MuiButton-sizeLarge",
-                          "sizeSmall": "MuiButton-sizeSmall",
-                          "startIcon": "MuiButton-startIcon",
-                          "text": "MuiButton-text",
-                          "textPrimary": "MuiButton-textPrimary",
-                          "textSecondary": "MuiButton-textSecondary",
-                          "textSizeLarge": "MuiButton-textSizeLarge",
-                          "textSizeSmall": "MuiButton-textSizeSmall",
-                        }
-                      }
-                      onClick={[Function]}
-                    >
-                      <WithStyles(ForwardRef(ButtonBase))
-                        aria-label="ecogesture.emptyList.btn1"
-                        className="MuiButton-root MuiButton-text btnSecondary"
-                        component="button"
-                        disabled={false}
-                        focusRipple={true}
-                        focusVisibleClassName="Mui-focusVisible"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <ForwardRef(ButtonBase)
-                          aria-label="ecogesture.emptyList.btn1"
-                          className="MuiButton-root MuiButton-text btnSecondary"
-                          classes={
-                            Object {
-                              "disabled": "Mui-disabled",
-                              "focusVisible": "Mui-focusVisible",
-                              "root": "MuiButtonBase-root",
-                            }
-                          }
-                          component="button"
-                          disabled={false}
-                          focusRipple={true}
-                          focusVisibleClassName="Mui-focusVisible"
-                          onClick={[Function]}
-                          type="button"
-                        >
-                          <button
-                            aria-label="ecogesture.emptyList.btn1"
-                            className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onDragLeave={[Function]}
-                            onFocus={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                            onTouchEnd={[Function]}
-                            onTouchMove={[Function]}
-                            onTouchStart={[Function]}
-                            tabIndex={0}
-                            type="button"
-                          >
-                            <span
-                              className="MuiButton-label"
-                            >
-                              ecogesture.emptyList.btn1
-                            </span>
-                            <WithStyles(memo)
-                              center={false}
-                            >
-                              <ForwardRef(TouchRipple)
-                                center={false}
-                                classes={
-                                  Object {
-                                    "child": "MuiTouchRipple-child",
-                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                    "ripple": "MuiTouchRipple-ripple",
-                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                    "root": "MuiTouchRipple-root",
-                                  }
-                                }
-                              >
-                                <span
-                                  className="MuiTouchRipple-root"
-                                >
-                                  <TransitionGroup
-                                    childFactory={[Function]}
-                                    component={null}
-                                    exit={true}
-                                  />
-                                </span>
-                              </ForwardRef(TouchRipple)>
-                            </WithStyles(memo)>
-                          </button>
-                        </ForwardRef(ButtonBase)>
-                      </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(Button)>
-                  </WithStyles(ForwardRef(Button))>
-                  <WithStyles(ForwardRef(Button))
-                    aria-label="ecogesture.emptyList.btn2"
-                    className="btnPrimary"
-                    onClick={[Function]}
-                  >
-                    <ForwardRef(Button)
-                      aria-label="ecogesture.emptyList.btn2"
-                      className="btnPrimary"
-                      classes={
-                        Object {
-                          "colorInherit": "MuiButton-colorInherit",
-                          "contained": "MuiButton-contained",
-                          "containedPrimary": "MuiButton-containedPrimary",
-                          "containedSecondary": "MuiButton-containedSecondary",
-                          "containedSizeLarge": "MuiButton-containedSizeLarge",
-                          "containedSizeSmall": "MuiButton-containedSizeSmall",
-                          "disableElevation": "MuiButton-disableElevation",
-                          "disabled": "Mui-disabled",
-                          "endIcon": "MuiButton-endIcon",
-                          "focusVisible": "Mui-focusVisible",
-                          "fullWidth": "MuiButton-fullWidth",
-                          "iconSizeLarge": "MuiButton-iconSizeLarge",
-                          "iconSizeMedium": "MuiButton-iconSizeMedium",
-                          "iconSizeSmall": "MuiButton-iconSizeSmall",
-                          "label": "MuiButton-label",
-                          "outlined": "MuiButton-outlined",
-                          "outlinedPrimary": "MuiButton-outlinedPrimary",
-                          "outlinedSecondary": "MuiButton-outlinedSecondary",
-                          "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                          "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                          "root": "MuiButton-root",
-                          "sizeLarge": "MuiButton-sizeLarge",
-                          "sizeSmall": "MuiButton-sizeSmall",
-                          "startIcon": "MuiButton-startIcon",
-                          "text": "MuiButton-text",
-                          "textPrimary": "MuiButton-textPrimary",
-                          "textSecondary": "MuiButton-textSecondary",
-                          "textSizeLarge": "MuiButton-textSizeLarge",
-                          "textSizeSmall": "MuiButton-textSizeSmall",
-                        }
-                      }
-                      onClick={[Function]}
-                    >
-                      <WithStyles(ForwardRef(ButtonBase))
-                        aria-label="ecogesture.emptyList.btn2"
-                        className="MuiButton-root MuiButton-text btnPrimary"
-                        component="button"
-                        disabled={false}
-                        focusRipple={true}
-                        focusVisibleClassName="Mui-focusVisible"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <ForwardRef(ButtonBase)
-                          aria-label="ecogesture.emptyList.btn2"
-                          className="MuiButton-root MuiButton-text btnPrimary"
-                          classes={
-                            Object {
-                              "disabled": "Mui-disabled",
-                              "focusVisible": "Mui-focusVisible",
-                              "root": "MuiButtonBase-root",
-                            }
-                          }
-                          component="button"
-                          disabled={false}
-                          focusRipple={true}
-                          focusVisibleClassName="Mui-focusVisible"
-                          onClick={[Function]}
-                          type="button"
-                        >
-                          <button
-                            aria-label="ecogesture.emptyList.btn2"
-                            className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onDragLeave={[Function]}
-                            onFocus={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                            onTouchEnd={[Function]}
-                            onTouchMove={[Function]}
-                            onTouchStart={[Function]}
-                            tabIndex={0}
-                            type="button"
-                          >
-                            <span
-                              className="MuiButton-label"
-                            >
-                              ecogesture.emptyList.btn2
-                            </span>
-                            <WithStyles(memo)
-                              center={false}
-                            >
-                              <ForwardRef(TouchRipple)
-                                center={false}
-                                classes={
-                                  Object {
-                                    "child": "MuiTouchRipple-child",
-                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                    "ripple": "MuiTouchRipple-ripple",
-                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                    "root": "MuiTouchRipple-root",
-                                  }
-                                }
-                              >
-                                <span
-                                  className="MuiTouchRipple-root"
-                                >
-                                  <TransitionGroup
-                                    childFactory={[Function]}
-                                    component={null}
-                                    exit={true}
-                                  />
-                                </span>
-                              </ForwardRef(TouchRipple)>
-                            </WithStyles(memo)>
-                          </button>
-                        </ForwardRef(ButtonBase)>
-                      </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(Button)>
-                  </WithStyles(ForwardRef(Button))>
-                </div>
-              </div>
-            </div>
-          </EcogestureEmptyList>
+              ecogesture.title_tab_1
+              <br />
+              (0)
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <button
+            aria-controls="simple-tabpanel-2"
+            aria-selected="false"
+            class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
+            id="simple-tab-2"
+            role="tab"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiTab-wrapper"
+            >
+              ecogesture.title_tab_2
+              <br />
+              (0)
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
         </div>
-      </TabPanel>
-      <TabPanel
-        tab={1}
-        value={0}
+        <span
+          class="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 indicator-tab"
+          style="left: 0px; width: 0px;"
+        />
+      </div>
+    </div>
+  </mock-header>
+  <mock-content
+    heightoffset="0"
+  >
+    <div
+      aria-labelledby="simple-tab-0"
+      id="simple-tabpanel-0"
+      role="tabpanel"
+    >
+      <div
+        class="ec-empty-container"
       >
         <div
-          aria-labelledby="simple-tab-1"
-          hidden={true}
-          id="simple-tabpanel-1"
-          role="tabpanel"
+          class="ec-empty-content"
         >
-          <EcogestureEmptyList
-            handleReinitClick={[Function]}
-            isObjective={false}
-            isSelectionDone={false}
-            setTab={[Function]}
+          <svg
+            aria-hidden="true"
+            class="icon-big styles__icon___23x3R"
+            height="150"
+            width="150"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <div
+            class="text-16-normal"
+          >
+            ecogesture.emptyList.obj1
+          </div>
+          <div
+            class="text-16-normal"
+          >
+            ecogesture.emptyList.obj2
+          </div>
+          <div
+            class="buttons"
           >
-            <div
-              className="ec-empty-container"
+            <button
+              aria-label="ecogesture.emptyList.btn1"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                ecogesture.emptyList.btn1
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+            <button
+              aria-label="ecogesture.emptyList.btn2"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
             >
-              <div
-                className="ec-empty-content"
+              <span
+                class="MuiButton-label"
               >
-                <StyledIcon
-                  className="icon-big"
-                  icon="test-file-stub"
-                  size={150}
-                >
-                  <Icon
-                    aria-hidden={true}
-                    className="icon-big"
-                    icon="test-file-stub"
-                    size={150}
-                    spin={false}
-                  >
-                    <Component
-                      aria-hidden={true}
-                      className="icon-big styles__icon___23x3R"
-                      height={150}
-                      style={Object {}}
-                      width={150}
-                    >
-                      <svg
-                        aria-hidden={true}
-                        className="icon-big styles__icon___23x3R"
-                        height={150}
-                        style={Object {}}
-                        width={150}
-                      >
-                        <use
-                          xlinkHref="#test-file-stub"
-                        />
-                      </svg>
-                    </Component>
-                  </Icon>
-                </StyledIcon>
-                <div
-                  className="text-16-normal"
-                >
-                  ecogesture.emptyList.doing1
-                </div>
-                <div
-                  className="text-16-normal"
-                >
-                  ecogesture.emptyList.doing2
-                </div>
-                <div
-                  className="buttons"
-                >
-                  <WithStyles(ForwardRef(Button))
-                    aria-label="ecogesture.emptyList.btn1"
-                    className="btnSecondary"
-                    onClick={[Function]}
-                  >
-                    <ForwardRef(Button)
-                      aria-label="ecogesture.emptyList.btn1"
-                      className="btnSecondary"
-                      classes={
-                        Object {
-                          "colorInherit": "MuiButton-colorInherit",
-                          "contained": "MuiButton-contained",
-                          "containedPrimary": "MuiButton-containedPrimary",
-                          "containedSecondary": "MuiButton-containedSecondary",
-                          "containedSizeLarge": "MuiButton-containedSizeLarge",
-                          "containedSizeSmall": "MuiButton-containedSizeSmall",
-                          "disableElevation": "MuiButton-disableElevation",
-                          "disabled": "Mui-disabled",
-                          "endIcon": "MuiButton-endIcon",
-                          "focusVisible": "Mui-focusVisible",
-                          "fullWidth": "MuiButton-fullWidth",
-                          "iconSizeLarge": "MuiButton-iconSizeLarge",
-                          "iconSizeMedium": "MuiButton-iconSizeMedium",
-                          "iconSizeSmall": "MuiButton-iconSizeSmall",
-                          "label": "MuiButton-label",
-                          "outlined": "MuiButton-outlined",
-                          "outlinedPrimary": "MuiButton-outlinedPrimary",
-                          "outlinedSecondary": "MuiButton-outlinedSecondary",
-                          "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                          "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                          "root": "MuiButton-root",
-                          "sizeLarge": "MuiButton-sizeLarge",
-                          "sizeSmall": "MuiButton-sizeSmall",
-                          "startIcon": "MuiButton-startIcon",
-                          "text": "MuiButton-text",
-                          "textPrimary": "MuiButton-textPrimary",
-                          "textSecondary": "MuiButton-textSecondary",
-                          "textSizeLarge": "MuiButton-textSizeLarge",
-                          "textSizeSmall": "MuiButton-textSizeSmall",
-                        }
-                      }
-                      onClick={[Function]}
-                    >
-                      <WithStyles(ForwardRef(ButtonBase))
-                        aria-label="ecogesture.emptyList.btn1"
-                        className="MuiButton-root MuiButton-text btnSecondary"
-                        component="button"
-                        disabled={false}
-                        focusRipple={true}
-                        focusVisibleClassName="Mui-focusVisible"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <ForwardRef(ButtonBase)
-                          aria-label="ecogesture.emptyList.btn1"
-                          className="MuiButton-root MuiButton-text btnSecondary"
-                          classes={
-                            Object {
-                              "disabled": "Mui-disabled",
-                              "focusVisible": "Mui-focusVisible",
-                              "root": "MuiButtonBase-root",
-                            }
-                          }
-                          component="button"
-                          disabled={false}
-                          focusRipple={true}
-                          focusVisibleClassName="Mui-focusVisible"
-                          onClick={[Function]}
-                          type="button"
-                        >
-                          <button
-                            aria-label="ecogesture.emptyList.btn1"
-                            className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onDragLeave={[Function]}
-                            onFocus={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                            onTouchEnd={[Function]}
-                            onTouchMove={[Function]}
-                            onTouchStart={[Function]}
-                            tabIndex={0}
-                            type="button"
-                          >
-                            <span
-                              className="MuiButton-label"
-                            >
-                              ecogesture.emptyList.btn1
-                            </span>
-                            <WithStyles(memo)
-                              center={false}
-                            >
-                              <ForwardRef(TouchRipple)
-                                center={false}
-                                classes={
-                                  Object {
-                                    "child": "MuiTouchRipple-child",
-                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                    "ripple": "MuiTouchRipple-ripple",
-                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                    "root": "MuiTouchRipple-root",
-                                  }
-                                }
-                              >
-                                <span
-                                  className="MuiTouchRipple-root"
-                                >
-                                  <TransitionGroup
-                                    childFactory={[Function]}
-                                    component={null}
-                                    exit={true}
-                                  />
-                                </span>
-                              </ForwardRef(TouchRipple)>
-                            </WithStyles(memo)>
-                          </button>
-                        </ForwardRef(ButtonBase)>
-                      </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(Button)>
-                  </WithStyles(ForwardRef(Button))>
-                  <WithStyles(ForwardRef(Button))
-                    aria-label="ecogesture.emptyList.btn2"
-                    className="btnPrimary"
-                    onClick={[Function]}
-                  >
-                    <ForwardRef(Button)
-                      aria-label="ecogesture.emptyList.btn2"
-                      className="btnPrimary"
-                      classes={
-                        Object {
-                          "colorInherit": "MuiButton-colorInherit",
-                          "contained": "MuiButton-contained",
-                          "containedPrimary": "MuiButton-containedPrimary",
-                          "containedSecondary": "MuiButton-containedSecondary",
-                          "containedSizeLarge": "MuiButton-containedSizeLarge",
-                          "containedSizeSmall": "MuiButton-containedSizeSmall",
-                          "disableElevation": "MuiButton-disableElevation",
-                          "disabled": "Mui-disabled",
-                          "endIcon": "MuiButton-endIcon",
-                          "focusVisible": "Mui-focusVisible",
-                          "fullWidth": "MuiButton-fullWidth",
-                          "iconSizeLarge": "MuiButton-iconSizeLarge",
-                          "iconSizeMedium": "MuiButton-iconSizeMedium",
-                          "iconSizeSmall": "MuiButton-iconSizeSmall",
-                          "label": "MuiButton-label",
-                          "outlined": "MuiButton-outlined",
-                          "outlinedPrimary": "MuiButton-outlinedPrimary",
-                          "outlinedSecondary": "MuiButton-outlinedSecondary",
-                          "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                          "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                          "root": "MuiButton-root",
-                          "sizeLarge": "MuiButton-sizeLarge",
-                          "sizeSmall": "MuiButton-sizeSmall",
-                          "startIcon": "MuiButton-startIcon",
-                          "text": "MuiButton-text",
-                          "textPrimary": "MuiButton-textPrimary",
-                          "textSecondary": "MuiButton-textSecondary",
-                          "textSizeLarge": "MuiButton-textSizeLarge",
-                          "textSizeSmall": "MuiButton-textSizeSmall",
-                        }
-                      }
-                      onClick={[Function]}
-                    >
-                      <WithStyles(ForwardRef(ButtonBase))
-                        aria-label="ecogesture.emptyList.btn2"
-                        className="MuiButton-root MuiButton-text btnPrimary"
-                        component="button"
-                        disabled={false}
-                        focusRipple={true}
-                        focusVisibleClassName="Mui-focusVisible"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <ForwardRef(ButtonBase)
-                          aria-label="ecogesture.emptyList.btn2"
-                          className="MuiButton-root MuiButton-text btnPrimary"
-                          classes={
-                            Object {
-                              "disabled": "Mui-disabled",
-                              "focusVisible": "Mui-focusVisible",
-                              "root": "MuiButtonBase-root",
-                            }
-                          }
-                          component="button"
-                          disabled={false}
-                          focusRipple={true}
-                          focusVisibleClassName="Mui-focusVisible"
-                          onClick={[Function]}
-                          type="button"
-                        >
-                          <button
-                            aria-label="ecogesture.emptyList.btn2"
-                            className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onDragLeave={[Function]}
-                            onFocus={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                            onTouchEnd={[Function]}
-                            onTouchMove={[Function]}
-                            onTouchStart={[Function]}
-                            tabIndex={0}
-                            type="button"
-                          >
-                            <span
-                              className="MuiButton-label"
-                            >
-                              ecogesture.emptyList.btn2
-                            </span>
-                            <WithStyles(memo)
-                              center={false}
-                            >
-                              <ForwardRef(TouchRipple)
-                                center={false}
-                                classes={
-                                  Object {
-                                    "child": "MuiTouchRipple-child",
-                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                    "ripple": "MuiTouchRipple-ripple",
-                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                    "root": "MuiTouchRipple-root",
-                                  }
-                                }
-                              >
-                                <span
-                                  className="MuiTouchRipple-root"
-                                >
-                                  <TransitionGroup
-                                    childFactory={[Function]}
-                                    component={null}
-                                    exit={true}
-                                  />
-                                </span>
-                              </ForwardRef(TouchRipple)>
-                            </WithStyles(memo)>
-                          </button>
-                        </ForwardRef(ButtonBase)>
-                      </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(Button)>
-                  </WithStyles(ForwardRef(Button))>
-                </div>
-              </div>
-            </div>
-          </EcogestureEmptyList>
+                ecogesture.emptyList.btn2
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
         </div>
-      </TabPanel>
-      <TabPanel
-        tab={2}
-        value={0}
+      </div>
+    </div>
+    <div
+      aria-labelledby="simple-tab-1"
+      hidden=""
+      id="simple-tabpanel-1"
+      role="tabpanel"
+    >
+      <div
+        class="ec-empty-container"
       >
         <div
-          aria-labelledby="simple-tab-2"
-          hidden={true}
-          id="simple-tabpanel-2"
-          role="tabpanel"
-        />
-      </TabPanel>
-      <EcogestureInitModal
-        handleCloseClick={[Function]}
-        handleLaunchForm={[Function]}
-        open={true}
-      >
-        <WithStyles(ForwardRef(Dialog))
-          aria-labelledby="accessibility-title"
-          classes={
-            Object {
-              "paper": "modal-paper",
-              "root": "modal-root",
-            }
-          }
-          onClose={[Function]}
-          open={true}
+          class="ec-empty-content"
         >
-          <ForwardRef(Dialog)
-            aria-labelledby="accessibility-title"
-            classes={
-              Object {
-                "container": "MuiDialog-container",
-                "paper": "MuiDialog-paper modal-paper",
-                "paperFullScreen": "MuiDialog-paperFullScreen",
-                "paperFullWidth": "MuiDialog-paperFullWidth",
-                "paperScrollBody": "MuiDialog-paperScrollBody",
-                "paperScrollPaper": "MuiDialog-paperScrollPaper",
-                "paperWidthFalse": "MuiDialog-paperWidthFalse",
-                "paperWidthLg": "MuiDialog-paperWidthLg",
-                "paperWidthMd": "MuiDialog-paperWidthMd",
-                "paperWidthSm": "MuiDialog-paperWidthSm",
-                "paperWidthXl": "MuiDialog-paperWidthXl",
-                "paperWidthXs": "MuiDialog-paperWidthXs",
-                "root": "MuiDialog-root modal-root",
-                "scrollBody": "MuiDialog-scrollBody",
-                "scrollPaper": "MuiDialog-scrollPaper",
-              }
-            }
-            onClose={[Function]}
-            open={true}
+          <svg
+            aria-hidden="true"
+            class="icon-big styles__icon___23x3R"
+            height="150"
+            width="150"
           >
-            <ForwardRef(Modal)
-              BackdropComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "Naked": Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "propTypes": Object {
-                      "children": [Function],
-                      "className": [Function],
-                      "classes": [Function],
-                      "invisible": [Function],
-                      "open": [Function],
-                      "transitionDuration": [Function],
-                    },
-                    "render": [Function],
-                  },
-                  "displayName": "WithStyles(ForwardRef(Backdrop))",
-                  "options": Object {
-                    "defaultTheme": Object {
-                      "breakpoints": Object {
-                        "between": [Function],
-                        "down": [Function],
-                        "keys": Array [
-                          "xs",
-                          "sm",
-                          "md",
-                          "lg",
-                          "xl",
-                        ],
-                        "only": [Function],
-                        "up": [Function],
-                        "values": Object {
-                          "lg": 1280,
-                          "md": 960,
-                          "sm": 600,
-                          "xl": 1920,
-                          "xs": 0,
-                        },
-                        "width": [Function],
-                      },
-                      "direction": "ltr",
-                      "mixins": Object {
-                        "gutters": [Function],
-                        "toolbar": Object {
-                          "@media (min-width:0px) and (orientation: landscape)": Object {
-                            "minHeight": 48,
-                          },
-                          "@media (min-width:600px)": Object {
-                            "minHeight": 64,
-                          },
-                          "minHeight": 56,
-                        },
-                      },
-                      "overrides": Object {},
-                      "palette": Object {
-                        "action": Object {
-                          "activatedOpacity": 0.12,
-                          "active": "rgba(0, 0, 0, 0.54)",
-                          "disabled": "rgba(0, 0, 0, 0.26)",
-                          "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                          "disabledOpacity": 0.38,
-                          "focus": "rgba(0, 0, 0, 0.12)",
-                          "focusOpacity": 0.12,
-                          "hover": "rgba(0, 0, 0, 0.04)",
-                          "hoverOpacity": 0.04,
-                          "selected": "rgba(0, 0, 0, 0.08)",
-                          "selectedOpacity": 0.08,
-                        },
-                        "augmentColor": [Function],
-                        "background": Object {
-                          "default": "#fafafa",
-                          "paper": "#fff",
-                        },
-                        "common": Object {
-                          "black": "#000",
-                          "white": "#fff",
-                        },
-                        "contrastThreshold": 3,
-                        "divider": "rgba(0, 0, 0, 0.12)",
-                        "error": Object {
-                          "contrastText": "#fff",
-                          "dark": "#d32f2f",
-                          "light": "#e57373",
-                          "main": "#f44336",
-                        },
-                        "getContrastText": [Function],
-                        "grey": Object {
-                          "100": "#f5f5f5",
-                          "200": "#eeeeee",
-                          "300": "#e0e0e0",
-                          "400": "#bdbdbd",
-                          "50": "#fafafa",
-                          "500": "#9e9e9e",
-                          "600": "#757575",
-                          "700": "#616161",
-                          "800": "#424242",
-                          "900": "#212121",
-                          "A100": "#d5d5d5",
-                          "A200": "#aaaaaa",
-                          "A400": "#303030",
-                          "A700": "#616161",
-                        },
-                        "info": Object {
-                          "contrastText": "#fff",
-                          "dark": "#1976d2",
-                          "light": "#64b5f6",
-                          "main": "#2196f3",
-                        },
-                        "primary": Object {
-                          "contrastText": "#fff",
-                          "dark": "#303f9f",
-                          "light": "#7986cb",
-                          "main": "#3f51b5",
-                        },
-                        "secondary": Object {
-                          "contrastText": "#fff",
-                          "dark": "#c51162",
-                          "light": "#ff4081",
-                          "main": "#f50057",
-                        },
-                        "success": Object {
-                          "contrastText": "rgba(0, 0, 0, 0.87)",
-                          "dark": "#388e3c",
-                          "light": "#81c784",
-                          "main": "#4caf50",
-                        },
-                        "text": Object {
-                          "disabled": "rgba(0, 0, 0, 0.38)",
-                          "hint": "rgba(0, 0, 0, 0.38)",
-                          "primary": "rgba(0, 0, 0, 0.87)",
-                          "secondary": "rgba(0, 0, 0, 0.54)",
-                        },
-                        "tonalOffset": 0.2,
-                        "type": "light",
-                        "warning": Object {
-                          "contrastText": "rgba(0, 0, 0, 0.87)",
-                          "dark": "#f57c00",
-                          "light": "#ffb74d",
-                          "main": "#ff9800",
-                        },
-                      },
-                      "props": Object {},
-                      "shadows": Array [
-                        "none",
-                        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                      ],
-                      "shape": Object {
-                        "borderRadius": 4,
-                      },
-                      "spacing": [Function],
-                      "transitions": Object {
-                        "create": [Function],
-                        "duration": Object {
-                          "complex": 375,
-                          "enteringScreen": 225,
-                          "leavingScreen": 195,
-                          "short": 250,
-                          "shorter": 200,
-                          "shortest": 150,
-                          "standard": 300,
-                        },
-                        "easing": Object {
-                          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                        },
-                        "getAutoHeightDuration": [Function],
-                      },
-                      "typography": Object {
-                        "body1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00938em",
-                          "lineHeight": 1.5,
-                        },
-                        "body2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.01071em",
-                          "lineHeight": 1.43,
-                        },
-                        "button": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.02857em",
-                          "lineHeight": 1.75,
-                          "textTransform": "uppercase",
-                        },
-                        "caption": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.75rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.03333em",
-                          "lineHeight": 1.66,
-                        },
-                        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                        "fontSize": 14,
-                        "fontWeightBold": 700,
-                        "fontWeightLight": 300,
-                        "fontWeightMedium": 500,
-                        "fontWeightRegular": 400,
-                        "h1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "6rem",
-                          "fontWeight": 300,
-                          "letterSpacing": "-0.01562em",
-                          "lineHeight": 1.167,
-                        },
-                        "h2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "3.75rem",
-                          "fontWeight": 300,
-                          "letterSpacing": "-0.00833em",
-                          "lineHeight": 1.2,
-                        },
-                        "h3": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "3rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0em",
-                          "lineHeight": 1.167,
-                        },
-                        "h4": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "2.125rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00735em",
-                          "lineHeight": 1.235,
-                        },
-                        "h5": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1.5rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0em",
-                          "lineHeight": 1.334,
-                        },
-                        "h6": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1.25rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.0075em",
-                          "lineHeight": 1.6,
-                        },
-                        "htmlFontSize": 16,
-                        "overline": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.75rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.08333em",
-                          "lineHeight": 2.66,
-                          "textTransform": "uppercase",
-                        },
-                        "pxToRem": [Function],
-                        "round": [Function],
-                        "subtitle1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00938em",
-                          "lineHeight": 1.75,
-                        },
-                        "subtitle2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.00714em",
-                          "lineHeight": 1.57,
-                        },
-                      },
-                      "zIndex": Object {
-                        "appBar": 1100,
-                        "drawer": 1200,
-                        "mobileStepper": 1000,
-                        "modal": 1300,
-                        "snackbar": 1400,
-                        "speedDial": 1050,
-                        "tooltip": 1500,
-                      },
-                    },
-                    "name": "MuiBackdrop",
-                  },
-                  "propTypes": Object {
-                    "classes": [Function],
-                    "innerRef": [Function],
-                  },
-                  "render": [Function],
-                  "useStyles": [Function],
-                }
-              }
-              BackdropProps={
-                Object {
-                  "transitionDuration": Object {
-                    "enter": 225,
-                    "exit": 195,
-                  },
-                }
-              }
-              className="MuiDialog-root modal-root"
-              closeAfterTransition={true}
-              disableEscapeKeyDown={false}
-              onClose={[Function]}
-              open={true}
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <div
+            class="text-16-normal"
+          >
+            ecogesture.emptyList.doing1
+          </div>
+          <div
+            class="text-16-normal"
+          >
+            ecogesture.emptyList.doing2
+          </div>
+          <div
+            class="buttons"
+          >
+            <button
+              aria-label="ecogesture.emptyList.btn1"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
             >
-              <ForwardRef(Portal)
-                disablePortal={false}
+              <span
+                class="MuiButton-label"
               >
-                <Portal
-                  containerInfo={
-                    <body
-                      style="padding-right: 0px; overflow: hidden;"
-                    >
-                      <div
-                        class="MuiDialog-root modal-root"
-                        role="presentation"
-                        style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                      >
-                        <div
-                          aria-hidden="true"
-                          class="MuiBackdrop-root"
-                          style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                        />
-                        <div
-                          data-test="sentinelStart"
-                          tabindex="0"
-                        />
-                        <div
-                          class="MuiDialog-container MuiDialog-scrollPaper"
-                          role="none presentation"
-                          style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                          tabindex="-1"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              feedback.accessibility.window_title
-                            </div>
-                            <button
-                              aria-label="feedback.accessibility.button_close"
-                              class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                              tabindex="0"
-                              type="button"
-                            >
-                              <span
-                                class="MuiIconButton-label"
-                              >
-                                <svg
-                                  class="styles__icon___23x3R"
-                                  height="16"
-                                  width="16"
-                                >
-                                  <use
-                                    xlink:href="#test-file-stub"
-                                  />
-                                </svg>
-                              </span>
-                              <span
-                                class="MuiTouchRipple-root"
-                              />
-                            </button>
-                            <div
-                              class="eg-init-modal"
-                            >
-                              <div
-                                class="title text-20-bold"
-                              >
-                                ecogesture.initModal.title
-                              </div>
-                              <div
-                                class="text-16-normal"
-                              >
-                                ecogesture.initModal.text1
-                              </div>
-                              <div
-                                class="text-16-normal"
-                              >
-                                ecogesture.initModal.text2
-                              </div>
-                              <div
-                                class="buttons-container"
-                              >
-                                <button
-                                  aria-label="ecogesture.initModal.btn1"
-                                  class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                                  tabindex="0"
-                                  type="button"
-                                >
-                                  <span
-                                    class="MuiButton-label"
-                                  >
-                                    ecogesture.initModal.btn1
-                                  </span>
-                                  <span
-                                    class="MuiTouchRipple-root"
-                                  />
-                                </button>
-                                <button
-                                  aria-label="ecogesture.initModal.btn2"
-                                  class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                  tabindex="0"
-                                  type="button"
-                                >
-                                  <span
-                                    class="MuiButton-label"
-                                  >
-                                    ecogesture.initModal.btn2
-                                  </span>
-                                  <span
-                                    class="MuiTouchRipple-root"
-                                  />
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          data-test="sentinelEnd"
-                          tabindex="0"
-                        />
-                      </div>
-                    </body>
-                  }
-                >
-                  <div
-                    className="MuiDialog-root modal-root"
-                    onKeyDown={[Function]}
-                    role="presentation"
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "fixed",
-                        "right": 0,
-                        "top": 0,
-                        "zIndex": 1300,
-                      }
-                    }
-                  >
-                    <WithStyles(ForwardRef(Backdrop))
-                      onClick={[Function]}
-                      open={true}
-                      transitionDuration={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                    >
-                      <ForwardRef(Backdrop)
-                        classes={
-                          Object {
-                            "invisible": "MuiBackdrop-invisible",
-                            "root": "MuiBackdrop-root",
-                          }
-                        }
-                        onClick={[Function]}
-                        open={true}
-                        transitionDuration={
-                          Object {
-                            "enter": 225,
-                            "exit": 195,
-                          }
-                        }
-                      >
-                        <ForwardRef(Fade)
-                          in={true}
-                          onClick={[Function]}
-                          timeout={
-                            Object {
-                              "enter": 225,
-                              "exit": 195,
-                            }
-                          }
-                        >
-                          <Transition
-                            appear={true}
-                            enter={true}
-                            exit={true}
-                            in={true}
-                            mountOnEnter={false}
-                            onClick={[Function]}
-                            onEnter={[Function]}
-                            onEntered={[Function]}
-                            onEntering={[Function]}
-                            onExit={[Function]}
-                            onExited={[Function]}
-                            onExiting={[Function]}
-                            timeout={
-                              Object {
-                                "enter": 225,
-                                "exit": 195,
-                              }
-                            }
-                            unmountOnExit={false}
-                          >
-                            <div
-                              aria-hidden={true}
-                              className="MuiBackdrop-root"
-                              onClick={[Function]}
-                              style={
-                                Object {
-                                  "opacity": 1,
-                                  "visibility": undefined,
-                                }
-                              }
-                            />
-                          </Transition>
-                        </ForwardRef(Fade)>
-                      </ForwardRef(Backdrop)>
-                    </WithStyles(ForwardRef(Backdrop))>
-                    <Unstable_TrapFocus
-                      disableAutoFocus={false}
-                      disableEnforceFocus={false}
-                      disableRestoreFocus={false}
-                      getDoc={[Function]}
-                      isEnabled={[Function]}
-                      open={true}
-                    >
-                      <div
-                        data-test="sentinelStart"
-                        tabIndex={0}
-                      />
-                      <ForwardRef(Fade)
-                        appear={true}
-                        in={true}
-                        onEnter={[Function]}
-                        onExited={[Function]}
-                        role="none presentation"
-                        tabIndex="-1"
-                        timeout={
-                          Object {
-                            "enter": 225,
-                            "exit": 195,
-                          }
-                        }
-                      >
-                        <Transition
-                          appear={true}
-                          enter={true}
-                          exit={true}
-                          in={true}
-                          mountOnEnter={false}
-                          onEnter={[Function]}
-                          onEntered={[Function]}
-                          onEntering={[Function]}
-                          onExit={[Function]}
-                          onExited={[Function]}
-                          onExiting={[Function]}
-                          role="none presentation"
-                          tabIndex="-1"
-                          timeout={
-                            Object {
-                              "enter": 225,
-                              "exit": 195,
-                            }
-                          }
-                          unmountOnExit={false}
-                        >
-                          <div
-                            className="MuiDialog-container MuiDialog-scrollPaper"
-                            onMouseDown={[Function]}
-                            onMouseUp={[Function]}
-                            role="none presentation"
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "visibility": undefined,
-                              }
-                            }
-                            tabIndex="-1"
-                          >
-                            <WithStyles(ForwardRef(Paper))
-                              aria-labelledby="accessibility-title"
-                              className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                              elevation={24}
-                              role="dialog"
-                            >
-                              <ForwardRef(Paper)
-                                aria-labelledby="accessibility-title"
-                                className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                                classes={
-                                  Object {
-                                    "elevation0": "MuiPaper-elevation0",
-                                    "elevation1": "MuiPaper-elevation1",
-                                    "elevation10": "MuiPaper-elevation10",
-                                    "elevation11": "MuiPaper-elevation11",
-                                    "elevation12": "MuiPaper-elevation12",
-                                    "elevation13": "MuiPaper-elevation13",
-                                    "elevation14": "MuiPaper-elevation14",
-                                    "elevation15": "MuiPaper-elevation15",
-                                    "elevation16": "MuiPaper-elevation16",
-                                    "elevation17": "MuiPaper-elevation17",
-                                    "elevation18": "MuiPaper-elevation18",
-                                    "elevation19": "MuiPaper-elevation19",
-                                    "elevation2": "MuiPaper-elevation2",
-                                    "elevation20": "MuiPaper-elevation20",
-                                    "elevation21": "MuiPaper-elevation21",
-                                    "elevation22": "MuiPaper-elevation22",
-                                    "elevation23": "MuiPaper-elevation23",
-                                    "elevation24": "MuiPaper-elevation24",
-                                    "elevation3": "MuiPaper-elevation3",
-                                    "elevation4": "MuiPaper-elevation4",
-                                    "elevation5": "MuiPaper-elevation5",
-                                    "elevation6": "MuiPaper-elevation6",
-                                    "elevation7": "MuiPaper-elevation7",
-                                    "elevation8": "MuiPaper-elevation8",
-                                    "elevation9": "MuiPaper-elevation9",
-                                    "outlined": "MuiPaper-outlined",
-                                    "root": "MuiPaper-root",
-                                    "rounded": "MuiPaper-rounded",
-                                  }
-                                }
-                                elevation={24}
-                                role="dialog"
-                              >
-                                <div
-                                  aria-labelledby="accessibility-title"
-                                  className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                                  role="dialog"
-                                >
-                                  <div
-                                    id="accessibility-title"
-                                  >
-                                    feedback.accessibility.window_title
-                                  </div>
-                                  <WithStyles(ForwardRef(IconButton))
-                                    aria-label="feedback.accessibility.button_close"
-                                    className="modal-paper-close-button"
-                                    onClick={[Function]}
-                                  >
-                                    <ForwardRef(IconButton)
-                                      aria-label="feedback.accessibility.button_close"
-                                      className="modal-paper-close-button"
-                                      classes={
-                                        Object {
-                                          "colorInherit": "MuiIconButton-colorInherit",
-                                          "colorPrimary": "MuiIconButton-colorPrimary",
-                                          "colorSecondary": "MuiIconButton-colorSecondary",
-                                          "disabled": "Mui-disabled",
-                                          "edgeEnd": "MuiIconButton-edgeEnd",
-                                          "edgeStart": "MuiIconButton-edgeStart",
-                                          "label": "MuiIconButton-label",
-                                          "root": "MuiIconButton-root",
-                                          "sizeSmall": "MuiIconButton-sizeSmall",
-                                        }
-                                      }
-                                      onClick={[Function]}
-                                    >
-                                      <WithStyles(ForwardRef(ButtonBase))
-                                        aria-label="feedback.accessibility.button_close"
-                                        centerRipple={true}
-                                        className="MuiIconButton-root modal-paper-close-button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        onClick={[Function]}
-                                      >
-                                        <ForwardRef(ButtonBase)
-                                          aria-label="feedback.accessibility.button_close"
-                                          centerRipple={true}
-                                          className="MuiIconButton-root modal-paper-close-button"
-                                          classes={
-                                            Object {
-                                              "disabled": "Mui-disabled",
-                                              "focusVisible": "Mui-focusVisible",
-                                              "root": "MuiButtonBase-root",
-                                            }
-                                          }
-                                          disabled={false}
-                                          focusRipple={true}
-                                          onClick={[Function]}
-                                        >
-                                          <button
-                                            aria-label="feedback.accessibility.button_close"
-                                            className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                            disabled={false}
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onDragLeave={[Function]}
-                                            onFocus={[Function]}
-                                            onKeyDown={[Function]}
-                                            onKeyUp={[Function]}
-                                            onMouseDown={[Function]}
-                                            onMouseLeave={[Function]}
-                                            onMouseUp={[Function]}
-                                            onTouchEnd={[Function]}
-                                            onTouchMove={[Function]}
-                                            onTouchStart={[Function]}
-                                            tabIndex={0}
-                                            type="button"
-                                          >
-                                            <span
-                                              className="MuiIconButton-label"
-                                            >
-                                              <Icon
-                                                icon="test-file-stub"
-                                                size={16}
-                                                spin={false}
-                                              >
-                                                <Component
-                                                  className="styles__icon___23x3R"
-                                                  height={16}
-                                                  style={Object {}}
-                                                  width={16}
-                                                >
-                                                  <svg
-                                                    className="styles__icon___23x3R"
-                                                    height={16}
-                                                    style={Object {}}
-                                                    width={16}
-                                                  >
-                                                    <use
-                                                      xlinkHref="#test-file-stub"
-                                                    />
-                                                  </svg>
-                                                </Component>
-                                              </Icon>
-                                            </span>
-                                            <WithStyles(memo)
-                                              center={true}
-                                            >
-                                              <ForwardRef(TouchRipple)
-                                                center={true}
-                                                classes={
-                                                  Object {
-                                                    "child": "MuiTouchRipple-child",
-                                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                                    "ripple": "MuiTouchRipple-ripple",
-                                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                    "root": "MuiTouchRipple-root",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="MuiTouchRipple-root"
-                                                >
-                                                  <TransitionGroup
-                                                    childFactory={[Function]}
-                                                    component={null}
-                                                    exit={true}
-                                                  />
-                                                </span>
-                                              </ForwardRef(TouchRipple)>
-                                            </WithStyles(memo)>
-                                          </button>
-                                        </ForwardRef(ButtonBase)>
-                                      </WithStyles(ForwardRef(ButtonBase))>
-                                    </ForwardRef(IconButton)>
-                                  </WithStyles(ForwardRef(IconButton))>
-                                  <div
-                                    className="eg-init-modal"
-                                  >
-                                    <div
-                                      className="title text-20-bold"
-                                    >
-                                      ecogesture.initModal.title
-                                    </div>
-                                    <div
-                                      className="text-16-normal"
-                                    >
-                                      ecogesture.initModal.text1
-                                    </div>
-                                    <div
-                                      className="text-16-normal"
-                                    >
-                                      ecogesture.initModal.text2
-                                    </div>
-                                    <div
-                                      className="buttons-container"
-                                    >
-                                      <WithStyles(ForwardRef(Button))
-                                        aria-label="ecogesture.initModal.btn1"
-                                        className="btnSecondary"
-                                        onClick={[Function]}
-                                      >
-                                        <ForwardRef(Button)
-                                          aria-label="ecogesture.initModal.btn1"
-                                          className="btnSecondary"
-                                          classes={
-                                            Object {
-                                              "colorInherit": "MuiButton-colorInherit",
-                                              "contained": "MuiButton-contained",
-                                              "containedPrimary": "MuiButton-containedPrimary",
-                                              "containedSecondary": "MuiButton-containedSecondary",
-                                              "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                              "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                              "disableElevation": "MuiButton-disableElevation",
-                                              "disabled": "Mui-disabled",
-                                              "endIcon": "MuiButton-endIcon",
-                                              "focusVisible": "Mui-focusVisible",
-                                              "fullWidth": "MuiButton-fullWidth",
-                                              "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                              "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                              "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                              "label": "MuiButton-label",
-                                              "outlined": "MuiButton-outlined",
-                                              "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                              "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                              "root": "MuiButton-root",
-                                              "sizeLarge": "MuiButton-sizeLarge",
-                                              "sizeSmall": "MuiButton-sizeSmall",
-                                              "startIcon": "MuiButton-startIcon",
-                                              "text": "MuiButton-text",
-                                              "textPrimary": "MuiButton-textPrimary",
-                                              "textSecondary": "MuiButton-textSecondary",
-                                              "textSizeLarge": "MuiButton-textSizeLarge",
-                                              "textSizeSmall": "MuiButton-textSizeSmall",
-                                            }
-                                          }
-                                          onClick={[Function]}
-                                        >
-                                          <WithStyles(ForwardRef(ButtonBase))
-                                            aria-label="ecogesture.initModal.btn1"
-                                            className="MuiButton-root MuiButton-text btnSecondary"
-                                            component="button"
-                                            disabled={false}
-                                            focusRipple={true}
-                                            focusVisibleClassName="Mui-focusVisible"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <ForwardRef(ButtonBase)
-                                              aria-label="ecogesture.initModal.btn1"
-                                              className="MuiButton-root MuiButton-text btnSecondary"
-                                              classes={
-                                                Object {
-                                                  "disabled": "Mui-disabled",
-                                                  "focusVisible": "Mui-focusVisible",
-                                                  "root": "MuiButtonBase-root",
-                                                }
-                                              }
-                                              component="button"
-                                              disabled={false}
-                                              focusRipple={true}
-                                              focusVisibleClassName="Mui-focusVisible"
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <button
-                                                aria-label="ecogesture.initModal.btn1"
-                                                className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onDragLeave={[Function]}
-                                                onFocus={[Function]}
-                                                onKeyDown={[Function]}
-                                                onKeyUp={[Function]}
-                                                onMouseDown={[Function]}
-                                                onMouseLeave={[Function]}
-                                                onMouseUp={[Function]}
-                                                onTouchEnd={[Function]}
-                                                onTouchMove={[Function]}
-                                                onTouchStart={[Function]}
-                                                tabIndex={0}
-                                                type="button"
-                                              >
-                                                <span
-                                                  className="MuiButton-label"
-                                                >
-                                                  ecogesture.initModal.btn1
-                                                </span>
-                                                <WithStyles(memo)
-                                                  center={false}
-                                                >
-                                                  <ForwardRef(TouchRipple)
-                                                    center={false}
-                                                    classes={
-                                                      Object {
-                                                        "child": "MuiTouchRipple-child",
-                                                        "childLeaving": "MuiTouchRipple-childLeaving",
-                                                        "childPulsate": "MuiTouchRipple-childPulsate",
-                                                        "ripple": "MuiTouchRipple-ripple",
-                                                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                        "root": "MuiTouchRipple-root",
-                                                      }
-                                                    }
-                                                  >
-                                                    <span
-                                                      className="MuiTouchRipple-root"
-                                                    >
-                                                      <TransitionGroup
-                                                        childFactory={[Function]}
-                                                        component={null}
-                                                        exit={true}
-                                                      />
-                                                    </span>
-                                                  </ForwardRef(TouchRipple)>
-                                                </WithStyles(memo)>
-                                              </button>
-                                            </ForwardRef(ButtonBase)>
-                                          </WithStyles(ForwardRef(ButtonBase))>
-                                        </ForwardRef(Button)>
-                                      </WithStyles(ForwardRef(Button))>
-                                      <WithStyles(ForwardRef(Button))
-                                        aria-label="ecogesture.initModal.btn2"
-                                        className="btnPrimary"
-                                        onClick={[Function]}
-                                      >
-                                        <ForwardRef(Button)
-                                          aria-label="ecogesture.initModal.btn2"
-                                          className="btnPrimary"
-                                          classes={
-                                            Object {
-                                              "colorInherit": "MuiButton-colorInherit",
-                                              "contained": "MuiButton-contained",
-                                              "containedPrimary": "MuiButton-containedPrimary",
-                                              "containedSecondary": "MuiButton-containedSecondary",
-                                              "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                              "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                              "disableElevation": "MuiButton-disableElevation",
-                                              "disabled": "Mui-disabled",
-                                              "endIcon": "MuiButton-endIcon",
-                                              "focusVisible": "Mui-focusVisible",
-                                              "fullWidth": "MuiButton-fullWidth",
-                                              "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                              "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                              "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                              "label": "MuiButton-label",
-                                              "outlined": "MuiButton-outlined",
-                                              "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                              "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                              "root": "MuiButton-root",
-                                              "sizeLarge": "MuiButton-sizeLarge",
-                                              "sizeSmall": "MuiButton-sizeSmall",
-                                              "startIcon": "MuiButton-startIcon",
-                                              "text": "MuiButton-text",
-                                              "textPrimary": "MuiButton-textPrimary",
-                                              "textSecondary": "MuiButton-textSecondary",
-                                              "textSizeLarge": "MuiButton-textSizeLarge",
-                                              "textSizeSmall": "MuiButton-textSizeSmall",
-                                            }
-                                          }
-                                          onClick={[Function]}
-                                        >
-                                          <WithStyles(ForwardRef(ButtonBase))
-                                            aria-label="ecogesture.initModal.btn2"
-                                            className="MuiButton-root MuiButton-text btnPrimary"
-                                            component="button"
-                                            disabled={false}
-                                            focusRipple={true}
-                                            focusVisibleClassName="Mui-focusVisible"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <ForwardRef(ButtonBase)
-                                              aria-label="ecogesture.initModal.btn2"
-                                              className="MuiButton-root MuiButton-text btnPrimary"
-                                              classes={
-                                                Object {
-                                                  "disabled": "Mui-disabled",
-                                                  "focusVisible": "Mui-focusVisible",
-                                                  "root": "MuiButtonBase-root",
-                                                }
-                                              }
-                                              component="button"
-                                              disabled={false}
-                                              focusRipple={true}
-                                              focusVisibleClassName="Mui-focusVisible"
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <button
-                                                aria-label="ecogesture.initModal.btn2"
-                                                className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onDragLeave={[Function]}
-                                                onFocus={[Function]}
-                                                onKeyDown={[Function]}
-                                                onKeyUp={[Function]}
-                                                onMouseDown={[Function]}
-                                                onMouseLeave={[Function]}
-                                                onMouseUp={[Function]}
-                                                onTouchEnd={[Function]}
-                                                onTouchMove={[Function]}
-                                                onTouchStart={[Function]}
-                                                tabIndex={0}
-                                                type="button"
-                                              >
-                                                <span
-                                                  className="MuiButton-label"
-                                                >
-                                                  ecogesture.initModal.btn2
-                                                </span>
-                                                <WithStyles(memo)
-                                                  center={false}
-                                                >
-                                                  <ForwardRef(TouchRipple)
-                                                    center={false}
-                                                    classes={
-                                                      Object {
-                                                        "child": "MuiTouchRipple-child",
-                                                        "childLeaving": "MuiTouchRipple-childLeaving",
-                                                        "childPulsate": "MuiTouchRipple-childPulsate",
-                                                        "ripple": "MuiTouchRipple-ripple",
-                                                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                        "root": "MuiTouchRipple-root",
-                                                      }
-                                                    }
-                                                  >
-                                                    <span
-                                                      className="MuiTouchRipple-root"
-                                                    >
-                                                      <TransitionGroup
-                                                        childFactory={[Function]}
-                                                        component={null}
-                                                        exit={true}
-                                                      />
-                                                    </span>
-                                                  </ForwardRef(TouchRipple)>
-                                                </WithStyles(memo)>
-                                              </button>
-                                            </ForwardRef(ButtonBase)>
-                                          </WithStyles(ForwardRef(ButtonBase))>
-                                        </ForwardRef(Button)>
-                                      </WithStyles(ForwardRef(Button))>
-                                    </div>
-                                  </div>
-                                </div>
-                              </ForwardRef(Paper)>
-                            </WithStyles(ForwardRef(Paper))>
-                          </div>
-                        </Transition>
-                      </ForwardRef(Fade)>
-                      <div
-                        data-test="sentinelEnd"
-                        tabIndex={0}
-                      />
-                    </Unstable_TrapFocus>
-                  </div>
-                </Portal>
-              </ForwardRef(Portal)>
-            </ForwardRef(Modal)>
-          </ForwardRef(Dialog)>
-        </WithStyles(ForwardRef(Dialog))>
-      </EcogestureInitModal>
-    </mock-content>
-  </EcogestureTabsView>
-</Provider>
+                ecogesture.emptyList.btn1
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+            <button
+              aria-label="ecogesture.emptyList.btn2"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                ecogesture.emptyList.btn2
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-labelledby="simple-tab-2"
+      hidden=""
+      id="simple-tabpanel-2"
+      role="tabpanel"
+    />
+  </mock-content>
+</div>
 `;
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index 11cde2636f8c516de913509411a4034767bae5dd..ef9a7d029c57ed922153d936c662b93acdba7e00 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -1,555 +1,154 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SingleEcogesture component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <SingleEcogestureView>
-    <mock-cozybar
-      displayBackArrow={true}
-      titleKey="common.title_ecogesture"
-    />
-    <mock-header
-      desktopTitleKey="common.title_ecogesture"
-      displayBackArrow={true}
-      setHeaderHeight={[Function]}
-    />
-    <mock-content
-      heightOffset={0}
+<div>
+  <mock-cozybar
+    displaybackarrow="true"
+    titlekey="common.title_ecogesture"
+  />
+  <mock-header
+    desktoptitlekey="common.title_ecogesture"
+    displaybackarrow="true"
+  />
+  <mock-content
+    heightoffset="0"
+  >
+    <div
+      class="single-ecogesture"
     >
       <div
-        className="single-ecogesture"
+        class="icon-container"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon-big styles__icon___23x3R"
+          height="220"
+          width="220"
+        >
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
+      </div>
+      <div
+        class="details"
       >
         <div
-          className="icon-container"
+          class="text-22-bold title"
         >
-          <StyledIcon
-            className="icon-big"
-            icon="test-file-stub"
-            size={220}
-          >
-            <Icon
-              aria-hidden={true}
-              className="icon-big"
-              icon="test-file-stub"
-              size={220}
-              spin={false}
-            >
-              <Component
-                aria-hidden={true}
-                className="icon-big styles__icon___23x3R"
-                height={220}
-                style={Object {}}
-                width={220}
-              >
-                <svg
-                  aria-hidden={true}
-                  className="icon-big styles__icon___23x3R"
-                  height={220}
-                  style={Object {}}
-                  width={220}
-                >
-                  <use
-                    xlinkHref="#test-file-stub"
-                  />
-                </svg>
-              </Component>
-            </Icon>
-          </StyledIcon>
+          Bonhomme de neige
         </div>
         <div
-          className="details"
+          class="efficiency"
         >
-          <div
-            className="text-22-bold title"
+          <span
+            class="text-14-normal"
           >
-            Bonhomme de neige
-          </div>
-          <div
-            className="efficiency"
-          >
-            <span
-              className="text-14-normal"
-            >
-              ecogesture_modal.efficiency
-            </span>
-            <mock-EfficiencyRating
-              result={4}
-            />
-          </div>
+            ecogesture_modal.efficiency
+          </span>
+          <mock-efficiencyrating
+            result="4"
+          />
         </div>
+      </div>
+      <div
+        class="styled-container"
+      >
         <div
-          className="styled-container"
+          class="long-name text-18-bold"
         >
-          <div
-            className="long-name text-18-bold"
-          >
-            Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
-          </div>
-          <WithStyles(ForwardRef(Button))
-            classes={
-              Object {
-                "label": "text-15-normal",
-                "root": "btnText showMore",
-              }
-            }
-            onClick={[Function]}
+          Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
+        </div>
+        <button
+          class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label text-15-normal"
           >
-            <ForwardRef(Button)
-              classes={
-                Object {
-                  "colorInherit": "MuiButton-colorInherit",
-                  "contained": "MuiButton-contained",
-                  "containedPrimary": "MuiButton-containedPrimary",
-                  "containedSecondary": "MuiButton-containedSecondary",
-                  "containedSizeLarge": "MuiButton-containedSizeLarge",
-                  "containedSizeSmall": "MuiButton-containedSizeSmall",
-                  "disableElevation": "MuiButton-disableElevation",
-                  "disabled": "Mui-disabled",
-                  "endIcon": "MuiButton-endIcon",
-                  "focusVisible": "Mui-focusVisible",
-                  "fullWidth": "MuiButton-fullWidth",
-                  "iconSizeLarge": "MuiButton-iconSizeLarge",
-                  "iconSizeMedium": "MuiButton-iconSizeMedium",
-                  "iconSizeSmall": "MuiButton-iconSizeSmall",
-                  "label": "MuiButton-label text-15-normal",
-                  "outlined": "MuiButton-outlined",
-                  "outlinedPrimary": "MuiButton-outlinedPrimary",
-                  "outlinedSecondary": "MuiButton-outlinedSecondary",
-                  "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                  "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                  "root": "MuiButton-root btnText showMore",
-                  "sizeLarge": "MuiButton-sizeLarge",
-                  "sizeSmall": "MuiButton-sizeSmall",
-                  "startIcon": "MuiButton-startIcon",
-                  "text": "MuiButton-text",
-                  "textPrimary": "MuiButton-textPrimary",
-                  "textSecondary": "MuiButton-textSecondary",
-                  "textSizeLarge": "MuiButton-textSizeLarge",
-                  "textSizeSmall": "MuiButton-textSizeSmall",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                className="MuiButton-root btnText showMore MuiButton-text"
-                component="button"
-                disabled={false}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <ForwardRef(ButtonBase)
-                  className="MuiButton-root btnText showMore MuiButton-text"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  component="button"
-                  disabled={false}
-                  focusRipple={true}
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <button
-                    className="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiButton-label text-15-normal"
-                    >
-                      ecogesture_modal.show_more
-                    </span>
-                    <WithStyles(memo)
-                      center={false}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={false}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(Button)>
-          </WithStyles(ForwardRef(Button))>
-          <WithStyles(ForwardRef(Collapse))
-            in={false}
+            ecogesture_modal.show_more
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="MuiCollapse-root MuiCollapse-hidden"
+          style="min-height: 0px;"
+        >
+          <div
+            class="MuiCollapse-wrapper"
           >
-            <ForwardRef(Collapse)
-              classes={
-                Object {
-                  "entered": "MuiCollapse-entered",
-                  "hidden": "MuiCollapse-hidden",
-                  "root": "MuiCollapse-root",
-                  "wrapper": "MuiCollapse-wrapper",
-                  "wrapperInner": "MuiCollapse-wrapperInner",
-                }
-              }
-              in={false}
+            <div
+              class="MuiCollapse-wrapperInner"
             >
-              <Transition
-                addEndListener={[Function]}
-                appear={false}
-                enter={true}
-                exit={true}
-                in={false}
-                mountOnEnter={false}
-                onEnter={[Function]}
-                onEntered={[Function]}
-                onEntering={[Function]}
-                onExit={[Function]}
-                onExited={[Function]}
-                onExiting={[Function]}
-                timeout={300}
-                unmountOnExit={false}
+              <div
+                class="longDescription text-16-normal-150"
               >
-                <div
-                  className="MuiCollapse-root MuiCollapse-hidden"
-                  style={
-                    Object {
-                      "minHeight": "0px",
-                    }
-                  }
-                >
-                  <div
-                    className="MuiCollapse-wrapper"
-                  >
-                    <div
-                      className="MuiCollapse-wrapperInner"
-                    >
-                      <div
-                        className="longDescription text-16-normal-150"
-                      >
-                        On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Transition>
-            </ForwardRef(Collapse)>
-          </WithStyles(ForwardRef(Collapse))>
+                On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+              </div>
+            </div>
+          </div>
         </div>
-        <div
-          className="buttons-selection"
+      </div>
+      <div
+        class="buttons-selection"
+      >
+        <button
+          aria-label="ecogesture.objective"
+          class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false"
+          tabindex="0"
+          type="button"
         >
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture.objective"
-            classes={
-              Object {
-                "label": "text-15-normal",
-                "root": "btnSecondary objective-btn false",
-              }
-            }
-            onClick={[Function]}
+          <span
+            class="MuiIconButton-label text-15-normal"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture.objective"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label text-15-normal",
-                  "root": "MuiIconButton-root btnSecondary objective-btn false",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
+            <svg
+              class="status-icon styles__icon___23x3R"
+              height="40"
+              width="40"
             >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture.objective"
-                centerRipple={true}
-                className="MuiIconButton-root btnSecondary objective-btn false"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture.objective"
-                  centerRipple={true}
-                  className="MuiIconButton-root btnSecondary objective-btn false"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <button
-                    aria-label="ecogesture.objective"
-                    className="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label text-15-normal"
-                    >
-                      <Icon
-                        className="status-icon"
-                        icon="test-file-stub"
-                        size={40}
-                        spin={false}
-                      >
-                        <Component
-                          className="status-icon styles__icon___23x3R"
-                          height={40}
-                          style={Object {}}
-                          width={40}
-                        >
-                          <svg
-                            className="status-icon styles__icon___23x3R"
-                            height={40}
-                            style={Object {}}
-                            width={40}
-                          >
-                            <use
-                              xlinkHref="#test-file-stub"
-                            />
-                          </svg>
-                        </Component>
-                      </Icon>
-                      <span>
-                        ecogesture.objective
-                      </span>
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture.doing"
-            classes={
-              Object {
-                "label": "text-15-normal",
-                "root": "btnSecondary doing-btn false",
-              }
-            }
-            onClick={[Function]}
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <span>
+              ecogesture.objective
+            </span>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture.doing"
+          class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label text-15-normal"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture.doing"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label text-15-normal",
-                  "root": "MuiIconButton-root btnSecondary doing-btn false",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
+            <svg
+              class="status-icon styles__icon___23x3R"
+              height="40"
+              width="40"
             >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture.doing"
-                centerRipple={true}
-                className="MuiIconButton-root btnSecondary doing-btn false"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture.doing"
-                  centerRipple={true}
-                  className="MuiIconButton-root btnSecondary doing-btn false"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <button
-                    aria-label="ecogesture.doing"
-                    className="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label text-15-normal"
-                    >
-                      <Icon
-                        className="status-icon"
-                        icon="test-file-stub"
-                        size={40}
-                        spin={false}
-                      >
-                        <Component
-                          className="status-icon styles__icon___23x3R"
-                          height={40}
-                          style={Object {}}
-                          width={40}
-                        >
-                          <svg
-                            className="status-icon styles__icon___23x3R"
-                            height={40}
-                            style={Object {}}
-                            width={40}
-                          >
-                            <use
-                              xlinkHref="#test-file-stub"
-                            />
-                          </svg>
-                        </Component>
-                      </Icon>
-                      <span>
-                        ecogesture.doing
-                      </span>
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-        </div>
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <span>
+              ecogesture.doing
+            </span>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
       </div>
-    </mock-content>
-  </SingleEcogestureView>
-</Provider>
+    </div>
+  </mock-content>
+</div>
 `;
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
index e90b2a64530163110d9cf23f69ba7bdb440e657c..3d073c2f2fd58b67cd29d33dd259a2cb9cd9cb4b 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
@@ -2,7 +2,6 @@ import { Button } from '@material-ui/core'
 import { render, screen, waitFor } from '@testing-library/react'
 import { EquipmentType } from 'enums'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { mockProfileEcogesture } from 'tests/__mocks__/profileEcogesture.mock'
@@ -18,7 +17,7 @@ jest.mock('../EquipmentIcon/EquipmentIcon', () => 'mock-equipment-icon')
 describe('EcogestureFormEquipment component', () => {
   const store = createMockEcolyoStore()
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormEquipment
           currentProfileEcogesture={mockProfileEcogesture}
@@ -28,8 +27,7 @@ describe('EcogestureFormEquipment component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
   it('should find X equipments', async () => {
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index b15399a11483d25721a0d9e1e8f73970599b1fb8..ed0bc90c23394c74c1afea2438180aa81028d0e0 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -1,2247 +1,343 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <EcogestureFormEquipment
-    currentProfileEcogesture={
-      Object {
-        "equipments": Array [],
-        "heating": "individual",
-        "hotWater": "individual",
-        "warmingFluid": 0,
-      }
-    }
-    setNextStepEcogestureForm={[MockFunction]}
-    setPreviousStep={[MockFunction]}
-    step={0}
+<div>
+  <div
+    class="ecogesture-profile-container"
   >
     <div
-      className="ecogesture-profile-container"
+      class="equipment-form-container"
     >
       <div
-        className="equipment-form-container"
+        class="equipment-label text-22-normal"
       >
-        <div
-          className="equipment-label text-22-normal"
-        >
-          ecogesture_profile.equipments.question
-        </div>
-        <div
-          className="equipment-hint text-16-normal"
-        >
-          ecogesture_profile.equipments.hint
-        </div>
-        <div
-          className="icons-container"
+        ecogesture_profile.equipments.question
+      </div>
+      <div
+        class="equipment-hint text-16-normal"
+      >
+        ecogesture_profile.equipments.hint
+      </div>
+      <div
+        class="icons-container"
+      >
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
         >
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="AIR_CONDITIONING"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="AIR_CONDITIONING"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="COMPUTER"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="AIR_CONDITIONING"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="COMPUTER"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="MICROWAVE"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="COMPUTER"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="MICROWAVE"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="WASHING_MACHINE"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="MICROWAVE"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="WASHING_MACHINE"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="DISHWASHER"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="WASHING_MACHINE"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="DISHWASHER"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="COOKING_PLATES"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="DISHWASHER"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="COOKING_PLATES"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="DRYER"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="COOKING_PLATES"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="DRYER"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="REFREGIRATOR"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="DRYER"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="REFREGIRATOR"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="FAN"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="REFREGIRATOR"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="FAN"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="CURTAIN"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="FAN"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="CURTAIN"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="INTERNET_BOX"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="CURTAIN"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="INTERNET_BOX"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="VENTILATION"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="INTERNET_BOX"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="VENTILATION"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="FREEZER"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="VENTILATION"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="FREEZER"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="BOILER"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="FREEZER"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="BOILER"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="ecogesture_profile.equipments.accessible_label"
-            className="checkbox-equipment"
-            key="HYDRAULIC_HEATING"
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "5px",
-              }
-            }
+            <mock-equipment-icon
+              equipment="BOILER"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-label="ecogesture_profile.equipments.accessible_label"
+          class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          style="border-radius: 5px;"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <ForwardRef(IconButton)
-              aria-label="ecogesture_profile.equipments.accessible_label"
-              className="checkbox-equipment"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "5px",
-                }
-              }
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="ecogesture_profile.equipments.accessible_label"
-                centerRipple={true}
-                className="MuiIconButton-root checkbox-equipment"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "borderRadius": "5px",
-                  }
-                }
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="ecogesture_profile.equipments.accessible_label"
-                  centerRipple={true}
-                  className="MuiIconButton-root checkbox-equipment"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "borderRadius": "5px",
-                    }
-                  }
-                >
-                  <button
-                    aria-label="ecogesture_profile.equipments.accessible_label"
-                    className="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    style={
-                      Object {
-                        "borderRadius": "5px",
-                      }
-                    }
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <mock-equipment-icon
-                        equipment="HYDRAULIC_HEATING"
-                        isChecked={false}
-                      />
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-        </div>
+            <mock-equipment-icon
+              equipment="HYDRAULIC_HEATING"
+              ischecked="false"
+            />
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
       </div>
     </div>
-    <FormNavigation
-      disableNextButton={true}
-      handleNext={[Function]}
-      handlePrevious={[Function]}
-      isEcogesture={true}
-      step={0}
+  </div>
+  <div
+    class="profile-navigation"
+  >
+    <button
+      aria-label="profile_type.accessibility.button_previous"
+      class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
+      disabled=""
+      tabindex="-1"
+      type="button"
     >
-      <div
-        className="profile-navigation"
+      <span
+        class="MuiButton-label"
       >
-        <WithStyles(ForwardRef(Button))
-          aria-label="profile_type.accessibility.button_previous"
-          className="btnSecondary"
-          disabled={true}
-          onClick={[Function]}
-        >
-          <ForwardRef(Button)
-            aria-label="profile_type.accessibility.button_previous"
-            className="btnSecondary"
-            classes={
-              Object {
-                "colorInherit": "MuiButton-colorInherit",
-                "contained": "MuiButton-contained",
-                "containedPrimary": "MuiButton-containedPrimary",
-                "containedSecondary": "MuiButton-containedSecondary",
-                "containedSizeLarge": "MuiButton-containedSizeLarge",
-                "containedSizeSmall": "MuiButton-containedSizeSmall",
-                "disableElevation": "MuiButton-disableElevation",
-                "disabled": "Mui-disabled",
-                "endIcon": "MuiButton-endIcon",
-                "focusVisible": "Mui-focusVisible",
-                "fullWidth": "MuiButton-fullWidth",
-                "iconSizeLarge": "MuiButton-iconSizeLarge",
-                "iconSizeMedium": "MuiButton-iconSizeMedium",
-                "iconSizeSmall": "MuiButton-iconSizeSmall",
-                "label": "MuiButton-label",
-                "outlined": "MuiButton-outlined",
-                "outlinedPrimary": "MuiButton-outlinedPrimary",
-                "outlinedSecondary": "MuiButton-outlinedSecondary",
-                "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                "root": "MuiButton-root",
-                "sizeLarge": "MuiButton-sizeLarge",
-                "sizeSmall": "MuiButton-sizeSmall",
-                "startIcon": "MuiButton-startIcon",
-                "text": "MuiButton-text",
-                "textPrimary": "MuiButton-textPrimary",
-                "textSecondary": "MuiButton-textSecondary",
-                "textSizeLarge": "MuiButton-textSizeLarge",
-                "textSizeSmall": "MuiButton-textSizeSmall",
-              }
-            }
-            disabled={true}
-            onClick={[Function]}
-          >
-            <WithStyles(ForwardRef(ButtonBase))
-              aria-label="profile_type.accessibility.button_previous"
-              className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
-              component="button"
-              disabled={true}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <ForwardRef(ButtonBase)
-                aria-label="profile_type.accessibility.button_previous"
-                className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
-                component="button"
-                disabled={true}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <button
-                  aria-label="profile_type.accessibility.button_previous"
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
-                  disabled={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={-1}
-                  type="button"
-                >
-                  <span
-                    className="MuiButton-label"
-                  >
-                    profile_type.form.button_previous
-                  </span>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(Button)>
-        </WithStyles(ForwardRef(Button))>
-        <WithStyles(ForwardRef(Button))
-          aria-label="profile_type.accessibility.button_next"
-          className="btnPrimary"
-          disabled={true}
-          onClick={[Function]}
-        >
-          <ForwardRef(Button)
-            aria-label="profile_type.accessibility.button_next"
-            className="btnPrimary"
-            classes={
-              Object {
-                "colorInherit": "MuiButton-colorInherit",
-                "contained": "MuiButton-contained",
-                "containedPrimary": "MuiButton-containedPrimary",
-                "containedSecondary": "MuiButton-containedSecondary",
-                "containedSizeLarge": "MuiButton-containedSizeLarge",
-                "containedSizeSmall": "MuiButton-containedSizeSmall",
-                "disableElevation": "MuiButton-disableElevation",
-                "disabled": "Mui-disabled",
-                "endIcon": "MuiButton-endIcon",
-                "focusVisible": "Mui-focusVisible",
-                "fullWidth": "MuiButton-fullWidth",
-                "iconSizeLarge": "MuiButton-iconSizeLarge",
-                "iconSizeMedium": "MuiButton-iconSizeMedium",
-                "iconSizeSmall": "MuiButton-iconSizeSmall",
-                "label": "MuiButton-label",
-                "outlined": "MuiButton-outlined",
-                "outlinedPrimary": "MuiButton-outlinedPrimary",
-                "outlinedSecondary": "MuiButton-outlinedSecondary",
-                "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                "root": "MuiButton-root",
-                "sizeLarge": "MuiButton-sizeLarge",
-                "sizeSmall": "MuiButton-sizeSmall",
-                "startIcon": "MuiButton-startIcon",
-                "text": "MuiButton-text",
-                "textPrimary": "MuiButton-textPrimary",
-                "textSecondary": "MuiButton-textSecondary",
-                "textSizeLarge": "MuiButton-textSizeLarge",
-                "textSizeSmall": "MuiButton-textSizeSmall",
-              }
-            }
-            disabled={true}
-            onClick={[Function]}
-          >
-            <WithStyles(ForwardRef(ButtonBase))
-              aria-label="profile_type.accessibility.button_next"
-              className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
-              component="button"
-              disabled={true}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <ForwardRef(ButtonBase)
-                aria-label="profile_type.accessibility.button_next"
-                className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
-                component="button"
-                disabled={true}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <button
-                  aria-label="profile_type.accessibility.button_next"
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
-                  disabled={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={-1}
-                  type="button"
-                >
-                  <span
-                    className="MuiButton-label"
-                  >
-                    profile_type.form.button_next
-                  </span>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(Button)>
-        </WithStyles(ForwardRef(Button))>
-      </div>
-    </FormNavigation>
-  </EcogestureFormEquipment>
-</Provider>
+        profile_type.form.button_previous
+      </span>
+    </button>
+    <button
+      aria-label="profile_type.accessibility.button_next"
+      class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        class="MuiButton-label"
+      >
+        profile_type.form.button_next
+      </span>
+    </button>
+  </div>
+</div>
 `;
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
index 3d97bafc6e7d1818a5eb16eaa519467f1ae1e7b6..618a3ee2b2f056904e9b942fc546e356c58579ac 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import {
@@ -22,7 +22,7 @@ describe('EcogestureFormSingleChoice component', () => {
   const store = createMockEcolyoStore()
 
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormSingleChoice
           step={0}
@@ -34,8 +34,7 @@ describe('EcogestureFormSingleChoice component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
   it('should click on disabled button', async () => {
     const wrapper = mount(
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index 05bb4e6800a6069295cf4d642860c93be893dc93..cc1a100279b74d343909aae9111fc9fb8203cc6b 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -1,325 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <EcogestureFormSingleChoice
-    answerType={
-      Object {
-        "attribute": "heating",
-        "choices": Array [
-          "individual",
-          "collective",
-        ],
-        "type": 0,
-      }
-    }
-    currentProfileEcogesture={
-      Object {
-        "equipments": Array [],
-        "heating": "individual",
-        "hotWater": "individual",
-        "warmingFluid": 0,
-      }
-    }
-    setNextStep={[MockFunction]}
-    setPreviousStep={[MockFunction]}
-    step={0}
-    viewedStep={1}
+<div>
+  <div
+    class="ecogesture-profile-container"
   >
     <div
-      className="ecogesture-profile-container"
+      class="profile-form-container ecogesture-form-single"
     >
       <div
-        className="profile-form-container ecogesture-form-single"
+        class="profile-question-label"
       >
-        <div
-          className="profile-question-label"
-        >
-          ecogesture_form.heating_type.question
-        </div>
-        <label
-          className="radio_short answer-checked"
-          key="individual"
-        >
-          <input
-            checked={true}
-            className="checked-input"
-            name="individual"
-            onChange={[Function]}
-            type="radio"
-            value="individual"
-          />
-          ecogesture_form.heating_type.individual
-        </label>
-        <label
-          className="radio_short"
-          key="collective"
-        >
-          <input
-            checked={false}
-            className=""
-            name="collective"
-            onChange={[Function]}
-            type="radio"
-            value="collective"
-          />
-          ecogesture_form.heating_type.collective
-        </label>
+        ecogesture_form.heating_type.question
       </div>
-      <FormNavigation
-        disableNextButton={false}
-        handleNext={[Function]}
-        handlePrevious={[Function]}
-        isEcogesture={true}
-        step={0}
+      <label
+        class="radio_short answer-checked"
+      >
+        <input
+          checked=""
+          class="checked-input"
+          name="individual"
+          type="radio"
+          value="individual"
+        />
+        ecogesture_form.heating_type.individual
+      </label>
+      <label
+        class="radio_short"
+      >
+        <input
+          class=""
+          name="collective"
+          type="radio"
+          value="collective"
+        />
+        ecogesture_form.heating_type.collective
+      </label>
+    </div>
+    <div
+      class="profile-navigation"
+    >
+      <button
+        aria-label="profile_type.accessibility.button_previous"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
+        disabled=""
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          profile_type.form.button_previous
+        </span>
+      </button>
+      <button
+        aria-label="profile_type.accessibility.button_next"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+        tabindex="0"
+        type="button"
       >
-        <div
-          className="profile-navigation"
+        <span
+          class="MuiButton-label"
         >
-          <WithStyles(ForwardRef(Button))
-            aria-label="profile_type.accessibility.button_previous"
-            className="btnSecondary"
-            disabled={true}
-            onClick={[Function]}
-          >
-            <ForwardRef(Button)
-              aria-label="profile_type.accessibility.button_previous"
-              className="btnSecondary"
-              classes={
-                Object {
-                  "colorInherit": "MuiButton-colorInherit",
-                  "contained": "MuiButton-contained",
-                  "containedPrimary": "MuiButton-containedPrimary",
-                  "containedSecondary": "MuiButton-containedSecondary",
-                  "containedSizeLarge": "MuiButton-containedSizeLarge",
-                  "containedSizeSmall": "MuiButton-containedSizeSmall",
-                  "disableElevation": "MuiButton-disableElevation",
-                  "disabled": "Mui-disabled",
-                  "endIcon": "MuiButton-endIcon",
-                  "focusVisible": "Mui-focusVisible",
-                  "fullWidth": "MuiButton-fullWidth",
-                  "iconSizeLarge": "MuiButton-iconSizeLarge",
-                  "iconSizeMedium": "MuiButton-iconSizeMedium",
-                  "iconSizeSmall": "MuiButton-iconSizeSmall",
-                  "label": "MuiButton-label",
-                  "outlined": "MuiButton-outlined",
-                  "outlinedPrimary": "MuiButton-outlinedPrimary",
-                  "outlinedSecondary": "MuiButton-outlinedSecondary",
-                  "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                  "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                  "root": "MuiButton-root",
-                  "sizeLarge": "MuiButton-sizeLarge",
-                  "sizeSmall": "MuiButton-sizeSmall",
-                  "startIcon": "MuiButton-startIcon",
-                  "text": "MuiButton-text",
-                  "textPrimary": "MuiButton-textPrimary",
-                  "textSecondary": "MuiButton-textSecondary",
-                  "textSizeLarge": "MuiButton-textSizeLarge",
-                  "textSizeSmall": "MuiButton-textSizeSmall",
-                }
-              }
-              disabled={true}
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="profile_type.accessibility.button_previous"
-                className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
-                component="button"
-                disabled={true}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="profile_type.accessibility.button_previous"
-                  className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  component="button"
-                  disabled={true}
-                  focusRipple={true}
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <button
-                    aria-label="profile_type.accessibility.button_previous"
-                    className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
-                    disabled={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={-1}
-                    type="button"
-                  >
-                    <span
-                      className="MuiButton-label"
-                    >
-                      profile_type.form.button_previous
-                    </span>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(Button)>
-          </WithStyles(ForwardRef(Button))>
-          <WithStyles(ForwardRef(Button))
-            aria-label="profile_type.accessibility.button_next"
-            className="btnPrimary"
-            disabled={false}
-            onClick={[Function]}
-          >
-            <ForwardRef(Button)
-              aria-label="profile_type.accessibility.button_next"
-              className="btnPrimary"
-              classes={
-                Object {
-                  "colorInherit": "MuiButton-colorInherit",
-                  "contained": "MuiButton-contained",
-                  "containedPrimary": "MuiButton-containedPrimary",
-                  "containedSecondary": "MuiButton-containedSecondary",
-                  "containedSizeLarge": "MuiButton-containedSizeLarge",
-                  "containedSizeSmall": "MuiButton-containedSizeSmall",
-                  "disableElevation": "MuiButton-disableElevation",
-                  "disabled": "Mui-disabled",
-                  "endIcon": "MuiButton-endIcon",
-                  "focusVisible": "Mui-focusVisible",
-                  "fullWidth": "MuiButton-fullWidth",
-                  "iconSizeLarge": "MuiButton-iconSizeLarge",
-                  "iconSizeMedium": "MuiButton-iconSizeMedium",
-                  "iconSizeSmall": "MuiButton-iconSizeSmall",
-                  "label": "MuiButton-label",
-                  "outlined": "MuiButton-outlined",
-                  "outlinedPrimary": "MuiButton-outlinedPrimary",
-                  "outlinedSecondary": "MuiButton-outlinedSecondary",
-                  "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                  "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                  "root": "MuiButton-root",
-                  "sizeLarge": "MuiButton-sizeLarge",
-                  "sizeSmall": "MuiButton-sizeSmall",
-                  "startIcon": "MuiButton-startIcon",
-                  "text": "MuiButton-text",
-                  "textPrimary": "MuiButton-textPrimary",
-                  "textSecondary": "MuiButton-textSecondary",
-                  "textSizeLarge": "MuiButton-textSizeLarge",
-                  "textSizeSmall": "MuiButton-textSizeSmall",
-                }
-              }
-              disabled={false}
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="profile_type.accessibility.button_next"
-                className="MuiButton-root MuiButton-text btnPrimary"
-                component="button"
-                disabled={false}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="profile_type.accessibility.button_next"
-                  className="MuiButton-root MuiButton-text btnPrimary"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  component="button"
-                  disabled={false}
-                  focusRipple={true}
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <button
-                    aria-label="profile_type.accessibility.button_next"
-                    className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiButton-label"
-                    >
-                      profile_type.form.button_next
-                    </span>
-                    <WithStyles(memo)
-                      center={false}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={false}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(Button)>
-          </WithStyles(ForwardRef(Button))>
-        </div>
-      </FormNavigation>
+          profile_type.form.button_next
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
-  </EcogestureFormSingleChoice>
-</Provider>
+  </div>
+</div>
 `;
diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
index 35e92dd4a31b2bd8a576fcc79410f1666991adb7..dd3ed4485af7b9e6363416c9250f93aca1ec3ff7 100644
--- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as storeHooks from 'store/hooks'
@@ -33,13 +33,12 @@ describe('EcogestureFormView component', () => {
   })
 
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormView />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
   it('should render singleChoice', async () => {
     const wrapper = mount(
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
index 1efe25a5ee1b77c66b2e72a4ea8a45bdbfa06bcc..c5227952872c6ae05f3dc3d024a3a6d224d0093b 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
@@ -1,19 +1,19 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import EcogestureLaunchFormModal from './EcogestureLaunchFormModal'
 
 const mockHandleClose = jest.fn()
 describe('EcogestureLaunchFormModal component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <EcogestureLaunchFormModal
         open={true}
         handleCloseClick={mockHandleClose}
       />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
   it('should close modal', async () => {
     const wrapper = mount(
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
index ca980750bd1ba733062e700ba25b2b758063bf9e..2516ca2ce6b53497a0feee3ebf63e36e4f00bcda 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
@@ -1,959 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] = `
-<EcogestureLaunchFormModal
-  handleCloseClick={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        feedback.accessibility.window_title
-                      </div>
-                      <button
-                        aria-label="feedback.accessibility.button_close"
-                        class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label"
-                        >
-                          <svg
-                            class="styles__icon___23x3R"
-                            height="16"
-                            width="16"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                      <div
-                        class="eg-init-modal"
-                      >
-                        <div
-                          class="title text-20-bold"
-                        >
-                          ecogesture.initModal.title
-                        </div>
-                        <div
-                          class="text-16-normal text"
-                        >
-                          ecogesture.initModal.text3
-                        </div>
-                        <button
-                          aria-label="ecogesture.initModal.btn2"
-                          class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label"
-                          >
-                            ecogesture.initModal.btn2
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          feedback.accessibility.window_title
+        </div>
+        <button
+          aria-label="feedback.accessibility.button_close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="eg-init-modal"
+        >
+          <div
+            class="title text-20-bold"
+          >
+            ecogesture.initModal.title
+          </div>
+          <div
+            class="text-16-normal text"
+          >
+            ecogesture.initModal.text3
+          </div>
+          <button
+            aria-label="ecogesture.initModal.btn2"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+            tabindex="0"
+            type="button"
           >
-            <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+            <span
+              class="MuiButton-label"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
-              >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
-              >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              feedback.accessibility.window_title
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-label="feedback.accessibility.button_close"
-                              className="modal-paper-close-button"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-label="feedback.accessibility.button_close"
-                                className="modal-paper-close-button"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="feedback.accessibility.button_close"
-                                  centerRipple={true}
-                                  className="MuiIconButton-root modal-paper-close-button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="feedback.accessibility.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <button
-                                      aria-label="feedback.accessibility.button_close"
-                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <Icon
-                                          icon="test-file-stub"
-                                          size={16}
-                                          spin={false}
-                                        >
-                                          <Component
-                                            className="styles__icon___23x3R"
-                                            height={16}
-                                            style={Object {}}
-                                            width={16}
-                                          >
-                                            <svg
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <use
-                                                xlinkHref="#test-file-stub"
-                                              />
-                                            </svg>
-                                          </Component>
-                                        </Icon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                            <div
-                              className="eg-init-modal"
-                            >
-                              <div
-                                className="title text-20-bold"
-                              >
-                                ecogesture.initModal.title
-                              </div>
-                              <div
-                                className="text-16-normal text"
-                              >
-                                ecogesture.initModal.text3
-                              </div>
-                              <WithStyles(ForwardRef(Button))
-                                aria-label="ecogesture.initModal.btn2"
-                                className="btnPrimary"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(Button)
-                                  aria-label="ecogesture.initModal.btn2"
-                                  className="btnPrimary"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiButton-colorInherit",
-                                      "contained": "MuiButton-contained",
-                                      "containedPrimary": "MuiButton-containedPrimary",
-                                      "containedSecondary": "MuiButton-containedSecondary",
-                                      "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                      "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                      "disableElevation": "MuiButton-disableElevation",
-                                      "disabled": "Mui-disabled",
-                                      "endIcon": "MuiButton-endIcon",
-                                      "focusVisible": "Mui-focusVisible",
-                                      "fullWidth": "MuiButton-fullWidth",
-                                      "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                      "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                      "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                      "label": "MuiButton-label",
-                                      "outlined": "MuiButton-outlined",
-                                      "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                      "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                      "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                      "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                      "root": "MuiButton-root",
-                                      "sizeLarge": "MuiButton-sizeLarge",
-                                      "sizeSmall": "MuiButton-sizeSmall",
-                                      "startIcon": "MuiButton-startIcon",
-                                      "text": "MuiButton-text",
-                                      "textPrimary": "MuiButton-textPrimary",
-                                      "textSecondary": "MuiButton-textSecondary",
-                                      "textSizeLarge": "MuiButton-textSizeLarge",
-                                      "textSizeSmall": "MuiButton-textSizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    aria-label="ecogesture.initModal.btn2"
-                                    className="MuiButton-root MuiButton-text btnPrimary"
-                                    component="button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    focusVisibleClassName="Mui-focusVisible"
-                                    onClick={[MockFunction]}
-                                    type="button"
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      aria-label="ecogesture.initModal.btn2"
-                                      className="MuiButton-root MuiButton-text btnPrimary"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <button
-                                        aria-label="ecogesture.initModal.btn2"
-                                        className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiButton-label"
-                                        >
-                                          ecogesture.initModal.btn2
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={false}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={false}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(Button)>
-                              </WithStyles(ForwardRef(Button))>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
-            </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</EcogestureLaunchFormModal>
+              ecogesture.initModal.btn2
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
index 7fe4d6d3dd1aac6b228b84a22d18eaba53b582ed..f4eae1aace82f544593acf00b770f70764e20d5c 100644
--- a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
@@ -1,17 +1,17 @@
+import { render, waitFor } from '@testing-library/react'
 import { EquipmentType } from 'enums'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import EquipmentIcon from './EquipmentIcon'
 
 describe('EcogestureFormSingleChoice component', () => {
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <EquipmentIcon equipment={EquipmentType.BOILER} isChecked={false} />
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    await waitFor(() => null, { container })
+    expect(container).toMatchSnapshot()
   })
   it('should render checked icon', async () => {
     const wrapper = mount(
diff --git a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
index e5aad8d5b7684e4a75598a6dcfcb42816eb8b15c..342bc0c025ce91c3e8d85b98639d66b4aea0bde0 100644
--- a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
+++ b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
@@ -1,42 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] = `
-<EquipmentIcon
-  equipment="BOILER"
-  isChecked={false}
->
+<div>
   <div
-    className="equipment-icon-container "
+    class="equipment-icon-container "
   >
-    <Icon
-      className="equipmentIcon "
-      icon="test-file-stub"
-      size={40}
-      spin={false}
+    <svg
+      class="equipmentIcon  styles__icon___23x3R"
+      height="40"
+      width="40"
     >
-      <Component
-        className="equipmentIcon  styles__icon___23x3R"
-        height={40}
-        style={Object {}}
-        width={40}
-      >
-        <svg
-          className="equipmentIcon  styles__icon___23x3R"
-          height={40}
-          style={Object {}}
-          width={40}
-        >
-          <use
-            xlinkHref="#test-file-stub"
-          />
-        </svg>
-      </Component>
-    </Icon>
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
   </div>
   <div
-    className="text text-14-normal"
+    class="text text-14-normal"
   >
     ecogesture_profile.equipments.boiler
   </div>
-</EquipmentIcon>
+</div>
 `;
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index 2c57d7f963939e01b5df8e1d90042f9bd43206ea..b759c1dabdb8f7bb39bb2352dfd9b5ce5e328f6a 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -1,314 +1,84 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureFormView component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <EcogestureFormView>
-    <mock-cozybar
-      titleKey="common.title_ecogestures"
-    />
-    <mock-header
-      desktopTitleKey="common.title_ecogestures"
-      setHeaderHeight={[Function]}
-    />
-    <mock-content
-      heightOffset={0}
+<div>
+  <mock-cozybar
+    titlekey="common.title_ecogestures"
+  />
+  <mock-header
+    desktoptitlekey="common.title_ecogestures"
+  />
+  <mock-content
+    heightoffset="0"
+  >
+    <div
+      class="ecogesture-profile-container"
     >
-      <EcogestureFormSingleChoice
-        answerType={
-          Object {
-            "attribute": "heating",
-            "choices": Array [
-              "individual",
-              "collective",
-            ],
-            "type": 0,
-          }
-        }
-        currentProfileEcogesture={
-          Object {
-            "equipments": Array [],
-            "heating": "individual",
-            "hotWater": "individual",
-            "warmingFluid": 0,
-          }
-        }
-        setNextStep={[Function]}
-        setPreviousStep={[Function]}
-        step={0}
-        viewedStep={-1}
+      <div
+        class="profile-form-container ecogesture-form-single"
       >
         <div
-          className="ecogesture-profile-container"
+          class="profile-question-label"
         >
-          <div
-            className="profile-form-container ecogesture-form-single"
+          ecogesture_form.heating_type.question
+        </div>
+        <label
+          class="radio_short"
+        >
+          <input
+            class=""
+            name="individual"
+            type="radio"
+            value="individual"
+          />
+          ecogesture_form.heating_type.individual
+        </label>
+        <label
+          class="radio_short"
+        >
+          <input
+            class=""
+            name="collective"
+            type="radio"
+            value="collective"
+          />
+          ecogesture_form.heating_type.collective
+        </label>
+      </div>
+      <div
+        class="profile-navigation"
+      >
+        <button
+          aria-label="profile_type.accessibility.button_previous"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
           >
-            <div
-              className="profile-question-label"
-            >
-              ecogesture_form.heating_type.question
-            </div>
-            <label
-              className="radio_short"
-              key="individual"
-            >
-              <input
-                checked={false}
-                className=""
-                name="individual"
-                onChange={[Function]}
-                type="radio"
-                value="individual"
-              />
-              ecogesture_form.heating_type.individual
-            </label>
-            <label
-              className="radio_short"
-              key="collective"
-            >
-              <input
-                checked={false}
-                className=""
-                name="collective"
-                onChange={[Function]}
-                type="radio"
-                value="collective"
-              />
-              ecogesture_form.heating_type.collective
-            </label>
-          </div>
-          <FormNavigation
-            disableNextButton={true}
-            handleNext={[Function]}
-            handlePrevious={[Function]}
-            isEcogesture={true}
-            step={0}
+            profile_type.form.button_previous
+          </span>
+        </button>
+        <button
+          aria-label="profile_type.accessibility.button_next"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
           >
-            <div
-              className="profile-navigation"
-            >
-              <WithStyles(ForwardRef(Button))
-                aria-label="profile_type.accessibility.button_previous"
-                className="btnSecondary"
-                disabled={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(Button)
-                  aria-label="profile_type.accessibility.button_previous"
-                  className="btnSecondary"
-                  classes={
-                    Object {
-                      "colorInherit": "MuiButton-colorInherit",
-                      "contained": "MuiButton-contained",
-                      "containedPrimary": "MuiButton-containedPrimary",
-                      "containedSecondary": "MuiButton-containedSecondary",
-                      "containedSizeLarge": "MuiButton-containedSizeLarge",
-                      "containedSizeSmall": "MuiButton-containedSizeSmall",
-                      "disableElevation": "MuiButton-disableElevation",
-                      "disabled": "Mui-disabled",
-                      "endIcon": "MuiButton-endIcon",
-                      "focusVisible": "Mui-focusVisible",
-                      "fullWidth": "MuiButton-fullWidth",
-                      "iconSizeLarge": "MuiButton-iconSizeLarge",
-                      "iconSizeMedium": "MuiButton-iconSizeMedium",
-                      "iconSizeSmall": "MuiButton-iconSizeSmall",
-                      "label": "MuiButton-label",
-                      "outlined": "MuiButton-outlined",
-                      "outlinedPrimary": "MuiButton-outlinedPrimary",
-                      "outlinedSecondary": "MuiButton-outlinedSecondary",
-                      "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                      "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                      "root": "MuiButton-root",
-                      "sizeLarge": "MuiButton-sizeLarge",
-                      "sizeSmall": "MuiButton-sizeSmall",
-                      "startIcon": "MuiButton-startIcon",
-                      "text": "MuiButton-text",
-                      "textPrimary": "MuiButton-textPrimary",
-                      "textSecondary": "MuiButton-textSecondary",
-                      "textSizeLarge": "MuiButton-textSizeLarge",
-                      "textSizeSmall": "MuiButton-textSizeSmall",
-                    }
-                  }
-                  disabled={true}
-                  onClick={[Function]}
-                >
-                  <WithStyles(ForwardRef(ButtonBase))
-                    aria-label="profile_type.accessibility.button_previous"
-                    className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
-                    component="button"
-                    disabled={true}
-                    focusRipple={true}
-                    focusVisibleClassName="Mui-focusVisible"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <ForwardRef(ButtonBase)
-                      aria-label="profile_type.accessibility.button_previous"
-                      className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
-                      classes={
-                        Object {
-                          "disabled": "Mui-disabled",
-                          "focusVisible": "Mui-focusVisible",
-                          "root": "MuiButtonBase-root",
-                        }
-                      }
-                      component="button"
-                      disabled={true}
-                      focusRipple={true}
-                      focusVisibleClassName="Mui-focusVisible"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <button
-                        aria-label="profile_type.accessibility.button_previous"
-                        className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
-                        disabled={true}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onDragLeave={[Function]}
-                        onFocus={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyUp={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                        onTouchEnd={[Function]}
-                        onTouchMove={[Function]}
-                        onTouchStart={[Function]}
-                        tabIndex={-1}
-                        type="button"
-                      >
-                        <span
-                          className="MuiButton-label"
-                        >
-                          profile_type.form.button_previous
-                        </span>
-                      </button>
-                    </ForwardRef(ButtonBase)>
-                  </WithStyles(ForwardRef(ButtonBase))>
-                </ForwardRef(Button)>
-              </WithStyles(ForwardRef(Button))>
-              <WithStyles(ForwardRef(Button))
-                aria-label="profile_type.accessibility.button_next"
-                className="btnPrimary"
-                disabled={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(Button)
-                  aria-label="profile_type.accessibility.button_next"
-                  className="btnPrimary"
-                  classes={
-                    Object {
-                      "colorInherit": "MuiButton-colorInherit",
-                      "contained": "MuiButton-contained",
-                      "containedPrimary": "MuiButton-containedPrimary",
-                      "containedSecondary": "MuiButton-containedSecondary",
-                      "containedSizeLarge": "MuiButton-containedSizeLarge",
-                      "containedSizeSmall": "MuiButton-containedSizeSmall",
-                      "disableElevation": "MuiButton-disableElevation",
-                      "disabled": "Mui-disabled",
-                      "endIcon": "MuiButton-endIcon",
-                      "focusVisible": "Mui-focusVisible",
-                      "fullWidth": "MuiButton-fullWidth",
-                      "iconSizeLarge": "MuiButton-iconSizeLarge",
-                      "iconSizeMedium": "MuiButton-iconSizeMedium",
-                      "iconSizeSmall": "MuiButton-iconSizeSmall",
-                      "label": "MuiButton-label",
-                      "outlined": "MuiButton-outlined",
-                      "outlinedPrimary": "MuiButton-outlinedPrimary",
-                      "outlinedSecondary": "MuiButton-outlinedSecondary",
-                      "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                      "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                      "root": "MuiButton-root",
-                      "sizeLarge": "MuiButton-sizeLarge",
-                      "sizeSmall": "MuiButton-sizeSmall",
-                      "startIcon": "MuiButton-startIcon",
-                      "text": "MuiButton-text",
-                      "textPrimary": "MuiButton-textPrimary",
-                      "textSecondary": "MuiButton-textSecondary",
-                      "textSizeLarge": "MuiButton-textSizeLarge",
-                      "textSizeSmall": "MuiButton-textSizeSmall",
-                    }
-                  }
-                  disabled={true}
-                  onClick={[Function]}
-                >
-                  <WithStyles(ForwardRef(ButtonBase))
-                    aria-label="profile_type.accessibility.button_next"
-                    className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
-                    component="button"
-                    disabled={true}
-                    focusRipple={true}
-                    focusVisibleClassName="Mui-focusVisible"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <ForwardRef(ButtonBase)
-                      aria-label="profile_type.accessibility.button_next"
-                      className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
-                      classes={
-                        Object {
-                          "disabled": "Mui-disabled",
-                          "focusVisible": "Mui-focusVisible",
-                          "root": "MuiButtonBase-root",
-                        }
-                      }
-                      component="button"
-                      disabled={true}
-                      focusRipple={true}
-                      focusVisibleClassName="Mui-focusVisible"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <button
-                        aria-label="profile_type.accessibility.button_next"
-                        className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
-                        disabled={true}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onDragLeave={[Function]}
-                        onFocus={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyUp={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                        onTouchEnd={[Function]}
-                        onTouchMove={[Function]}
-                        onTouchStart={[Function]}
-                        tabIndex={-1}
-                        type="button"
-                      >
-                        <span
-                          className="MuiButton-label"
-                        >
-                          profile_type.form.button_next
-                        </span>
-                      </button>
-                    </ForwardRef(ButtonBase)>
-                  </WithStyles(ForwardRef(ButtonBase))>
-                </ForwardRef(Button)>
-              </WithStyles(ForwardRef(Button))>
-            </div>
-          </FormNavigation>
-        </div>
-      </EcogestureFormSingleChoice>
-    </mock-content>
-    <mock-ecogesturelaunchmodal
-      handleCloseClick={[Function]}
-      open={true}
-    />
-  </EcogestureFormView>
-</Provider>
+            profile_type.form.button_next
+          </span>
+        </button>
+      </div>
+    </div>
+  </mock-content>
+  <mock-ecogesturelaunchmodal
+    open="true"
+  />
+</div>
 `;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
index 4b3e8cc5e54204eb1b43ff03a299bd7faab765f5..98fd1a4772a1e78c1d384f53d8ec9f24bc1f8da8 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
@@ -1,5 +1,5 @@
+import { render, waitFor } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
 import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
@@ -9,15 +9,16 @@ const mockValidate = jest.fn()
 
 describe('EcogestureSelectionDetail component', () => {
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <EcogestureSelectionDetail
         ecogesture={mockedEcogesturesData[0]}
         validate={mockValidate}
         title={mockedEcogesturesData[0].shortName}
       />
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    await waitFor(() => null, { container })
+    // await waitForComponentToPaint(wrapper)
+    expect(container).toMatchSnapshot()
   })
 
   it('should toggle more details', async () => {
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index 1dbe3c0aa92185118481bbf67340a31ba4e912bf..7e62bb3a0b57a0b4d8cfc62db57e2ad186b16971 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
@@ -1,771 +1,149 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureSelectionDetail component should be rendered correctly 1`] = `
-<EcogestureSelectionDetail
-  ecogesture={
-    Object {
-      "_id": "ECOGESTURE001",
-      "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
-      "_type": "com.grandlyon.ecolyo.ecogesture",
-      "action": false,
-      "actionDuration": 3,
-      "actionName": null,
-      "difficulty": 1,
-      "doing": false,
-      "efficiency": 4,
-      "equipment": false,
-      "equipmentInstallation": true,
-      "equipmentType": Array [],
-      "fluidTypes": Array [
-        0,
-        2,
-      ],
-      "id": "ECOGESTURE001",
-      "impactLevel": 8,
-      "investment": null,
-      "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
-      "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
-      "objective": false,
-      "room": Array [
-        0,
-      ],
-      "season": "Hiver",
-      "shortName": "Bonhomme de neige",
-      "usage": 1,
-      "viewedInSelection": false,
-    }
-  }
-  title="Bonhomme de neige"
-  validate={[MockFunction]}
->
+<div>
   <div
-    className="eg-selection-detail-container"
+    class="eg-selection-detail-container"
   >
     <div
-      className="content"
+      class="content"
     >
       <div
-        className="iconContainer"
+        class="iconContainer"
       >
-        <StyledIcon
-          className="icon"
-          icon="test-file-stub"
-          size={240}
+        <svg
+          aria-hidden="true"
+          class="icon styles__icon___23x3R"
+          height="240"
+          width="240"
         >
-          <Icon
-            aria-hidden={true}
-            className="icon"
-            icon="test-file-stub"
-            size={240}
-            spin={false}
-          >
-            <Component
-              aria-hidden={true}
-              className="icon styles__icon___23x3R"
-              height={240}
-              style={Object {}}
-              width={240}
-            >
-              <svg
-                aria-hidden={true}
-                className="icon styles__icon___23x3R"
-                height={240}
-                style={Object {}}
-                width={240}
-              >
-                <use
-                  xlinkHref="#test-file-stub"
-                />
-              </svg>
-            </Component>
-          </Icon>
-        </StyledIcon>
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
       </div>
       <div
-        className="text-22 title"
+        class="text-22 title"
       >
         Bonhomme de neige
       </div>
       <div
-        className="text-18-bold"
+        class="text-18-bold"
       >
         Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
       </div>
-      <WithStyles(ForwardRef(Button))
-        classes={
-          Object {
-            "label": "text-15-normal",
-            "root": "btnText showMore",
-          }
-        }
-        onClick={[Function]}
+      <button
+        class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
+        tabindex="0"
+        type="button"
       >
-        <ForwardRef(Button)
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label text-15-normal",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root btnText showMore",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[Function]}
+        <span
+          class="MuiButton-label text-15-normal"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            className="MuiButton-root btnText showMore MuiButton-text"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
-          >
-            <ForwardRef(ButtonBase)
-              className="MuiButton-root btnText showMore MuiButton-text"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <button
-                className="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label text-15-normal"
-                >
-                  ecogesture_modal.show_more
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
-      <WithStyles(ForwardRef(Collapse))
-        exit={false}
-        in={false}
+          ecogesture_modal.show_more
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+      <div
+        class="MuiCollapse-root MuiCollapse-hidden"
+        style="min-height: 0px;"
       >
-        <ForwardRef(Collapse)
-          classes={
-            Object {
-              "entered": "MuiCollapse-entered",
-              "hidden": "MuiCollapse-hidden",
-              "root": "MuiCollapse-root",
-              "wrapper": "MuiCollapse-wrapper",
-              "wrapperInner": "MuiCollapse-wrapperInner",
-            }
-          }
-          exit={false}
-          in={false}
+        <div
+          class="MuiCollapse-wrapper"
         >
-          <Transition
-            addEndListener={[Function]}
-            appear={false}
-            enter={true}
-            exit={false}
-            in={false}
-            mountOnEnter={false}
-            onEnter={[Function]}
-            onEntered={[Function]}
-            onEntering={[Function]}
-            onExit={[Function]}
-            onExited={[Function]}
-            onExiting={[Function]}
-            timeout={300}
-            unmountOnExit={false}
+          <div
+            class="MuiCollapse-wrapperInner"
           >
             <div
-              className="MuiCollapse-root MuiCollapse-hidden"
-              style={
-                Object {
-                  "minHeight": "0px",
-                }
-              }
+              class="longDescription text-16-normal-150"
             >
-              <div
-                className="MuiCollapse-wrapper"
-              >
-                <div
-                  className="MuiCollapse-wrapperInner"
-                >
-                  <div
-                    className="longDescription text-16-normal-150"
-                  >
-                    On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
-                  </div>
-                </div>
-              </div>
+              On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
             </div>
-          </Transition>
-        </ForwardRef(Collapse)>
-      </WithStyles(ForwardRef(Collapse))>
+          </div>
+        </div>
+      </div>
     </div>
     <div
-      className="buttons"
+      class="buttons"
     >
-      <WithStyles(ForwardRef(Button))
+      <button
         aria-label="ecogesture_selection.button_objective"
-        classes={
-          Object {
-            "label": "text-14-bold",
-            "root": "btnSecondary btnObjective",
-          }
-        }
-        onClick={[Function]}
+        class="MuiButtonBase-root MuiButton-root btnSecondary btnObjective MuiButton-text"
+        tabindex="0"
+        type="button"
       >
-        <ForwardRef(Button)
-          aria-label="ecogesture_selection.button_objective"
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label text-14-bold",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root btnSecondary btnObjective",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[Function]}
+        <span
+          class="MuiButton-label text-14-bold"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            aria-label="ecogesture_selection.button_objective"
-            className="MuiButton-root btnSecondary btnObjective MuiButton-text"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="60"
+            width="60"
           >
-            <ForwardRef(ButtonBase)
-              aria-label="ecogesture_selection.button_objective"
-              className="MuiButton-root btnSecondary btnObjective MuiButton-text"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <button
-                aria-label="ecogesture_selection.button_objective"
-                className="MuiButtonBase-root MuiButton-root btnSecondary btnObjective MuiButton-text"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label text-14-bold"
-                >
-                  <StyledIcon
-                    icon="test-file-stub"
-                    size={60}
-                  >
-                    <Icon
-                      aria-hidden={true}
-                      icon="test-file-stub"
-                      size={60}
-                      spin={false}
-                    >
-                      <Component
-                        aria-hidden={true}
-                        className="styles__icon___23x3R"
-                        height={60}
-                        style={Object {}}
-                        width={60}
-                      >
-                        <svg
-                          aria-hidden={true}
-                          className="styles__icon___23x3R"
-                          height={60}
-                          style={Object {}}
-                          width={60}
-                        >
-                          <use
-                            xlinkHref="#test-file-stub"
-                          />
-                        </svg>
-                      </Component>
-                    </Icon>
-                  </StyledIcon>
-                  ecogesture_selection.button_objective
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
-      <WithStyles(ForwardRef(Button))
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          ecogesture_selection.button_objective
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+      <button
         aria-label="ecogesture_selection.button_doing"
-        classes={
-          Object {
-            "label": "text-14-bold",
-            "root": "btnSecondary btnDoing",
-          }
-        }
-        onClick={[Function]}
+        class="MuiButtonBase-root MuiButton-root btnSecondary btnDoing MuiButton-text"
+        tabindex="0"
+        type="button"
       >
-        <ForwardRef(Button)
-          aria-label="ecogesture_selection.button_doing"
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label text-14-bold",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root btnSecondary btnDoing",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[Function]}
+        <span
+          class="MuiButton-label text-14-bold"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            aria-label="ecogesture_selection.button_doing"
-            className="MuiButton-root btnSecondary btnDoing MuiButton-text"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="60"
+            width="60"
           >
-            <ForwardRef(ButtonBase)
-              aria-label="ecogesture_selection.button_doing"
-              className="MuiButton-root btnSecondary btnDoing MuiButton-text"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <button
-                aria-label="ecogesture_selection.button_doing"
-                className="MuiButtonBase-root MuiButton-root btnSecondary btnDoing MuiButton-text"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label text-14-bold"
-                >
-                  <StyledIcon
-                    icon="test-file-stub"
-                    size={60}
-                  >
-                    <Icon
-                      aria-hidden={true}
-                      icon="test-file-stub"
-                      size={60}
-                      spin={false}
-                    >
-                      <Component
-                        aria-hidden={true}
-                        className="styles__icon___23x3R"
-                        height={60}
-                        style={Object {}}
-                        width={60}
-                      >
-                        <svg
-                          aria-hidden={true}
-                          className="styles__icon___23x3R"
-                          height={60}
-                          style={Object {}}
-                          width={60}
-                        >
-                          <use
-                            xlinkHref="#test-file-stub"
-                          />
-                        </svg>
-                      </Component>
-                    </Icon>
-                  </StyledIcon>
-                  ecogesture_selection.button_doing
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
-      <WithStyles(ForwardRef(Button))
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          ecogesture_selection.button_doing
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+      <button
         aria-label="ecogesture_selection.button_skip"
-        classes={
-          Object {
-            "label": "text-14-bold",
-            "root": "btnSecondary btnSkip",
-          }
-        }
-        onClick={[Function]}
+        class="MuiButtonBase-root MuiButton-root btnSecondary btnSkip MuiButton-text"
+        tabindex="0"
+        type="button"
       >
-        <ForwardRef(Button)
-          aria-label="ecogesture_selection.button_skip"
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label text-14-bold",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root btnSecondary btnSkip",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[Function]}
+        <span
+          class="MuiButton-label text-14-bold"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            aria-label="ecogesture_selection.button_skip"
-            className="MuiButton-root btnSecondary btnSkip MuiButton-text"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="60"
+            width="60"
           >
-            <ForwardRef(ButtonBase)
-              aria-label="ecogesture_selection.button_skip"
-              className="MuiButton-root btnSecondary btnSkip MuiButton-text"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <button
-                aria-label="ecogesture_selection.button_skip"
-                className="MuiButtonBase-root MuiButton-root btnSecondary btnSkip MuiButton-text"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label text-14-bold"
-                >
-                  <StyledIcon
-                    icon="test-file-stub"
-                    size={60}
-                  >
-                    <Icon
-                      aria-hidden={true}
-                      icon="test-file-stub"
-                      size={60}
-                      spin={false}
-                    >
-                      <Component
-                        aria-hidden={true}
-                        className="styles__icon___23x3R"
-                        height={60}
-                        style={Object {}}
-                        width={60}
-                      >
-                        <svg
-                          aria-hidden={true}
-                          className="styles__icon___23x3R"
-                          height={60}
-                          style={Object {}}
-                          width={60}
-                        >
-                          <use
-                            xlinkHref="#test-file-stub"
-                          />
-                        </svg>
-                      </Component>
-                    </Icon>
-                  </StyledIcon>
-                  ecogesture_selection.button_skip
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          ecogesture_selection.button_skip
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
   </div>
-</EcogestureSelectionDetail>
+</div>
 `;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx
index b6359dd88ff4b2d0f1e63d9615ab7c7b94247a6f..31f5647c2e6f50b682861331b4d8842fee19a98a 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import EcogestureSelectionEnd from './EcogestureSelectionEnd'
 
@@ -16,8 +16,8 @@ describe('EcogestureSelectionEnd component', () => {
   })
 
   it('should be rendered correctly', () => {
-    const wrapper = mount(<EcogestureSelectionEnd />)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    const { container } = render(<EcogestureSelectionEnd />)
+    expect(container).toMatchSnapshot()
   })
 
   it('should close modal and update profile', () => {
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
index 0879e9c3a9849a1e8481858f7a81df32433e87ef..c7fc88998876786bb89e34bad58ddc59bfef458f 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
@@ -1,191 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = `
-<EcogestureSelectionEnd>
+<div>
   <div
-    className="eg-selection-end-container"
+    class="eg-selection-end-container"
   >
     <div
-      className="content"
+      class="content"
     >
       <div
-        className="title text-28-bold"
+        class="title text-28-bold"
       >
         ecogesture_selection.title_final
       </div>
-      <StyledIcon
-        icon="test-file-stub"
-        size={120}
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="120"
+        width="120"
       >
-        <Icon
-          aria-hidden={true}
-          icon="test-file-stub"
-          size={120}
-          spin={false}
-        >
-          <Component
-            aria-hidden={true}
-            className="styles__icon___23x3R"
-            height={120}
-            style={Object {}}
-            width={120}
-          >
-            <svg
-              aria-hidden={true}
-              className="styles__icon___23x3R"
-              height={120}
-              style={Object {}}
-              width={120}
-            >
-              <use
-                xlinkHref="#test-file-stub"
-              />
-            </svg>
-          </Component>
-        </Icon>
-      </StyledIcon>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
       <div
-        className="text text-16-normal"
+        class="text text-16-normal"
       >
         ecogesture_selection.text_final_1
       </div>
       <div
-        className="text text-16-normal"
+        class="text text-16-normal"
       >
         ecogesture_selection.text_final_2
       </div>
     </div>
     <div
-      className="buttons"
+      class="buttons"
     >
-      <WithStyles(ForwardRef(Button))
+      <button
         aria-label="ecogesture_selection.accessibility.button_ok"
-        className="btnPrimary"
-        onClick={[Function]}
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+        tabindex="0"
+        type="button"
       >
-        <ForwardRef(Button)
-          aria-label="ecogesture_selection.accessibility.button_ok"
-          className="btnPrimary"
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[Function]}
+        <span
+          class="MuiButton-label"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            aria-label="ecogesture_selection.accessibility.button_ok"
-            className="MuiButton-root MuiButton-text btnPrimary"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
-          >
-            <ForwardRef(ButtonBase)
-              aria-label="ecogesture_selection.accessibility.button_ok"
-              className="MuiButton-root MuiButton-text btnPrimary"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <button
-                aria-label="ecogesture_selection.accessibility.button_ok"
-                className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label"
-                >
-                  ecogesture_selection.button_ok
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
+          ecogesture_selection.button_ok
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
   </div>
-</EcogestureSelectionEnd>
+</div>
 `;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx
index b2f3141ca6eaacce91aa0cd11a60e755297fc0ea..a8d883f8a75c6a25807eaf97bf702432d57073c2 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx
@@ -1,19 +1,19 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import EcogestureSelectionModal from './EcogestureSelectionModal'
 
 const mockHandleClose = jest.fn()
 describe('EcogestureInitModal component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <EcogestureSelectionModal
         open={true}
         handleCloseClick={mockHandleClose}
       />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 
   it('should close modal and update profile', async () => {
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
index c15aa65d3e0aa1778834ae74bde5cdcb1a7f9c6b..e51d81a0ecf1718cd6adf3bb6b96b7305fde85aa 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
@@ -1,959 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureInitModal component should be rendered correctly 1`] = `
-<EcogestureSelectionModal
-  handleCloseClick={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        ecogesture_selection.accessibility.window_title
-                      </div>
-                      <button
-                        aria-label="ecogesture_selection.accessibility.button_close"
-                        class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label"
-                        >
-                          <svg
-                            class="styles__icon___23x3R"
-                            height="16"
-                            width="16"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                      <div
-                        class="eg-selection-modal"
-                      >
-                        <div
-                          class="title text-20-bold"
-                        >
-                          ecogesture_selection.selectionModal.title
-                        </div>
-                        <div
-                          class="text text-16-normal"
-                        >
-                          ecogesture_selection.selectionModal.text
-                        </div>
-                        <button
-                          aria-label="ecogesture_selection.selectionModal.button_close"
-                          class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label"
-                          >
-                            ecogesture_selection.selectionModal.button_close
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          ecogesture_selection.accessibility.window_title
+        </div>
+        <button
+          aria-label="ecogesture_selection.accessibility.button_close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="eg-selection-modal"
+        >
+          <div
+            class="title text-20-bold"
+          >
+            ecogesture_selection.selectionModal.title
+          </div>
+          <div
+            class="text text-16-normal"
+          >
+            ecogesture_selection.selectionModal.text
+          </div>
+          <button
+            aria-label="ecogesture_selection.selectionModal.button_close"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+            tabindex="0"
+            type="button"
           >
-            <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+            <span
+              class="MuiButton-label"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
-              >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
-              >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              ecogesture_selection.accessibility.window_title
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-label="ecogesture_selection.accessibility.button_close"
-                              className="modal-paper-close-button"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-label="ecogesture_selection.accessibility.button_close"
-                                className="modal-paper-close-button"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="ecogesture_selection.accessibility.button_close"
-                                  centerRipple={true}
-                                  className="MuiIconButton-root modal-paper-close-button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="ecogesture_selection.accessibility.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <button
-                                      aria-label="ecogesture_selection.accessibility.button_close"
-                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <Icon
-                                          icon="test-file-stub"
-                                          size={16}
-                                          spin={false}
-                                        >
-                                          <Component
-                                            className="styles__icon___23x3R"
-                                            height={16}
-                                            style={Object {}}
-                                            width={16}
-                                          >
-                                            <svg
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <use
-                                                xlinkHref="#test-file-stub"
-                                              />
-                                            </svg>
-                                          </Component>
-                                        </Icon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                            <div
-                              className="eg-selection-modal"
-                            >
-                              <div
-                                className="title text-20-bold"
-                              >
-                                ecogesture_selection.selectionModal.title
-                              </div>
-                              <div
-                                className="text text-16-normal"
-                              >
-                                ecogesture_selection.selectionModal.text
-                              </div>
-                              <WithStyles(ForwardRef(Button))
-                                aria-label="ecogesture_selection.selectionModal.button_close"
-                                className="btnPrimary"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(Button)
-                                  aria-label="ecogesture_selection.selectionModal.button_close"
-                                  className="btnPrimary"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiButton-colorInherit",
-                                      "contained": "MuiButton-contained",
-                                      "containedPrimary": "MuiButton-containedPrimary",
-                                      "containedSecondary": "MuiButton-containedSecondary",
-                                      "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                      "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                      "disableElevation": "MuiButton-disableElevation",
-                                      "disabled": "Mui-disabled",
-                                      "endIcon": "MuiButton-endIcon",
-                                      "focusVisible": "Mui-focusVisible",
-                                      "fullWidth": "MuiButton-fullWidth",
-                                      "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                      "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                      "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                      "label": "MuiButton-label",
-                                      "outlined": "MuiButton-outlined",
-                                      "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                      "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                      "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                      "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                      "root": "MuiButton-root",
-                                      "sizeLarge": "MuiButton-sizeLarge",
-                                      "sizeSmall": "MuiButton-sizeSmall",
-                                      "startIcon": "MuiButton-startIcon",
-                                      "text": "MuiButton-text",
-                                      "textPrimary": "MuiButton-textPrimary",
-                                      "textSecondary": "MuiButton-textSecondary",
-                                      "textSizeLarge": "MuiButton-textSizeLarge",
-                                      "textSizeSmall": "MuiButton-textSizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    aria-label="ecogesture_selection.selectionModal.button_close"
-                                    className="MuiButton-root MuiButton-text btnPrimary"
-                                    component="button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    focusVisibleClassName="Mui-focusVisible"
-                                    onClick={[MockFunction]}
-                                    type="button"
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      aria-label="ecogesture_selection.selectionModal.button_close"
-                                      className="MuiButton-root MuiButton-text btnPrimary"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <button
-                                        aria-label="ecogesture_selection.selectionModal.button_close"
-                                        className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiButton-label"
-                                        >
-                                          ecogesture_selection.selectionModal.button_close
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={false}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={false}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(Button)>
-                              </WithStyles(ForwardRef(Button))>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
-            </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</EcogestureSelectionModal>
+              ecogesture_selection.selectionModal.button_close
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx
index 08bc2048c80cd920cf7ec6c4291944c56f159bd5..45ff77212fc8838f0c2589e9c11e6360115e1033 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import EcogestureSelectionRestart from './EcogestureSelectionRestart'
 
@@ -13,10 +13,10 @@ const mockRestart = jest.fn()
 
 describe('EcogestureSelectionRestart component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { container } = render(
       <EcogestureSelectionRestart listLength={10} restart={mockRestart} />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
   it('should call go to the ecogesture view when user click on the button', () => {
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
index fb482cd559b92f73ae0d29fe017aae4e545b4e22..36c87d8590df0943512b3b35d15da28e1fd36bd3 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
@@ -1,316 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureSelectionRestart component should be rendered correctly 1`] = `
-<EcogestureSelectionRestart
-  listLength={10}
-  restart={[MockFunction]}
->
+<div>
   <div
-    className="eg-selection-restart-container"
+    class="eg-selection-restart-container"
   >
     <div
-      className="content"
+      class="content"
     >
       <div
-        className="title text-21-bold"
+        class="title text-21-bold"
       >
         ecogesture_selection.title
       </div>
-      <StyledIcon
-        icon="test-file-stub"
-        size={120}
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="120"
+        width="120"
       >
-        <Icon
-          aria-hidden={true}
-          icon="test-file-stub"
-          size={120}
-          spin={false}
-        >
-          <Component
-            aria-hidden={true}
-            className="styles__icon___23x3R"
-            height={120}
-            style={Object {}}
-            width={120}
-          >
-            <svg
-              aria-hidden={true}
-              className="styles__icon___23x3R"
-              height={120}
-              style={Object {}}
-              width={120}
-            >
-              <use
-                xlinkHref="#test-file-stub"
-              />
-            </svg>
-          </Component>
-        </Icon>
-      </StyledIcon>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
       <div
-        className="text text-16-normal"
+        class="text text-16-normal"
       >
         ecogesture_selection.text
       </div>
     </div>
     <div
-      className="buttons"
+      class="buttons"
     >
-      <WithStyles(ForwardRef(Button))
+      <button
         aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
-        className="btnSecondary"
-        onClick={[Function]}
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+        tabindex="0"
+        type="button"
       >
-        <ForwardRef(Button)
-          aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
-          className="btnSecondary"
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[Function]}
+        <span
+          class="MuiButton-label"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
-            className="MuiButton-root MuiButton-text btnSecondary"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
-          >
-            <ForwardRef(ButtonBase)
-              aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
-              className="MuiButton-root MuiButton-text btnSecondary"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <button
-                aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
-                className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label"
-                >
-                  ecogesture_selection.button_go_to_ecogesture
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
-      <WithStyles(ForwardRef(Button))
+          ecogesture_selection.button_go_to_ecogesture
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+      <button
         aria-label="ecogesture_selection.accessibility.button_continue"
-        className="btnPrimary"
-        onClick={[MockFunction]}
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+        tabindex="0"
+        type="button"
       >
-        <ForwardRef(Button)
-          aria-label="ecogesture_selection.accessibility.button_continue"
-          className="btnPrimary"
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[MockFunction]}
+        <span
+          class="MuiButton-label"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            aria-label="ecogesture_selection.accessibility.button_continue"
-            className="MuiButton-root MuiButton-text btnPrimary"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[MockFunction]}
-            type="button"
-          >
-            <ForwardRef(ButtonBase)
-              aria-label="ecogesture_selection.accessibility.button_continue"
-              className="MuiButton-root MuiButton-text btnPrimary"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[MockFunction]}
-              type="button"
-            >
-              <button
-                aria-label="ecogesture_selection.accessibility.button_continue"
-                className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[MockFunction]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label"
-                >
-                  ecogesture_selection.button_continue
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
+          ecogesture_selection.button_continue
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
   </div>
-</EcogestureSelectionRestart>
+</div>
 `;
diff --git a/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx
index ad65360fb1bfdb70f3a60b985b10d2ce9489114d..7c2706b21977e7827241f122b20d859d03af0449 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx
@@ -1,5 +1,5 @@
+import { render, waitFor } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock'
@@ -42,13 +42,13 @@ describe('EcogestureSelection component', () => {
 
   it('should be rendered correctly', async () => {
     mockGetEcogestureListByProfile.mockResolvedValue([mockedEcogesturesData[0]])
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureSelectionView />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    await waitFor(() => null, { container })
+    expect(container).toMatchSnapshot()
   })
   it('should render with the EcogestureSelectionModal', async () => {
     mockGetEcogestureListByProfile.mockResolvedValue([mockedEcogesturesData[0]])
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
index ed9d0311c8a6b5491e0c668cb785fb5a4c43aafb..d27b25cb74a62bbd1fb43d742645ba4059225031 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
@@ -1,80 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcogestureSelection component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <EcogestureSelectionView>
-    <mock-cozybar
-      backFunction={[Function]}
-      displayBackArrow={true}
-      titleKey="common.title_ecogestures_choice"
-    />
-    <mock-header
-      desktopTitleKey="common.title_ecogestures_choice"
-      displayBackArrow={true}
-      setHeaderHeight={[Function]}
-    >
-      <div
-        className="eg-selection-header"
-      >
-        1/1
-      </div>
-    </mock-header>
-    <mock-content
-      heightOffset={0}
+<div>
+  <mock-cozybar
+    displaybackarrow="true"
+    titlekey="common.title_ecogestures_choice"
+  />
+  <mock-header
+    desktoptitlekey="common.title_ecogestures_choice"
+    displaybackarrow="true"
+  >
+    <div
+      class="eg-selection-header"
     >
-      <mock-ecogestureSelectionDetail
-        ecogesture={
-          Object {
-            "_id": "ECOGESTURE001",
-            "_rev": "1-67f1ea36efdd892c96bf64a8943154cd",
-            "_type": "com.grandlyon.ecolyo.ecogesture",
-            "action": false,
-            "actionDuration": 3,
-            "actionName": null,
-            "difficulty": 1,
-            "doing": false,
-            "efficiency": 4,
-            "equipment": false,
-            "equipmentInstallation": true,
-            "equipmentType": Array [],
-            "fluidTypes": Array [
-              0,
-              2,
-            ],
-            "id": "ECOGESTURE001",
-            "impactLevel": 8,
-            "investment": null,
-            "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…",
-            "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.",
-            "objective": false,
-            "room": Array [
-              0,
-            ],
-            "season": "Hiver",
-            "shortName": "Bonhomme de neige",
-            "usage": 1,
-            "viewedInSelection": false,
-          }
-        }
-        title="Bonhomme de neige"
-        validate={[Function]}
-      />
-      <mock-ecogestureSelectionModal
-        handleCloseClick={[Function]}
-        open={true}
-      />
-    </mock-content>
-  </EcogestureSelectionView>
-</Provider>
+      1/1
+    </div>
+  </mock-header>
+  <mock-content
+    heightoffset="0"
+  >
+    <mock-ecogestureselectiondetail
+      ecogesture="[object Object]"
+      title="Bonhomme de neige"
+    />
+    <mock-ecogestureselectionmodal
+      open="true"
+    />
+  </mock-content>
+</div>
 `;
diff --git a/src/components/Exploration/ExplorationError.spec.tsx b/src/components/Exploration/ExplorationError.spec.tsx
index 4ea8699db42cada633e20108310d45a64d088909..aad23a7e21b7e57eb2a1091110e117ff53e47b54 100644
--- a/src/components/Exploration/ExplorationError.spec.tsx
+++ b/src/components/Exploration/ExplorationError.spec.tsx
@@ -1,11 +1,10 @@
+import { render } from '@testing-library/react'
 import ExplorationError from 'components/Exploration/ExplorationError'
-import { shallow } from 'enzyme'
 import React from 'react'
 
 describe('ExplorationError component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<ExplorationError />).getElement
-    // TODO fix empty snapshot
-    expect(component).toMatchSnapshot()
+    const { container } = render(<ExplorationError />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap b/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap
index 0a84c75a215fe1573be84f848d393de35ebaa1cd..da3fe125efdcba7f6a4f7072aca15adcf4dc16b4 100644
--- a/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap
+++ b/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap
@@ -1,3 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ExplorationError component should be rendered correctly 1`] = `[Function]`;
+exports[`ExplorationError component should be rendered correctly 1`] = `
+<div>
+  <div
+    class="exploration-error-container"
+  >
+    <div
+      class="exploration-error-message"
+    >
+      exploration.global_error
+    </div>
+    <div
+      class="exploration-error-button"
+    >
+      <button
+        aria-label="exploration.accessibility.button_go_back"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          exploration.button_go_back
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index 3bbc892cb93250ba5d3110f76263d053c4d19e3a..3efbb966a636928f2319a6ce8d1e9190cf53a5e8 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -1,8 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import FeedbackModal from 'components/Feedback/FeedbackModal'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as storeHooks from 'store/hooks'
@@ -27,12 +25,12 @@ describe('FeedbackModal component', () => {
     jest.clearAllMocks()
   })
   it('should render the component', () => {
-    const component = mount(
+    const { baseElement } = render(
       <Provider store={store}>
         <FeedbackModal />
       </Provider>
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 
   describe('FeedbackModal functionalities', () => {
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index 988d984a7922e0dd5da5e7447e105ae15c749738..9a26cb883362f15852a5aa683b0a4dab56d83bb9 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -1,1170 +1,134 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackModal component should render the component 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <FeedbackModal>
-    <WithStyles(ForwardRef(Dialog))
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "paper": "modal-paper yellow-border",
-          "root": "modal-root",
-        }
-      }
-      onClose={[Function]}
-      open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+  >
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Dialog)
+      <div
         aria-labelledby="accessibility-title"
-        classes={
-          Object {
-            "container": "MuiDialog-container",
-            "paper": "MuiDialog-paper modal-paper yellow-border",
-            "paperFullScreen": "MuiDialog-paperFullScreen",
-            "paperFullWidth": "MuiDialog-paperFullWidth",
-            "paperScrollBody": "MuiDialog-paperScrollBody",
-            "paperScrollPaper": "MuiDialog-paperScrollPaper",
-            "paperWidthFalse": "MuiDialog-paperWidthFalse",
-            "paperWidthLg": "MuiDialog-paperWidthLg",
-            "paperWidthMd": "MuiDialog-paperWidthMd",
-            "paperWidthSm": "MuiDialog-paperWidthSm",
-            "paperWidthXl": "MuiDialog-paperWidthXl",
-            "paperWidthXs": "MuiDialog-paperWidthXs",
-            "root": "MuiDialog-root modal-root",
-            "scrollBody": "MuiDialog-scrollBody",
-            "scrollPaper": "MuiDialog-scrollPaper",
-          }
-        }
-        onClose={[Function]}
-        open={true}
+        class="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Modal)
-          BackdropComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "Naked": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "propTypes": Object {
-                  "children": [Function],
-                  "className": [Function],
-                  "classes": [Function],
-                  "invisible": [Function],
-                  "open": [Function],
-                  "transitionDuration": [Function],
-                },
-                "render": [Function],
-              },
-              "displayName": "WithStyles(ForwardRef(Backdrop))",
-              "options": Object {
-                "defaultTheme": Object {
-                  "breakpoints": Object {
-                    "between": [Function],
-                    "down": [Function],
-                    "keys": Array [
-                      "xs",
-                      "sm",
-                      "md",
-                      "lg",
-                      "xl",
-                    ],
-                    "only": [Function],
-                    "up": [Function],
-                    "values": Object {
-                      "lg": 1280,
-                      "md": 960,
-                      "sm": 600,
-                      "xl": 1920,
-                      "xs": 0,
-                    },
-                    "width": [Function],
-                  },
-                  "direction": "ltr",
-                  "mixins": Object {
-                    "gutters": [Function],
-                    "toolbar": Object {
-                      "@media (min-width:0px) and (orientation: landscape)": Object {
-                        "minHeight": 48,
-                      },
-                      "@media (min-width:600px)": Object {
-                        "minHeight": 64,
-                      },
-                      "minHeight": 56,
-                    },
-                  },
-                  "overrides": Object {},
-                  "palette": Object {
-                    "action": Object {
-                      "activatedOpacity": 0.12,
-                      "active": "rgba(0, 0, 0, 0.54)",
-                      "disabled": "rgba(0, 0, 0, 0.26)",
-                      "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                      "disabledOpacity": 0.38,
-                      "focus": "rgba(0, 0, 0, 0.12)",
-                      "focusOpacity": 0.12,
-                      "hover": "rgba(0, 0, 0, 0.04)",
-                      "hoverOpacity": 0.04,
-                      "selected": "rgba(0, 0, 0, 0.08)",
-                      "selectedOpacity": 0.08,
-                    },
-                    "augmentColor": [Function],
-                    "background": Object {
-                      "default": "#fafafa",
-                      "paper": "#fff",
-                    },
-                    "common": Object {
-                      "black": "#000",
-                      "white": "#fff",
-                    },
-                    "contrastThreshold": 3,
-                    "divider": "rgba(0, 0, 0, 0.12)",
-                    "error": Object {
-                      "contrastText": "#fff",
-                      "dark": "#d32f2f",
-                      "light": "#e57373",
-                      "main": "#f44336",
-                    },
-                    "getContrastText": [Function],
-                    "grey": Object {
-                      "100": "#f5f5f5",
-                      "200": "#eeeeee",
-                      "300": "#e0e0e0",
-                      "400": "#bdbdbd",
-                      "50": "#fafafa",
-                      "500": "#9e9e9e",
-                      "600": "#757575",
-                      "700": "#616161",
-                      "800": "#424242",
-                      "900": "#212121",
-                      "A100": "#d5d5d5",
-                      "A200": "#aaaaaa",
-                      "A400": "#303030",
-                      "A700": "#616161",
-                    },
-                    "info": Object {
-                      "contrastText": "#fff",
-                      "dark": "#1976d2",
-                      "light": "#64b5f6",
-                      "main": "#2196f3",
-                    },
-                    "primary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#303f9f",
-                      "light": "#7986cb",
-                      "main": "#3f51b5",
-                    },
-                    "secondary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#c51162",
-                      "light": "#ff4081",
-                      "main": "#f50057",
-                    },
-                    "success": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#388e3c",
-                      "light": "#81c784",
-                      "main": "#4caf50",
-                    },
-                    "text": Object {
-                      "disabled": "rgba(0, 0, 0, 0.38)",
-                      "hint": "rgba(0, 0, 0, 0.38)",
-                      "primary": "rgba(0, 0, 0, 0.87)",
-                      "secondary": "rgba(0, 0, 0, 0.54)",
-                    },
-                    "tonalOffset": 0.2,
-                    "type": "light",
-                    "warning": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#f57c00",
-                      "light": "#ffb74d",
-                      "main": "#ff9800",
-                    },
-                  },
-                  "props": Object {},
-                  "shadows": Array [
-                    "none",
-                    "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                    "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                    "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                    "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                    "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                    "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                    "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                    "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                    "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                    "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                    "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                    "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                  ],
-                  "shape": Object {
-                    "borderRadius": 4,
-                  },
-                  "spacing": [Function],
-                  "transitions": Object {
-                    "create": [Function],
-                    "duration": Object {
-                      "complex": 375,
-                      "enteringScreen": 225,
-                      "leavingScreen": 195,
-                      "short": 250,
-                      "shorter": 200,
-                      "shortest": 150,
-                      "standard": 300,
-                    },
-                    "easing": Object {
-                      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                    },
-                    "getAutoHeightDuration": [Function],
-                  },
-                  "typography": Object {
-                    "body1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.5,
-                    },
-                    "body2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.01071em",
-                      "lineHeight": 1.43,
-                    },
-                    "button": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.02857em",
-                      "lineHeight": 1.75,
-                      "textTransform": "uppercase",
-                    },
-                    "caption": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.03333em",
-                      "lineHeight": 1.66,
-                    },
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": 14,
-                    "fontWeightBold": 700,
-                    "fontWeightLight": 300,
-                    "fontWeightMedium": 500,
-                    "fontWeightRegular": 400,
-                    "h1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "6rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.01562em",
-                      "lineHeight": 1.167,
-                    },
-                    "h2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3.75rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.00833em",
-                      "lineHeight": 1.2,
-                    },
-                    "h3": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.167,
-                    },
-                    "h4": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "2.125rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00735em",
-                      "lineHeight": 1.235,
-                    },
-                    "h5": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.5rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.334,
-                    },
-                    "h6": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.25rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.0075em",
-                      "lineHeight": 1.6,
-                    },
-                    "htmlFontSize": 16,
-                    "overline": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.08333em",
-                      "lineHeight": 2.66,
-                      "textTransform": "uppercase",
-                    },
-                    "pxToRem": [Function],
-                    "round": [Function],
-                    "subtitle1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.75,
-                    },
-                    "subtitle2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.00714em",
-                      "lineHeight": 1.57,
-                    },
-                  },
-                  "zIndex": Object {
-                    "appBar": 1100,
-                    "drawer": 1200,
-                    "mobileStepper": 1000,
-                    "modal": 1300,
-                    "snackbar": 1400,
-                    "speedDial": 1050,
-                    "tooltip": 1500,
-                  },
-                },
-                "name": "MuiBackdrop",
-              },
-              "propTypes": Object {
-                "classes": [Function],
-                "innerRef": [Function],
-              },
-              "render": [Function],
-              "useStyles": [Function],
-            }
-          }
-          BackdropProps={
-            Object {
-              "transitionDuration": Object {
-                "enter": 225,
-                "exit": 195,
-              },
-            }
-          }
-          className="MuiDialog-root modal-root"
-          closeAfterTransition={true}
-          disableEscapeKeyDown={false}
-          onClose={[Function]}
-          open={true}
+        <div
+          id="accessibility-title"
         >
-          <ForwardRef(Portal)
-            disablePortal={false}
+          feedback.accessibility.window_title
+        </div>
+        <button
+          aria-label="feedback.accessibility.button_close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="fb-root"
+        >
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="80"
+            width="80"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <p
+            class="title"
           >
-            <Portal
-              containerInfo={
-                <body
-                  style="padding-right: 0px; overflow: hidden;"
-                >
-                  <div
-                    class="MuiDialog-root modal-root"
-                    role="presentation"
-                    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiBackdrop-root"
-                      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    />
-                    <div
-                      data-test="sentinelStart"
-                      tabindex="0"
-                    />
-                    <div
-                      class="MuiDialog-container MuiDialog-scrollPaper"
-                      role="none presentation"
-                      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                      tabindex="-1"
-                    >
-                      <div
-                        aria-labelledby="accessibility-title"
-                        class="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                        role="dialog"
-                      >
-                        <div
-                          id="accessibility-title"
-                        >
-                          feedback.accessibility.window_title
-                        </div>
-                        <button
-                          aria-label="feedback.accessibility.button_close"
-                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="16"
-                              width="16"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                        <div
-                          class="fb-root"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="styles__icon___23x3R"
-                            height="80"
-                            width="80"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                          <p
-                            class="title"
-                          >
-                            feedback.title
-                          </p>
-                          <p
-                            class="text"
-                          >
-                            feedback.text1
-                          </p>
-                          <p
-                            class="text"
-                          >
-                            feedback.text2
-                          </p>
-                          <div
-                            class="actions"
-                          >
-                            <button
-                              aria-label="feedback.later"
-                              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                              tabindex="0"
-                              type="button"
-                            >
-                              <span
-                                class="MuiButton-label"
-                              >
-                                feedback.later
-                              </span>
-                              <span
-                                class="MuiTouchRipple-root"
-                              />
-                            </button>
-                            <button
-                              aria-label="feedback.lets_go"
-                              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                              tabindex="0"
-                              type="button"
-                            >
-                              <span
-                                class="MuiButton-label"
-                              >
-                                feedback.lets_go
-                              </span>
-                              <span
-                                class="MuiTouchRipple-root"
-                              />
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      data-test="sentinelEnd"
-                      tabindex="0"
-                    />
-                  </div>
-                </body>
-              }
+            feedback.title
+          </p>
+          <p
+            class="text"
+          >
+            feedback.text1
+          </p>
+          <p
+            class="text"
+          >
+            feedback.text2
+          </p>
+          <div
+            class="actions"
+          >
+            <button
+              aria-label="feedback.later"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                feedback.later
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+            <button
+              aria-label="feedback.lets_go"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
             >
-              <div
-                className="MuiDialog-root modal-root"
-                onKeyDown={[Function]}
-                role="presentation"
-                style={
-                  Object {
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "fixed",
-                    "right": 0,
-                    "top": 0,
-                    "zIndex": 1300,
-                  }
-                }
+              <span
+                class="MuiButton-label"
               >
-                <WithStyles(ForwardRef(Backdrop))
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Backdrop)
-                    classes={
-                      Object {
-                        "invisible": "MuiBackdrop-invisible",
-                        "root": "MuiBackdrop-root",
-                      }
-                    }
-                    onClick={[Function]}
-                    open={true}
-                    transitionDuration={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <ForwardRef(Fade)
-                      in={true}
-                      onClick={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                    >
-                      <Transition
-                        appear={true}
-                        enter={true}
-                        exit={true}
-                        in={true}
-                        mountOnEnter={false}
-                        onClick={[Function]}
-                        onEnter={[Function]}
-                        onEntered={[Function]}
-                        onEntering={[Function]}
-                        onExit={[Function]}
-                        onExited={[Function]}
-                        onExiting={[Function]}
-                        timeout={
-                          Object {
-                            "enter": 225,
-                            "exit": 195,
-                          }
-                        }
-                        unmountOnExit={false}
-                      >
-                        <div
-                          aria-hidden={true}
-                          className="MuiBackdrop-root"
-                          onClick={[Function]}
-                          style={
-                            Object {
-                              "opacity": 1,
-                              "visibility": undefined,
-                            }
-                          }
-                        />
-                      </Transition>
-                    </ForwardRef(Fade)>
-                  </ForwardRef(Backdrop)>
-                </WithStyles(ForwardRef(Backdrop))>
-                <Unstable_TrapFocus
-                  disableAutoFocus={false}
-                  disableEnforceFocus={false}
-                  disableRestoreFocus={false}
-                  getDoc={[Function]}
-                  isEnabled={[Function]}
-                  open={true}
-                >
-                  <div
-                    data-test="sentinelStart"
-                    tabIndex={0}
-                  />
-                  <ForwardRef(Fade)
-                    appear={true}
-                    in={true}
-                    onEnter={[Function]}
-                    onExited={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      role="none presentation"
-                      tabIndex="-1"
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        className="MuiDialog-container MuiDialog-scrollPaper"
-                        onMouseDown={[Function]}
-                        onMouseUp={[Function]}
-                        role="none presentation"
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                        tabIndex="-1"
-                      >
-                        <WithStyles(ForwardRef(Paper))
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <ForwardRef(Paper)
-                            aria-labelledby="accessibility-title"
-                            className="MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                            classes={
-                              Object {
-                                "elevation0": "MuiPaper-elevation0",
-                                "elevation1": "MuiPaper-elevation1",
-                                "elevation10": "MuiPaper-elevation10",
-                                "elevation11": "MuiPaper-elevation11",
-                                "elevation12": "MuiPaper-elevation12",
-                                "elevation13": "MuiPaper-elevation13",
-                                "elevation14": "MuiPaper-elevation14",
-                                "elevation15": "MuiPaper-elevation15",
-                                "elevation16": "MuiPaper-elevation16",
-                                "elevation17": "MuiPaper-elevation17",
-                                "elevation18": "MuiPaper-elevation18",
-                                "elevation19": "MuiPaper-elevation19",
-                                "elevation2": "MuiPaper-elevation2",
-                                "elevation20": "MuiPaper-elevation20",
-                                "elevation21": "MuiPaper-elevation21",
-                                "elevation22": "MuiPaper-elevation22",
-                                "elevation23": "MuiPaper-elevation23",
-                                "elevation24": "MuiPaper-elevation24",
-                                "elevation3": "MuiPaper-elevation3",
-                                "elevation4": "MuiPaper-elevation4",
-                                "elevation5": "MuiPaper-elevation5",
-                                "elevation6": "MuiPaper-elevation6",
-                                "elevation7": "MuiPaper-elevation7",
-                                "elevation8": "MuiPaper-elevation8",
-                                "elevation9": "MuiPaper-elevation9",
-                                "outlined": "MuiPaper-outlined",
-                                "root": "MuiPaper-root",
-                                "rounded": "MuiPaper-rounded",
-                              }
-                            }
-                            elevation={24}
-                            role="dialog"
-                          >
-                            <div
-                              aria-labelledby="accessibility-title"
-                              className="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                              role="dialog"
-                            >
-                              <div
-                                id="accessibility-title"
-                              >
-                                feedback.accessibility.window_title
-                              </div>
-                              <WithStyles(ForwardRef(IconButton))
-                                aria-label="feedback.accessibility.button_close"
-                                className="modal-paper-close-button"
-                                onClick={[Function]}
-                              >
-                                <ForwardRef(IconButton)
-                                  aria-label="feedback.accessibility.button_close"
-                                  className="modal-paper-close-button"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiIconButton-colorInherit",
-                                      "colorPrimary": "MuiIconButton-colorPrimary",
-                                      "colorSecondary": "MuiIconButton-colorSecondary",
-                                      "disabled": "Mui-disabled",
-                                      "edgeEnd": "MuiIconButton-edgeEnd",
-                                      "edgeStart": "MuiIconButton-edgeStart",
-                                      "label": "MuiIconButton-label",
-                                      "root": "MuiIconButton-root",
-                                      "sizeSmall": "MuiIconButton-sizeSmall",
-                                    }
-                                  }
-                                  onClick={[Function]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    aria-label="feedback.accessibility.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[Function]}
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      aria-label="feedback.accessibility.button_close"
-                                      centerRipple={true}
-                                      className="MuiIconButton-root modal-paper-close-button"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      disabled={false}
-                                      focusRipple={true}
-                                      onClick={[Function]}
-                                    >
-                                      <button
-                                        aria-label="feedback.accessibility.button_close"
-                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiIconButton-label"
-                                        >
-                                          <Icon
-                                            icon="test-file-stub"
-                                            size={16}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <svg
-                                                className="styles__icon___23x3R"
-                                                height={16}
-                                                style={Object {}}
-                                                width={16}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={true}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={true}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(IconButton)>
-                              </WithStyles(ForwardRef(IconButton))>
-                              <div
-                                className="fb-root"
-                              >
-                                <StyledIcon
-                                  icon="test-file-stub"
-                                  size={80}
-                                >
-                                  <Icon
-                                    aria-hidden={true}
-                                    icon="test-file-stub"
-                                    size={80}
-                                    spin={false}
-                                  >
-                                    <Component
-                                      aria-hidden={true}
-                                      className="styles__icon___23x3R"
-                                      height={80}
-                                      style={Object {}}
-                                      width={80}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="styles__icon___23x3R"
-                                        height={80}
-                                        style={Object {}}
-                                        width={80}
-                                      >
-                                        <use
-                                          xlinkHref="#test-file-stub"
-                                        />
-                                      </svg>
-                                    </Component>
-                                  </Icon>
-                                </StyledIcon>
-                                <p
-                                  className="title"
-                                >
-                                  feedback.title
-                                </p>
-                                <p
-                                  className="text"
-                                >
-                                  feedback.text1
-                                </p>
-                                <p
-                                  className="text"
-                                >
-                                  feedback.text2
-                                </p>
-                                <div
-                                  className="actions"
-                                >
-                                  <WithStyles(ForwardRef(Button))
-                                    aria-label="feedback.later"
-                                    className="btnSecondary"
-                                    onClick={[Function]}
-                                  >
-                                    <ForwardRef(Button)
-                                      aria-label="feedback.later"
-                                      className="btnSecondary"
-                                      classes={
-                                        Object {
-                                          "colorInherit": "MuiButton-colorInherit",
-                                          "contained": "MuiButton-contained",
-                                          "containedPrimary": "MuiButton-containedPrimary",
-                                          "containedSecondary": "MuiButton-containedSecondary",
-                                          "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                          "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                          "disableElevation": "MuiButton-disableElevation",
-                                          "disabled": "Mui-disabled",
-                                          "endIcon": "MuiButton-endIcon",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "fullWidth": "MuiButton-fullWidth",
-                                          "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                          "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                          "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                          "label": "MuiButton-label",
-                                          "outlined": "MuiButton-outlined",
-                                          "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                          "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                          "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                          "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                          "root": "MuiButton-root",
-                                          "sizeLarge": "MuiButton-sizeLarge",
-                                          "sizeSmall": "MuiButton-sizeSmall",
-                                          "startIcon": "MuiButton-startIcon",
-                                          "text": "MuiButton-text",
-                                          "textPrimary": "MuiButton-textPrimary",
-                                          "textSecondary": "MuiButton-textSecondary",
-                                          "textSizeLarge": "MuiButton-textSizeLarge",
-                                          "textSizeSmall": "MuiButton-textSizeSmall",
-                                        }
-                                      }
-                                      onClick={[Function]}
-                                    >
-                                      <WithStyles(ForwardRef(ButtonBase))
-                                        aria-label="feedback.later"
-                                        className="MuiButton-root MuiButton-text btnSecondary"
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <ForwardRef(ButtonBase)
-                                          aria-label="feedback.later"
-                                          className="MuiButton-root MuiButton-text btnSecondary"
-                                          classes={
-                                            Object {
-                                              "disabled": "Mui-disabled",
-                                              "focusVisible": "Mui-focusVisible",
-                                              "root": "MuiButtonBase-root",
-                                            }
-                                          }
-                                          component="button"
-                                          disabled={false}
-                                          focusRipple={true}
-                                          focusVisibleClassName="Mui-focusVisible"
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <button
-                                            aria-label="feedback.later"
-                                            className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                                            disabled={false}
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onDragLeave={[Function]}
-                                            onFocus={[Function]}
-                                            onKeyDown={[Function]}
-                                            onKeyUp={[Function]}
-                                            onMouseDown={[Function]}
-                                            onMouseLeave={[Function]}
-                                            onMouseUp={[Function]}
-                                            onTouchEnd={[Function]}
-                                            onTouchMove={[Function]}
-                                            onTouchStart={[Function]}
-                                            tabIndex={0}
-                                            type="button"
-                                          >
-                                            <span
-                                              className="MuiButton-label"
-                                            >
-                                              feedback.later
-                                            </span>
-                                            <WithStyles(memo)
-                                              center={false}
-                                            >
-                                              <ForwardRef(TouchRipple)
-                                                center={false}
-                                                classes={
-                                                  Object {
-                                                    "child": "MuiTouchRipple-child",
-                                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                                    "ripple": "MuiTouchRipple-ripple",
-                                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                    "root": "MuiTouchRipple-root",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="MuiTouchRipple-root"
-                                                >
-                                                  <TransitionGroup
-                                                    childFactory={[Function]}
-                                                    component={null}
-                                                    exit={true}
-                                                  />
-                                                </span>
-                                              </ForwardRef(TouchRipple)>
-                                            </WithStyles(memo)>
-                                          </button>
-                                        </ForwardRef(ButtonBase)>
-                                      </WithStyles(ForwardRef(ButtonBase))>
-                                    </ForwardRef(Button)>
-                                  </WithStyles(ForwardRef(Button))>
-                                  <WithStyles(ForwardRef(Button))
-                                    aria-label="feedback.lets_go"
-                                    className="btnPrimary"
-                                    onClick={[Function]}
-                                  >
-                                    <ForwardRef(Button)
-                                      aria-label="feedback.lets_go"
-                                      className="btnPrimary"
-                                      classes={
-                                        Object {
-                                          "colorInherit": "MuiButton-colorInherit",
-                                          "contained": "MuiButton-contained",
-                                          "containedPrimary": "MuiButton-containedPrimary",
-                                          "containedSecondary": "MuiButton-containedSecondary",
-                                          "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                          "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                          "disableElevation": "MuiButton-disableElevation",
-                                          "disabled": "Mui-disabled",
-                                          "endIcon": "MuiButton-endIcon",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "fullWidth": "MuiButton-fullWidth",
-                                          "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                          "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                          "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                          "label": "MuiButton-label",
-                                          "outlined": "MuiButton-outlined",
-                                          "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                          "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                          "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                          "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                          "root": "MuiButton-root",
-                                          "sizeLarge": "MuiButton-sizeLarge",
-                                          "sizeSmall": "MuiButton-sizeSmall",
-                                          "startIcon": "MuiButton-startIcon",
-                                          "text": "MuiButton-text",
-                                          "textPrimary": "MuiButton-textPrimary",
-                                          "textSecondary": "MuiButton-textSecondary",
-                                          "textSizeLarge": "MuiButton-textSizeLarge",
-                                          "textSizeSmall": "MuiButton-textSizeSmall",
-                                        }
-                                      }
-                                      onClick={[Function]}
-                                    >
-                                      <WithStyles(ForwardRef(ButtonBase))
-                                        aria-label="feedback.lets_go"
-                                        className="MuiButton-root MuiButton-text btnPrimary"
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <ForwardRef(ButtonBase)
-                                          aria-label="feedback.lets_go"
-                                          className="MuiButton-root MuiButton-text btnPrimary"
-                                          classes={
-                                            Object {
-                                              "disabled": "Mui-disabled",
-                                              "focusVisible": "Mui-focusVisible",
-                                              "root": "MuiButtonBase-root",
-                                            }
-                                          }
-                                          component="button"
-                                          disabled={false}
-                                          focusRipple={true}
-                                          focusVisibleClassName="Mui-focusVisible"
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <button
-                                            aria-label="feedback.lets_go"
-                                            className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                            disabled={false}
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onDragLeave={[Function]}
-                                            onFocus={[Function]}
-                                            onKeyDown={[Function]}
-                                            onKeyUp={[Function]}
-                                            onMouseDown={[Function]}
-                                            onMouseLeave={[Function]}
-                                            onMouseUp={[Function]}
-                                            onTouchEnd={[Function]}
-                                            onTouchMove={[Function]}
-                                            onTouchStart={[Function]}
-                                            tabIndex={0}
-                                            type="button"
-                                          >
-                                            <span
-                                              className="MuiButton-label"
-                                            >
-                                              feedback.lets_go
-                                            </span>
-                                            <WithStyles(memo)
-                                              center={false}
-                                            >
-                                              <ForwardRef(TouchRipple)
-                                                center={false}
-                                                classes={
-                                                  Object {
-                                                    "child": "MuiTouchRipple-child",
-                                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                                    "ripple": "MuiTouchRipple-ripple",
-                                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                    "root": "MuiTouchRipple-root",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="MuiTouchRipple-root"
-                                                >
-                                                  <TransitionGroup
-                                                    childFactory={[Function]}
-                                                    component={null}
-                                                    exit={true}
-                                                  />
-                                                </span>
-                                              </ForwardRef(TouchRipple)>
-                                            </WithStyles(memo)>
-                                          </button>
-                                        </ForwardRef(ButtonBase)>
-                                      </WithStyles(ForwardRef(ButtonBase))>
-                                    </ForwardRef(Button)>
-                                  </WithStyles(ForwardRef(Button))>
-                                </div>
-                              </div>
-                            </div>
-                          </ForwardRef(Paper)>
-                        </WithStyles(ForwardRef(Paper))>
-                      </div>
-                    </Transition>
-                  </ForwardRef(Fade)>
-                  <div
-                    data-test="sentinelEnd"
-                    tabIndex={0}
-                  />
-                </Unstable_TrapFocus>
-              </div>
-            </Portal>
-          </ForwardRef(Portal)>
-        </ForwardRef(Modal)>
-      </ForwardRef(Dialog)>
-    </WithStyles(ForwardRef(Dialog))>
-  </FeedbackModal>
-</Provider>
+                feedback.lets_go
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx b/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx
index 5b817591bf6040deab0540b88f806542e5078fb4..1537a11b753767682c686bbb366a335502d47520 100644
--- a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx
+++ b/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx
@@ -1,10 +1,10 @@
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
 import React from 'react'
 import HalfHourNoData from './HalfHourNoData'
 
 describe('HalfHourNoData component', () => {
   it('should render correctly HalfHourNoData', () => {
-    const component = mount(<HalfHourNoData />)
-    expect(component).toMatchSnapshot()
+    const { container } = render(<HalfHourNoData />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap b/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap
index ef55e75a7baa649a8a4924df51b3b59c2da6b06b..af114a46a58eb8a87647400a2fbfe1ee201f4751 100644
--- a/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap
+++ b/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap
@@ -1,3 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HalfHourNoData component should render correctly HalfHourNoData 1`] = `ReactWrapper {}`;
+exports[`HalfHourNoData component should render correctly HalfHourNoData 1`] = `
+<div>
+  <div
+    class="halfHour"
+  >
+    <h2>
+      timestep.half_an_hour.gather_data_title
+    </h2>
+    <p>
+      timestep.half_an_hour.gather_data_subtitle
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
index 25c2672cc2540a55bcbb7044a777cb6cf651487e..39da0b310d1e26b7560cb800cd3641f2d58e963e 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -1,15 +1,14 @@
 import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
 import TimeStepSelector from 'components/FluidChart/TimeStepSelector/TimeStepSelector'
 import { FluidType, TimeStep } from 'enums'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import { DateTime } from 'luxon'
 import React from 'react'
 import { Provider } from 'react-redux'
 import UsageEventService from 'services/usageEvent.service'
 import * as chartActions from 'store/chart/chart.slice'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 
 jest.mock('services/usageEvent.service')
 const mockAddEvent = jest.fn()
@@ -33,15 +32,13 @@ describe('TimeStepSelector component', () => {
         }),
       },
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <TimeStepSelector fluidType={FluidType.WATER} />
       </Provider>
     )
-    expect(wrapper.find('.circle').at(3).exists()).toBeTruthy()
-    expect(wrapper.find('.circle').at(4).exists()).toBeFalsy()
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(screen.getAllByRole('listitem').length).toBe(8)
+    expect(container).toMatchSnapshot()
   })
 
   it('should render component properly with 5 timesteps', () => {
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
index 06bdfd8b036b573d83baf595b0e9a71f28e12e98..d5d59d5340e20443334a3691e49a9c30efc6b04c 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -96,7 +96,6 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
                 }}
                 id={TimeStep[step].toLowerCase()}
                 tabIndex={0}
-                role="menuitem"
               >
                 <span className="clickable-area" />
                 <span className="text text-14-normal">
diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index 1ab4cc18035281f2f939e45c009c1f4d334db722..bd50699f8e15615f0e591ab144c1b29a4992c0f8 100644
--- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -1,241 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TimeStepSelector component should render component properly with 4 timesteps 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <TimeStepSelector
-    fluidType={1}
+<div>
+  <div
+    class="timestep-selector"
   >
+    <button
+      class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiButton-label text-13-normal"
+      >
+        timestep.today
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
     <div
-      className="timestep-selector"
+      class="timestep-container"
     >
-      <WithStyles(ForwardRef(Button))
-        classes={
-          Object {
-            "label": "text-13-normal",
-            "root": "btnSecondary",
-          }
-        }
-        onClick={[Function]}
-        size="large"
+      <ul
+        class="timestep-bar false"
       >
-        <ForwardRef(Button)
-          classes={
-            Object {
-              "colorInherit": "MuiButton-colorInherit",
-              "contained": "MuiButton-contained",
-              "containedPrimary": "MuiButton-containedPrimary",
-              "containedSecondary": "MuiButton-containedSecondary",
-              "containedSizeLarge": "MuiButton-containedSizeLarge",
-              "containedSizeSmall": "MuiButton-containedSizeSmall",
-              "disableElevation": "MuiButton-disableElevation",
-              "disabled": "Mui-disabled",
-              "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
-              "fullWidth": "MuiButton-fullWidth",
-              "iconSizeLarge": "MuiButton-iconSizeLarge",
-              "iconSizeMedium": "MuiButton-iconSizeMedium",
-              "iconSizeSmall": "MuiButton-iconSizeSmall",
-              "label": "MuiButton-label text-13-normal",
-              "outlined": "MuiButton-outlined",
-              "outlinedPrimary": "MuiButton-outlinedPrimary",
-              "outlinedSecondary": "MuiButton-outlinedSecondary",
-              "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-              "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-              "root": "MuiButton-root btnSecondary",
-              "sizeLarge": "MuiButton-sizeLarge",
-              "sizeSmall": "MuiButton-sizeSmall",
-              "startIcon": "MuiButton-startIcon",
-              "text": "MuiButton-text",
-              "textPrimary": "MuiButton-textPrimary",
-              "textSecondary": "MuiButton-textSecondary",
-              "textSizeLarge": "MuiButton-textSizeLarge",
-              "textSizeSmall": "MuiButton-textSizeSmall",
-            }
-          }
-          onClick={[Function]}
-          size="large"
+        <li
+          class="circle"
+          id="week"
+          tabindex="0"
         >
-          <WithStyles(ForwardRef(ButtonBase))
-            className="MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
+          <span
+            class="clickable-area"
+          />
+          <span
+            class="text text-14-normal"
           >
-            <ForwardRef(ButtonBase)
-              className="MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
-              classes={
-                Object {
-                  "disabled": "Mui-disabled",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiButtonBase-root",
-                }
-              }
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <button
-                className="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <span
-                  className="MuiButton-label text-13-normal"
-                >
-                  timestep.today
-                </span>
-                <WithStyles(memo)
-                  center={false}
-                >
-                  <ForwardRef(TouchRipple)
-                    center={false}
-                    classes={
-                      Object {
-                        "child": "MuiTouchRipple-child",
-                        "childLeaving": "MuiTouchRipple-childLeaving",
-                        "childPulsate": "MuiTouchRipple-childPulsate",
-                        "ripple": "MuiTouchRipple-ripple",
-                        "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                        "rippleVisible": "MuiTouchRipple-rippleVisible",
-                        "root": "MuiTouchRipple-root",
-                      }
-                    }
-                  >
-                    <span
-                      className="MuiTouchRipple-root"
-                    >
-                      <TransitionGroup
-                        childFactory={[Function]}
-                        component={null}
-                        exit={true}
-                      />
-                    </span>
-                  </ForwardRef(TouchRipple)>
-                </WithStyles(memo)>
-              </button>
-            </ForwardRef(ButtonBase)>
-          </WithStyles(ForwardRef(ButtonBase))>
-        </ForwardRef(Button)>
-      </WithStyles(ForwardRef(Button))>
-      <div
-        className="timestep-container"
-      >
-        <ul
-          className="timestep-bar false"
+            timestep.week.period
+          </span>
+        </li>
+        <li
+          class="bar"
+        />
+        <li
+          class="active circle"
+          id="day"
+          tabindex="0"
         >
-          <li
-            className="circle"
-            id="week"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="menuitem"
-            tabIndex={0}
-          >
-            <span
-              className="clickable-area"
-            />
-            <span
-              className="text text-14-normal"
-            >
-              timestep.week.period
-            </span>
-          </li>
-          <li
-            className="bar"
+          <span
+            class="clickable-area"
           />
-          <li
-            className="active circle"
-            id="day"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="menuitem"
-            tabIndex={0}
+          <span
+            class="text text-14-normal"
           >
-            <span
-              className="clickable-area"
-            />
-            <span
-              className="text text-14-normal"
-            >
-              timestep.day.period
-            </span>
-          </li>
-          <li
-            className="bar"
+            timestep.day.period
+          </span>
+        </li>
+        <li
+          class="bar"
+        />
+        <li
+          class="circle"
+          id="month"
+          tabindex="0"
+        >
+          <span
+            class="clickable-area"
           />
-          <li
-            className="circle"
-            id="month"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="menuitem"
-            tabIndex={0}
+          <span
+            class="text text-14-normal"
           >
-            <span
-              className="clickable-area"
-            />
-            <span
-              className="text text-14-normal"
-            >
-              timestep.month.period
-            </span>
-          </li>
-          <li
-            className="bar"
+            timestep.month.period
+          </span>
+        </li>
+        <li
+          class="bar"
+        />
+        <li
+          class="circle"
+          id="year"
+          tabindex="0"
+        >
+          <span
+            class="clickable-area"
           />
-          <li
-            className="circle"
-            id="year"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="menuitem"
-            tabIndex={0}
+          <span
+            class="text text-14-normal"
           >
-            <span
-              className="clickable-area"
-            />
-            <span
-              className="text text-14-normal"
-            >
-              timestep.year.period
-            </span>
-          </li>
-          <li
-            className="bar"
-          />
-        </ul>
-      </div>
+            timestep.year.period
+          </span>
+        </li>
+        <li
+          class="bar"
+        />
+      </ul>
     </div>
-  </TimeStepSelector>
-</Provider>
+  </div>
+</div>
 `;
diff --git a/src/components/Header/CozyBar.spec.tsx b/src/components/Header/CozyBar.spec.tsx
index 274a14b02a7b75dd088148174d95780760d286bd..3f747796d146ce793df13cf8de468e548830188a 100644
--- a/src/components/Header/CozyBar.spec.tsx
+++ b/src/components/Header/CozyBar.spec.tsx
@@ -1,7 +1,7 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import CozyBar from 'components/Header/CozyBar'
 import { ScreenType } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as ModalAction from 'store/modal/modal.slice'
@@ -28,49 +28,47 @@ jest.mock('react-router-dom', () => ({
 describe('CozyBar component', () => {
   const store = createMockEcolyoStore()
   it('should be rendered correctly without without left arrow', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <CozyBar />
       </Provider>
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
   describe('should test displayBackArrow', () => {
-    it('should call navigate(-1) when back button is clicked and no function is provided', () => {
-      const wrapper = mount(
+    it('should call navigate(-1) when back button is clicked and no function is provided', async () => {
+      const { container } = render(
         <Provider store={store}>
           <CozyBar displayBackArrow={true} />
         </Provider>
       )
-      expect(toJson(wrapper)).toMatchSnapshot()
-      expect(wrapper.find('BarLeft')).toHaveLength(1)
-      wrapper.find('BarLeft').find('.cv-button').first().simulate('click')
+      expect(container).toMatchSnapshot()
+      await userEvent.click(screen.getAllByRole('button')[0])
       expect(mockedNavigate).toHaveBeenCalled()
     })
 
-    it('should call backFunction() when back button is clicked and function is provided', () => {
+    it('should call backFunction() when back button is clicked and function is provided', async () => {
       const mockBackFunction = jest.fn()
-      const wrapper = mount(
+      const { container } = render(
         <Provider store={store}>
           <CozyBar displayBackArrow={true} backFunction={mockBackFunction} />
         </Provider>
       )
-      expect(toJson(wrapper)).toMatchSnapshot()
-      expect(wrapper.find('BarLeft')).toHaveLength(1)
-      wrapper.find('BarLeft').find('.cv-button').first().simulate('click')
+      expect(container).toMatchSnapshot()
+      await userEvent.click(screen.getAllByRole('button')[0])
       expect(mockBackFunction).toHaveBeenCalled()
     })
   })
 
-  it('should call handleClickFeedbacks when feedback button is clicked', () => {
-    const wrapper = mount(
+  it('should call handleClickFeedbacks when feedback button is clicked', async () => {
+    render(
       <Provider store={store}>
         <CozyBar />
       </Provider>
     )
     const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
-    wrapper.find('BarRight').find('.cv-button').first().simulate('click')
+    await userEvent.click(screen.getByRole('button'))
     expect(updateModalSpy).toHaveBeenCalledWith(true)
   })
 
@@ -78,12 +76,11 @@ describe('CozyBar component', () => {
     const store = createMockEcolyoStore({
       global: { screenType: ScreenType.DESKTOP },
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <CozyBar />
       </Provider>
     )
-    // Snapshot should be empty
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container.firstChild).toBeNull()
   })
 })
diff --git a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
index 203c46d610d5c449180df735cdf3d35d193f911e..62521bfb18e6bd75e9438a5e7a5c2d1dce331a96 100644
--- a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
@@ -1,878 +1,163 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CozyBar component should be rendered correctly without without left arrow 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <CozyBar>
-    <BarCenter>
-      <div
-        className="cozy-bar"
-      >
-        <span
-          className="app-title"
-        >
-          common.title_app
-        </span>
-      </div>
-    </BarCenter>
-    <BarRight>
-      <StyledIconButton
-        aria-label="header.accessibility.button_open_feedbacks"
-        className="cv-button"
-        icon="test-file-stub"
-        onClick={[Function]}
-        sized={22}
+<div>
+  <div
+    class="cozy-bar"
+  >
+    <span
+      class="app-title"
+    >
+      common.title_app
+    </span>
+  </div>
+  <button
+    aria-label="header.accessibility.button_open_feedbacks"
+    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="MuiIconButton-label"
+    >
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="22"
+        width="22"
       >
-        <WithStyles(WithStyles(ForwardRef(IconButton)))
-          aria-label="header.accessibility.button_open_feedbacks"
-          className="cv-button"
-          onClick={[Function]}
-        >
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="header.accessibility.button_open_feedbacks"
-            className="cv-button"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(IconButton))-root-1",
-              }
-            }
-            onClick={[Function]}
-          >
-            <ForwardRef(IconButton)
-              aria-label="header.accessibility.button_open_feedbacks"
-              className="cv-button"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="header.accessibility.button_open_feedbacks"
-                centerRipple={true}
-                className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="header.accessibility.button_open_feedbacks"
-                  centerRipple={true}
-                  className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <button
-                    aria-label="header.accessibility.button_open_feedbacks"
-                    className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <StyledIcon
-                        icon="test-file-stub"
-                        size={22}
-                      >
-                        <Icon
-                          aria-hidden={true}
-                          icon="test-file-stub"
-                          size={22}
-                          spin={false}
-                        >
-                          <Component
-                            aria-hidden={true}
-                            className="styles__icon___23x3R"
-                            height={22}
-                            style={Object {}}
-                            width={22}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="styles__icon___23x3R"
-                              height={22}
-                              style={Object {}}
-                              width={22}
-                            >
-                              <use
-                                xlinkHref="#test-file-stub"
-                              />
-                            </svg>
-                          </Component>
-                        </Icon>
-                      </StyledIcon>
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-        </WithStyles(WithStyles(ForwardRef(IconButton)))>
-      </StyledIconButton>
-    </BarRight>
-  </CozyBar>
-</Provider>
-`;
-
-exports[`CozyBar component should not be rendered with screen type different from mobile 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <CozyBar />
-</Provider>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
 `;
 
 exports[`CozyBar component should test displayBackArrow should call backFunction() when back button is clicked and function is provided 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <CozyBar
-    backFunction={[MockFunction]}
-    displayBackArrow={true}
+<div>
+  <button
+    aria-label="header.accessibility.button_back"
+    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+    tabindex="0"
+    type="button"
   >
-    <BarLeft>
-      <StyledIconButton
-        aria-label="header.accessibility.button_back"
-        className="cv-button"
-        icon="test-file-stub"
-        onClick={[Function]}
-      >
-        <WithStyles(WithStyles(ForwardRef(IconButton)))
-          aria-label="header.accessibility.button_back"
-          className="cv-button"
-          onClick={[Function]}
-        >
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="header.accessibility.button_back"
-            className="cv-button"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(IconButton))-root-1",
-              }
-            }
-            onClick={[Function]}
-          >
-            <ForwardRef(IconButton)
-              aria-label="header.accessibility.button_back"
-              className="cv-button"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="header.accessibility.button_back"
-                centerRipple={true}
-                className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="header.accessibility.button_back"
-                  centerRipple={true}
-                  className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <button
-                    aria-label="header.accessibility.button_back"
-                    className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <StyledIcon
-                        icon="test-file-stub"
-                        size={16}
-                      >
-                        <Icon
-                          aria-hidden={true}
-                          icon="test-file-stub"
-                          size={16}
-                          spin={false}
-                        >
-                          <Component
-                            aria-hidden={true}
-                            className="styles__icon___23x3R"
-                            height={16}
-                            style={Object {}}
-                            width={16}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="styles__icon___23x3R"
-                              height={16}
-                              style={Object {}}
-                              width={16}
-                            >
-                              <use
-                                xlinkHref="#test-file-stub"
-                              />
-                            </svg>
-                          </Component>
-                        </Icon>
-                      </StyledIcon>
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-        </WithStyles(WithStyles(ForwardRef(IconButton)))>
-      </StyledIconButton>
-    </BarLeft>
-    <BarCenter>
-      <div
-        className="cozy-bar"
+    <span
+      class="MuiIconButton-label"
+    >
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="16"
+        width="16"
       >
-        <span
-          className="app-title"
-        >
-          common.title_app
-        </span>
-      </div>
-    </BarCenter>
-    <BarRight>
-      <StyledIconButton
-        aria-label="header.accessibility.button_open_feedbacks"
-        className="cv-button"
-        icon="test-file-stub"
-        onClick={[Function]}
-        sized={22}
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+  <div
+    class="cozy-bar"
+  >
+    <span
+      class="app-title"
+    >
+      common.title_app
+    </span>
+  </div>
+  <button
+    aria-label="header.accessibility.button_open_feedbacks"
+    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="MuiIconButton-label"
+    >
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="22"
+        width="22"
       >
-        <WithStyles(WithStyles(ForwardRef(IconButton)))
-          aria-label="header.accessibility.button_open_feedbacks"
-          className="cv-button"
-          onClick={[Function]}
-        >
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="header.accessibility.button_open_feedbacks"
-            className="cv-button"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(IconButton))-root-1",
-              }
-            }
-            onClick={[Function]}
-          >
-            <ForwardRef(IconButton)
-              aria-label="header.accessibility.button_open_feedbacks"
-              className="cv-button"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="header.accessibility.button_open_feedbacks"
-                centerRipple={true}
-                className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="header.accessibility.button_open_feedbacks"
-                  centerRipple={true}
-                  className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <button
-                    aria-label="header.accessibility.button_open_feedbacks"
-                    className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <StyledIcon
-                        icon="test-file-stub"
-                        size={22}
-                      >
-                        <Icon
-                          aria-hidden={true}
-                          icon="test-file-stub"
-                          size={22}
-                          spin={false}
-                        >
-                          <Component
-                            aria-hidden={true}
-                            className="styles__icon___23x3R"
-                            height={22}
-                            style={Object {}}
-                            width={22}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="styles__icon___23x3R"
-                              height={22}
-                              style={Object {}}
-                              width={22}
-                            >
-                              <use
-                                xlinkHref="#test-file-stub"
-                              />
-                            </svg>
-                          </Component>
-                        </Icon>
-                      </StyledIcon>
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-        </WithStyles(WithStyles(ForwardRef(IconButton)))>
-      </StyledIconButton>
-    </BarRight>
-  </CozyBar>
-</Provider>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
 `;
 
 exports[`CozyBar component should test displayBackArrow should call navigate(-1) when back button is clicked and no function is provided 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <CozyBar
-    displayBackArrow={true}
+<div>
+  <button
+    aria-label="header.accessibility.button_back"
+    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+    tabindex="0"
+    type="button"
   >
-    <BarLeft>
-      <StyledIconButton
-        aria-label="header.accessibility.button_back"
-        className="cv-button"
-        icon="test-file-stub"
-        onClick={[Function]}
-      >
-        <WithStyles(WithStyles(ForwardRef(IconButton)))
-          aria-label="header.accessibility.button_back"
-          className="cv-button"
-          onClick={[Function]}
-        >
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="header.accessibility.button_back"
-            className="cv-button"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(IconButton))-root-1",
-              }
-            }
-            onClick={[Function]}
-          >
-            <ForwardRef(IconButton)
-              aria-label="header.accessibility.button_back"
-              className="cv-button"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="header.accessibility.button_back"
-                centerRipple={true}
-                className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="header.accessibility.button_back"
-                  centerRipple={true}
-                  className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <button
-                    aria-label="header.accessibility.button_back"
-                    className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <StyledIcon
-                        icon="test-file-stub"
-                        size={16}
-                      >
-                        <Icon
-                          aria-hidden={true}
-                          icon="test-file-stub"
-                          size={16}
-                          spin={false}
-                        >
-                          <Component
-                            aria-hidden={true}
-                            className="styles__icon___23x3R"
-                            height={16}
-                            style={Object {}}
-                            width={16}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="styles__icon___23x3R"
-                              height={16}
-                              style={Object {}}
-                              width={16}
-                            >
-                              <use
-                                xlinkHref="#test-file-stub"
-                              />
-                            </svg>
-                          </Component>
-                        </Icon>
-                      </StyledIcon>
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-        </WithStyles(WithStyles(ForwardRef(IconButton)))>
-      </StyledIconButton>
-    </BarLeft>
-    <BarCenter>
-      <div
-        className="cozy-bar"
+    <span
+      class="MuiIconButton-label"
+    >
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="16"
+        width="16"
       >
-        <span
-          className="app-title"
-        >
-          common.title_app
-        </span>
-      </div>
-    </BarCenter>
-    <BarRight>
-      <StyledIconButton
-        aria-label="header.accessibility.button_open_feedbacks"
-        className="cv-button"
-        icon="test-file-stub"
-        onClick={[Function]}
-        sized={22}
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+  <div
+    class="cozy-bar"
+  >
+    <span
+      class="app-title"
+    >
+      common.title_app
+    </span>
+  </div>
+  <button
+    aria-label="header.accessibility.button_open_feedbacks"
+    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="MuiIconButton-label"
+    >
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="22"
+        width="22"
       >
-        <WithStyles(WithStyles(ForwardRef(IconButton)))
-          aria-label="header.accessibility.button_open_feedbacks"
-          className="cv-button"
-          onClick={[Function]}
-        >
-          <WithStyles(ForwardRef(IconButton))
-            aria-label="header.accessibility.button_open_feedbacks"
-            className="cv-button"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(IconButton))-root-1",
-              }
-            }
-            onClick={[Function]}
-          >
-            <ForwardRef(IconButton)
-              aria-label="header.accessibility.button_open_feedbacks"
-              className="cv-button"
-              classes={
-                Object {
-                  "colorInherit": "MuiIconButton-colorInherit",
-                  "colorPrimary": "MuiIconButton-colorPrimary",
-                  "colorSecondary": "MuiIconButton-colorSecondary",
-                  "disabled": "Mui-disabled",
-                  "edgeEnd": "MuiIconButton-edgeEnd",
-                  "edgeStart": "MuiIconButton-edgeStart",
-                  "label": "MuiIconButton-label",
-                  "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
-                  "sizeSmall": "MuiIconButton-sizeSmall",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                aria-label="header.accessibility.button_open_feedbacks"
-                centerRipple={true}
-                className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                disabled={false}
-                focusRipple={true}
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  aria-label="header.accessibility.button_open_feedbacks"
-                  centerRipple={true}
-                  className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  disabled={false}
-                  focusRipple={true}
-                  onClick={[Function]}
-                >
-                  <button
-                    aria-label="header.accessibility.button_open_feedbacks"
-                    className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <span
-                      className="MuiIconButton-label"
-                    >
-                      <StyledIcon
-                        icon="test-file-stub"
-                        size={22}
-                      >
-                        <Icon
-                          aria-hidden={true}
-                          icon="test-file-stub"
-                          size={22}
-                          spin={false}
-                        >
-                          <Component
-                            aria-hidden={true}
-                            className="styles__icon___23x3R"
-                            height={22}
-                            style={Object {}}
-                            width={22}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="styles__icon___23x3R"
-                              height={22}
-                              style={Object {}}
-                              width={22}
-                            >
-                              <use
-                                xlinkHref="#test-file-stub"
-                              />
-                            </svg>
-                          </Component>
-                        </Icon>
-                      </StyledIcon>
-                    </span>
-                    <WithStyles(memo)
-                      center={true}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={true}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(IconButton)>
-          </WithStyles(ForwardRef(IconButton))>
-        </WithStyles(WithStyles(ForwardRef(IconButton)))>
-      </StyledIconButton>
-    </BarRight>
-  </CozyBar>
-</Provider>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
 `;
diff --git a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx
index 833e33dc19b4839b433c70015fd3a133a3f7796e..1d4cf06cba60acf8e3a9e649986e10dd30811097 100644
--- a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx
+++ b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx
@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import { shallow } from 'enzyme'
 import React from 'react'
 import ConnectionNotFound from './ConnectionNotFound'
 
@@ -8,10 +7,10 @@ describe('ConnectionNotFound component test', () => {
   const konnectorSlug = 'enedissgegrandlyon'
 
   it('should correctly render connection not found', () => {
-    const result = shallow(
+    const { container } = render(
       <ConnectionNotFound konnectorSlug={konnectorSlug} />
-    ).getElement()
-    expect(result).toMatchSnapshot()
+    )
+    expect(container).toMatchSnapshot()
   })
 
   it('should open konnector url when button is clicked', async () => {
diff --git a/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap b/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
index fcb5b55986162a92315f86cc0e6968ec4292b840..e3e1d23e59102345c596a30982a453feb8d8b667 100644
--- a/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
+++ b/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
@@ -1,25 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ConnectionNotFound component test should correctly render connection not found 1`] = `
-<div
-  className="knotfound"
->
+<div>
   <div
-    className="knotfound-text"
+    class="knotfound"
   >
-     
-    konnector_form.not_installed
-  </div>
-  <div
-    className="knotfound-button"
-  >
-    <WithStyles(ForwardRef(Button))
-      aria-label="konnector_form.accessibility.button_install"
-      className="btnPrimary"
-      onClick={[Function]}
+    <div
+      class="knotfound-text"
+    >
+       
+      konnector_form.not_installed
+    </div>
+    <div
+      class="knotfound-button"
     >
-      konnector_form.button_install
-    </WithStyles(ForwardRef(Button))>
+      <button
+        aria-label="konnector_form.accessibility.button_install"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          konnector_form.button_install
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/Konnector/KonnectorModal.spec.tsx b/src/components/Konnector/KonnectorModal.spec.tsx
index 16058156c8e0c4098093f87205c4bfb4fda7a24d..cc72f6b71ae36a23d8600d26eecd55e8dcfacbc0 100644
--- a/src/components/Konnector/KonnectorModal.spec.tsx
+++ b/src/components/Konnector/KonnectorModal.spec.tsx
@@ -1,8 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { FluidType, KonnectorError } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -16,7 +14,7 @@ describe('KonnectorModal component', () => {
     jest.clearAllMocks()
   })
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <Provider store={store}>
         <KonnectorModal
           open={true}
@@ -31,7 +29,7 @@ describe('KonnectorModal component', () => {
         />
       </Provider>
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
   it('should be with updating text', () => {
     const { baseElement } = render(
diff --git a/src/components/Konnector/KonnectorModalFooter.spec.tsx b/src/components/Konnector/KonnectorModalFooter.spec.tsx
index 23b1774e1beec4efaa1a2a129a6c62c14fae7a82..6812381cb58d828a5f1feba671e84ffa0998a615 100644
--- a/src/components/Konnector/KonnectorModalFooter.spec.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.spec.tsx
@@ -2,8 +2,6 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { ERROR_EVENT } from 'cozy-harvest-lib/dist/models/flowEvents'
 import { KonnectorError } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { accountsData } from 'tests/__mocks__/accountsData.mock'
@@ -24,7 +22,7 @@ describe('KonnectorModalFooter component', () => {
   })
 
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <KonnectorModalFooter
           state={null}
@@ -36,7 +34,7 @@ describe('KonnectorModalFooter component', () => {
         />
       </Provider>
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
   it('should render "understood" for enedis sge when postal code not supported (USER_ACTION_NEEDED)', () => {
diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx
index d5039d1915c0796a43eba3cb712e23713f018069..810bd21bbc68243dd8c51fc1405db101f94b022b 100644
--- a/src/components/Konnector/KonnectorViewerList.spec.tsx
+++ b/src/components/Konnector/KonnectorViewerList.spec.tsx
@@ -1,11 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import KonnectorViewerList from './KonnectorViewerList'
 
 const mockedNavigate = jest.fn()
@@ -18,13 +15,12 @@ describe('KonnectorViewerList component', () => {
   const store = createMockEcolyoStore()
 
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <KonnectorViewerList />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
   it('should click on card and nav to fluid', async () => {
     render(
diff --git a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
index 7fa1dbb1615dcc28d8740dd163daec49aa78dfd0..e4f491c9845a8ee9dd936e89f86e8bdf7412c2ec 100644
--- a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap
@@ -1,983 +1,200 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KonnectorModal component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <KonnectorModal
-    account={null}
-    error={null}
-    fluidType={0}
-    handleAccountDeletion={[MockFunction]}
-    handleCloseClick={[MockFunction]}
-    isLogging={false}
-    isUpdating={false}
-    open={true}
-    state={null}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <WithStyles(ForwardRef(Dialog))
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "paper": "modal-paper",
-          "root": "modal-root",
-        }
-      }
-      disableEscapeKeyDown={true}
-      onClose={[Function]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Dialog)
+      <div
         aria-labelledby="accessibility-title"
-        classes={
-          Object {
-            "container": "MuiDialog-container",
-            "paper": "MuiDialog-paper modal-paper",
-            "paperFullScreen": "MuiDialog-paperFullScreen",
-            "paperFullWidth": "MuiDialog-paperFullWidth",
-            "paperScrollBody": "MuiDialog-paperScrollBody",
-            "paperScrollPaper": "MuiDialog-paperScrollPaper",
-            "paperWidthFalse": "MuiDialog-paperWidthFalse",
-            "paperWidthLg": "MuiDialog-paperWidthLg",
-            "paperWidthMd": "MuiDialog-paperWidthMd",
-            "paperWidthSm": "MuiDialog-paperWidthSm",
-            "paperWidthXl": "MuiDialog-paperWidthXl",
-            "paperWidthXs": "MuiDialog-paperWidthXs",
-            "root": "MuiDialog-root modal-root",
-            "scrollBody": "MuiDialog-scrollBody",
-            "scrollPaper": "MuiDialog-scrollPaper",
-          }
-        }
-        disableEscapeKeyDown={true}
-        onClose={[Function]}
-        open={true}
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Modal)
-          BackdropComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "Naked": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "propTypes": Object {
-                  "children": [Function],
-                  "className": [Function],
-                  "classes": [Function],
-                  "invisible": [Function],
-                  "open": [Function],
-                  "transitionDuration": [Function],
-                },
-                "render": [Function],
-              },
-              "displayName": "WithStyles(ForwardRef(Backdrop))",
-              "options": Object {
-                "defaultTheme": Object {
-                  "breakpoints": Object {
-                    "between": [Function],
-                    "down": [Function],
-                    "keys": Array [
-                      "xs",
-                      "sm",
-                      "md",
-                      "lg",
-                      "xl",
-                    ],
-                    "only": [Function],
-                    "up": [Function],
-                    "values": Object {
-                      "lg": 1280,
-                      "md": 960,
-                      "sm": 600,
-                      "xl": 1920,
-                      "xs": 0,
-                    },
-                    "width": [Function],
-                  },
-                  "direction": "ltr",
-                  "mixins": Object {
-                    "gutters": [Function],
-                    "toolbar": Object {
-                      "@media (min-width:0px) and (orientation: landscape)": Object {
-                        "minHeight": 48,
-                      },
-                      "@media (min-width:600px)": Object {
-                        "minHeight": 64,
-                      },
-                      "minHeight": 56,
-                    },
-                  },
-                  "overrides": Object {},
-                  "palette": Object {
-                    "action": Object {
-                      "activatedOpacity": 0.12,
-                      "active": "rgba(0, 0, 0, 0.54)",
-                      "disabled": "rgba(0, 0, 0, 0.26)",
-                      "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                      "disabledOpacity": 0.38,
-                      "focus": "rgba(0, 0, 0, 0.12)",
-                      "focusOpacity": 0.12,
-                      "hover": "rgba(0, 0, 0, 0.04)",
-                      "hoverOpacity": 0.04,
-                      "selected": "rgba(0, 0, 0, 0.08)",
-                      "selectedOpacity": 0.08,
-                    },
-                    "augmentColor": [Function],
-                    "background": Object {
-                      "default": "#fafafa",
-                      "paper": "#fff",
-                    },
-                    "common": Object {
-                      "black": "#000",
-                      "white": "#fff",
-                    },
-                    "contrastThreshold": 3,
-                    "divider": "rgba(0, 0, 0, 0.12)",
-                    "error": Object {
-                      "contrastText": "#fff",
-                      "dark": "#d32f2f",
-                      "light": "#e57373",
-                      "main": "#f44336",
-                    },
-                    "getContrastText": [Function],
-                    "grey": Object {
-                      "100": "#f5f5f5",
-                      "200": "#eeeeee",
-                      "300": "#e0e0e0",
-                      "400": "#bdbdbd",
-                      "50": "#fafafa",
-                      "500": "#9e9e9e",
-                      "600": "#757575",
-                      "700": "#616161",
-                      "800": "#424242",
-                      "900": "#212121",
-                      "A100": "#d5d5d5",
-                      "A200": "#aaaaaa",
-                      "A400": "#303030",
-                      "A700": "#616161",
-                    },
-                    "info": Object {
-                      "contrastText": "#fff",
-                      "dark": "#1976d2",
-                      "light": "#64b5f6",
-                      "main": "#2196f3",
-                    },
-                    "primary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#303f9f",
-                      "light": "#7986cb",
-                      "main": "#3f51b5",
-                    },
-                    "secondary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#c51162",
-                      "light": "#ff4081",
-                      "main": "#f50057",
-                    },
-                    "success": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#388e3c",
-                      "light": "#81c784",
-                      "main": "#4caf50",
-                    },
-                    "text": Object {
-                      "disabled": "rgba(0, 0, 0, 0.38)",
-                      "hint": "rgba(0, 0, 0, 0.38)",
-                      "primary": "rgba(0, 0, 0, 0.87)",
-                      "secondary": "rgba(0, 0, 0, 0.54)",
-                    },
-                    "tonalOffset": 0.2,
-                    "type": "light",
-                    "warning": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#f57c00",
-                      "light": "#ffb74d",
-                      "main": "#ff9800",
-                    },
-                  },
-                  "props": Object {},
-                  "shadows": Array [
-                    "none",
-                    "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                    "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                    "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                    "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                    "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                    "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                    "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                    "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                    "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                    "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                    "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                    "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                  ],
-                  "shape": Object {
-                    "borderRadius": 4,
-                  },
-                  "spacing": [Function],
-                  "transitions": Object {
-                    "create": [Function],
-                    "duration": Object {
-                      "complex": 375,
-                      "enteringScreen": 225,
-                      "leavingScreen": 195,
-                      "short": 250,
-                      "shorter": 200,
-                      "shortest": 150,
-                      "standard": 300,
-                    },
-                    "easing": Object {
-                      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                    },
-                    "getAutoHeightDuration": [Function],
-                  },
-                  "typography": Object {
-                    "body1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.5,
-                    },
-                    "body2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.01071em",
-                      "lineHeight": 1.43,
-                    },
-                    "button": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.02857em",
-                      "lineHeight": 1.75,
-                      "textTransform": "uppercase",
-                    },
-                    "caption": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.03333em",
-                      "lineHeight": 1.66,
-                    },
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": 14,
-                    "fontWeightBold": 700,
-                    "fontWeightLight": 300,
-                    "fontWeightMedium": 500,
-                    "fontWeightRegular": 400,
-                    "h1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "6rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.01562em",
-                      "lineHeight": 1.167,
-                    },
-                    "h2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3.75rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.00833em",
-                      "lineHeight": 1.2,
-                    },
-                    "h3": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.167,
-                    },
-                    "h4": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "2.125rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00735em",
-                      "lineHeight": 1.235,
-                    },
-                    "h5": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.5rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.334,
-                    },
-                    "h6": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.25rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.0075em",
-                      "lineHeight": 1.6,
-                    },
-                    "htmlFontSize": 16,
-                    "overline": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.08333em",
-                      "lineHeight": 2.66,
-                      "textTransform": "uppercase",
-                    },
-                    "pxToRem": [Function],
-                    "round": [Function],
-                    "subtitle1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.75,
-                    },
-                    "subtitle2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.00714em",
-                      "lineHeight": 1.57,
-                    },
-                  },
-                  "zIndex": Object {
-                    "appBar": 1100,
-                    "drawer": 1200,
-                    "mobileStepper": 1000,
-                    "modal": 1300,
-                    "snackbar": 1400,
-                    "speedDial": 1050,
-                    "tooltip": 1500,
-                  },
-                },
-                "name": "MuiBackdrop",
-              },
-              "propTypes": Object {
-                "classes": [Function],
-                "innerRef": [Function],
-              },
-              "render": [Function],
-              "useStyles": [Function],
-            }
-          }
-          BackdropProps={
-            Object {
-              "transitionDuration": Object {
-                "enter": 225,
-                "exit": 195,
-              },
-            }
-          }
-          className="MuiDialog-root modal-root"
-          closeAfterTransition={true}
-          disableEscapeKeyDown={true}
-          onClose={[Function]}
-          open={true}
+        <div
+          id="accessibility-title"
         >
-          <ForwardRef(Portal)
-            disablePortal={false}
+          konnector_modal.accessibility.window_title
+        </div>
+        <div
+          class="kmodal-content"
+        >
+          <div
+            class="loader elec"
           >
-            <Portal
-              containerInfo={
-                <body
-                  style="padding-right: 0px; overflow: hidden;"
-                >
-                  <div
-                    class="MuiDialog-root modal-root"
-                    role="presentation"
-                    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiBackdrop-root"
-                      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    />
-                    <div
-                      data-test="sentinelStart"
-                      tabindex="0"
-                    />
-                    <div
-                      class="MuiDialog-container MuiDialog-scrollPaper"
-                      role="none presentation"
-                      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                      tabindex="-1"
-                    >
-                      <div
-                        aria-labelledby="accessibility-title"
-                        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                        role="dialog"
-                      >
-                        <div
-                          id="accessibility-title"
-                        >
-                          konnector_modal.accessibility.window_title
-                        </div>
-                        <div
-                          class="kmodal-content"
-                        >
-                          <div
-                            class="loader elec"
-                          >
-                            <div
-                              aria-busy="true"
-                              aria-label="common.accessibility.loading"
-                              class="bars"
-                              role="progressbar"
-                              title="common.accessibility.loading"
-                            >
-                              <div
-                                class="bar"
-                              />
-                              <div
-                                class="bar"
-                              />
-                              <div
-                                class="bar"
-                              />
-                            </div>
-                          </div>
-                          <div
-                            class="kmodal-content-text kmodal-content-text-center text-16-normal"
-                          >
-                            <div
-                              class="kc-wait text-16-bold"
-                            >
-                              konnector_modal.loading_data
-                            </div>
-                          </div>
-                          <div
-                            class="kmodal-waiting-text text-18-italic"
-                          >
-                            <div
-                              class="waiting-text show"
-                            >
-                              <p>
-                                La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes.
-                              </p>
-                              <p />
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent.
-                              </p>
-                              <p />
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique).
-                              </p>
-                              <p />
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Le saviez-vous ?
-                              </p>
-                              <p>
-                                Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !
-                              </p>
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo
-                              </p>
-                              <p>
-                                ♪♪
-                              </p>
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Le saviez-vous ?
-                              </p>
-                              <p>
-                                Environ 90% de notre électricité provient de centrales de production hors de notre métropole.
-                              </p>
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                « Il y a de l’eau dans le gaz » …
-                              </p>
-                              <p>
-                                Avec Ecolyo c’est l’eau AVEC le gaz.
-                              </p>
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Le saviez-vous ?
-                              </p>
-                              <p>
-                                La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire.
-                              </p>
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Le saviez-vous ?
-                              </p>
-                              <p>
-                                La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !
-                              </p>
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Le saviez-vous ?
-                              </p>
-                              <p>
-                                10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage.
-                              </p>
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Le saviez-vous ?
-                              </p>
-                              <p>
-                                2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs.
-                              </p>
-                            </div>
-                            <div
-                              class="waiting-text"
-                            >
-                              <p>
-                                Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation.
-                              </p>
-                              <p>
-                                Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      data-test="sentinelEnd"
-                      tabindex="0"
-                    />
-                  </div>
-                </body>
-              }
+            <div
+              aria-busy="true"
+              aria-label="common.accessibility.loading"
+              class="bars"
+              role="progressbar"
+              title="common.accessibility.loading"
             >
               <div
-                className="MuiDialog-root modal-root"
-                onKeyDown={[Function]}
-                role="presentation"
-                style={
-                  Object {
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "fixed",
-                    "right": 0,
-                    "top": 0,
-                    "zIndex": 1300,
-                  }
-                }
-              >
-                <WithStyles(ForwardRef(Backdrop))
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Backdrop)
-                    classes={
-                      Object {
-                        "invisible": "MuiBackdrop-invisible",
-                        "root": "MuiBackdrop-root",
-                      }
-                    }
-                    onClick={[Function]}
-                    open={true}
-                    transitionDuration={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <ForwardRef(Fade)
-                      in={true}
-                      onClick={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                    >
-                      <Transition
-                        appear={true}
-                        enter={true}
-                        exit={true}
-                        in={true}
-                        mountOnEnter={false}
-                        onClick={[Function]}
-                        onEnter={[Function]}
-                        onEntered={[Function]}
-                        onEntering={[Function]}
-                        onExit={[Function]}
-                        onExited={[Function]}
-                        onExiting={[Function]}
-                        timeout={
-                          Object {
-                            "enter": 225,
-                            "exit": 195,
-                          }
-                        }
-                        unmountOnExit={false}
-                      >
-                        <div
-                          aria-hidden={true}
-                          className="MuiBackdrop-root"
-                          onClick={[Function]}
-                          style={
-                            Object {
-                              "opacity": 1,
-                              "visibility": undefined,
-                            }
-                          }
-                        />
-                      </Transition>
-                    </ForwardRef(Fade)>
-                  </ForwardRef(Backdrop)>
-                </WithStyles(ForwardRef(Backdrop))>
-                <Unstable_TrapFocus
-                  disableAutoFocus={false}
-                  disableEnforceFocus={false}
-                  disableRestoreFocus={false}
-                  getDoc={[Function]}
-                  isEnabled={[Function]}
-                  open={true}
-                >
-                  <div
-                    data-test="sentinelStart"
-                    tabIndex={0}
-                  />
-                  <ForwardRef(Fade)
-                    appear={true}
-                    in={true}
-                    onEnter={[Function]}
-                    onExited={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      role="none presentation"
-                      tabIndex="-1"
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        className="MuiDialog-container MuiDialog-scrollPaper"
-                        onMouseDown={[Function]}
-                        onMouseUp={[Function]}
-                        role="none presentation"
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                        tabIndex="-1"
-                      >
-                        <WithStyles(ForwardRef(Paper))
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <ForwardRef(Paper)
-                            aria-labelledby="accessibility-title"
-                            className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                            classes={
-                              Object {
-                                "elevation0": "MuiPaper-elevation0",
-                                "elevation1": "MuiPaper-elevation1",
-                                "elevation10": "MuiPaper-elevation10",
-                                "elevation11": "MuiPaper-elevation11",
-                                "elevation12": "MuiPaper-elevation12",
-                                "elevation13": "MuiPaper-elevation13",
-                                "elevation14": "MuiPaper-elevation14",
-                                "elevation15": "MuiPaper-elevation15",
-                                "elevation16": "MuiPaper-elevation16",
-                                "elevation17": "MuiPaper-elevation17",
-                                "elevation18": "MuiPaper-elevation18",
-                                "elevation19": "MuiPaper-elevation19",
-                                "elevation2": "MuiPaper-elevation2",
-                                "elevation20": "MuiPaper-elevation20",
-                                "elevation21": "MuiPaper-elevation21",
-                                "elevation22": "MuiPaper-elevation22",
-                                "elevation23": "MuiPaper-elevation23",
-                                "elevation24": "MuiPaper-elevation24",
-                                "elevation3": "MuiPaper-elevation3",
-                                "elevation4": "MuiPaper-elevation4",
-                                "elevation5": "MuiPaper-elevation5",
-                                "elevation6": "MuiPaper-elevation6",
-                                "elevation7": "MuiPaper-elevation7",
-                                "elevation8": "MuiPaper-elevation8",
-                                "elevation9": "MuiPaper-elevation9",
-                                "outlined": "MuiPaper-outlined",
-                                "root": "MuiPaper-root",
-                                "rounded": "MuiPaper-rounded",
-                              }
-                            }
-                            elevation={24}
-                            role="dialog"
-                          >
-                            <div
-                              aria-labelledby="accessibility-title"
-                              className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                              role="dialog"
-                            >
-                              <div
-                                id="accessibility-title"
-                              >
-                                konnector_modal.accessibility.window_title
-                              </div>
-                              <div
-                                className="kmodal-content"
-                              >
-                                <Loader
-                                  fluidType={0}
-                                >
-                                  <div
-                                    className="loader elec"
-                                  >
-                                    <div
-                                      aria-busy="true"
-                                      aria-label="common.accessibility.loading"
-                                      className="bars"
-                                      role="progressbar"
-                                      title="common.accessibility.loading"
-                                    >
-                                      <div
-                                        className="bar"
-                                      />
-                                      <div
-                                        className="bar"
-                                      />
-                                      <div
-                                        className="bar"
-                                      />
-                                    </div>
-                                  </div>
-                                </Loader>
-                                <div
-                                  className="kmodal-content-text kmodal-content-text-center text-16-normal"
-                                >
-                                  <div
-                                    className="kc-wait text-16-bold"
-                                  >
-                                    konnector_modal.loading_data
-                                  </div>
-                                </div>
-                                <div
-                                  className="kmodal-waiting-text text-18-italic"
-                                >
-                                  <div
-                                    className="waiting-text show"
-                                    key=""
-                                  >
-                                    <p>
-                                      La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes.
-                                    </p>
-                                    <p />
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key=""
-                                  >
-                                    <p>
-                                      Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent.
-                                    </p>
-                                    <p />
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key=""
-                                  >
-                                    <p>
-                                      Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique).
-                                    </p>
-                                    <p />
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !"
-                                  >
-                                    <p>
-                                      Le saviez-vous ?
-                                    </p>
-                                    <p>
-                                      Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !
-                                    </p>
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="♪♪"
-                                  >
-                                    <p>
-                                      Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo
-                                    </p>
-                                    <p>
-                                      ♪♪
-                                    </p>
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="Environ 90% de notre électricité provient de centrales de production hors de notre métropole."
-                                  >
-                                    <p>
-                                      Le saviez-vous ?
-                                    </p>
-                                    <p>
-                                      Environ 90% de notre électricité provient de centrales de production hors de notre métropole.
-                                    </p>
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="Avec Ecolyo c’est l’eau AVEC le gaz."
-                                  >
-                                    <p>
-                                      « Il y a de l’eau dans le gaz » …
-                                    </p>
-                                    <p>
-                                      Avec Ecolyo c’est l’eau AVEC le gaz.
-                                    </p>
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire."
-                                  >
-                                    <p>
-                                      Le saviez-vous ?
-                                    </p>
-                                    <p>
-                                      La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire.
-                                    </p>
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !"
-                                  >
-                                    <p>
-                                      Le saviez-vous ?
-                                    </p>
-                                    <p>
-                                      La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !
-                                    </p>
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage."
-                                  >
-                                    <p>
-                                      Le saviez-vous ?
-                                    </p>
-                                    <p>
-                                      10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage.
-                                    </p>
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs."
-                                  >
-                                    <p>
-                                      Le saviez-vous ?
-                                    </p>
-                                    <p>
-                                      2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs.
-                                    </p>
-                                  </div>
-                                  <div
-                                    className="waiting-text"
-                                    key="Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !"
-                                  >
-                                    <p>
-                                      Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation.
-                                    </p>
-                                    <p>
-                                      Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !
-                                    </p>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </ForwardRef(Paper)>
-                        </WithStyles(ForwardRef(Paper))>
-                      </div>
-                    </Transition>
-                  </ForwardRef(Fade)>
-                  <div
-                    data-test="sentinelEnd"
-                    tabIndex={0}
-                  />
-                </Unstable_TrapFocus>
-              </div>
-            </Portal>
-          </ForwardRef(Portal)>
-        </ForwardRef(Modal)>
-      </ForwardRef(Dialog)>
-    </WithStyles(ForwardRef(Dialog))>
-  </KonnectorModal>
-</Provider>
+                class="bar"
+              />
+              <div
+                class="bar"
+              />
+              <div
+                class="bar"
+              />
+            </div>
+          </div>
+          <div
+            class="kmodal-content-text kmodal-content-text-center text-16-normal"
+          >
+            <div
+              class="kc-wait text-16-bold"
+            >
+              konnector_modal.loading_data
+            </div>
+          </div>
+          <div
+            class="kmodal-waiting-text text-18-italic"
+          >
+            <div
+              class="waiting-text show"
+            >
+              <p>
+                La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes.
+              </p>
+              <p />
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent.
+              </p>
+              <p />
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique).
+              </p>
+              <p />
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Le saviez-vous ?
+              </p>
+              <p>
+                Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !
+              </p>
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo
+              </p>
+              <p>
+                ♪♪
+              </p>
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Le saviez-vous ?
+              </p>
+              <p>
+                Environ 90% de notre électricité provient de centrales de production hors de notre métropole.
+              </p>
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                « Il y a de l’eau dans le gaz » …
+              </p>
+              <p>
+                Avec Ecolyo c’est l’eau AVEC le gaz.
+              </p>
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Le saviez-vous ?
+              </p>
+              <p>
+                La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire.
+              </p>
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Le saviez-vous ?
+              </p>
+              <p>
+                La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !
+              </p>
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Le saviez-vous ?
+              </p>
+              <p>
+                10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage.
+              </p>
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Le saviez-vous ?
+              </p>
+              <p>
+                2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs.
+              </p>
+            </div>
+            <div
+              class="waiting-text"
+            >
+              <p>
+                Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation.
+              </p>
+              <p>
+                Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
index 2ac0af5a048f2f7e13d94a194e0e33f2bf6910e7..a81d85ddeb9e35696c18657218226be8bbac1250 100644
--- a/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
@@ -1,155 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KonnectorModalFooter component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <KonnectorModalFooter
-    account={null}
-    error={null}
-    handleAccountDeletion={[MockFunction]}
-    handleCloseClick={[MockFunction]}
-    isUpdating={false}
-    state={null}
+<div>
+  <button
+    aria-label="konnector_modal.accessibility.button_close"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+    tabindex="0"
+    type="button"
   >
-    <WithStyles(ForwardRef(Button))
-      aria-label="konnector_modal.accessibility.button_close"
-      className="btnPrimary"
-      onClick={[Function]}
+    <span
+      class="MuiButton-label"
     >
-      <ForwardRef(Button)
-        aria-label="konnector_modal.accessibility.button_close"
-        className="btnPrimary"
-        classes={
-          Object {
-            "colorInherit": "MuiButton-colorInherit",
-            "contained": "MuiButton-contained",
-            "containedPrimary": "MuiButton-containedPrimary",
-            "containedSecondary": "MuiButton-containedSecondary",
-            "containedSizeLarge": "MuiButton-containedSizeLarge",
-            "containedSizeSmall": "MuiButton-containedSizeSmall",
-            "disableElevation": "MuiButton-disableElevation",
-            "disabled": "Mui-disabled",
-            "endIcon": "MuiButton-endIcon",
-            "focusVisible": "Mui-focusVisible",
-            "fullWidth": "MuiButton-fullWidth",
-            "iconSizeLarge": "MuiButton-iconSizeLarge",
-            "iconSizeMedium": "MuiButton-iconSizeMedium",
-            "iconSizeSmall": "MuiButton-iconSizeSmall",
-            "label": "MuiButton-label",
-            "outlined": "MuiButton-outlined",
-            "outlinedPrimary": "MuiButton-outlinedPrimary",
-            "outlinedSecondary": "MuiButton-outlinedSecondary",
-            "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-            "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-            "root": "MuiButton-root",
-            "sizeLarge": "MuiButton-sizeLarge",
-            "sizeSmall": "MuiButton-sizeSmall",
-            "startIcon": "MuiButton-startIcon",
-            "text": "MuiButton-text",
-            "textPrimary": "MuiButton-textPrimary",
-            "textSecondary": "MuiButton-textSecondary",
-            "textSizeLarge": "MuiButton-textSizeLarge",
-            "textSizeSmall": "MuiButton-textSizeSmall",
-          }
-        }
-        onClick={[Function]}
-      >
-        <WithStyles(ForwardRef(ButtonBase))
-          aria-label="konnector_modal.accessibility.button_close"
-          className="MuiButton-root MuiButton-text btnPrimary"
-          component="button"
-          disabled={false}
-          focusRipple={true}
-          focusVisibleClassName="Mui-focusVisible"
-          onClick={[Function]}
-          type="button"
-        >
-          <ForwardRef(ButtonBase)
-            aria-label="konnector_modal.accessibility.button_close"
-            className="MuiButton-root MuiButton-text btnPrimary"
-            classes={
-              Object {
-                "disabled": "Mui-disabled",
-                "focusVisible": "Mui-focusVisible",
-                "root": "MuiButtonBase-root",
-              }
-            }
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
-          >
-            <button
-              aria-label="konnector_modal.accessibility.button_close"
-              className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-              disabled={false}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onDragLeave={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-              tabIndex={0}
-              type="button"
-            >
-              <span
-                className="MuiButton-label"
-              >
-                <div>
-                  konnector_modal.button_validate
-                </div>
-              </span>
-              <WithStyles(memo)
-                center={false}
-              >
-                <ForwardRef(TouchRipple)
-                  center={false}
-                  classes={
-                    Object {
-                      "child": "MuiTouchRipple-child",
-                      "childLeaving": "MuiTouchRipple-childLeaving",
-                      "childPulsate": "MuiTouchRipple-childPulsate",
-                      "ripple": "MuiTouchRipple-ripple",
-                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                      "root": "MuiTouchRipple-root",
-                    }
-                  }
-                >
-                  <span
-                    className="MuiTouchRipple-root"
-                  >
-                    <TransitionGroup
-                      childFactory={[Function]}
-                      component={null}
-                      exit={true}
-                    />
-                  </span>
-                </ForwardRef(TouchRipple)>
-              </WithStyles(memo)>
-            </button>
-          </ForwardRef(ButtonBase)>
-        </WithStyles(ForwardRef(ButtonBase))>
-      </ForwardRef(Button)>
-    </WithStyles(ForwardRef(Button))>
-  </KonnectorModalFooter>
-</Provider>
+      <div>
+        konnector_modal.button_validate
+      </div>
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
 `;
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index 6295440273087145768e2ea94b73c7b30703bec5..8fd0a567d1583af4d3f71d49a5ced00da6b26630 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -1,482 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KonnectorViewerList component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <KonnectorViewerList>
-    <div
-      className="konnectorsList"
+<div>
+  <div
+    class="konnectorsList"
+  >
+    <button
+      class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+      tabindex="0"
+      type="button"
     >
-      <StyledCard
-        className="connection-card"
-        fluidType={0}
-        key="0"
-        onClick={[Function]}
+      <div
+        class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
       >
-        <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-          className="connection-card electricity"
-          onClick={[Function]}
+        <svg
+          class="styles__icon___23x3R"
+          height="36"
+          width="36"
         >
-          <WithStyles(ForwardRef(CardActionArea))
-            className="connection-card electricity"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
-              }
-            }
-            onClick={[Function]}
-          >
-            <ForwardRef(CardActionArea)
-              className="connection-card electricity"
-              classes={
-                Object {
-                  "focusHighlight": "MuiCardActionArea-focusHighlight",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                >
-                  <button
-                    className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <WithStyles(WithStyles(ForwardRef(CardContent)))>
-                      <WithStyles(ForwardRef(CardContent))
-                        classes={
-                          Object {
-                            "root": "WithStyles(ForwardRef(CardContent))-root-2",
-                          }
-                        }
-                      >
-                        <ForwardRef(CardContent)
-                          classes={
-                            Object {
-                              "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
-                            }
-                          }
-                        >
-                          <div
-                            className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
-                          >
-                            <Icon
-                              icon="test-file-stub"
-                              size={36}
-                              spin={false}
-                            >
-                              <Component
-                                className="styles__icon___23x3R"
-                                height={36}
-                                style={Object {}}
-                                width={36}
-                              >
-                                <svg
-                                  className="styles__icon___23x3R"
-                                  height={36}
-                                  style={Object {}}
-                                  width={36}
-                                >
-                                  <use
-                                    xlinkHref="#test-file-stub"
-                                  />
-                                </svg>
-                              </Component>
-                            </Icon>
-                            <div
-                              className="konnector-title text-18-bold electricity"
-                            >
-                              konnector_options.label_connect_to_electricity
-                            </div>
-                          </div>
-                        </ForwardRef(CardContent)>
-                      </WithStyles(ForwardRef(CardContent))>
-                    </WithStyles(WithStyles(ForwardRef(CardContent)))>
-                    <span
-                      className="MuiCardActionArea-focusHighlight"
-                    />
-                    <WithStyles(memo)
-                      center={false}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={false}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(CardActionArea)>
-          </WithStyles(ForwardRef(CardActionArea))>
-        </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-      </StyledCard>
-      <StyledCard
-        className="connection-card"
-        fluidType={1}
-        key="1"
-        onClick={[Function]}
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
+        <div
+          class="konnector-title text-18-bold electricity"
+        >
+          konnector_options.label_connect_to_electricity
+        </div>
+      </div>
+      <span
+        class="MuiCardActionArea-focusHighlight"
+      />
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+    <button
+      class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
       >
-        <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-          className="connection-card water"
-          onClick={[Function]}
+        <svg
+          class="styles__icon___23x3R"
+          height="36"
+          width="36"
+        >
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
+        <div
+          class="konnector-title text-18-bold water"
         >
-          <WithStyles(ForwardRef(CardActionArea))
-            className="connection-card water"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
-              }
-            }
-            onClick={[Function]}
-          >
-            <ForwardRef(CardActionArea)
-              className="connection-card water"
-              classes={
-                Object {
-                  "focusHighlight": "MuiCardActionArea-focusHighlight",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                >
-                  <button
-                    className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <WithStyles(WithStyles(ForwardRef(CardContent)))>
-                      <WithStyles(ForwardRef(CardContent))
-                        classes={
-                          Object {
-                            "root": "WithStyles(ForwardRef(CardContent))-root-2",
-                          }
-                        }
-                      >
-                        <ForwardRef(CardContent)
-                          classes={
-                            Object {
-                              "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
-                            }
-                          }
-                        >
-                          <div
-                            className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
-                          >
-                            <Icon
-                              icon="test-file-stub"
-                              size={36}
-                              spin={false}
-                            >
-                              <Component
-                                className="styles__icon___23x3R"
-                                height={36}
-                                style={Object {}}
-                                width={36}
-                              >
-                                <svg
-                                  className="styles__icon___23x3R"
-                                  height={36}
-                                  style={Object {}}
-                                  width={36}
-                                >
-                                  <use
-                                    xlinkHref="#test-file-stub"
-                                  />
-                                </svg>
-                              </Component>
-                            </Icon>
-                            <div
-                              className="konnector-title text-18-bold water"
-                            >
-                              konnector_options.label_connect_to_water
-                            </div>
-                          </div>
-                        </ForwardRef(CardContent)>
-                      </WithStyles(ForwardRef(CardContent))>
-                    </WithStyles(WithStyles(ForwardRef(CardContent)))>
-                    <span
-                      className="MuiCardActionArea-focusHighlight"
-                    />
-                    <WithStyles(memo)
-                      center={false}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={false}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(CardActionArea)>
-          </WithStyles(ForwardRef(CardActionArea))>
-        </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-      </StyledCard>
-      <StyledCard
-        className="connection-card"
-        fluidType={2}
-        key="2"
-        onClick={[Function]}
+          konnector_options.label_connect_to_water
+        </div>
+      </div>
+      <span
+        class="MuiCardActionArea-focusHighlight"
+      />
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+    <button
+      class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+      tabindex="0"
+      type="button"
+    >
+      <div
+        class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
       >
-        <WithStyles(WithStyles(ForwardRef(CardActionArea)))
-          className="connection-card gas"
-          onClick={[Function]}
+        <svg
+          class="styles__icon___23x3R"
+          height="36"
+          width="36"
+        >
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
+        <div
+          class="konnector-title text-18-bold gas"
         >
-          <WithStyles(ForwardRef(CardActionArea))
-            className="connection-card gas"
-            classes={
-              Object {
-                "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
-              }
-            }
-            onClick={[Function]}
-          >
-            <ForwardRef(CardActionArea)
-              className="connection-card gas"
-              classes={
-                Object {
-                  "focusHighlight": "MuiCardActionArea-focusHighlight",
-                  "focusVisible": "Mui-focusVisible",
-                  "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
-                }
-              }
-              onClick={[Function]}
-            >
-              <WithStyles(ForwardRef(ButtonBase))
-                className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-              >
-                <ForwardRef(ButtonBase)
-                  className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
-                  classes={
-                    Object {
-                      "disabled": "Mui-disabled",
-                      "focusVisible": "Mui-focusVisible",
-                      "root": "MuiButtonBase-root",
-                    }
-                  }
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                >
-                  <button
-                    className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragLeave={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <WithStyles(WithStyles(ForwardRef(CardContent)))>
-                      <WithStyles(ForwardRef(CardContent))
-                        classes={
-                          Object {
-                            "root": "WithStyles(ForwardRef(CardContent))-root-2",
-                          }
-                        }
-                      >
-                        <ForwardRef(CardContent)
-                          classes={
-                            Object {
-                              "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
-                            }
-                          }
-                        >
-                          <div
-                            className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
-                          >
-                            <Icon
-                              icon="test-file-stub"
-                              size={36}
-                              spin={false}
-                            >
-                              <Component
-                                className="styles__icon___23x3R"
-                                height={36}
-                                style={Object {}}
-                                width={36}
-                              >
-                                <svg
-                                  className="styles__icon___23x3R"
-                                  height={36}
-                                  style={Object {}}
-                                  width={36}
-                                >
-                                  <use
-                                    xlinkHref="#test-file-stub"
-                                  />
-                                </svg>
-                              </Component>
-                            </Icon>
-                            <div
-                              className="konnector-title text-18-bold gas"
-                            >
-                              konnector_options.label_connect_to_gas
-                            </div>
-                          </div>
-                        </ForwardRef(CardContent)>
-                      </WithStyles(ForwardRef(CardContent))>
-                    </WithStyles(WithStyles(ForwardRef(CardContent)))>
-                    <span
-                      className="MuiCardActionArea-focusHighlight"
-                    />
-                    <WithStyles(memo)
-                      center={false}
-                    >
-                      <ForwardRef(TouchRipple)
-                        center={false}
-                        classes={
-                          Object {
-                            "child": "MuiTouchRipple-child",
-                            "childLeaving": "MuiTouchRipple-childLeaving",
-                            "childPulsate": "MuiTouchRipple-childPulsate",
-                            "ripple": "MuiTouchRipple-ripple",
-                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                            "root": "MuiTouchRipple-root",
-                          }
-                        }
-                      >
-                        <span
-                          className="MuiTouchRipple-root"
-                        >
-                          <TransitionGroup
-                            childFactory={[Function]}
-                            component={null}
-                            exit={true}
-                          />
-                        </span>
-                      </ForwardRef(TouchRipple)>
-                    </WithStyles(memo)>
-                  </button>
-                </ForwardRef(ButtonBase)>
-              </WithStyles(ForwardRef(ButtonBase))>
-            </ForwardRef(CardActionArea)>
-          </WithStyles(ForwardRef(CardActionArea))>
-        </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
-      </StyledCard>
-    </div>
-  </KonnectorViewerList>
-</Provider>
+          konnector_options.label_connect_to_gas
+        </div>
+      </div>
+      <span
+        class="MuiCardActionArea-focusHighlight"
+      />
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</div>
 `;
diff --git a/src/components/Loader/Loader.spec.tsx b/src/components/Loader/Loader.spec.tsx
index 91618983d037be9155a6d8a2d79f67b139c1741a..7de46f26ce198f6b7cf6b3569b4087081aa3ab86 100644
--- a/src/components/Loader/Loader.spec.tsx
+++ b/src/components/Loader/Loader.spec.tsx
@@ -1,26 +1,27 @@
+import { render, screen } from '@testing-library/react'
 import { FluidType } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import Loader from './Loader'
 
 describe('Loader component', () => {
   it('should render base Loader', () => {
-    const wrapper = mount(<Loader />)
-    expect(wrapper.getElement()).toMatchSnapshot()
+    const { container } = render(<Loader />)
+    expect(container).toMatchSnapshot()
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
   })
 
   it('should render Electricity Loader', () => {
-    const wrapper = mount(<Loader color="elec" />)
-    expect(wrapper.getElement()).toMatchSnapshot()
+    const { container } = render(<Loader color="elec" />)
+    expect(container).toMatchSnapshot()
   })
 
   it('should render Water Loader', () => {
-    const wrapper = mount(<Loader fluidType={FluidType.WATER} />)
-    expect(wrapper.getElement()).toMatchSnapshot()
+    const { container } = render(<Loader fluidType={FluidType.WATER} />)
+    expect(container).toMatchSnapshot()
   })
 
   it('should render Gas Loader', () => {
-    const wrapper = mount(<Loader fluidType={FluidType.GAS} />)
-    expect(wrapper.getElement()).toMatchSnapshot()
+    const { container } = render(<Loader fluidType={FluidType.GAS} />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Loader/__snapshots__/Loader.spec.tsx.snap b/src/components/Loader/__snapshots__/Loader.spec.tsx.snap
index e33f3c5b6e55146c70713ded38d7342c604476ea..55a94f70733db7a60d3f517efe450891d1f2856d 100644
--- a/src/components/Loader/__snapshots__/Loader.spec.tsx.snap
+++ b/src/components/Loader/__snapshots__/Loader.spec.tsx.snap
@@ -1,21 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loader component should render Electricity Loader 1`] = `
-<Loader
-  color="elec"
-/>
+<div>
+  <div
+    class="loader elec"
+  >
+    <div
+      aria-busy="true"
+      aria-label="common.accessibility.loading"
+      class="bars"
+      role="progressbar"
+      title="common.accessibility.loading"
+    >
+      <div
+        class="bar"
+      />
+      <div
+        class="bar"
+      />
+      <div
+        class="bar"
+      />
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Loader component should render Gas Loader 1`] = `
-<Loader
-  fluidType={2}
-/>
+<div>
+  <div
+    class="loader gaz"
+  >
+    <div
+      aria-busy="true"
+      aria-label="common.accessibility.loading"
+      class="bars"
+      role="progressbar"
+      title="common.accessibility.loading"
+    >
+      <div
+        class="bar"
+      />
+      <div
+        class="bar"
+      />
+      <div
+        class="bar"
+      />
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Loader component should render Water Loader 1`] = `
-<Loader
-  fluidType={1}
-/>
+<div>
+  <div
+    class="loader water"
+  >
+    <div
+      aria-busy="true"
+      aria-label="common.accessibility.loading"
+      class="bars"
+      role="progressbar"
+      title="common.accessibility.loading"
+    >
+      <div
+        class="bar"
+      />
+      <div
+        class="bar"
+      />
+      <div
+        class="bar"
+      />
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Loader component should render base Loader 1`] = `<Loader />`;
+exports[`Loader component should render base Loader 1`] = `
+<div>
+  <div
+    class="loader gold"
+  >
+    <div
+      aria-busy="true"
+      aria-label="common.accessibility.loading"
+      class="bars"
+      role="progressbar"
+      title="common.accessibility.loading"
+    >
+      <div
+        class="bar"
+      />
+      <div
+        class="bar"
+      />
+      <div
+        class="bar"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Options/ExportData/ExportData.spec.tsx b/src/components/Options/ExportData/ExportData.spec.tsx
index 3afe225cedebd2d113d6995bc6c510bd1b8c30c6..b60d9054df1431a45c8fccba075579616b31897c 100644
--- a/src/components/Options/ExportData/ExportData.spec.tsx
+++ b/src/components/Options/ExportData/ExportData.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, waitFor } from '@testing-library/react'
 import React from 'react'
 import ExportData from './ExportData'
 
@@ -12,7 +11,8 @@ jest.mock('services/consumption.service', () => {
 
 describe('exportOptions component', () => {
   it('should be rendered correctly', async () => {
-    const wrapper = mount(<ExportData />)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    const { container } = render(<ExportData />)
+    await waitFor(() => null, { container })
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
index 9a0cb334d2c4bb37164207370ed45415f74a9a34..565c7d0f4a4835d135788e7179a1b10afe7fb157 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -1,2116 +1,231 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`exportDoneModal component should be rendered correctly 1`] = `
-<ExportDoneModal
-  error={false}
-  handleCloseClick={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
+          export.modal_done.accessibility_title
+        </div>
+        <div
+          class="modal-done-root"
+        >
+          <button
+            aria-label="export.button_close"
+            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                class="styles__icon___23x3R"
+                height="18"
+                width="18"
               >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        export.modal_done.accessibility_title
-                      </div>
-                      <div
-                        class="modal-done-root"
-                      >
-                        <button
-                          aria-label="export.button_close"
-                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="18"
-                              width="18"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                        <div
-                          class="content"
-                        >
-                          <div
-                            class="icon-main"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="44"
-                              width="44"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </div>
-                          <div
-                            class="text-16-bold subtitle"
-                          >
-                            export.modal_done.text1
-                          </div>
-                          <div>
-                            export.modal_done.text2
-                          </div>
-                          <button
-                            aria-label="export.modal_done.button_close"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label"
-                            >
-                              export.modal_done.button_close
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <div
+            class="content"
           >
             <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+              class="icon-main"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
+              <svg
+                class="styles__icon___23x3R"
+                height="44"
+                width="44"
               >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
-              >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              export.modal_done.accessibility_title
-                            </div>
-                            <div
-                              className="modal-done-root"
-                            >
-                              <WithStyles(ForwardRef(IconButton))
-                                aria-label="export.button_close"
-                                className="modal-paper-close-button"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(IconButton)
-                                  aria-label="export.button_close"
-                                  className="modal-paper-close-button"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiIconButton-colorInherit",
-                                      "colorPrimary": "MuiIconButton-colorPrimary",
-                                      "colorSecondary": "MuiIconButton-colorSecondary",
-                                      "disabled": "Mui-disabled",
-                                      "edgeEnd": "MuiIconButton-edgeEnd",
-                                      "edgeStart": "MuiIconButton-edgeStart",
-                                      "label": "MuiIconButton-label",
-                                      "root": "MuiIconButton-root",
-                                      "sizeSmall": "MuiIconButton-sizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    aria-label="export.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      aria-label="export.button_close"
-                                      centerRipple={true}
-                                      className="MuiIconButton-root modal-paper-close-button"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      disabled={false}
-                                      focusRipple={true}
-                                      onClick={[MockFunction]}
-                                    >
-                                      <button
-                                        aria-label="export.button_close"
-                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiIconButton-label"
-                                        >
-                                          <Icon
-                                            icon="test-file-stub"
-                                            size={18}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              className="styles__icon___23x3R"
-                                              height={18}
-                                              style={Object {}}
-                                              width={18}
-                                            >
-                                              <svg
-                                                className="styles__icon___23x3R"
-                                                height={18}
-                                                style={Object {}}
-                                                width={18}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={true}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={true}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(IconButton)>
-                              </WithStyles(ForwardRef(IconButton))>
-                              <div
-                                className="content"
-                              >
-                                <div
-                                  className="icon-main"
-                                >
-                                  <Icon
-                                    icon="test-file-stub"
-                                    size={44}
-                                    spin={false}
-                                  >
-                                    <Component
-                                      className="styles__icon___23x3R"
-                                      height={44}
-                                      style={Object {}}
-                                      width={44}
-                                    >
-                                      <svg
-                                        className="styles__icon___23x3R"
-                                        height={44}
-                                        style={Object {}}
-                                        width={44}
-                                      >
-                                        <use
-                                          xlinkHref="#test-file-stub"
-                                        />
-                                      </svg>
-                                    </Component>
-                                  </Icon>
-                                </div>
-                                <div
-                                  className="text-16-bold subtitle"
-                                >
-                                  export.modal_done.text1
-                                </div>
-                                <div>
-                                  export.modal_done.text2
-                                </div>
-                                <WithStyles(ForwardRef(Button))
-                                  aria-label="export.modal_done.button_close"
-                                  className="btnPrimary"
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(Button)
-                                    aria-label="export.modal_done.button_close"
-                                    className="btnPrimary"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiButton-colorInherit",
-                                        "contained": "MuiButton-contained",
-                                        "containedPrimary": "MuiButton-containedPrimary",
-                                        "containedSecondary": "MuiButton-containedSecondary",
-                                        "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                        "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                        "disableElevation": "MuiButton-disableElevation",
-                                        "disabled": "Mui-disabled",
-                                        "endIcon": "MuiButton-endIcon",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "fullWidth": "MuiButton-fullWidth",
-                                        "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                        "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                        "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                        "label": "MuiButton-label",
-                                        "outlined": "MuiButton-outlined",
-                                        "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                        "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                        "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                        "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                        "root": "MuiButton-root",
-                                        "sizeLarge": "MuiButton-sizeLarge",
-                                        "sizeSmall": "MuiButton-sizeSmall",
-                                        "startIcon": "MuiButton-startIcon",
-                                        "text": "MuiButton-text",
-                                        "textPrimary": "MuiButton-textPrimary",
-                                        "textSecondary": "MuiButton-textSecondary",
-                                        "textSizeLarge": "MuiButton-textSizeLarge",
-                                        "textSizeSmall": "MuiButton-textSizeSmall",
-                                      }
-                                    }
-                                    onClick={[MockFunction]}
-                                  >
-                                    <WithStyles(ForwardRef(ButtonBase))
-                                      aria-label="export.modal_done.button_close"
-                                      className="MuiButton-root MuiButton-text btnPrimary"
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <ForwardRef(ButtonBase)
-                                        aria-label="export.modal_done.button_close"
-                                        className="MuiButton-root MuiButton-text btnPrimary"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <button
-                                          aria-label="export.modal_done.button_close"
-                                          className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
-                                        >
-                                          <span
-                                            className="MuiButton-label"
-                                          >
-                                            export.modal_done.button_close
-                                          </span>
-                                          <WithStyles(memo)
-                                            center={false}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={false}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(Button)>
-                                </WithStyles(ForwardRef(Button))>
-                              </div>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
+                <use
+                  xlink:href="#test-file-stub"
                 />
-              </Unstable_TrapFocus>
+              </svg>
             </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</ExportDoneModal>
+            <div
+              class="text-16-bold subtitle"
+            >
+              export.modal_done.text1
+            </div>
+            <div>
+              export.modal_done.text2
+            </div>
+            <button
+              aria-label="export.modal_done.button_close"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                export.modal_done.button_close
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
 
 exports[`exportDoneModal component should display error message 1`] = `
-<ExportDoneModal
-  error={true}
-  handleCloseClick={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
+        >
+          export.modal_done.accessibility_title
+        </div>
+        <div
+          class="modal-done-root"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
+          <button
+            aria-label="export.button_close"
+            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                class="styles__icon___23x3R"
+                height="18"
+                width="18"
               >
-                <div
-                  aria-hidden="true"
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        export.modal_done.accessibility_title
-                      </div>
-                      <div
-                        class="modal-done-root"
-                      >
-                        <button
-                          aria-label="export.button_close"
-                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="18"
-                              width="18"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                        <div
-                          class="content"
-                        >
-                          <div
-                            class="icon-main"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="44"
-                              width="44"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </div>
-                          <div
-                            class="text-16-bold subtitle"
-                          >
-                            export.modal_done.text1
-                          </div>
-                          <div>
-                            export.modal_done.text2
-                          </div>
-                          <button
-                            aria-label="export.modal_done.button_close"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label"
-                            >
-                              export.modal_done.button_close
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        export.modal_done.accessibility_title
-                      </div>
-                      <div
-                        class="modal-done-root"
-                      >
-                        <button
-                          aria-label="export.button_close"
-                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="18"
-                              width="18"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                        <div
-                          class="content"
-                        >
-                          <div
-                            class="icon-main"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="44"
-                              width="44"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </div>
-                          <div
-                            class="text-20-bold error1"
-                          >
-                            export.modal_done.error1
-                          </div>
-                          <div
-                            class="text-16-bold"
-                          >
-                            export.modal_done.error2
-                          </div>
-                          <button
-                            aria-label="export.modal_done.button_close"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label"
-                            >
-                              export.modal_done.button_close_error
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <div
+            class="content"
           >
             <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+              class="icon-main"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
-              >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
+              <svg
+                class="styles__icon___23x3R"
+                height="44"
+                width="44"
               >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
+                <use
+                  xlink:href="#test-file-stub"
                 />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              export.modal_done.accessibility_title
-                            </div>
-                            <div
-                              className="modal-done-root"
-                            >
-                              <WithStyles(ForwardRef(IconButton))
-                                aria-label="export.button_close"
-                                className="modal-paper-close-button"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(IconButton)
-                                  aria-label="export.button_close"
-                                  className="modal-paper-close-button"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiIconButton-colorInherit",
-                                      "colorPrimary": "MuiIconButton-colorPrimary",
-                                      "colorSecondary": "MuiIconButton-colorSecondary",
-                                      "disabled": "Mui-disabled",
-                                      "edgeEnd": "MuiIconButton-edgeEnd",
-                                      "edgeStart": "MuiIconButton-edgeStart",
-                                      "label": "MuiIconButton-label",
-                                      "root": "MuiIconButton-root",
-                                      "sizeSmall": "MuiIconButton-sizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    aria-label="export.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      aria-label="export.button_close"
-                                      centerRipple={true}
-                                      className="MuiIconButton-root modal-paper-close-button"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      disabled={false}
-                                      focusRipple={true}
-                                      onClick={[MockFunction]}
-                                    >
-                                      <button
-                                        aria-label="export.button_close"
-                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiIconButton-label"
-                                        >
-                                          <Icon
-                                            icon="test-file-stub"
-                                            size={18}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              className="styles__icon___23x3R"
-                                              height={18}
-                                              style={Object {}}
-                                              width={18}
-                                            >
-                                              <svg
-                                                className="styles__icon___23x3R"
-                                                height={18}
-                                                style={Object {}}
-                                                width={18}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={true}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={true}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(IconButton)>
-                              </WithStyles(ForwardRef(IconButton))>
-                              <div
-                                className="content"
-                              >
-                                <div
-                                  className="icon-main"
-                                >
-                                  <Icon
-                                    icon="test-file-stub"
-                                    size={44}
-                                    spin={false}
-                                  >
-                                    <Component
-                                      className="styles__icon___23x3R"
-                                      height={44}
-                                      style={Object {}}
-                                      width={44}
-                                    >
-                                      <svg
-                                        className="styles__icon___23x3R"
-                                        height={44}
-                                        style={Object {}}
-                                        width={44}
-                                      >
-                                        <use
-                                          xlinkHref="#test-file-stub"
-                                        />
-                                      </svg>
-                                    </Component>
-                                  </Icon>
-                                </div>
-                                <div
-                                  className="text-20-bold error1"
-                                >
-                                  export.modal_done.error1
-                                </div>
-                                <div
-                                  className="text-16-bold"
-                                >
-                                  export.modal_done.error2
-                                </div>
-                                <WithStyles(ForwardRef(Button))
-                                  aria-label="export.modal_done.button_close"
-                                  className="btnPrimary"
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(Button)
-                                    aria-label="export.modal_done.button_close"
-                                    className="btnPrimary"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiButton-colorInherit",
-                                        "contained": "MuiButton-contained",
-                                        "containedPrimary": "MuiButton-containedPrimary",
-                                        "containedSecondary": "MuiButton-containedSecondary",
-                                        "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                        "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                        "disableElevation": "MuiButton-disableElevation",
-                                        "disabled": "Mui-disabled",
-                                        "endIcon": "MuiButton-endIcon",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "fullWidth": "MuiButton-fullWidth",
-                                        "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                        "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                        "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                        "label": "MuiButton-label",
-                                        "outlined": "MuiButton-outlined",
-                                        "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                        "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                        "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                        "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                        "root": "MuiButton-root",
-                                        "sizeLarge": "MuiButton-sizeLarge",
-                                        "sizeSmall": "MuiButton-sizeSmall",
-                                        "startIcon": "MuiButton-startIcon",
-                                        "text": "MuiButton-text",
-                                        "textPrimary": "MuiButton-textPrimary",
-                                        "textSecondary": "MuiButton-textSecondary",
-                                        "textSizeLarge": "MuiButton-textSizeLarge",
-                                        "textSizeSmall": "MuiButton-textSizeSmall",
-                                      }
-                                    }
-                                    onClick={[MockFunction]}
-                                  >
-                                    <WithStyles(ForwardRef(ButtonBase))
-                                      aria-label="export.modal_done.button_close"
-                                      className="MuiButton-root MuiButton-text btnPrimary"
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <ForwardRef(ButtonBase)
-                                        aria-label="export.modal_done.button_close"
-                                        className="MuiButton-root MuiButton-text btnPrimary"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <button
-                                          aria-label="export.modal_done.button_close"
-                                          className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
-                                        >
-                                          <span
-                                            className="MuiButton-label"
-                                          >
-                                            export.modal_done.button_close_error
-                                          </span>
-                                          <WithStyles(memo)
-                                            center={false}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={false}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(Button)>
-                                </WithStyles(ForwardRef(Button))>
-                              </div>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
+              </svg>
             </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</ExportDoneModal>
+            <div
+              class="text-20-bold error1"
+            >
+              export.modal_done.error1
+            </div>
+            <div
+              class="text-16-bold"
+            >
+              export.modal_done.error2
+            </div>
+            <button
+              aria-label="export.modal_done.button_close"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                export.modal_done.button_close_error
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
index 6ed914e558cc3f4a59792cad6cc277138dae81f4..523b4daa57c80aebfcdcdcc360170ee7023689a5 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -1,1025 +1,127 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExportLoadingModal component should be rendered correctly 1`] = `
-<ExportLoadingModal
-  handleCloseClick={[MockFunction]}
-  handleDone={[MockFunction]}
-  open={true}
-  selectedFluids={
-    Array [
-      0,
-      1,
-      2,
-    ]
-  }
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[Function]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[Function]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[Function]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
+          export.modal_loading.accessibility_title
+        </div>
+        <div
+          class="modal-loading-root"
+        >
+          <button
+            aria-label="export.button_close"
+            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                class="styles__icon___23x3R"
+                height="18"
+                width="18"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <div
+            class="content"
+          >
+            <div
+              class="icon-main"
+            >
+              <div
+                class="loader gold"
               >
                 <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+                  aria-busy="true"
+                  aria-label="common.accessibility.loading"
+                  class="bars"
+                  role="progressbar"
+                  title="common.accessibility.loading"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+                    class="bar"
                   />
                   <div
-                    data-test="sentinelStart"
-                    tabindex="0"
+                    class="bar"
                   />
                   <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        export.modal_loading.accessibility_title
-                      </div>
-                      <div
-                        class="modal-loading-root"
-                      >
-                        <button
-                          aria-label="export.button_close"
-                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="18"
-                              width="18"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                        <div
-                          class="content"
-                        >
-                          <div
-                            class="icon-main"
-                          >
-                            <div
-                              class="loader gold"
-                            >
-                              <div
-                                aria-busy="true"
-                                aria-label="common.accessibility.loading"
-                                class="bars"
-                                role="progressbar"
-                                title="common.accessibility.loading"
-                              >
-                                <div
-                                  class="bar"
-                                />
-                                <div
-                                  class="bar"
-                                />
-                                <div
-                                  class="bar"
-                                />
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            class="text-16-bold subtitle"
-                          >
-                            export.modal_loading.text1
-                          </div>
-                          <div>
-                            export.modal_loading.text2
-                          </div>
-                          <button
-                            aria-label="export.modal_loading.button_cancel"
-                            class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label"
-                            >
-                              export.modal_loading.button_cancel
-                            </span>
-                            <span
-                              class="MuiTouchRipple-root"
-                            />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
+                    class="bar"
                   />
                 </div>
-              </body>
-            }
-          >
+              </div>
+            </div>
             <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+              class="text-16-bold subtitle"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
-              >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
-              >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              export.modal_loading.accessibility_title
-                            </div>
-                            <div
-                              className="modal-loading-root"
-                            >
-                              <WithStyles(ForwardRef(IconButton))
-                                aria-label="export.button_close"
-                                className="modal-paper-close-button"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(IconButton)
-                                  aria-label="export.button_close"
-                                  className="modal-paper-close-button"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiIconButton-colorInherit",
-                                      "colorPrimary": "MuiIconButton-colorPrimary",
-                                      "colorSecondary": "MuiIconButton-colorSecondary",
-                                      "disabled": "Mui-disabled",
-                                      "edgeEnd": "MuiIconButton-edgeEnd",
-                                      "edgeStart": "MuiIconButton-edgeStart",
-                                      "label": "MuiIconButton-label",
-                                      "root": "MuiIconButton-root",
-                                      "sizeSmall": "MuiIconButton-sizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    aria-label="export.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      aria-label="export.button_close"
-                                      centerRipple={true}
-                                      className="MuiIconButton-root modal-paper-close-button"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      disabled={false}
-                                      focusRipple={true}
-                                      onClick={[MockFunction]}
-                                    >
-                                      <button
-                                        aria-label="export.button_close"
-                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiIconButton-label"
-                                        >
-                                          <Icon
-                                            icon="test-file-stub"
-                                            size={18}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              className="styles__icon___23x3R"
-                                              height={18}
-                                              style={Object {}}
-                                              width={18}
-                                            >
-                                              <svg
-                                                className="styles__icon___23x3R"
-                                                height={18}
-                                                style={Object {}}
-                                                width={18}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={true}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={true}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(IconButton)>
-                              </WithStyles(ForwardRef(IconButton))>
-                              <div
-                                className="content"
-                              >
-                                <div
-                                  className="icon-main"
-                                >
-                                  <Loader
-                                    color="gold"
-                                  >
-                                    <div
-                                      className="loader gold"
-                                    >
-                                      <div
-                                        aria-busy="true"
-                                        aria-label="common.accessibility.loading"
-                                        className="bars"
-                                        role="progressbar"
-                                        title="common.accessibility.loading"
-                                      >
-                                        <div
-                                          className="bar"
-                                        />
-                                        <div
-                                          className="bar"
-                                        />
-                                        <div
-                                          className="bar"
-                                        />
-                                      </div>
-                                    </div>
-                                  </Loader>
-                                </div>
-                                <div
-                                  className="text-16-bold subtitle"
-                                >
-                                  export.modal_loading.text1
-                                </div>
-                                <div>
-                                  export.modal_loading.text2
-                                </div>
-                                <WithStyles(ForwardRef(Button))
-                                  aria-label="export.modal_loading.button_cancel"
-                                  className="btnSecondary"
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(Button)
-                                    aria-label="export.modal_loading.button_cancel"
-                                    className="btnSecondary"
-                                    classes={
-                                      Object {
-                                        "colorInherit": "MuiButton-colorInherit",
-                                        "contained": "MuiButton-contained",
-                                        "containedPrimary": "MuiButton-containedPrimary",
-                                        "containedSecondary": "MuiButton-containedSecondary",
-                                        "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                        "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                        "disableElevation": "MuiButton-disableElevation",
-                                        "disabled": "Mui-disabled",
-                                        "endIcon": "MuiButton-endIcon",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "fullWidth": "MuiButton-fullWidth",
-                                        "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                        "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                        "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                        "label": "MuiButton-label",
-                                        "outlined": "MuiButton-outlined",
-                                        "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                        "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                        "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                        "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                        "root": "MuiButton-root",
-                                        "sizeLarge": "MuiButton-sizeLarge",
-                                        "sizeSmall": "MuiButton-sizeSmall",
-                                        "startIcon": "MuiButton-startIcon",
-                                        "text": "MuiButton-text",
-                                        "textPrimary": "MuiButton-textPrimary",
-                                        "textSecondary": "MuiButton-textSecondary",
-                                        "textSizeLarge": "MuiButton-textSizeLarge",
-                                        "textSizeSmall": "MuiButton-textSizeSmall",
-                                      }
-                                    }
-                                    onClick={[MockFunction]}
-                                  >
-                                    <WithStyles(ForwardRef(ButtonBase))
-                                      aria-label="export.modal_loading.button_cancel"
-                                      className="MuiButton-root MuiButton-text btnSecondary"
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <ForwardRef(ButtonBase)
-                                        aria-label="export.modal_loading.button_cancel"
-                                        className="MuiButton-root MuiButton-text btnSecondary"
-                                        classes={
-                                          Object {
-                                            "disabled": "Mui-disabled",
-                                            "focusVisible": "Mui-focusVisible",
-                                            "root": "MuiButtonBase-root",
-                                          }
-                                        }
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <button
-                                          aria-label="export.modal_loading.button_cancel"
-                                          className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[MockFunction]}
-                                          onDragLeave={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          onKeyUp={[Function]}
-                                          onMouseDown={[Function]}
-                                          onMouseLeave={[Function]}
-                                          onMouseUp={[Function]}
-                                          onTouchEnd={[Function]}
-                                          onTouchMove={[Function]}
-                                          onTouchStart={[Function]}
-                                          tabIndex={0}
-                                          type="button"
-                                        >
-                                          <span
-                                            className="MuiButton-label"
-                                          >
-                                            export.modal_loading.button_cancel
-                                          </span>
-                                          <WithStyles(memo)
-                                            center={false}
-                                          >
-                                            <ForwardRef(TouchRipple)
-                                              center={false}
-                                              classes={
-                                                Object {
-                                                  "child": "MuiTouchRipple-child",
-                                                  "childLeaving": "MuiTouchRipple-childLeaving",
-                                                  "childPulsate": "MuiTouchRipple-childPulsate",
-                                                  "ripple": "MuiTouchRipple-ripple",
-                                                  "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                  "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                  "root": "MuiTouchRipple-root",
-                                                }
-                                              }
-                                            >
-                                              <span
-                                                className="MuiTouchRipple-root"
-                                              >
-                                                <TransitionGroup
-                                                  childFactory={[Function]}
-                                                  component={null}
-                                                  exit={true}
-                                                />
-                                              </span>
-                                            </ForwardRef(TouchRipple)>
-                                          </WithStyles(memo)>
-                                        </button>
-                                      </ForwardRef(ButtonBase)>
-                                    </WithStyles(ForwardRef(ButtonBase))>
-                                  </ForwardRef(Button)>
-                                </WithStyles(ForwardRef(Button))>
-                              </div>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
+              export.modal_loading.text1
+            </div>
+            <div>
+              export.modal_loading.text2
             </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</ExportLoadingModal>
+            <button
+              aria-label="export.modal_loading.button_cancel"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                export.modal_loading.button_cancel
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
index 2e7737e981edb15bad7fb38e68a1fccad9476ca5..dcd482806bf0e6bf6615d974fcdbbef16d16b656 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -1,1158 +1,136 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`exportStartModal component should be rendered correctly 1`] = `
-<ExportStartModal
-  handleCloseClick={[MockFunction]}
-  handleDownloadClick={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility_title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility_title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility_title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
+          export.modal_start.accessibility_title
+        </div>
+        <div
+          class="modal-start-root"
+        >
+          <button
+            aria-label="export.button_close"
+            class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                class="styles__icon___23x3R"
+                height="18"
+                width="18"
               >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility_title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        export.modal_start.accessibility_title
-                      </div>
-                      <div
-                        class="modal-start-root"
-                      >
-                        <button
-                          aria-label="export.button_close"
-                          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="18"
-                              width="18"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                        <div
-                          class="content"
-                        >
-                          <div
-                            class="icon-main"
-                          >
-                            <svg
-                              class="styles__icon___23x3R"
-                              height="48"
-                              width="48"
-                            >
-                              <use
-                                xlink:href="#test-file-stub"
-                              />
-                            </svg>
-                          </div>
-                          <div
-                            class="text-16-bold subtitle"
-                          >
-                            export.modal_start.text1
-                          </div>
-                          <div>
-                            export.modal_start.text2
-                            <br />
-                            export.modal_start.text3
-                          </div>
-                          <div
-                            class="buttons"
-                          >
-                            <button
-                              aria-label="export.modal_start.button_cancel"
-                              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                              tabindex="0"
-                              type="button"
-                            >
-                              <span
-                                class="MuiButton-label"
-                              >
-                                export.modal_start.button_cancel
-                              </span>
-                              <span
-                                class="MuiTouchRipple-root"
-                              />
-                            </button>
-                            <button
-                              aria-label="export.button_download"
-                              class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                              tabindex="0"
-                              type="button"
-                            >
-                              <span
-                                class="MuiButton-label"
-                              >
-                                export.button_download
-                              </span>
-                              <span
-                                class="MuiTouchRipple-root"
-                              />
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <div
+            class="content"
           >
             <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+              class="icon-main"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
+              <svg
+                class="styles__icon___23x3R"
+                height="48"
+                width="48"
               >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </div>
+            <div
+              class="text-16-bold subtitle"
+            >
+              export.modal_start.text1
+            </div>
+            <div>
+              export.modal_start.text2
+              <br />
+              export.modal_start.text3
+            </div>
+            <div
+              class="buttons"
+            >
+              <button
+                aria-label="export.modal_start.button_cancel"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+                tabindex="0"
+                type="button"
               >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
+                <span
+                  class="MuiButton-label"
+                >
+                  export.modal_start.button_cancel
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
                 />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
+              </button>
+              <button
+                aria-label="export.button_download"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label"
                 >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility_title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility_title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility_title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              export.modal_start.accessibility_title
-                            </div>
-                            <div
-                              className="modal-start-root"
-                            >
-                              <WithStyles(ForwardRef(IconButton))
-                                aria-label="export.button_close"
-                                className="modal-paper-close-button"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(IconButton)
-                                  aria-label="export.button_close"
-                                  className="modal-paper-close-button"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiIconButton-colorInherit",
-                                      "colorPrimary": "MuiIconButton-colorPrimary",
-                                      "colorSecondary": "MuiIconButton-colorSecondary",
-                                      "disabled": "Mui-disabled",
-                                      "edgeEnd": "MuiIconButton-edgeEnd",
-                                      "edgeStart": "MuiIconButton-edgeStart",
-                                      "label": "MuiIconButton-label",
-                                      "root": "MuiIconButton-root",
-                                      "sizeSmall": "MuiIconButton-sizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    aria-label="export.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      aria-label="export.button_close"
-                                      centerRipple={true}
-                                      className="MuiIconButton-root modal-paper-close-button"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      disabled={false}
-                                      focusRipple={true}
-                                      onClick={[MockFunction]}
-                                    >
-                                      <button
-                                        aria-label="export.button_close"
-                                        className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiIconButton-label"
-                                        >
-                                          <Icon
-                                            icon="test-file-stub"
-                                            size={18}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              className="styles__icon___23x3R"
-                                              height={18}
-                                              style={Object {}}
-                                              width={18}
-                                            >
-                                              <svg
-                                                className="styles__icon___23x3R"
-                                                height={18}
-                                                style={Object {}}
-                                                width={18}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={true}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={true}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(IconButton)>
-                              </WithStyles(ForwardRef(IconButton))>
-                              <div
-                                className="content"
-                              >
-                                <div
-                                  className="icon-main"
-                                >
-                                  <Icon
-                                    icon="test-file-stub"
-                                    size={48}
-                                    spin={false}
-                                  >
-                                    <Component
-                                      className="styles__icon___23x3R"
-                                      height={48}
-                                      style={Object {}}
-                                      width={48}
-                                    >
-                                      <svg
-                                        className="styles__icon___23x3R"
-                                        height={48}
-                                        style={Object {}}
-                                        width={48}
-                                      >
-                                        <use
-                                          xlinkHref="#test-file-stub"
-                                        />
-                                      </svg>
-                                    </Component>
-                                  </Icon>
-                                </div>
-                                <div
-                                  className="text-16-bold subtitle"
-                                >
-                                  export.modal_start.text1
-                                </div>
-                                <div>
-                                  export.modal_start.text2
-                                  <br />
-                                  export.modal_start.text3
-                                </div>
-                                <div
-                                  className="buttons"
-                                >
-                                  <WithStyles(ForwardRef(Button))
-                                    aria-label="export.modal_start.button_cancel"
-                                    className="btnSecondary"
-                                    onClick={[MockFunction]}
-                                  >
-                                    <ForwardRef(Button)
-                                      aria-label="export.modal_start.button_cancel"
-                                      className="btnSecondary"
-                                      classes={
-                                        Object {
-                                          "colorInherit": "MuiButton-colorInherit",
-                                          "contained": "MuiButton-contained",
-                                          "containedPrimary": "MuiButton-containedPrimary",
-                                          "containedSecondary": "MuiButton-containedSecondary",
-                                          "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                          "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                          "disableElevation": "MuiButton-disableElevation",
-                                          "disabled": "Mui-disabled",
-                                          "endIcon": "MuiButton-endIcon",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "fullWidth": "MuiButton-fullWidth",
-                                          "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                          "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                          "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                          "label": "MuiButton-label",
-                                          "outlined": "MuiButton-outlined",
-                                          "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                          "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                          "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                          "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                          "root": "MuiButton-root",
-                                          "sizeLarge": "MuiButton-sizeLarge",
-                                          "sizeSmall": "MuiButton-sizeSmall",
-                                          "startIcon": "MuiButton-startIcon",
-                                          "text": "MuiButton-text",
-                                          "textPrimary": "MuiButton-textPrimary",
-                                          "textSecondary": "MuiButton-textSecondary",
-                                          "textSizeLarge": "MuiButton-textSizeLarge",
-                                          "textSizeSmall": "MuiButton-textSizeSmall",
-                                        }
-                                      }
-                                      onClick={[MockFunction]}
-                                    >
-                                      <WithStyles(ForwardRef(ButtonBase))
-                                        aria-label="export.modal_start.button_cancel"
-                                        className="MuiButton-root MuiButton-text btnSecondary"
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <ForwardRef(ButtonBase)
-                                          aria-label="export.modal_start.button_cancel"
-                                          className="MuiButton-root MuiButton-text btnSecondary"
-                                          classes={
-                                            Object {
-                                              "disabled": "Mui-disabled",
-                                              "focusVisible": "Mui-focusVisible",
-                                              "root": "MuiButtonBase-root",
-                                            }
-                                          }
-                                          component="button"
-                                          disabled={false}
-                                          focusRipple={true}
-                                          focusVisibleClassName="Mui-focusVisible"
-                                          onClick={[MockFunction]}
-                                          type="button"
-                                        >
-                                          <button
-                                            aria-label="export.modal_start.button_cancel"
-                                            className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-                                            disabled={false}
-                                            onBlur={[Function]}
-                                            onClick={[MockFunction]}
-                                            onDragLeave={[Function]}
-                                            onFocus={[Function]}
-                                            onKeyDown={[Function]}
-                                            onKeyUp={[Function]}
-                                            onMouseDown={[Function]}
-                                            onMouseLeave={[Function]}
-                                            onMouseUp={[Function]}
-                                            onTouchEnd={[Function]}
-                                            onTouchMove={[Function]}
-                                            onTouchStart={[Function]}
-                                            tabIndex={0}
-                                            type="button"
-                                          >
-                                            <span
-                                              className="MuiButton-label"
-                                            >
-                                              export.modal_start.button_cancel
-                                            </span>
-                                            <WithStyles(memo)
-                                              center={false}
-                                            >
-                                              <ForwardRef(TouchRipple)
-                                                center={false}
-                                                classes={
-                                                  Object {
-                                                    "child": "MuiTouchRipple-child",
-                                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                                    "ripple": "MuiTouchRipple-ripple",
-                                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                    "root": "MuiTouchRipple-root",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="MuiTouchRipple-root"
-                                                >
-                                                  <TransitionGroup
-                                                    childFactory={[Function]}
-                                                    component={null}
-                                                    exit={true}
-                                                  />
-                                                </span>
-                                              </ForwardRef(TouchRipple)>
-                                            </WithStyles(memo)>
-                                          </button>
-                                        </ForwardRef(ButtonBase)>
-                                      </WithStyles(ForwardRef(ButtonBase))>
-                                    </ForwardRef(Button)>
-                                  </WithStyles(ForwardRef(Button))>
-                                  <WithStyles(ForwardRef(Button))
-                                    aria-label="export.button_download"
-                                    className="btnPrimary"
-                                    onClick={[MockFunction]}
-                                  >
-                                    <ForwardRef(Button)
-                                      aria-label="export.button_download"
-                                      className="btnPrimary"
-                                      classes={
-                                        Object {
-                                          "colorInherit": "MuiButton-colorInherit",
-                                          "contained": "MuiButton-contained",
-                                          "containedPrimary": "MuiButton-containedPrimary",
-                                          "containedSecondary": "MuiButton-containedSecondary",
-                                          "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                          "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                          "disableElevation": "MuiButton-disableElevation",
-                                          "disabled": "Mui-disabled",
-                                          "endIcon": "MuiButton-endIcon",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "fullWidth": "MuiButton-fullWidth",
-                                          "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                          "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                          "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                          "label": "MuiButton-label",
-                                          "outlined": "MuiButton-outlined",
-                                          "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                          "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                          "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                          "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                          "root": "MuiButton-root",
-                                          "sizeLarge": "MuiButton-sizeLarge",
-                                          "sizeSmall": "MuiButton-sizeSmall",
-                                          "startIcon": "MuiButton-startIcon",
-                                          "text": "MuiButton-text",
-                                          "textPrimary": "MuiButton-textPrimary",
-                                          "textSecondary": "MuiButton-textSecondary",
-                                          "textSizeLarge": "MuiButton-textSizeLarge",
-                                          "textSizeSmall": "MuiButton-textSizeSmall",
-                                        }
-                                      }
-                                      onClick={[MockFunction]}
-                                    >
-                                      <WithStyles(ForwardRef(ButtonBase))
-                                        aria-label="export.button_download"
-                                        className="MuiButton-root MuiButton-text btnPrimary"
-                                        component="button"
-                                        disabled={false}
-                                        focusRipple={true}
-                                        focusVisibleClassName="Mui-focusVisible"
-                                        onClick={[MockFunction]}
-                                        type="button"
-                                      >
-                                        <ForwardRef(ButtonBase)
-                                          aria-label="export.button_download"
-                                          className="MuiButton-root MuiButton-text btnPrimary"
-                                          classes={
-                                            Object {
-                                              "disabled": "Mui-disabled",
-                                              "focusVisible": "Mui-focusVisible",
-                                              "root": "MuiButtonBase-root",
-                                            }
-                                          }
-                                          component="button"
-                                          disabled={false}
-                                          focusRipple={true}
-                                          focusVisibleClassName="Mui-focusVisible"
-                                          onClick={[MockFunction]}
-                                          type="button"
-                                        >
-                                          <button
-                                            aria-label="export.button_download"
-                                            className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                            disabled={false}
-                                            onBlur={[Function]}
-                                            onClick={[MockFunction]}
-                                            onDragLeave={[Function]}
-                                            onFocus={[Function]}
-                                            onKeyDown={[Function]}
-                                            onKeyUp={[Function]}
-                                            onMouseDown={[Function]}
-                                            onMouseLeave={[Function]}
-                                            onMouseUp={[Function]}
-                                            onTouchEnd={[Function]}
-                                            onTouchMove={[Function]}
-                                            onTouchStart={[Function]}
-                                            tabIndex={0}
-                                            type="button"
-                                          >
-                                            <span
-                                              className="MuiButton-label"
-                                            >
-                                              export.button_download
-                                            </span>
-                                            <WithStyles(memo)
-                                              center={false}
-                                            >
-                                              <ForwardRef(TouchRipple)
-                                                center={false}
-                                                classes={
-                                                  Object {
-                                                    "child": "MuiTouchRipple-child",
-                                                    "childLeaving": "MuiTouchRipple-childLeaving",
-                                                    "childPulsate": "MuiTouchRipple-childPulsate",
-                                                    "ripple": "MuiTouchRipple-ripple",
-                                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                    "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                    "root": "MuiTouchRipple-root",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="MuiTouchRipple-root"
-                                                >
-                                                  <TransitionGroup
-                                                    childFactory={[Function]}
-                                                    component={null}
-                                                    exit={true}
-                                                  />
-                                                </span>
-                                              </ForwardRef(TouchRipple)>
-                                            </WithStyles(memo)>
-                                          </button>
-                                        </ForwardRef(ButtonBase)>
-                                      </WithStyles(ForwardRef(ButtonBase))>
-                                    </ForwardRef(Button)>
-                                  </WithStyles(ForwardRef(Button))>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
+                  export.button_download
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
                 />
-              </Unstable_TrapFocus>
+              </button>
             </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</ExportStartModal>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
index 1120b2a2ed4b9fc0ef53f30e22f3c7c36c0a8d62..900cf07ee8850b8c838a864800023642fbe4d5dc 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
@@ -1,22 +1,22 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import ExportDoneModal from './exportDoneModal'
 
 describe('exportDoneModal component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <ExportDoneModal open={true} error={false} handleCloseClick={jest.fn()} />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 
   it('should display error message', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <ExportDoneModal open={true} error={true} handleCloseClick={jest.fn()} />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 
   it('should close modal', () => {
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
index f5496cf073cea0ecdaca3c9b18706f840ac6d7b3..7825cae498e3a36b09ce1e16e61abcd53e83864c 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
@@ -1,13 +1,13 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { allFluids } from 'utils/utils'
 import ExportLoadingModal from './exportLoadingModal'
 
 describe('ExportLoadingModal component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <ExportLoadingModal
         open={true}
         handleCloseClick={jest.fn()}
@@ -15,7 +15,7 @@ describe('ExportLoadingModal component', () => {
         selectedFluids={allFluids}
       />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 
   it('should cancel download', () => {
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx b/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
index e34dfe5a8d50f094eecb0bae315acf23ed7ba5da..90c9fd18b4f2ca768ea42b80281254ec120e53d2 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
@@ -1,19 +1,19 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import ExportStartModal from './exportStartModal'
 
 describe('exportStartModal component', () => {
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <ExportStartModal
         open={true}
         handleCloseClick={jest.fn()}
         handleDownloadClick={jest.fn()}
       />
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 
   it('should close modal', () => {
diff --git a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
index eb5007194ecc32f2b4130a22ede3bce138726a93..7bfb4b7882eb8397b07bade0bbd7b63505a5b3ec 100644
--- a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
+++ b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
@@ -1,1558 +1,103 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`exportOptions component should be rendered correctly 1`] = `
-<ExportData>
+<div>
   <div
-    className="export-option-root"
+    class="export-option-root"
   >
     <div
-      className="export-option-content"
+      class="export-option-content"
     >
-      <WithStyles(ForwardRef(Accordion))
-        classes={
-          Object {
-            "root": "expansion-panel-root",
-          }
-        }
-        expanded={false}
-        onChange={[Function]}
+      <div
+        class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
       >
-        <ForwardRef(Accordion)
-          classes={
-            Object {
-              "disabled": "Mui-disabled",
-              "expanded": "Mui-expanded",
-              "root": "MuiAccordion-root expansion-panel-root",
-              "rounded": "MuiAccordion-rounded",
-            }
-          }
-          expanded={false}
-          onChange={[Function]}
+        <div
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-label="profile_type.accessibility.button_toggle_export"
+          class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+          role="button"
+          tabindex="0"
         >
-          <WithStyles(ForwardRef(Paper))
-            className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
-            square={false}
+          <div
+            class="MuiAccordionSummary-content expansion-panel-content"
           >
-            <ForwardRef(Paper)
-              className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
-              classes={
-                Object {
-                  "elevation0": "MuiPaper-elevation0",
-                  "elevation1": "MuiPaper-elevation1",
-                  "elevation10": "MuiPaper-elevation10",
-                  "elevation11": "MuiPaper-elevation11",
-                  "elevation12": "MuiPaper-elevation12",
-                  "elevation13": "MuiPaper-elevation13",
-                  "elevation14": "MuiPaper-elevation14",
-                  "elevation15": "MuiPaper-elevation15",
-                  "elevation16": "MuiPaper-elevation16",
-                  "elevation17": "MuiPaper-elevation17",
-                  "elevation18": "MuiPaper-elevation18",
-                  "elevation19": "MuiPaper-elevation19",
-                  "elevation2": "MuiPaper-elevation2",
-                  "elevation20": "MuiPaper-elevation20",
-                  "elevation21": "MuiPaper-elevation21",
-                  "elevation22": "MuiPaper-elevation22",
-                  "elevation23": "MuiPaper-elevation23",
-                  "elevation24": "MuiPaper-elevation24",
-                  "elevation3": "MuiPaper-elevation3",
-                  "elevation4": "MuiPaper-elevation4",
-                  "elevation5": "MuiPaper-elevation5",
-                  "elevation6": "MuiPaper-elevation6",
-                  "elevation7": "MuiPaper-elevation7",
-                  "elevation8": "MuiPaper-elevation8",
-                  "elevation9": "MuiPaper-elevation9",
-                  "outlined": "MuiPaper-outlined",
-                  "root": "MuiPaper-root",
-                  "rounded": "MuiPaper-rounded",
-                }
-              }
-              square={false}
+            <svg
+              class="export-icon styles__icon___23x3R"
+              height="42"
+              width="42"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <div
+              class="text-16-normal accordion-title"
+            >
+              export.title_export
+            </div>
+          </div>
+          <div
+            aria-disabled="false"
+            aria-hidden="true"
+            class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                class="accordion-icon styles__icon___23x3R"
+                height="16"
+                width="16"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </div>
+        </div>
+        <div
+          class="MuiCollapse-root MuiCollapse-hidden"
+          style="min-height: 0px;"
+        >
+          <div
+            class="MuiCollapse-wrapper"
+          >
+            <div
+              class="MuiCollapse-wrapperInner"
             >
               <div
-                className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+                role="region"
               >
-                <WithStyles(ForwardRef(AccordionSummary))
-                  aria-label="profile_type.accessibility.button_toggle_export"
-                  classes={
-                    Object {
-                      "content": "expansion-panel-content",
-                      "root": "expansion-panel-summary",
-                    }
-                  }
-                  expandIcon={
-                    <Icon
-                      className="accordion-icon"
-                      icon="test-file-stub"
-                      size={16}
-                      spin={false}
-                    />
-                  }
-                  key=".0"
+                <div
+                  class="MuiAccordionDetails-root expansion-panel-details"
                 >
-                  <ForwardRef(AccordionSummary)
-                    aria-label="profile_type.accessibility.button_toggle_export"
-                    classes={
-                      Object {
-                        "content": "MuiAccordionSummary-content expansion-panel-content",
-                        "disabled": "Mui-disabled",
-                        "expandIcon": "MuiAccordionSummary-expandIcon",
-                        "expanded": "Mui-expanded",
-                        "focusVisible": "Mui-focusVisible",
-                        "focused": "Mui-focused",
-                        "root": "MuiAccordionSummary-root expansion-panel-summary",
-                      }
-                    }
-                    expandIcon={
-                      <Icon
-                        className="accordion-icon"
-                        icon="test-file-stub"
-                        size={16}
-                        spin={false}
-                      />
-                    }
+                  <div
+                    class="text-15-normal grey"
                   >
-                    <WithStyles(ForwardRef(ButtonBase))
-                      aria-expanded={false}
-                      aria-label="profile_type.accessibility.button_toggle_export"
-                      className="MuiAccordionSummary-root expansion-panel-summary"
-                      component="div"
-                      disableRipple={true}
-                      disabled={false}
-                      focusRipple={false}
-                      focusVisibleClassName="Mui-focusVisible Mui-focused"
-                      onClick={[Function]}
-                    >
-                      <ForwardRef(ButtonBase)
-                        aria-expanded={false}
-                        aria-label="profile_type.accessibility.button_toggle_export"
-                        className="MuiAccordionSummary-root expansion-panel-summary"
-                        classes={
-                          Object {
-                            "disabled": "Mui-disabled",
-                            "focusVisible": "Mui-focusVisible",
-                            "root": "MuiButtonBase-root",
-                          }
-                        }
-                        component="div"
-                        disableRipple={true}
-                        disabled={false}
-                        focusRipple={false}
-                        focusVisibleClassName="Mui-focusVisible Mui-focused"
-                        onClick={[Function]}
-                      >
-                        <div
-                          aria-disabled={false}
-                          aria-expanded={false}
-                          aria-label="profile_type.accessibility.button_toggle_export"
-                          className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onDragLeave={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                          onTouchEnd={[Function]}
-                          onTouchMove={[Function]}
-                          onTouchStart={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <div
-                            className="MuiAccordionSummary-content expansion-panel-content"
-                          >
-                            <Icon
-                              className="export-icon"
-                              icon="test-file-stub"
-                              size={42}
-                              spin={false}
-                            >
-                              <Component
-                                className="export-icon styles__icon___23x3R"
-                                height={42}
-                                style={Object {}}
-                                width={42}
-                              >
-                                <svg
-                                  className="export-icon styles__icon___23x3R"
-                                  height={42}
-                                  style={Object {}}
-                                  width={42}
-                                >
-                                  <use
-                                    xlinkHref="#test-file-stub"
-                                  />
-                                </svg>
-                              </Component>
-                            </Icon>
-                            <div
-                              className="text-16-normal accordion-title"
-                            >
-                              export.title_export
-                            </div>
-                          </div>
-                          <WithStyles(ForwardRef(IconButton))
-                            aria-hidden={true}
-                            className="MuiAccordionSummary-expandIcon"
-                            component="div"
-                            edge="end"
-                            role={null}
-                            tabIndex={null}
-                          >
-                            <ForwardRef(IconButton)
-                              aria-hidden={true}
-                              className="MuiAccordionSummary-expandIcon"
-                              classes={
-                                Object {
-                                  "colorInherit": "MuiIconButton-colorInherit",
-                                  "colorPrimary": "MuiIconButton-colorPrimary",
-                                  "colorSecondary": "MuiIconButton-colorSecondary",
-                                  "disabled": "Mui-disabled",
-                                  "edgeEnd": "MuiIconButton-edgeEnd",
-                                  "edgeStart": "MuiIconButton-edgeStart",
-                                  "label": "MuiIconButton-label",
-                                  "root": "MuiIconButton-root",
-                                  "sizeSmall": "MuiIconButton-sizeSmall",
-                                }
-                              }
-                              component="div"
-                              edge="end"
-                              role={null}
-                              tabIndex={null}
-                            >
-                              <WithStyles(ForwardRef(ButtonBase))
-                                aria-hidden={true}
-                                centerRipple={true}
-                                className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                component="div"
-                                disabled={false}
-                                focusRipple={true}
-                                role={null}
-                                tabIndex={null}
-                              >
-                                <ForwardRef(ButtonBase)
-                                  aria-hidden={true}
-                                  centerRipple={true}
-                                  className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                  classes={
-                                    Object {
-                                      "disabled": "Mui-disabled",
-                                      "focusVisible": "Mui-focusVisible",
-                                      "root": "MuiButtonBase-root",
-                                    }
-                                  }
-                                  component="div"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  role={null}
-                                  tabIndex={null}
-                                >
-                                  <div
-                                    aria-disabled={false}
-                                    aria-hidden={true}
-                                    className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                    onBlur={[Function]}
-                                    onDragLeave={[Function]}
-                                    onFocus={[Function]}
-                                    onKeyDown={[Function]}
-                                    onKeyUp={[Function]}
-                                    onMouseDown={[Function]}
-                                    onMouseLeave={[Function]}
-                                    onMouseUp={[Function]}
-                                    onTouchEnd={[Function]}
-                                    onTouchMove={[Function]}
-                                    onTouchStart={[Function]}
-                                    role={null}
-                                    tabIndex={null}
-                                  >
-                                    <span
-                                      className="MuiIconButton-label"
-                                    >
-                                      <Icon
-                                        className="accordion-icon"
-                                        icon="test-file-stub"
-                                        size={16}
-                                        spin={false}
-                                      >
-                                        <Component
-                                          className="accordion-icon styles__icon___23x3R"
-                                          height={16}
-                                          style={Object {}}
-                                          width={16}
-                                        >
-                                          <svg
-                                            className="accordion-icon styles__icon___23x3R"
-                                            height={16}
-                                            style={Object {}}
-                                            width={16}
-                                          >
-                                            <use
-                                              xlinkHref="#test-file-stub"
-                                            />
-                                          </svg>
-                                        </Component>
-                                      </Icon>
-                                    </span>
-                                    <WithStyles(memo)
-                                      center={true}
-                                    >
-                                      <ForwardRef(TouchRipple)
-                                        center={true}
-                                        classes={
-                                          Object {
-                                            "child": "MuiTouchRipple-child",
-                                            "childLeaving": "MuiTouchRipple-childLeaving",
-                                            "childPulsate": "MuiTouchRipple-childPulsate",
-                                            "ripple": "MuiTouchRipple-ripple",
-                                            "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                            "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                            "root": "MuiTouchRipple-root",
-                                          }
-                                        }
-                                      >
-                                        <span
-                                          className="MuiTouchRipple-root"
-                                        >
-                                          <TransitionGroup
-                                            childFactory={[Function]}
-                                            component={null}
-                                            exit={true}
-                                          />
-                                        </span>
-                                      </ForwardRef(TouchRipple)>
-                                    </WithStyles(memo)>
-                                  </div>
-                                </ForwardRef(ButtonBase)>
-                              </WithStyles(ForwardRef(ButtonBase))>
-                            </ForwardRef(IconButton)>
-                          </WithStyles(ForwardRef(IconButton))>
-                        </div>
-                      </ForwardRef(ButtonBase)>
-                    </WithStyles(ForwardRef(ButtonBase))>
-                  </ForwardRef(AccordionSummary)>
-                </WithStyles(ForwardRef(AccordionSummary))>
-                <WithStyles(ForwardRef(Collapse))
-                  in={false}
-                  timeout="auto"
-                >
-                  <ForwardRef(Collapse)
-                    classes={
-                      Object {
-                        "entered": "MuiCollapse-entered",
-                        "hidden": "MuiCollapse-hidden",
-                        "root": "MuiCollapse-root",
-                        "wrapper": "MuiCollapse-wrapper",
-                        "wrapperInner": "MuiCollapse-wrapperInner",
-                      }
-                    }
-                    in={false}
-                    timeout="auto"
+                    export.text1
+                  </div>
+                  <div
+                    class="text-16-bold"
+                  >
+                    export.fluid_select
+                  </div>
+                  <div
+                    class="text-15-normal grey"
                   >
-                    <Transition
-                      addEndListener={[Function]}
-                      appear={false}
-                      enter={true}
-                      exit={true}
-                      in={false}
-                      mountOnEnter={false}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={null}
-                      unmountOnExit={false}
-                    >
-                      <div
-                        className="MuiCollapse-root MuiCollapse-hidden"
-                        style={
-                          Object {
-                            "minHeight": "0px",
-                          }
-                        }
-                      >
-                        <div
-                          className="MuiCollapse-wrapper"
-                        >
-                          <div
-                            className="MuiCollapse-wrapperInner"
-                          >
-                            <div
-                              role="region"
-                            >
-                              <WithStyles(ForwardRef(AccordionDetails))
-                                classes={
-                                  Object {
-                                    "root": "expansion-panel-details",
-                                  }
-                                }
-                                key=".1"
-                              >
-                                <ForwardRef(AccordionDetails)
-                                  classes={
-                                    Object {
-                                      "root": "MuiAccordionDetails-root expansion-panel-details",
-                                    }
-                                  }
-                                >
-                                  <div
-                                    className="MuiAccordionDetails-root expansion-panel-details"
-                                  >
-                                    <div
-                                      className="text-15-normal grey"
-                                    >
-                                      export.text1
-                                    </div>
-                                    <div
-                                      className="text-16-bold"
-                                    >
-                                      export.fluid_select
-                                    </div>
-                                    <div
-                                      className="text-15-normal grey"
-                                    >
-                                      export.no_data
-                                    </div>
-                                  </div>
-                                </ForwardRef(AccordionDetails)>
-                              </WithStyles(ForwardRef(AccordionDetails))>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </Transition>
-                  </ForwardRef(Collapse)>
-                </WithStyles(ForwardRef(Collapse))>
+                    export.no_data
+                  </div>
+                </div>
               </div>
-            </ForwardRef(Paper)>
-          </WithStyles(ForwardRef(Paper))>
-        </ForwardRef(Accordion)>
-      </WithStyles(ForwardRef(Accordion))>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-  <ExportStartModal
-    handleCloseClick={[Function]}
-    handleDownloadClick={[Function]}
-    open={false}
-  >
-    <WithStyles(ForwardRef(Dialog))
-      aria-labelledby="accessibility_title"
-      classes={
-        Object {
-          "paper": "modal-paper",
-          "root": "modal-root",
-        }
-      }
-      onClose={[Function]}
-      open={false}
-    >
-      <ForwardRef(Dialog)
-        aria-labelledby="accessibility_title"
-        classes={
-          Object {
-            "container": "MuiDialog-container",
-            "paper": "MuiDialog-paper modal-paper",
-            "paperFullScreen": "MuiDialog-paperFullScreen",
-            "paperFullWidth": "MuiDialog-paperFullWidth",
-            "paperScrollBody": "MuiDialog-paperScrollBody",
-            "paperScrollPaper": "MuiDialog-paperScrollPaper",
-            "paperWidthFalse": "MuiDialog-paperWidthFalse",
-            "paperWidthLg": "MuiDialog-paperWidthLg",
-            "paperWidthMd": "MuiDialog-paperWidthMd",
-            "paperWidthSm": "MuiDialog-paperWidthSm",
-            "paperWidthXl": "MuiDialog-paperWidthXl",
-            "paperWidthXs": "MuiDialog-paperWidthXs",
-            "root": "MuiDialog-root modal-root",
-            "scrollBody": "MuiDialog-scrollBody",
-            "scrollPaper": "MuiDialog-scrollPaper",
-          }
-        }
-        onClose={[Function]}
-        open={false}
-      >
-        <ForwardRef(Modal)
-          BackdropComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "Naked": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "propTypes": Object {
-                  "children": [Function],
-                  "className": [Function],
-                  "classes": [Function],
-                  "invisible": [Function],
-                  "open": [Function],
-                  "transitionDuration": [Function],
-                },
-                "render": [Function],
-              },
-              "displayName": "WithStyles(ForwardRef(Backdrop))",
-              "options": Object {
-                "defaultTheme": Object {
-                  "breakpoints": Object {
-                    "between": [Function],
-                    "down": [Function],
-                    "keys": Array [
-                      "xs",
-                      "sm",
-                      "md",
-                      "lg",
-                      "xl",
-                    ],
-                    "only": [Function],
-                    "up": [Function],
-                    "values": Object {
-                      "lg": 1280,
-                      "md": 960,
-                      "sm": 600,
-                      "xl": 1920,
-                      "xs": 0,
-                    },
-                    "width": [Function],
-                  },
-                  "direction": "ltr",
-                  "mixins": Object {
-                    "gutters": [Function],
-                    "toolbar": Object {
-                      "@media (min-width:0px) and (orientation: landscape)": Object {
-                        "minHeight": 48,
-                      },
-                      "@media (min-width:600px)": Object {
-                        "minHeight": 64,
-                      },
-                      "minHeight": 56,
-                    },
-                  },
-                  "overrides": Object {},
-                  "palette": Object {
-                    "action": Object {
-                      "activatedOpacity": 0.12,
-                      "active": "rgba(0, 0, 0, 0.54)",
-                      "disabled": "rgba(0, 0, 0, 0.26)",
-                      "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                      "disabledOpacity": 0.38,
-                      "focus": "rgba(0, 0, 0, 0.12)",
-                      "focusOpacity": 0.12,
-                      "hover": "rgba(0, 0, 0, 0.04)",
-                      "hoverOpacity": 0.04,
-                      "selected": "rgba(0, 0, 0, 0.08)",
-                      "selectedOpacity": 0.08,
-                    },
-                    "augmentColor": [Function],
-                    "background": Object {
-                      "default": "#fafafa",
-                      "paper": "#fff",
-                    },
-                    "common": Object {
-                      "black": "#000",
-                      "white": "#fff",
-                    },
-                    "contrastThreshold": 3,
-                    "divider": "rgba(0, 0, 0, 0.12)",
-                    "error": Object {
-                      "contrastText": "#fff",
-                      "dark": "#d32f2f",
-                      "light": "#e57373",
-                      "main": "#f44336",
-                    },
-                    "getContrastText": [Function],
-                    "grey": Object {
-                      "100": "#f5f5f5",
-                      "200": "#eeeeee",
-                      "300": "#e0e0e0",
-                      "400": "#bdbdbd",
-                      "50": "#fafafa",
-                      "500": "#9e9e9e",
-                      "600": "#757575",
-                      "700": "#616161",
-                      "800": "#424242",
-                      "900": "#212121",
-                      "A100": "#d5d5d5",
-                      "A200": "#aaaaaa",
-                      "A400": "#303030",
-                      "A700": "#616161",
-                    },
-                    "info": Object {
-                      "contrastText": "#fff",
-                      "dark": "#1976d2",
-                      "light": "#64b5f6",
-                      "main": "#2196f3",
-                    },
-                    "primary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#303f9f",
-                      "light": "#7986cb",
-                      "main": "#3f51b5",
-                    },
-                    "secondary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#c51162",
-                      "light": "#ff4081",
-                      "main": "#f50057",
-                    },
-                    "success": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#388e3c",
-                      "light": "#81c784",
-                      "main": "#4caf50",
-                    },
-                    "text": Object {
-                      "disabled": "rgba(0, 0, 0, 0.38)",
-                      "hint": "rgba(0, 0, 0, 0.38)",
-                      "primary": "rgba(0, 0, 0, 0.87)",
-                      "secondary": "rgba(0, 0, 0, 0.54)",
-                    },
-                    "tonalOffset": 0.2,
-                    "type": "light",
-                    "warning": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#f57c00",
-                      "light": "#ffb74d",
-                      "main": "#ff9800",
-                    },
-                  },
-                  "props": Object {},
-                  "shadows": Array [
-                    "none",
-                    "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                    "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                    "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                    "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                    "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                    "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                    "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                    "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                    "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                    "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                    "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                    "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                  ],
-                  "shape": Object {
-                    "borderRadius": 4,
-                  },
-                  "spacing": [Function],
-                  "transitions": Object {
-                    "create": [Function],
-                    "duration": Object {
-                      "complex": 375,
-                      "enteringScreen": 225,
-                      "leavingScreen": 195,
-                      "short": 250,
-                      "shorter": 200,
-                      "shortest": 150,
-                      "standard": 300,
-                    },
-                    "easing": Object {
-                      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                    },
-                    "getAutoHeightDuration": [Function],
-                  },
-                  "typography": Object {
-                    "body1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.5,
-                    },
-                    "body2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.01071em",
-                      "lineHeight": 1.43,
-                    },
-                    "button": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.02857em",
-                      "lineHeight": 1.75,
-                      "textTransform": "uppercase",
-                    },
-                    "caption": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.03333em",
-                      "lineHeight": 1.66,
-                    },
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": 14,
-                    "fontWeightBold": 700,
-                    "fontWeightLight": 300,
-                    "fontWeightMedium": 500,
-                    "fontWeightRegular": 400,
-                    "h1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "6rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.01562em",
-                      "lineHeight": 1.167,
-                    },
-                    "h2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3.75rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.00833em",
-                      "lineHeight": 1.2,
-                    },
-                    "h3": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.167,
-                    },
-                    "h4": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "2.125rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00735em",
-                      "lineHeight": 1.235,
-                    },
-                    "h5": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.5rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.334,
-                    },
-                    "h6": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.25rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.0075em",
-                      "lineHeight": 1.6,
-                    },
-                    "htmlFontSize": 16,
-                    "overline": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.08333em",
-                      "lineHeight": 2.66,
-                      "textTransform": "uppercase",
-                    },
-                    "pxToRem": [Function],
-                    "round": [Function],
-                    "subtitle1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.75,
-                    },
-                    "subtitle2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.00714em",
-                      "lineHeight": 1.57,
-                    },
-                  },
-                  "zIndex": Object {
-                    "appBar": 1100,
-                    "drawer": 1200,
-                    "mobileStepper": 1000,
-                    "modal": 1300,
-                    "snackbar": 1400,
-                    "speedDial": 1050,
-                    "tooltip": 1500,
-                  },
-                },
-                "name": "MuiBackdrop",
-              },
-              "propTypes": Object {
-                "classes": [Function],
-                "innerRef": [Function],
-              },
-              "render": [Function],
-              "useStyles": [Function],
-            }
-          }
-          BackdropProps={
-            Object {
-              "transitionDuration": Object {
-                "enter": 225,
-                "exit": 195,
-              },
-            }
-          }
-          className="MuiDialog-root modal-root"
-          closeAfterTransition={true}
-          disableEscapeKeyDown={false}
-          onClose={[Function]}
-          open={false}
-        />
-      </ForwardRef(Dialog)>
-    </WithStyles(ForwardRef(Dialog))>
-  </ExportStartModal>
-  <ExportLoadingModal
-    handleCloseClick={[Function]}
-    handleDone={[Function]}
-    open={false}
-    selectedFluids={Array []}
-  >
-    <WithStyles(ForwardRef(Dialog))
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "paper": "modal-paper",
-          "root": "modal-root",
-        }
-      }
-      onClose={[Function]}
-      open={false}
-    >
-      <ForwardRef(Dialog)
-        aria-labelledby="accessibility-title"
-        classes={
-          Object {
-            "container": "MuiDialog-container",
-            "paper": "MuiDialog-paper modal-paper",
-            "paperFullScreen": "MuiDialog-paperFullScreen",
-            "paperFullWidth": "MuiDialog-paperFullWidth",
-            "paperScrollBody": "MuiDialog-paperScrollBody",
-            "paperScrollPaper": "MuiDialog-paperScrollPaper",
-            "paperWidthFalse": "MuiDialog-paperWidthFalse",
-            "paperWidthLg": "MuiDialog-paperWidthLg",
-            "paperWidthMd": "MuiDialog-paperWidthMd",
-            "paperWidthSm": "MuiDialog-paperWidthSm",
-            "paperWidthXl": "MuiDialog-paperWidthXl",
-            "paperWidthXs": "MuiDialog-paperWidthXs",
-            "root": "MuiDialog-root modal-root",
-            "scrollBody": "MuiDialog-scrollBody",
-            "scrollPaper": "MuiDialog-scrollPaper",
-          }
-        }
-        onClose={[Function]}
-        open={false}
-      >
-        <ForwardRef(Modal)
-          BackdropComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "Naked": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "propTypes": Object {
-                  "children": [Function],
-                  "className": [Function],
-                  "classes": [Function],
-                  "invisible": [Function],
-                  "open": [Function],
-                  "transitionDuration": [Function],
-                },
-                "render": [Function],
-              },
-              "displayName": "WithStyles(ForwardRef(Backdrop))",
-              "options": Object {
-                "defaultTheme": Object {
-                  "breakpoints": Object {
-                    "between": [Function],
-                    "down": [Function],
-                    "keys": Array [
-                      "xs",
-                      "sm",
-                      "md",
-                      "lg",
-                      "xl",
-                    ],
-                    "only": [Function],
-                    "up": [Function],
-                    "values": Object {
-                      "lg": 1280,
-                      "md": 960,
-                      "sm": 600,
-                      "xl": 1920,
-                      "xs": 0,
-                    },
-                    "width": [Function],
-                  },
-                  "direction": "ltr",
-                  "mixins": Object {
-                    "gutters": [Function],
-                    "toolbar": Object {
-                      "@media (min-width:0px) and (orientation: landscape)": Object {
-                        "minHeight": 48,
-                      },
-                      "@media (min-width:600px)": Object {
-                        "minHeight": 64,
-                      },
-                      "minHeight": 56,
-                    },
-                  },
-                  "overrides": Object {},
-                  "palette": Object {
-                    "action": Object {
-                      "activatedOpacity": 0.12,
-                      "active": "rgba(0, 0, 0, 0.54)",
-                      "disabled": "rgba(0, 0, 0, 0.26)",
-                      "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                      "disabledOpacity": 0.38,
-                      "focus": "rgba(0, 0, 0, 0.12)",
-                      "focusOpacity": 0.12,
-                      "hover": "rgba(0, 0, 0, 0.04)",
-                      "hoverOpacity": 0.04,
-                      "selected": "rgba(0, 0, 0, 0.08)",
-                      "selectedOpacity": 0.08,
-                    },
-                    "augmentColor": [Function],
-                    "background": Object {
-                      "default": "#fafafa",
-                      "paper": "#fff",
-                    },
-                    "common": Object {
-                      "black": "#000",
-                      "white": "#fff",
-                    },
-                    "contrastThreshold": 3,
-                    "divider": "rgba(0, 0, 0, 0.12)",
-                    "error": Object {
-                      "contrastText": "#fff",
-                      "dark": "#d32f2f",
-                      "light": "#e57373",
-                      "main": "#f44336",
-                    },
-                    "getContrastText": [Function],
-                    "grey": Object {
-                      "100": "#f5f5f5",
-                      "200": "#eeeeee",
-                      "300": "#e0e0e0",
-                      "400": "#bdbdbd",
-                      "50": "#fafafa",
-                      "500": "#9e9e9e",
-                      "600": "#757575",
-                      "700": "#616161",
-                      "800": "#424242",
-                      "900": "#212121",
-                      "A100": "#d5d5d5",
-                      "A200": "#aaaaaa",
-                      "A400": "#303030",
-                      "A700": "#616161",
-                    },
-                    "info": Object {
-                      "contrastText": "#fff",
-                      "dark": "#1976d2",
-                      "light": "#64b5f6",
-                      "main": "#2196f3",
-                    },
-                    "primary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#303f9f",
-                      "light": "#7986cb",
-                      "main": "#3f51b5",
-                    },
-                    "secondary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#c51162",
-                      "light": "#ff4081",
-                      "main": "#f50057",
-                    },
-                    "success": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#388e3c",
-                      "light": "#81c784",
-                      "main": "#4caf50",
-                    },
-                    "text": Object {
-                      "disabled": "rgba(0, 0, 0, 0.38)",
-                      "hint": "rgba(0, 0, 0, 0.38)",
-                      "primary": "rgba(0, 0, 0, 0.87)",
-                      "secondary": "rgba(0, 0, 0, 0.54)",
-                    },
-                    "tonalOffset": 0.2,
-                    "type": "light",
-                    "warning": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#f57c00",
-                      "light": "#ffb74d",
-                      "main": "#ff9800",
-                    },
-                  },
-                  "props": Object {},
-                  "shadows": Array [
-                    "none",
-                    "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                    "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                    "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                    "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                    "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                    "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                    "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                    "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                    "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                    "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                    "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                    "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                  ],
-                  "shape": Object {
-                    "borderRadius": 4,
-                  },
-                  "spacing": [Function],
-                  "transitions": Object {
-                    "create": [Function],
-                    "duration": Object {
-                      "complex": 375,
-                      "enteringScreen": 225,
-                      "leavingScreen": 195,
-                      "short": 250,
-                      "shorter": 200,
-                      "shortest": 150,
-                      "standard": 300,
-                    },
-                    "easing": Object {
-                      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                    },
-                    "getAutoHeightDuration": [Function],
-                  },
-                  "typography": Object {
-                    "body1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.5,
-                    },
-                    "body2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.01071em",
-                      "lineHeight": 1.43,
-                    },
-                    "button": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.02857em",
-                      "lineHeight": 1.75,
-                      "textTransform": "uppercase",
-                    },
-                    "caption": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.03333em",
-                      "lineHeight": 1.66,
-                    },
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": 14,
-                    "fontWeightBold": 700,
-                    "fontWeightLight": 300,
-                    "fontWeightMedium": 500,
-                    "fontWeightRegular": 400,
-                    "h1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "6rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.01562em",
-                      "lineHeight": 1.167,
-                    },
-                    "h2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3.75rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.00833em",
-                      "lineHeight": 1.2,
-                    },
-                    "h3": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.167,
-                    },
-                    "h4": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "2.125rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00735em",
-                      "lineHeight": 1.235,
-                    },
-                    "h5": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.5rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.334,
-                    },
-                    "h6": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.25rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.0075em",
-                      "lineHeight": 1.6,
-                    },
-                    "htmlFontSize": 16,
-                    "overline": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.08333em",
-                      "lineHeight": 2.66,
-                      "textTransform": "uppercase",
-                    },
-                    "pxToRem": [Function],
-                    "round": [Function],
-                    "subtitle1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.75,
-                    },
-                    "subtitle2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.00714em",
-                      "lineHeight": 1.57,
-                    },
-                  },
-                  "zIndex": Object {
-                    "appBar": 1100,
-                    "drawer": 1200,
-                    "mobileStepper": 1000,
-                    "modal": 1300,
-                    "snackbar": 1400,
-                    "speedDial": 1050,
-                    "tooltip": 1500,
-                  },
-                },
-                "name": "MuiBackdrop",
-              },
-              "propTypes": Object {
-                "classes": [Function],
-                "innerRef": [Function],
-              },
-              "render": [Function],
-              "useStyles": [Function],
-            }
-          }
-          BackdropProps={
-            Object {
-              "transitionDuration": Object {
-                "enter": 225,
-                "exit": 195,
-              },
-            }
-          }
-          className="MuiDialog-root modal-root"
-          closeAfterTransition={true}
-          disableEscapeKeyDown={false}
-          onClose={[Function]}
-          open={false}
-        />
-      </ForwardRef(Dialog)>
-    </WithStyles(ForwardRef(Dialog))>
-  </ExportLoadingModal>
-  <ExportDoneModal
-    error={false}
-    handleCloseClick={[Function]}
-    open={false}
-  >
-    <WithStyles(ForwardRef(Dialog))
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "paper": "modal-paper",
-          "root": "modal-root",
-        }
-      }
-      onClose={[Function]}
-      open={false}
-    >
-      <ForwardRef(Dialog)
-        aria-labelledby="accessibility-title"
-        classes={
-          Object {
-            "container": "MuiDialog-container",
-            "paper": "MuiDialog-paper modal-paper",
-            "paperFullScreen": "MuiDialog-paperFullScreen",
-            "paperFullWidth": "MuiDialog-paperFullWidth",
-            "paperScrollBody": "MuiDialog-paperScrollBody",
-            "paperScrollPaper": "MuiDialog-paperScrollPaper",
-            "paperWidthFalse": "MuiDialog-paperWidthFalse",
-            "paperWidthLg": "MuiDialog-paperWidthLg",
-            "paperWidthMd": "MuiDialog-paperWidthMd",
-            "paperWidthSm": "MuiDialog-paperWidthSm",
-            "paperWidthXl": "MuiDialog-paperWidthXl",
-            "paperWidthXs": "MuiDialog-paperWidthXs",
-            "root": "MuiDialog-root modal-root",
-            "scrollBody": "MuiDialog-scrollBody",
-            "scrollPaper": "MuiDialog-scrollPaper",
-          }
-        }
-        onClose={[Function]}
-        open={false}
-      >
-        <ForwardRef(Modal)
-          BackdropComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "Naked": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "propTypes": Object {
-                  "children": [Function],
-                  "className": [Function],
-                  "classes": [Function],
-                  "invisible": [Function],
-                  "open": [Function],
-                  "transitionDuration": [Function],
-                },
-                "render": [Function],
-              },
-              "displayName": "WithStyles(ForwardRef(Backdrop))",
-              "options": Object {
-                "defaultTheme": Object {
-                  "breakpoints": Object {
-                    "between": [Function],
-                    "down": [Function],
-                    "keys": Array [
-                      "xs",
-                      "sm",
-                      "md",
-                      "lg",
-                      "xl",
-                    ],
-                    "only": [Function],
-                    "up": [Function],
-                    "values": Object {
-                      "lg": 1280,
-                      "md": 960,
-                      "sm": 600,
-                      "xl": 1920,
-                      "xs": 0,
-                    },
-                    "width": [Function],
-                  },
-                  "direction": "ltr",
-                  "mixins": Object {
-                    "gutters": [Function],
-                    "toolbar": Object {
-                      "@media (min-width:0px) and (orientation: landscape)": Object {
-                        "minHeight": 48,
-                      },
-                      "@media (min-width:600px)": Object {
-                        "minHeight": 64,
-                      },
-                      "minHeight": 56,
-                    },
-                  },
-                  "overrides": Object {},
-                  "palette": Object {
-                    "action": Object {
-                      "activatedOpacity": 0.12,
-                      "active": "rgba(0, 0, 0, 0.54)",
-                      "disabled": "rgba(0, 0, 0, 0.26)",
-                      "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                      "disabledOpacity": 0.38,
-                      "focus": "rgba(0, 0, 0, 0.12)",
-                      "focusOpacity": 0.12,
-                      "hover": "rgba(0, 0, 0, 0.04)",
-                      "hoverOpacity": 0.04,
-                      "selected": "rgba(0, 0, 0, 0.08)",
-                      "selectedOpacity": 0.08,
-                    },
-                    "augmentColor": [Function],
-                    "background": Object {
-                      "default": "#fafafa",
-                      "paper": "#fff",
-                    },
-                    "common": Object {
-                      "black": "#000",
-                      "white": "#fff",
-                    },
-                    "contrastThreshold": 3,
-                    "divider": "rgba(0, 0, 0, 0.12)",
-                    "error": Object {
-                      "contrastText": "#fff",
-                      "dark": "#d32f2f",
-                      "light": "#e57373",
-                      "main": "#f44336",
-                    },
-                    "getContrastText": [Function],
-                    "grey": Object {
-                      "100": "#f5f5f5",
-                      "200": "#eeeeee",
-                      "300": "#e0e0e0",
-                      "400": "#bdbdbd",
-                      "50": "#fafafa",
-                      "500": "#9e9e9e",
-                      "600": "#757575",
-                      "700": "#616161",
-                      "800": "#424242",
-                      "900": "#212121",
-                      "A100": "#d5d5d5",
-                      "A200": "#aaaaaa",
-                      "A400": "#303030",
-                      "A700": "#616161",
-                    },
-                    "info": Object {
-                      "contrastText": "#fff",
-                      "dark": "#1976d2",
-                      "light": "#64b5f6",
-                      "main": "#2196f3",
-                    },
-                    "primary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#303f9f",
-                      "light": "#7986cb",
-                      "main": "#3f51b5",
-                    },
-                    "secondary": Object {
-                      "contrastText": "#fff",
-                      "dark": "#c51162",
-                      "light": "#ff4081",
-                      "main": "#f50057",
-                    },
-                    "success": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#388e3c",
-                      "light": "#81c784",
-                      "main": "#4caf50",
-                    },
-                    "text": Object {
-                      "disabled": "rgba(0, 0, 0, 0.38)",
-                      "hint": "rgba(0, 0, 0, 0.38)",
-                      "primary": "rgba(0, 0, 0, 0.87)",
-                      "secondary": "rgba(0, 0, 0, 0.54)",
-                    },
-                    "tonalOffset": 0.2,
-                    "type": "light",
-                    "warning": Object {
-                      "contrastText": "rgba(0, 0, 0, 0.87)",
-                      "dark": "#f57c00",
-                      "light": "#ffb74d",
-                      "main": "#ff9800",
-                    },
-                  },
-                  "props": Object {},
-                  "shadows": Array [
-                    "none",
-                    "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                    "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                    "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                    "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                    "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                    "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                    "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                    "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                    "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                    "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                    "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                    "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                    "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                    "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                    "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                  ],
-                  "shape": Object {
-                    "borderRadius": 4,
-                  },
-                  "spacing": [Function],
-                  "transitions": Object {
-                    "create": [Function],
-                    "duration": Object {
-                      "complex": 375,
-                      "enteringScreen": 225,
-                      "leavingScreen": 195,
-                      "short": 250,
-                      "shorter": 200,
-                      "shortest": 150,
-                      "standard": 300,
-                    },
-                    "easing": Object {
-                      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                    },
-                    "getAutoHeightDuration": [Function],
-                  },
-                  "typography": Object {
-                    "body1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.5,
-                    },
-                    "body2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.01071em",
-                      "lineHeight": 1.43,
-                    },
-                    "button": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.02857em",
-                      "lineHeight": 1.75,
-                      "textTransform": "uppercase",
-                    },
-                    "caption": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.03333em",
-                      "lineHeight": 1.66,
-                    },
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": 14,
-                    "fontWeightBold": 700,
-                    "fontWeightLight": 300,
-                    "fontWeightMedium": 500,
-                    "fontWeightRegular": 400,
-                    "h1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "6rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.01562em",
-                      "lineHeight": 1.167,
-                    },
-                    "h2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3.75rem",
-                      "fontWeight": 300,
-                      "letterSpacing": "-0.00833em",
-                      "lineHeight": 1.2,
-                    },
-                    "h3": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "3rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.167,
-                    },
-                    "h4": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "2.125rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00735em",
-                      "lineHeight": 1.235,
-                    },
-                    "h5": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.5rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0em",
-                      "lineHeight": 1.334,
-                    },
-                    "h6": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1.25rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.0075em",
-                      "lineHeight": 1.6,
-                    },
-                    "htmlFontSize": 16,
-                    "overline": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.75rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.08333em",
-                      "lineHeight": 2.66,
-                      "textTransform": "uppercase",
-                    },
-                    "pxToRem": [Function],
-                    "round": [Function],
-                    "subtitle1": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "1rem",
-                      "fontWeight": 400,
-                      "letterSpacing": "0.00938em",
-                      "lineHeight": 1.75,
-                    },
-                    "subtitle2": Object {
-                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                      "fontSize": "0.875rem",
-                      "fontWeight": 500,
-                      "letterSpacing": "0.00714em",
-                      "lineHeight": 1.57,
-                    },
-                  },
-                  "zIndex": Object {
-                    "appBar": 1100,
-                    "drawer": 1200,
-                    "mobileStepper": 1000,
-                    "modal": 1300,
-                    "snackbar": 1400,
-                    "speedDial": 1050,
-                    "tooltip": 1500,
-                  },
-                },
-                "name": "MuiBackdrop",
-              },
-              "propTypes": Object {
-                "classes": [Function],
-                "innerRef": [Function],
-              },
-              "render": [Function],
-              "useStyles": [Function],
-            }
-          }
-          BackdropProps={
-            Object {
-              "transitionDuration": Object {
-                "enter": 225,
-                "exit": 195,
-              },
-            }
-          }
-          className="MuiDialog-root modal-root"
-          closeAfterTransition={true}
-          disableEscapeKeyDown={false}
-          onClose={[Function]}
-          open={false}
-        />
-      </ForwardRef(Dialog)>
-    </WithStyles(ForwardRef(Dialog))>
-  </ExportDoneModal>
-</ExportData>
+</div>
 `;
diff --git a/src/components/Options/GCU/GCUContent.spec.tsx b/src/components/Options/GCU/GCUContent.spec.tsx
index 2bc41f57b908daa0b20931d8a48be0fef4720aa2..d504d3c128c4fc8825fd5c24db936d4d7d52cc53 100644
--- a/src/components/Options/GCU/GCUContent.spec.tsx
+++ b/src/components/Options/GCU/GCUContent.spec.tsx
@@ -1,10 +1,10 @@
+import { render } from '@testing-library/react'
 import GCUContent from 'components/Options/GCU/GCUContent'
-import { shallow } from 'enzyme'
 import React from 'react'
 
 describe('GCUContent component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<GCUContent />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(<GCUContent />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/GCU/GCULink.spec.tsx b/src/components/Options/GCU/GCULink.spec.tsx
index f3cb6b4f33f294ff4767901ceafbf2aa58280998..9de09ea7b8be41fedd27b833b198a80a03394b41 100644
--- a/src/components/Options/GCU/GCULink.spec.tsx
+++ b/src/components/Options/GCU/GCULink.spec.tsx
@@ -1,10 +1,15 @@
+import { render } from '@testing-library/react'
 import LegalNoticeLink from 'components/Options/LegalNotice/LegalNoticeLink'
-import { shallow } from 'enzyme'
 import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 
 describe('LegalNoticeLink component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<LegalNoticeLink />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(
+      <BrowserRouter>
+        <LegalNoticeLink />
+      </BrowserRouter>
+    )
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/GCU/GCUView.spec.tsx b/src/components/Options/GCU/GCUView.spec.tsx
index 9692ba84bd47f3ade5d9474547d8139142f116fd..43396b90d61d43d9c12a985404167970d2541223 100644
--- a/src/components/Options/GCU/GCUView.spec.tsx
+++ b/src/components/Options/GCU/GCUView.spec.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react'
 import GCUView from 'components/Options/GCU/GCUView'
-import { shallow } from 'enzyme'
 import React from 'react'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
@@ -8,7 +8,7 @@ jest.mock('components/Content/Content', () => 'mock-content')
 
 describe('GCUView component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<GCUView />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(<GCUView />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
index 93d8846db6808891dfce8569b1bb4924ef66289c..dfdcf4910c46f89db3fa3bebeeada71b8e3fc2e6 100644
--- a/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
@@ -1,288 +1,280 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GCUContent component should be rendered correctly 1`] = `
-<div
-  className="gcu-content-root"
->
+<div>
   <div
-    className="gcu-content-wrapper"
+    class="gcu-content-root"
   >
-    <p
-      className="text-14-normal version"
-    >
-      gcu.version
-    </p>
-    <div
-      className="gcu-content-part-title text-15-normal"
-    >
-      gcu.content.title1
-    </div>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part1_1
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part1_2
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part1_3
-    </p>
-    <div
-      className="gcu-content-part-title text-15-normal"
-    >
-      gcu.content.title2
-    </div>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part2_1
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part2_2
-    </p>
-    <ul
-      className="text-14-normal"
-    >
-      <li>
-        gcu.content.part2_2_list1
-      </li>
-      <li>
-        gcu.content.part2_2_list2
-      </li>
-      <li>
-        gcu.content.part2_2_list3
-      </li>
-    </ul>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part2_3
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part2_4
-    </p>
-    <div
-      className="gcu-content-part-title text-15-normal"
-    >
-      gcu.content.title3
-    </div>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part3_1
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part3_2
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part3_3
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part3_4
-    </p>
-    <div
-      className="gcu-content-part-title text-15-normal"
-    >
-      gcu.content.title4
-    </div>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part4_1
-    </p>
-    <p
-      className="text-14-normal"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "gcu.content.part4_2",
-        }
-      }
-    />
-    <div
-      className="gcu-content-part-title text-15-normal"
-    >
-      gcu.content.title5
-    </div>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part5_1
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part5_2
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part5_3
-    </p>
-    <ul
-      className="text-14-normal"
-    >
-      <li>
-        gcu.content.part5_3_list1
-      </li>
-      <li>
-        gcu.content.part5_3_list2
-      </li>
-    </ul>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part5_4
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part5_5
-    </p>
-    <div
-      className="gcu-content-part-title text-15-normal"
-    >
-      gcu.content.title6
-    </div>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part6_1
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part6_2
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part6_3
-    </p>
-    <ul
-      className="text-14-normal"
-    >
-      <li>
-        gcu.content.part6_3_list1
-      </li>
-      <li>
-        gcu.content.part6_3_list2
-      </li>
-      <li>
-        gcu.content.part6_3_list3
-      </li>
-    </ul>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part6_4
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part6_5
-    </p>
-    <div
-      className="gcu-content-part-title text-15-normal"
-    >
-      gcu.content.title8
-    </div>
-    <p
-      className="text-14-normal"
-    >
-      gcu.content.part8_1
-    </p>
-    <p
-      className="text-14-normal"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "gcu.content.part8_2",
-        }
-      }
-    />
     <div
-      className="gcu-content-part-title text-15-normal"
+      class="gcu-content-wrapper"
     >
-      gcu.content.title9
+      <p
+        class="text-14-normal version"
+      >
+        gcu.version
+      </p>
+      <div
+        class="gcu-content-part-title text-15-normal"
+      >
+        gcu.content.title1
+      </div>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part1_1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part1_2
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part1_3
+      </p>
+      <div
+        class="gcu-content-part-title text-15-normal"
+      >
+        gcu.content.title2
+      </div>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part2_1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part2_2
+      </p>
+      <ul
+        class="text-14-normal"
+      >
+        <li>
+          gcu.content.part2_2_list1
+        </li>
+        <li>
+          gcu.content.part2_2_list2
+        </li>
+        <li>
+          gcu.content.part2_2_list3
+        </li>
+      </ul>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part2_3
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part2_4
+      </p>
+      <div
+        class="gcu-content-part-title text-15-normal"
+      >
+        gcu.content.title3
+      </div>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part3_1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part3_2
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part3_3
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part3_4
+      </p>
+      <div
+        class="gcu-content-part-title text-15-normal"
+      >
+        gcu.content.title4
+      </div>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part4_1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part4_2
+      </p>
+      <div
+        class="gcu-content-part-title text-15-normal"
+      >
+        gcu.content.title5
+      </div>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part5_1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part5_2
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part5_3
+      </p>
+      <ul
+        class="text-14-normal"
+      >
+        <li>
+          gcu.content.part5_3_list1
+        </li>
+        <li>
+          gcu.content.part5_3_list2
+        </li>
+      </ul>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part5_4
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part5_5
+      </p>
+      <div
+        class="gcu-content-part-title text-15-normal"
+      >
+        gcu.content.title6
+      </div>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part6_1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part6_2
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part6_3
+      </p>
+      <ul
+        class="text-14-normal"
+      >
+        <li>
+          gcu.content.part6_3_list1
+        </li>
+        <li>
+          gcu.content.part6_3_list2
+        </li>
+        <li>
+          gcu.content.part6_3_list3
+        </li>
+      </ul>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part6_4
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part6_5
+      </p>
+      <div
+        class="gcu-content-part-title text-15-normal"
+      >
+        gcu.content.title8
+      </div>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part8_1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        gcu.content.part8_2
+      </p>
+      <div
+        class="gcu-content-part-title text-15-normal"
+      >
+        gcu.content.title9
+      </div>
+      <p
+        class="text-14-normal"
+      >
+        <span
+          class="text-14-bold"
+        >
+          gcu.content.part9_1_title
+        </span>
+        <span>
+          gcu.content.part9_1_content
+        </span>
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        <span
+          class="text-14-bold"
+        >
+          gcu.content.part9_2_title
+        </span>
+        <span>
+          gcu.content.part9_2_content
+        </span>
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        <span
+          class="text-14-bold"
+        >
+          gcu.content.part9_3_title
+        </span>
+        <span>
+          gcu.content.part9_3_content
+        </span>
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        <span
+          class="text-14-bold"
+        >
+          gcu.content.part9_4_title
+        </span>
+        <span>
+          gcu.content.part9_4_content
+        </span>
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        <span
+          class="text-14-bold"
+        >
+          gcu.content.part9_5_title
+        </span>
+        <span>
+          gcu.content.part9_5_content
+        </span>
+      </p>
     </div>
-    <p
-      className="text-14-normal"
-    >
-      <span
-        className="text-14-bold"
-      >
-        gcu.content.part9_1_title
-      </span>
-      <span>
-        gcu.content.part9_1_content
-      </span>
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      <span
-        className="text-14-bold"
-      >
-        gcu.content.part9_2_title
-      </span>
-      <span>
-        gcu.content.part9_2_content
-      </span>
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      <span
-        className="text-14-bold"
-      >
-        gcu.content.part9_3_title
-      </span>
-      <span>
-        gcu.content.part9_3_content
-      </span>
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      <span
-        className="text-14-bold"
-      >
-        gcu.content.part9_4_title
-      </span>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "gcu.content.part9_4_content",
-          }
-        }
-      />
-    </p>
-    <p
-      className="text-14-normal"
-    >
-      <span
-        className="text-14-bold"
-      >
-        gcu.content.part9_5_title
-      </span>
-      <span>
-        gcu.content.part9_5_content
-      </span>
-    </p>
   </div>
 </div>
 `;
diff --git a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
index 49b15ee33b6b39a4226d4cfd01a401224b2bca70..915df297b184ee301fcd67fe248cc8bafd0441bd 100644
--- a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -1,52 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LegalNoticeLink component should be rendered correctly 1`] = `
-<div
-  className="legal-notice-root"
->
+<div>
   <div
-    className="legal-notice-content"
+    class="legal-notice-root"
   >
     <div
-      className="legal-notice-header text-16-normal-uppercase"
-    >
-      legal.title_legal
-    </div>
-    <WithStyles(ForwardRef(Link))
-      className="legal-notice-card-link"
-      component={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "displayName": "Link",
-          "render": [Function],
-        }
-      }
-      onClick={[Function]}
-      to="/options/legalnotice"
+      class="legal-notice-content"
     >
       <div
-        className="card"
+        class="legal-notice-header text-16-normal-uppercase"
+      >
+        legal.title_legal
+      </div>
+      <a
+        class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
+        href="/options/legalnotice"
       >
         <div
-          className="legal-notice-card"
+          class="card"
         >
           <div
-            className="legal-notice-card-content"
+            class="legal-notice-card"
           >
-            <StyledIcon
-              className="legal-notice-card-content-icon"
-              icon="test-file-stub"
-              size={42}
-            />
             <div
-              className="legal-notice-card-content-title"
+              class="legal-notice-card-content"
             >
-              legal.read_legal
+              <svg
+                aria-hidden="true"
+                class="legal-notice-card-content-icon styles__icon___23x3R"
+                height="42"
+                width="42"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+              <div
+                class="legal-notice-card-content-title"
+              >
+                legal.read_legal
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </WithStyles(ForwardRef(Link))>
+      </a>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
index da0d5940a8758e3b30a5de6b21f6bcc5fcede716..f5c466c4d47f425be2d8979d1c5a2995a763982b 100644
--- a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
@@ -1,20 +1,292 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GCUView component should be rendered correctly 1`] = `
-<React.Fragment>
+<div>
   <mock-cozybar
-    displayBackArrow={true}
-    titleKey="common.title_gcu"
+    displaybackarrow="true"
+    titlekey="common.title_gcu"
   />
   <mock-header
-    desktopTitleKey="common.title_gcu"
-    displayBackArrow={true}
-    setHeaderHeight={[Function]}
+    desktoptitlekey="common.title_gcu"
+    displaybackarrow="true"
   />
   <mock-content
-    heightOffset={0}
+    heightoffset="0"
   >
-    <GCUContent />
+    <div
+      class="gcu-content-root"
+    >
+      <div
+        class="gcu-content-wrapper"
+      >
+        <p
+          class="text-14-normal version"
+        >
+          gcu.version
+        </p>
+        <div
+          class="gcu-content-part-title text-15-normal"
+        >
+          gcu.content.title1
+        </div>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part1_1
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part1_2
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part1_3
+        </p>
+        <div
+          class="gcu-content-part-title text-15-normal"
+        >
+          gcu.content.title2
+        </div>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part2_1
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part2_2
+        </p>
+        <ul
+          class="text-14-normal"
+        >
+          <li>
+            gcu.content.part2_2_list1
+          </li>
+          <li>
+            gcu.content.part2_2_list2
+          </li>
+          <li>
+            gcu.content.part2_2_list3
+          </li>
+        </ul>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part2_3
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part2_4
+        </p>
+        <div
+          class="gcu-content-part-title text-15-normal"
+        >
+          gcu.content.title3
+        </div>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part3_1
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part3_2
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part3_3
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part3_4
+        </p>
+        <div
+          class="gcu-content-part-title text-15-normal"
+        >
+          gcu.content.title4
+        </div>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part4_1
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part4_2
+        </p>
+        <div
+          class="gcu-content-part-title text-15-normal"
+        >
+          gcu.content.title5
+        </div>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part5_1
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part5_2
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part5_3
+        </p>
+        <ul
+          class="text-14-normal"
+        >
+          <li>
+            gcu.content.part5_3_list1
+          </li>
+          <li>
+            gcu.content.part5_3_list2
+          </li>
+        </ul>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part5_4
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part5_5
+        </p>
+        <div
+          class="gcu-content-part-title text-15-normal"
+        >
+          gcu.content.title6
+        </div>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part6_1
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part6_2
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part6_3
+        </p>
+        <ul
+          class="text-14-normal"
+        >
+          <li>
+            gcu.content.part6_3_list1
+          </li>
+          <li>
+            gcu.content.part6_3_list2
+          </li>
+          <li>
+            gcu.content.part6_3_list3
+          </li>
+        </ul>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part6_4
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part6_5
+        </p>
+        <div
+          class="gcu-content-part-title text-15-normal"
+        >
+          gcu.content.title8
+        </div>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part8_1
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          gcu.content.part8_2
+        </p>
+        <div
+          class="gcu-content-part-title text-15-normal"
+        >
+          gcu.content.title9
+        </div>
+        <p
+          class="text-14-normal"
+        >
+          <span
+            class="text-14-bold"
+          >
+            gcu.content.part9_1_title
+          </span>
+          <span>
+            gcu.content.part9_1_content
+          </span>
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          <span
+            class="text-14-bold"
+          >
+            gcu.content.part9_2_title
+          </span>
+          <span>
+            gcu.content.part9_2_content
+          </span>
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          <span
+            class="text-14-bold"
+          >
+            gcu.content.part9_3_title
+          </span>
+          <span>
+            gcu.content.part9_3_content
+          </span>
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          <span
+            class="text-14-bold"
+          >
+            gcu.content.part9_4_title
+          </span>
+          <span>
+            gcu.content.part9_4_content
+          </span>
+        </p>
+        <p
+          class="text-14-normal"
+        >
+          <span
+            class="text-14-bold"
+          >
+            gcu.content.part9_5_title
+          </span>
+          <span>
+            gcu.content.part9_5_content
+          </span>
+        </p>
+      </div>
+    </div>
   </mock-content>
-</React.Fragment>
+</div>
 `;
diff --git a/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx
index 55cbffee7411bb30bd48c38f9dce6e0d059c8cc7..6ceff8339c8a0f3a893ab00670cbb377797aa40b 100644
--- a/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx
@@ -1,10 +1,10 @@
+import { render } from '@testing-library/react'
 import LegalNoticeContent from 'components/Options/LegalNotice/LegalNoticeContent'
-import { shallow } from 'enzyme'
 import React from 'react'
 
 describe('LegalNoticeContent component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<LegalNoticeContent />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(<LegalNoticeContent />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx
index 190508b0a3b43e85ffa0c7ce0d07a6d65012fdc1..c6e8e2451c17c89c47221930db6dfbc592dc5f13 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx
@@ -1,10 +1,15 @@
+import { render } from '@testing-library/react'
 import GCULink from 'components/Options/GCU/GCULink'
-import { shallow } from 'enzyme'
 import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 
 describe('GCULink component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<GCULink />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(
+      <BrowserRouter>
+        <GCULink />
+      </BrowserRouter>
+    )
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx
index 247058c8f1f903f18a043784141abe544abc2c1b..454e91fb322de535cd432a8e4060d011f173b75a 100644
--- a/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react'
 import LegalNoticeView from 'components/Options/LegalNotice/LegalNoticeView'
-import { shallow } from 'enzyme'
 import React from 'react'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
@@ -8,7 +8,7 @@ jest.mock('components/Content/Content', () => 'mock-content')
 
 describe('LegalNoticeView component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<LegalNoticeView />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(<LegalNoticeView />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap
index 322cf9fb612ba9ab88be218725372d23a485eaba..41ea856385c60a3af7849f022a4c6953f9564316 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap
@@ -1,25 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LegalNoticeContent component should be rendered correctly 1`] = `
-<React.Fragment>
+<div>
   <div
-    className="legal-notice-root"
+    class="legal-notice-root"
   >
     <div
-      className="legal-notice-content"
+      class="legal-notice-content"
     >
       <p
-        className="version"
+        class="version"
       >
         legal.version
       </p>
-      <p
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "legal.site",
-          }
-        }
-      />
+      <p>
+        legal.site
+      </p>
       <p>
         legal.adress
       </p>
@@ -27,78 +23,75 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
         legal.phone
       </p>
       <p
-        className="ln-contact"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "legal.mail",
-          }
-        }
-      />
+        class="ln-contact"
+      >
+        legal.mail
+      </p>
       <div
-        className="text-16-normal"
+        class="text-16-normal"
       >
         <div
-          className="legal-notice-oneline"
+          class="legal-notice-oneline"
         >
           <span
-            className="text-14-normal"
+            class="text-14-normal"
           >
             legal.p1b
           </span>
           legal.p1
         </div>
         <div
-          className="legal-notice-oneline"
+          class="legal-notice-oneline"
         >
           <span
-            className="text-14-normal"
+            class="text-14-normal"
           >
             legal.p2b
           </span>
           legal.p2
         </div>
         <div
-          className="legal-notice-oneline"
+          class="legal-notice-oneline"
         >
           <span
-            className="text-14-normal"
+            class="text-14-normal"
           >
             legal.p3b
           </span>
           legal.p3
         </div>
         <div
-          className="legal-notice-oneline"
+          class="legal-notice-oneline"
         >
           <span
-            className="text-14-normal"
+            class="text-14-normal"
           >
             legal.p4b
           </span>
           legal.p4
         </div>
         <div
-          className="legal-notice-oneline"
+          class="legal-notice-oneline"
         >
           <span
-            className="text-14-normal"
+            class="text-14-normal"
           >
             legal.p5b
           </span>
           legal.p5
         </div>
         <div
-          className="legal-notice-oneline"
+          class="legal-notice-oneline"
         >
           <span
-            className="text-14-normal"
+            class="text-14-normal"
           >
             legal.p6b
           </span>
           legal.p6
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
              
@@ -109,7 +102,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
           </p>
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
             legal.title2
@@ -139,13 +132,9 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
                 <li>
                   legal.part2-3-4
                 </li>
-                <li
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "legal.part2-3-5",
-                    }
-                  }
-                />
+                <li>
+                  legal.part2-3-5
+                </li>
               </ul>
             </li>
             <li>
@@ -169,32 +158,24 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
               legal.part2-6-3
             </li>
           </ul>
-          <p
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "legal.part2-7",
-              }
-            }
-          />
+          <p>
+            legal.part2-7
+          </p>
           <p>
             legal.part2-8
           </p>
           <p>
             legal.part2-9
           </p>
-          <p
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "legal.part2-10",
-              }
-            }
-          />
+          <p>
+            legal.part2-10
+          </p>
           <p>
             legal.part2-11
           </p>
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
             legal.title3
@@ -207,7 +188,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
           </p>
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
             legal.title4
@@ -220,7 +201,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
           </p>
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
             legal.title5
@@ -230,7 +211,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
           </p>
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
             legal.title6
@@ -240,7 +221,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
           </p>
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
             legal.title7
@@ -248,19 +229,15 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
           <p>
             legal.part7-1
           </p>
-          <p
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "legal.part7-2",
-              }
-            }
-          />
+          <p>
+            legal.part7-2
+          </p>
           <p>
             legal.part7-3
           </p>
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
             legal.title8
@@ -270,7 +247,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
           </p>
         </div>
         <div
-          className="legal-notice-part"
+          class="legal-notice-part"
         >
           <h3>
             legal.title9
@@ -285,5 +262,5 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = `
       </div>
     </div>
   </div>
-</React.Fragment>
+</div>
 `;
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index a6183e10d395a71fb1690f7fb164dc478a2a1aa2..f75c9392adbd35e4372187d1a121b5a9603f2216 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -1,46 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GCULink component should be rendered correctly 1`] = `
-<div
-  className="gcu-link-root"
->
+<div>
   <div
-    className="gcu-link-content"
+    class="gcu-link-root"
   >
-    <WithStyles(ForwardRef(Link))
-      className="gcu-link-card-link"
-      component={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "displayName": "Link",
-          "render": [Function],
-        }
-      }
-      to="/options/gcu"
+    <div
+      class="gcu-link-content"
     >
-      <div
-        className="card"
+      <a
+        class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
+        href="/options/gcu"
       >
         <div
-          className="gcu-link-card"
+          class="card"
         >
           <div
-            className="gcu-link-card-content"
+            class="gcu-link-card"
           >
-            <StyledIcon
-              className="gcu-link-card-content-icon"
-              icon="test-file-stub"
-              size={42}
-            />
             <div
-              className="gcu-link-card-content-title"
+              class="gcu-link-card-content"
             >
-              common.title_gcu
+              <svg
+                aria-hidden="true"
+                class="gcu-link-card-content-icon styles__icon___23x3R"
+                height="42"
+                width="42"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+              <div
+                class="gcu-link-card-content-title"
+              >
+                common.title_gcu
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </WithStyles(ForwardRef(Link))>
+      </a>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
index e3e3b81e15207a38e46063d71dbfbf700c247024..f236decc8ad65984c4fd9640a1be5cb9915c238d 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap
@@ -1,20 +1,278 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LegalNoticeView component should be rendered correctly 1`] = `
-<React.Fragment>
+<div>
   <mock-cozybar
-    displayBackArrow={true}
-    titleKey="common.title_legal_notice"
+    displaybackarrow="true"
+    titlekey="common.title_legal_notice"
   />
   <mock-header
-    desktopTitleKey="common.title_legal_notice"
-    displayBackArrow={true}
-    setHeaderHeight={[Function]}
+    desktoptitlekey="common.title_legal_notice"
+    displaybackarrow="true"
   />
   <mock-content
-    heightOffset={0}
+    heightoffset="0"
   >
-    <LegalNoticeContent />
+    <div
+      class="legal-notice-root"
+    >
+      <div
+        class="legal-notice-content"
+      >
+        <p
+          class="version"
+        >
+          legal.version
+        </p>
+        <p>
+          legal.site
+        </p>
+        <p>
+          legal.adress
+        </p>
+        <p>
+          legal.phone
+        </p>
+        <p
+          class="ln-contact"
+        >
+          legal.mail
+        </p>
+        <div
+          class="text-16-normal"
+        >
+          <div
+            class="legal-notice-oneline"
+          >
+            <span
+              class="text-14-normal"
+            >
+              legal.p1b
+            </span>
+            legal.p1
+          </div>
+          <div
+            class="legal-notice-oneline"
+          >
+            <span
+              class="text-14-normal"
+            >
+              legal.p2b
+            </span>
+            legal.p2
+          </div>
+          <div
+            class="legal-notice-oneline"
+          >
+            <span
+              class="text-14-normal"
+            >
+              legal.p3b
+            </span>
+            legal.p3
+          </div>
+          <div
+            class="legal-notice-oneline"
+          >
+            <span
+              class="text-14-normal"
+            >
+              legal.p4b
+            </span>
+            legal.p4
+          </div>
+          <div
+            class="legal-notice-oneline"
+          >
+            <span
+              class="text-14-normal"
+            >
+              legal.p5b
+            </span>
+            legal.p5
+          </div>
+          <div
+            class="legal-notice-oneline"
+          >
+            <span
+              class="text-14-normal"
+            >
+              legal.p6b
+            </span>
+            legal.p6
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+               
+              legal.title1
+            </h3>
+            <p>
+              legal.part1
+            </p>
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+              legal.title2
+            </h3>
+            <p>
+              legal.part2
+            </p>
+            <ul>
+              <li>
+                legal.part2-1
+              </li>
+              <li>
+                legal.part2-2
+              </li>
+              <li>
+                legal.part2-3
+                <ul>
+                  <li>
+                    legal.part2-3-1
+                  </li>
+                  <li>
+                    legal.part2-3-2
+                  </li>
+                  <li>
+                    legal.part2-3-3
+                  </li>
+                  <li>
+                    legal.part2-3-4
+                  </li>
+                  <li>
+                    legal.part2-3-5
+                  </li>
+                </ul>
+              </li>
+              <li>
+                legal.part2-4
+              </li>
+            </ul>
+            <p>
+              legal.part2-5
+            </p>
+            <p>
+              legal.part2-6
+            </p>
+            <ul>
+              <li>
+                legal.part2-6-1
+              </li>
+              <li>
+                legal.part2-6-2
+              </li>
+              <li>
+                legal.part2-6-3
+              </li>
+            </ul>
+            <p>
+              legal.part2-7
+            </p>
+            <p>
+              legal.part2-8
+            </p>
+            <p>
+              legal.part2-9
+            </p>
+            <p>
+              legal.part2-10
+            </p>
+            <p>
+              legal.part2-11
+            </p>
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+              legal.title3
+            </h3>
+            <p>
+              legal.part3-1
+            </p>
+            <p>
+              legal.part3-2
+            </p>
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+              legal.title4
+            </h3>
+            <p>
+              legal.part4-1
+            </p>
+            <p>
+              legal.part4-2
+            </p>
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+              legal.title5
+            </h3>
+            <p>
+              legal.part5
+            </p>
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+              legal.title6
+            </h3>
+            <p>
+              legal.part6
+            </p>
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+              legal.title7
+            </h3>
+            <p>
+              legal.part7-1
+            </p>
+            <p>
+              legal.part7-2
+            </p>
+            <p>
+              legal.part7-3
+            </p>
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+              legal.title8
+            </h3>
+            <p>
+              legal.part8
+            </p>
+          </div>
+          <div
+            class="legal-notice-part"
+          >
+            <h3>
+              legal.title9
+            </h3>
+            <p>
+              legal.part9-1
+            </p>
+            <p>
+              legal.part9-2
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </mock-content>
-</React.Fragment>
+</div>
 `;
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
index ad9864f10b2466b2e313d4f6228a5033dd9d8294..3199d0c5f0c0b1b8b1e32217a9576b80978bcacb 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
@@ -1,10 +1,10 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import React from 'react'
 import MatomoOptOut from './MatomoOptOut'
 
 describe('MatomoOptOut component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<MatomoOptOut />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(<MatomoOptOut />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
index 1ac1911b5acecdc56d7ca24fb7272c7db81a3360..4e821bbf7d2a9b766176578195e820bb88cf36a7 100644
--- a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
+++ b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
@@ -1,26 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MatomoOptOut component should be rendered correctly 1`] = `
-<div
-  className="matomo-opt-out-container"
->
+<div>
   <div
-    className="matomo-opt-out"
+    class="matomo-opt-out-container"
   >
     <div
-      className="opt-out-header text-16-normal-uppercase"
+      class="matomo-opt-out"
     >
-      matomo.matomo_title
+      <div
+        class="opt-out-header text-16-normal-uppercase"
+      >
+        matomo.matomo_title
+      </div>
+      <iframe
+        src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
+        style="height: 250px;"
+        title="opt-out"
+      />
     </div>
-    <iframe
-      src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
-      style={
-        Object {
-          "height": "250px",
-        }
-      }
-      title="opt-out"
-    />
   </div>
 </div>
 `;
diff --git a/src/components/Options/OptionsView.spec.tsx b/src/components/Options/OptionsView.spec.tsx
index d0a1f04c6d5ca25e34771add9ad9c5b51eb71a45..3f42b730e12e6d710235ede391aeee7c24ee6a9d 100644
--- a/src/components/Options/OptionsView.spec.tsx
+++ b/src/components/Options/OptionsView.spec.tsx
@@ -1,6 +1,9 @@
+import { render, waitFor } from '@testing-library/react'
 import OptionsView from 'components/Options/OptionsView'
-import { shallow } from 'enzyme'
 import React from 'react'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
 jest.mock('components/Header/Header', () => 'mock-header')
@@ -10,9 +13,18 @@ jest.mock(
   () => 'mock-konnectorviewerlist'
 )
 
+const store = createMockEcolyoStore()
+
 describe('OptionsView component', () => {
-  it('should be rendered correctly', () => {
-    const component = shallow(<OptionsView />).getElement()
-    expect(component).toMatchSnapshot()
+  it('should be rendered correctly', async () => {
+    const { container } = render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <OptionsView />
+        </Provider>
+      </BrowserRouter>
+    )
+    await waitFor(() => null, { container })
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx b/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
index 55ada4892d7ed895434fbd064e9bec9021e7b524..55ca9b3317616456a3cd8c49c0f3cbbb1dd453e6 100644
--- a/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core'
+import { render } from '@testing-library/react'
 import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as profileActions from 'store/profile/profile.slice'
@@ -31,12 +31,12 @@ describe('UnSubscribe component', () => {
   })
 
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <UnSubscribeView />
       </Provider>
     )
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
   it('should click on button and deactivate report', () => {
diff --git a/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
index 1a68fd6dd9d04b5d28f887b333b87d11c2c83cba..85efc0cad5e2d2420047f871af41b2bef8bb7a84 100644
--- a/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
+++ b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
@@ -1,210 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UnSubscribe component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <UnSubscribeView>
-    <mock-cozybar
-      titleKey="common.title_analysis"
-    />
-    <mock-header
-      desktopTitleKey="common.title_analysis"
-      setHeaderHeight={[Function]}
-    />
-    <mock-content
-      heightOffset={0}
+<div>
+  <mock-cozybar
+    titlekey="common.title_analysis"
+  />
+  <mock-header
+    desktoptitlekey="common.title_analysis"
+  />
+  <mock-content
+    heightoffset="0"
+  >
+    <div
+      class="unsubscribe-container"
     >
+      <svg
+        aria-hidden="true"
+        class="profile-icon styles__icon___23x3R"
+        height="250"
+        width="250"
+      >
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
       <div
-        className="unsubscribe-container"
+        class="text-20-bold head"
       >
-        <StyledIcon
-          className="profile-icon"
-          icon="test-file-stub"
-          size={250}
-        >
-          <Icon
-            aria-hidden={true}
-            className="profile-icon"
-            icon="test-file-stub"
-            size={250}
-            spin={false}
-          >
-            <Component
-              aria-hidden={true}
-              className="profile-icon styles__icon___23x3R"
-              height={250}
-              style={Object {}}
-              width={250}
-            >
-              <svg
-                aria-hidden={true}
-                className="profile-icon styles__icon___23x3R"
-                height={250}
-                style={Object {}}
-                width={250}
-              >
-                <use
-                  xlinkHref="#test-file-stub"
-                />
-              </svg>
-            </Component>
-          </Icon>
-        </StyledIcon>
-        <div
-          className="text-20-bold head"
-        >
-          unsubscribe.title
-        </div>
-        <div
-          className="text-16-normal question"
-        >
-          unsubscribe.content
-        </div>
-        <WithStyles(ForwardRef(Button))
-          aria-label="unsubscribe.button_accessibility"
-          classes={
-            Object {
-              "label": "text-18-bold",
-              "root": "btnPrimary",
-            }
-          }
-          onClick={[Function]}
-          variant="contained"
-        >
-          <ForwardRef(Button)
-            aria-label="unsubscribe.button_accessibility"
-            classes={
-              Object {
-                "colorInherit": "MuiButton-colorInherit",
-                "contained": "MuiButton-contained",
-                "containedPrimary": "MuiButton-containedPrimary",
-                "containedSecondary": "MuiButton-containedSecondary",
-                "containedSizeLarge": "MuiButton-containedSizeLarge",
-                "containedSizeSmall": "MuiButton-containedSizeSmall",
-                "disableElevation": "MuiButton-disableElevation",
-                "disabled": "Mui-disabled",
-                "endIcon": "MuiButton-endIcon",
-                "focusVisible": "Mui-focusVisible",
-                "fullWidth": "MuiButton-fullWidth",
-                "iconSizeLarge": "MuiButton-iconSizeLarge",
-                "iconSizeMedium": "MuiButton-iconSizeMedium",
-                "iconSizeSmall": "MuiButton-iconSizeSmall",
-                "label": "MuiButton-label text-18-bold",
-                "outlined": "MuiButton-outlined",
-                "outlinedPrimary": "MuiButton-outlinedPrimary",
-                "outlinedSecondary": "MuiButton-outlinedSecondary",
-                "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                "root": "MuiButton-root btnPrimary",
-                "sizeLarge": "MuiButton-sizeLarge",
-                "sizeSmall": "MuiButton-sizeSmall",
-                "startIcon": "MuiButton-startIcon",
-                "text": "MuiButton-text",
-                "textPrimary": "MuiButton-textPrimary",
-                "textSecondary": "MuiButton-textSecondary",
-                "textSizeLarge": "MuiButton-textSizeLarge",
-                "textSizeSmall": "MuiButton-textSizeSmall",
-              }
-            }
-            onClick={[Function]}
-            variant="contained"
-          >
-            <WithStyles(ForwardRef(ButtonBase))
-              aria-label="unsubscribe.button_accessibility"
-              className="MuiButton-root btnPrimary MuiButton-contained"
-              component="button"
-              disabled={false}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
-            >
-              <ForwardRef(ButtonBase)
-                aria-label="unsubscribe.button_accessibility"
-                className="MuiButton-root btnPrimary MuiButton-contained"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
-                component="button"
-                disabled={false}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <button
-                  aria-label="unsubscribe.button_accessibility"
-                  className="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained"
-                  disabled={false}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  <span
-                    className="MuiButton-label text-18-bold"
-                  >
-                    unsubscribe.button_text
-                  </span>
-                  <WithStyles(memo)
-                    center={false}
-                  >
-                    <ForwardRef(TouchRipple)
-                      center={false}
-                      classes={
-                        Object {
-                          "child": "MuiTouchRipple-child",
-                          "childLeaving": "MuiTouchRipple-childLeaving",
-                          "childPulsate": "MuiTouchRipple-childPulsate",
-                          "ripple": "MuiTouchRipple-ripple",
-                          "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                          "rippleVisible": "MuiTouchRipple-rippleVisible",
-                          "root": "MuiTouchRipple-root",
-                        }
-                      }
-                    >
-                      <span
-                        className="MuiTouchRipple-root"
-                      >
-                        <TransitionGroup
-                          childFactory={[Function]}
-                          component={null}
-                          exit={true}
-                        />
-                      </span>
-                    </ForwardRef(TouchRipple)>
-                  </WithStyles(memo)>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(Button)>
-        </WithStyles(ForwardRef(Button))>
+        unsubscribe.title
       </div>
-    </mock-content>
-  </UnSubscribeView>
-</Provider>
+      <div
+        class="text-16-normal question"
+      >
+        unsubscribe.content
+      </div>
+      <button
+        aria-label="unsubscribe.button_accessibility"
+        class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label text-18-bold"
+        >
+          unsubscribe.button_text
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </mock-content>
+</div>
 `;
diff --git a/src/components/Options/Version/Version.spec.tsx b/src/components/Options/Version/Version.spec.tsx
index 9165d73f9f35a54bc3904d362a722665e2480917..0c8640bf891c4e5f4cbea7bb17b604f204a7ead9 100644
--- a/src/components/Options/Version/Version.spec.tsx
+++ b/src/components/Options/Version/Version.spec.tsx
@@ -1,10 +1,10 @@
+import { render } from '@testing-library/react'
 import Version from 'components/Options/Version/Version'
-import { shallow } from 'enzyme'
 import React from 'react'
 
 describe('Version component', () => {
   it('should be rendered correctly', () => {
-    const component = shallow(<Version />).getElement()
-    expect(component).toMatchSnapshot()
+    const { container } = render(<Version />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap b/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap
index 05ce42fbf8a684a3bd93073e63915d9c9211dbd9..9cb6b48f25e3201cb5765c987748e6d1dd175fa8 100644
--- a/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap
+++ b/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Version component should be rendered correctly 1`] = `
-<div
-  className="version-root text-14-normal"
->
-  v 0.0.0
+<div>
+  <div
+    class="version-root text-14-normal"
+  >
+    v 0.0.0
+  </div>
 </div>
 `;
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 5417b10551f0928cbf257528d9c345106e34b077..f4e64582fee87f31407a828cb43e6fc24141d170 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -1,34 +1,399 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OptionsView component should be rendered correctly 1`] = `
-<React.Fragment>
+<div>
   <mock-cozybar
-    titleKey="common.title_options"
+    titlekey="common.title_options"
   />
   <mock-header
-    desktopTitleKey="common.title_options"
-    setHeaderHeight={[Function]}
+    desktoptitlekey="common.title_options"
   />
   <mock-content
-    heightOffset={0}
+    heightoffset="0"
   >
-    <ProfileTypeOptions />
-    <ExportData />
-    <ReportOptions />
-    <HelpLink />
-    <LegalNoticeLink />
-    <GCULink />
-    <Accessibility />
-    <MatomoOptOut />
     <div
-      className="parameters-logos"
+      class="profile-type-root"
+    >
+      <div
+        class="profile-type-content"
+      >
+        <div
+          class="head text-16-normal-uppercase"
+        >
+          profile_type.title_profile
+        </div>
+        <button
+          class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+          >
+            <svg
+              aria-hidden="true"
+              class="profile-icon styles__icon___23x3R"
+              height="42"
+              width="42"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <span
+              class="link-label text-16-normal"
+            >
+              profile_type.read_profile
+            </span>
+          </div>
+          <span
+            class="MuiCardActionArea-focusHighlight"
+          />
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="export-option-root"
+    >
+      <div
+        class="export-option-content"
+      >
+        <div
+          class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+        >
+          <div
+            aria-disabled="false"
+            aria-expanded="false"
+            aria-label="profile_type.accessibility.button_toggle_export"
+            class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiAccordionSummary-content expansion-panel-content"
+            >
+              <svg
+                class="export-icon styles__icon___23x3R"
+                height="42"
+                width="42"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+              <div
+                class="text-16-normal accordion-title"
+              >
+                export.title_export
+              </div>
+            </div>
+            <div
+              aria-disabled="false"
+              aria-hidden="true"
+              class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <svg
+                  class="accordion-icon styles__icon___23x3R"
+                  height="16"
+                  width="16"
+                >
+                  <use
+                    xlink:href="#test-file-stub"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </div>
+          </div>
+          <div
+            class="MuiCollapse-root MuiCollapse-hidden"
+            style="min-height: 0px;"
+          >
+            <div
+              class="MuiCollapse-wrapper"
+            >
+              <div
+                class="MuiCollapse-wrapperInner"
+              >
+                <div
+                  role="region"
+                >
+                  <div
+                    class="MuiAccordionDetails-root expansion-panel-details"
+                  >
+                    <div
+                      class="text-15-normal grey"
+                    >
+                      export.text1
+                    </div>
+                    <div
+                      class="text-16-bold"
+                    >
+                      export.fluid_select
+                    </div>
+                    <div
+                      class="text-15-normal grey"
+                    >
+                      export.no_data
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="report-option-root"
+    >
+      <div
+        class="report-option-content"
+      >
+        <div
+          class="head text-16-normal-uppercase"
+        >
+          profile.report.title_bilan
+        </div>
+        <div
+          class="switch-container-bilan"
+        >
+          <span
+            class="switch-label text-16-normal"
+          >
+            profile.report.switch_label_bilan
+          </span>
+          <div
+            class="button-container"
+          >
+            <button
+              aria-label="unsubscribe.button_accessibility"
+              class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label text-18-bold"
+              >
+                profile.report.deactivate
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="help-root"
+    >
+      <div
+        class="help-content"
+      >
+        <div
+          class="help-header text-16-normal-uppercase"
+        >
+          help.title_help
+        </div>
+        <a
+          class="MuiTypography-root MuiLink-root MuiLink-underlineHover help-card-link MuiTypography-colorPrimary"
+        >
+          <div
+            class="card"
+          >
+            <div
+              class="help-card"
+            >
+              <div
+                class="help-card-content"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="help-card-content-icon styles__icon___23x3R"
+                  height="42"
+                  width="42"
+                >
+                  <use
+                    xlink:href="#test-file-stub"
+                  />
+                </svg>
+                <div
+                  class="help-card-content-title"
+                >
+                  help.read_help
+                </div>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+    <div
+      class="legal-notice-root"
+    >
+      <div
+        class="legal-notice-content"
+      >
+        <div
+          class="legal-notice-header text-16-normal-uppercase"
+        >
+          legal.title_legal
+        </div>
+        <a
+          class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
+          href="/options/legalnotice"
+        >
+          <div
+            class="card"
+          >
+            <div
+              class="legal-notice-card"
+            >
+              <div
+                class="legal-notice-card-content"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="legal-notice-card-content-icon styles__icon___23x3R"
+                  height="42"
+                  width="42"
+                >
+                  <use
+                    xlink:href="#test-file-stub"
+                  />
+                </svg>
+                <div
+                  class="legal-notice-card-content-title"
+                >
+                  legal.read_legal
+                </div>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+    <div
+      class="gcu-link-root"
+    >
+      <div
+        class="gcu-link-content"
+      >
+        <a
+          class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
+          href="/options/gcu"
+        >
+          <div
+            class="card"
+          >
+            <div
+              class="gcu-link-card"
+            >
+              <div
+                class="gcu-link-card-content"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="gcu-link-card-content-icon styles__icon___23x3R"
+                  height="42"
+                  width="42"
+                >
+                  <use
+                    xlink:href="#test-file-stub"
+                  />
+                </svg>
+                <div
+                  class="gcu-link-card-content-title"
+                >
+                  common.title_gcu
+                </div>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+    <div
+      class="gcu-link-root"
+    >
+      <div
+        class="gcu-link-content"
+      >
+        <a
+          class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
+          href="https://ecolyo.com/accessibilite.html"
+          target="_blank"
+        >
+          <div
+            class="card"
+          >
+            <div
+              class="gcu-link-card"
+            >
+              <div
+                class="gcu-link-card-content"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="gcu-link-card-content-icon styles__icon___23x3R"
+                  height="42"
+                  width="42"
+                >
+                  <use
+                    xlink:href="#test-file-stub"
+                  />
+                </svg>
+                <div
+                  class="gcu-link-card-content-title"
+                >
+                  common.title_accessibility
+                </div>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+    <div
+      class="matomo-opt-out-container"
+    >
+      <div
+        class="matomo-opt-out"
+      >
+        <div
+          class="opt-out-header text-16-normal-uppercase"
+        >
+          matomo.matomo_title
+        </div>
+        <iframe
+          src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
+          style="height: 250px;"
+          title="opt-out"
+        />
+      </div>
+    </div>
+    <div
+      class="parameters-logos"
     >
       <img
         alt="ensemble de logos"
         src="test-file-stub"
       />
     </div>
-    <Version />
+    <div
+      class="version-root text-14-normal"
+    >
+      v 0.0.0
+    </div>
   </mock-content>
-</React.Fragment>
+</div>
 `;
diff --git a/src/components/Splash/SplashRoot.spec.tsx b/src/components/Splash/SplashRoot.spec.tsx
index 55bce081c191a794a3c82d34dafa55c0c344c466..0f27dbc19a450c5a76d97d1045eb8d92d61ab574 100644
--- a/src/components/Splash/SplashRoot.spec.tsx
+++ b/src/components/Splash/SplashRoot.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -14,13 +13,12 @@ jest.mock('@sentry/react', () => ({
 describe('SplashRoot component', () => {
   it('should be rendered correctly', async () => {
     const store = createMockEcolyoStore()
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <SplashRoot>children</SplashRoot>
       </Provider>
     )
-    // TODO we should waitForComponent
-    // await waitForComponentToPaint(component)
-    expect(toJson(component)).toMatchSnapshot()
+
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Splash/SplashScreen.spec.tsx b/src/components/Splash/SplashScreen.spec.tsx
index 2277171e630a2a725a43747ee81bd56cadb6384b..a8c692fbc40679130cd74dfd6eb681e79e4f67ed 100644
--- a/src/components/Splash/SplashScreen.spec.tsx
+++ b/src/components/Splash/SplashScreen.spec.tsx
@@ -1,12 +1,11 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
 import { InitSteps } from 'models/initialisationSteps.model'
 import React from 'react'
 import SplashScreen from './SplashScreen'
 
 describe('SplashScreen component', () => {
   it('should be rendered correctly', () => {
-    const component = mount(<SplashScreen initStep={InitSteps.CONSENT} />)
-    expect(toJson(component)).toMatchSnapshot()
+    const { container } = render(<SplashScreen initStep={InitSteps.CONSENT} />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Splash/SplashScreenError.spec.tsx b/src/components/Splash/SplashScreenError.spec.tsx
index 4f44a4380beb5805ea68519d93de19f16747277b..fdc4e5fa594aaaf15732ef0aee420bf1b119dc23 100644
--- a/src/components/Splash/SplashScreenError.spec.tsx
+++ b/src/components/Splash/SplashScreenError.spec.tsx
@@ -1,7 +1,5 @@
 import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import { InitStepsErrors } from 'models/initialisationSteps.model'
 import React from 'react'
 import SplashScreenError from './SplashScreenError'
@@ -19,10 +17,10 @@ describe('SplashScreenError component', () => {
     window.location.reload = reload
   })
   it('should be rendered correctly', () => {
-    const component = mount(
+    const { container } = render(
       <SplashScreenError error={InitStepsErrors.CONSENT_ERROR} />
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
   it('should reload the page', async () => {
     render(<SplashScreenError error={InitStepsErrors.CONSENT_ERROR} />)
diff --git a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
index e08db15efcfc96775a4cb572766f96015ae5e8b5..b0bdc3fbd8f3fbb61a55b0fb16254858ed550f59 100644
--- a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
@@ -1,76 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SplashRoot component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <SplashRoot>
+<div>
+  <div
+    class="splash-root"
+    style="transition-duration: 1s;"
+  >
     <div
-      className="splash-root"
-      style={
-        Object {
-          "transitionDuration": "1s",
-        }
-      }
+      class="splash-content"
     >
-      <SplashScreen
-        initStep={1}
+      <div
+        class="splash-loader"
       >
+        <img
+          alt="Chargement"
+          src="test-file-stub"
+        />
+        <span>
+          Ecolyo
+        </span>
         <div
-          className="splash-content"
+          class="splash-progress"
         >
           <div
-            className="splash-loader"
+            class="splash-progress-bar-container"
           >
-            <img
-              alt="Chargement"
-              src="test-file-stub"
-            />
-            <span>
-              Ecolyo
-            </span>
             <div
-              className="splash-progress"
-            >
-              <div
-                className="splash-progress-bar-container"
-              >
-                <div
-                  className="splash-progress-bar-content"
-                  style={
-                    Object {
-                      "left": "-73%",
-                    }
-                  }
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className="step-label text-18-normal"
-          >
-            splashscreen.step.1
-          </div>
-          <div
-            className="splash-logos-container"
-          >
-            <img
-              alt="ensemble de logos"
-              src="test-file-stub"
+              class="splash-progress-bar-content"
+              style="left: -73%;"
             />
           </div>
         </div>
-      </SplashScreen>
+      </div>
+      <div
+        class="step-label text-18-normal"
+      >
+        splashscreen.step.1
+      </div>
+      <div
+        class="splash-logos-container"
+      >
+        <img
+          alt="ensemble de logos"
+          src="test-file-stub"
+        />
+      </div>
     </div>
-  </SplashRoot>
-</Provider>
+  </div>
+</div>
 `;
diff --git a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
index 089fbbee784a09ee4bde93983143a772877d50d4..ac994b7876cf9d83b80f0744e268852520b9c52b 100644
--- a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SplashScreen component should be rendered correctly 1`] = `
-<SplashScreen
-  initStep={1}
->
+<div>
   <div
-    className="splash-content"
+    class="splash-content"
   >
     <div
-      className="splash-loader"
+      class="splash-loader"
     >
       <img
         alt="Chargement"
@@ -18,29 +16,25 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
         Ecolyo
       </span>
       <div
-        className="splash-progress"
+        class="splash-progress"
       >
         <div
-          className="splash-progress-bar-container"
+          class="splash-progress-bar-container"
         >
           <div
-            className="splash-progress-bar-content"
-            style={
-              Object {
-                "left": "-73%",
-              }
-            }
+            class="splash-progress-bar-content"
+            style="left: -73%;"
           />
         </div>
       </div>
     </div>
     <div
-      className="step-label text-18-normal"
+      class="step-label text-18-normal"
     >
       splashscreen.step.1
     </div>
     <div
-      className="splash-logos-container"
+      class="splash-logos-container"
     >
       <img
         alt="ensemble de logos"
@@ -48,5 +42,5 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
       />
     </div>
   </div>
-</SplashScreen>
+</div>
 `;
diff --git a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
index 21c1c6a7cfd23f56789316554531f6aec30b74eb..d3da35f446a95fc41b62bc79dac78848a1b8d428 100644
--- a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
@@ -1,193 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SplashScreenError component should be rendered correctly 1`] = `
-<SplashScreenError
-  error="consent_error"
->
+<div>
   <div
-    className="splash-content"
+    class="splash-content"
   >
     <div
-      className="splash-loader"
+      class="splash-loader"
     >
-      <StyledIcon
-        className="error"
-        icon="test-file-stub"
-        size={130}
+      <svg
+        aria-hidden="true"
+        class="error styles__icon___23x3R"
+        height="130"
+        width="130"
       >
-        <Icon
-          aria-hidden={true}
-          className="error"
-          icon="test-file-stub"
-          size={130}
-          spin={false}
-        >
-          <Component
-            aria-hidden={true}
-            className="error styles__icon___23x3R"
-            height={130}
-            style={Object {}}
-            width={130}
-          >
-            <svg
-              aria-hidden={true}
-              className="error styles__icon___23x3R"
-              height={130}
-              style={Object {}}
-              width={130}
-            >
-              <use
-                xlinkHref="#test-file-stub"
-              />
-            </svg>
-          </Component>
-        </Icon>
-      </StyledIcon>
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
       <span>
         Ecolyo
       </span>
       <div
-        className="splash-error-text text-20-bold"
+        class="splash-error-text text-20-bold"
       >
         splashscreen.error_loading
       </div>
       <div
-        className="splash-error-text text-18-normal"
+        class="splash-error-text text-18-normal"
       >
         splashscreen.consent_error
       </div>
     </div>
   </div>
   <div
-    className="splash-footer"
+    class="splash-footer"
   >
-    <WithStyles(ForwardRef(Button))
+    <button
       aria-label="splashscreen.accessibility.button_reload"
-      className="btnPrimary splash-footer-button"
-      onClick={[Function]}
+      class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary splash-footer-button"
+      tabindex="0"
+      type="button"
     >
-      <ForwardRef(Button)
-        aria-label="splashscreen.accessibility.button_reload"
-        className="btnPrimary splash-footer-button"
-        classes={
-          Object {
-            "colorInherit": "MuiButton-colorInherit",
-            "contained": "MuiButton-contained",
-            "containedPrimary": "MuiButton-containedPrimary",
-            "containedSecondary": "MuiButton-containedSecondary",
-            "containedSizeLarge": "MuiButton-containedSizeLarge",
-            "containedSizeSmall": "MuiButton-containedSizeSmall",
-            "disableElevation": "MuiButton-disableElevation",
-            "disabled": "Mui-disabled",
-            "endIcon": "MuiButton-endIcon",
-            "focusVisible": "Mui-focusVisible",
-            "fullWidth": "MuiButton-fullWidth",
-            "iconSizeLarge": "MuiButton-iconSizeLarge",
-            "iconSizeMedium": "MuiButton-iconSizeMedium",
-            "iconSizeSmall": "MuiButton-iconSizeSmall",
-            "label": "MuiButton-label",
-            "outlined": "MuiButton-outlined",
-            "outlinedPrimary": "MuiButton-outlinedPrimary",
-            "outlinedSecondary": "MuiButton-outlinedSecondary",
-            "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-            "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-            "root": "MuiButton-root",
-            "sizeLarge": "MuiButton-sizeLarge",
-            "sizeSmall": "MuiButton-sizeSmall",
-            "startIcon": "MuiButton-startIcon",
-            "text": "MuiButton-text",
-            "textPrimary": "MuiButton-textPrimary",
-            "textSecondary": "MuiButton-textSecondary",
-            "textSizeLarge": "MuiButton-textSizeLarge",
-            "textSizeSmall": "MuiButton-textSizeSmall",
-          }
-        }
-        onClick={[Function]}
+      <span
+        class="MuiButton-label"
       >
-        <WithStyles(ForwardRef(ButtonBase))
-          aria-label="splashscreen.accessibility.button_reload"
-          className="MuiButton-root MuiButton-text btnPrimary splash-footer-button"
-          component="button"
-          disabled={false}
-          focusRipple={true}
-          focusVisibleClassName="Mui-focusVisible"
-          onClick={[Function]}
-          type="button"
-        >
-          <ForwardRef(ButtonBase)
-            aria-label="splashscreen.accessibility.button_reload"
-            className="MuiButton-root MuiButton-text btnPrimary splash-footer-button"
-            classes={
-              Object {
-                "disabled": "Mui-disabled",
-                "focusVisible": "Mui-focusVisible",
-                "root": "MuiButtonBase-root",
-              }
-            }
-            component="button"
-            disabled={false}
-            focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
-            onClick={[Function]}
-            type="button"
-          >
-            <button
-              aria-label="splashscreen.accessibility.button_reload"
-              className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary splash-footer-button"
-              disabled={false}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onDragLeave={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-              tabIndex={0}
-              type="button"
-            >
-              <span
-                className="MuiButton-label"
-              >
-                splashscreen.button_reload
-              </span>
-              <WithStyles(memo)
-                center={false}
-              >
-                <ForwardRef(TouchRipple)
-                  center={false}
-                  classes={
-                    Object {
-                      "child": "MuiTouchRipple-child",
-                      "childLeaving": "MuiTouchRipple-childLeaving",
-                      "childPulsate": "MuiTouchRipple-childPulsate",
-                      "ripple": "MuiTouchRipple-ripple",
-                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                      "root": "MuiTouchRipple-root",
-                    }
-                  }
-                >
-                  <span
-                    className="MuiTouchRipple-root"
-                  >
-                    <TransitionGroup
-                      childFactory={[Function]}
-                      component={null}
-                      exit={true}
-                    />
-                  </span>
-                </ForwardRef(TouchRipple)>
-              </WithStyles(memo)>
-            </button>
-          </ForwardRef(ButtonBase)>
-        </WithStyles(ForwardRef(ButtonBase))>
-      </ForwardRef(Button)>
-    </WithStyles(ForwardRef(Button))>
+        splashscreen.button_reload
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
   </div>
-</SplashScreenError>
+</div>
 `;
diff --git a/src/components/Terms/CGUModal.spec.tsx b/src/components/Terms/CGUModal.spec.tsx
index 8e54916bc82c6fc57c15e19143b5445b98707f21..12f008ce0bf8e2ba5fe63720411c9b34b42be720 100644
--- a/src/components/Terms/CGUModal.spec.tsx
+++ b/src/components/Terms/CGUModal.spec.tsx
@@ -1,13 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
 import React from 'react'
 import CGUModal from './CGUModal'
 
 describe('CGUModal component', () => {
   it('should be rendered correctly', () => {
-    const component = mount(
+    const { baseElement } = render(
       <CGUModal open={true} handleCloseClick={jest.fn()} />
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 })
diff --git a/src/components/Terms/DataShareConsentContent.spec.tsx b/src/components/Terms/DataShareConsentContent.spec.tsx
index e2653b92ad8d0b25428984fbb73461a13912c05b..d2e1baab73a768707a7f3ebd2a12facf01663965 100644
--- a/src/components/Terms/DataShareConsentContent.spec.tsx
+++ b/src/components/Terms/DataShareConsentContent.spec.tsx
@@ -1,5 +1,4 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -10,22 +9,22 @@ describe('DataShareConsentContent component', () => {
     const store = createMockEcolyoStore({
       profile: { isFirstConnection: true },
     })
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <DataShareConsentContent />
       </Provider>
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
   it('should be rendered correctly without first connexion text', () => {
     const store = createMockEcolyoStore({
       profile: { isFirstConnection: false },
     })
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <DataShareConsentContent />
       </Provider>
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Terms/LegalNoticeModal.spec.tsx b/src/components/Terms/LegalNoticeModal.spec.tsx
index 1c8144711c383bebe7ab3f60a0cea09f67986d5f..227d9c68eeff921e7e8972c229f40e4bb5dbb07e 100644
--- a/src/components/Terms/LegalNoticeModal.spec.tsx
+++ b/src/components/Terms/LegalNoticeModal.spec.tsx
@@ -1,13 +1,12 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
 import React from 'react'
 import LegalNoticeModal from './LegalNoticeModal'
 
 describe('LegalNoticeModal component', () => {
   it('should be rendered correctly', () => {
-    const component = mount(
+    const { baseElement } = render(
       <LegalNoticeModal open={true} handleCloseClick={jest.fn()} />
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
   })
 })
diff --git a/src/components/Terms/MinorUpdateContent.spec.tsx b/src/components/Terms/MinorUpdateContent.spec.tsx
index 01cc232537a5da4339ab3337eeb4541942cfac08..f6552d6cbb29346e44e99a9f305060375c91c26f 100644
--- a/src/components/Terms/MinorUpdateContent.spec.tsx
+++ b/src/components/Terms/MinorUpdateContent.spec.tsx
@@ -1,11 +1,10 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render } from '@testing-library/react'
 import React from 'react'
 import MinorUpdateContent from './MinorUpdateContent'
 
 describe('Minor update content component', () => {
   it('should be rendered correctly', () => {
-    const component = mount(<MinorUpdateContent />)
-    expect(toJson(component)).toMatchSnapshot()
+    const { container } = render(<MinorUpdateContent />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Terms/TermsView.spec.tsx b/src/components/Terms/TermsView.spec.tsx
index 970a43b475a84c35eea3d0473010e62ccc73649f..d5206d463f413f6f989b0453f49dc707c5a8e390 100644
--- a/src/components/Terms/TermsView.spec.tsx
+++ b/src/components/Terms/TermsView.spec.tsx
@@ -1,7 +1,5 @@
 import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as storeHooks from 'store/hooks'
@@ -34,12 +32,12 @@ describe('TermsView component', () => {
   })
 
   it('should be rendered correctly', () => {
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <TermsView />
       </Provider>
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
   it('should be unable to click "validate" button first then enable checkboxes and valid consent', async () => {
     mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm)
diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
index 15dfa6bd81c549f3807acc75c8bbcc16946db8f7..a2fff83b060e8eb574459d9e44ff77973dadaa83 100644
--- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
@@ -1,1491 +1,360 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CGUModal component should be rendered correctly 1`] = `
-<CGUModal
-  handleCloseClick={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        feedback.accessibility.window_title
-                      </div>
-                      <button
-                        aria-label="feedback.accessibility.button_close"
-                        class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label"
-                        >
-                          <svg
-                            class="styles__icon___23x3R"
-                            height="16"
-                            width="16"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                      <div
-                        class="gcu-content-root"
-                      >
-                        <div
-                          class="gcu-content-wrapper"
-                        >
-                          <p
-                            class="text-14-normal version"
-                          >
-                            gcu.version
-                          </p>
-                          <div
-                            class="gcu-content-part-title text-15-normal"
-                          >
-                            gcu.content.title1
-                          </div>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part1_1
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part1_2
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part1_3
-                          </p>
-                          <div
-                            class="gcu-content-part-title text-15-normal"
-                          >
-                            gcu.content.title2
-                          </div>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part2_1
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part2_2
-                          </p>
-                          <ul
-                            class="text-14-normal"
-                          >
-                            <li>
-                              gcu.content.part2_2_list1
-                            </li>
-                            <li>
-                              gcu.content.part2_2_list2
-                            </li>
-                            <li>
-                              gcu.content.part2_2_list3
-                            </li>
-                          </ul>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part2_3
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part2_4
-                          </p>
-                          <div
-                            class="gcu-content-part-title text-15-normal"
-                          >
-                            gcu.content.title3
-                          </div>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part3_1
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part3_2
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part3_3
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part3_4
-                          </p>
-                          <div
-                            class="gcu-content-part-title text-15-normal"
-                          >
-                            gcu.content.title4
-                          </div>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part4_1
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part4_2
-                          </p>
-                          <div
-                            class="gcu-content-part-title text-15-normal"
-                          >
-                            gcu.content.title5
-                          </div>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part5_1
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part5_2
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part5_3
-                          </p>
-                          <ul
-                            class="text-14-normal"
-                          >
-                            <li>
-                              gcu.content.part5_3_list1
-                            </li>
-                            <li>
-                              gcu.content.part5_3_list2
-                            </li>
-                          </ul>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part5_4
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part5_5
-                          </p>
-                          <div
-                            class="gcu-content-part-title text-15-normal"
-                          >
-                            gcu.content.title6
-                          </div>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part6_1
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part6_2
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part6_3
-                          </p>
-                          <ul
-                            class="text-14-normal"
-                          >
-                            <li>
-                              gcu.content.part6_3_list1
-                            </li>
-                            <li>
-                              gcu.content.part6_3_list2
-                            </li>
-                            <li>
-                              gcu.content.part6_3_list3
-                            </li>
-                          </ul>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part6_4
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part6_5
-                          </p>
-                          <div
-                            class="gcu-content-part-title text-15-normal"
-                          >
-                            gcu.content.title8
-                          </div>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part8_1
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            gcu.content.part8_2
-                          </p>
-                          <div
-                            class="gcu-content-part-title text-15-normal"
-                          >
-                            gcu.content.title9
-                          </div>
-                          <p
-                            class="text-14-normal"
-                          >
-                            <span
-                              class="text-14-bold"
-                            >
-                              gcu.content.part9_1_title
-                            </span>
-                            <span>
-                              gcu.content.part9_1_content
-                            </span>
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            <span
-                              class="text-14-bold"
-                            >
-                              gcu.content.part9_2_title
-                            </span>
-                            <span>
-                              gcu.content.part9_2_content
-                            </span>
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            <span
-                              class="text-14-bold"
-                            >
-                              gcu.content.part9_3_title
-                            </span>
-                            <span>
-                              gcu.content.part9_3_content
-                            </span>
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            <span
-                              class="text-14-bold"
-                            >
-                              gcu.content.part9_4_title
-                            </span>
-                            <span>
-                              gcu.content.part9_4_content
-                            </span>
-                          </p>
-                          <p
-                            class="text-14-normal"
-                          >
-                            <span
-                              class="text-14-bold"
-                            >
-                              gcu.content.part9_5_title
-                            </span>
-                            <span>
-                              gcu.content.part9_5_content
-                            </span>
-                          </p>
-                        </div>
-                      </div>
-                      <button
-                        aria-label="gcu_modal.accessibility.button_accept"
-                        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label"
-                        >
-                          legal.accessibility.button_close
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          feedback.accessibility.window_title
+        </div>
+        <button
+          aria-label="feedback.accessibility.button_close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="gcu-content-root"
+        >
+          <div
+            class="gcu-content-wrapper"
           >
+            <p
+              class="text-14-normal version"
+            >
+              gcu.version
+            </p>
+            <div
+              class="gcu-content-part-title text-15-normal"
+            >
+              gcu.content.title1
+            </div>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part1_1
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part1_2
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part1_3
+            </p>
+            <div
+              class="gcu-content-part-title text-15-normal"
+            >
+              gcu.content.title2
+            </div>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part2_1
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part2_2
+            </p>
+            <ul
+              class="text-14-normal"
+            >
+              <li>
+                gcu.content.part2_2_list1
+              </li>
+              <li>
+                gcu.content.part2_2_list2
+              </li>
+              <li>
+                gcu.content.part2_2_list3
+              </li>
+            </ul>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part2_3
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part2_4
+            </p>
             <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+              class="gcu-content-part-title text-15-normal"
+            >
+              gcu.content.title3
+            </div>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part3_1
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part3_2
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part3_3
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part3_4
+            </p>
+            <div
+              class="gcu-content-part-title text-15-normal"
+            >
+              gcu.content.title4
+            </div>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part4_1
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part4_2
+            </p>
+            <div
+              class="gcu-content-part-title text-15-normal"
+            >
+              gcu.content.title5
+            </div>
+            <p
+              class="text-14-normal"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
+              gcu.content.part5_1
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part5_2
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part5_3
+            </p>
+            <ul
+              class="text-14-normal"
+            >
+              <li>
+                gcu.content.part5_3_list1
+              </li>
+              <li>
+                gcu.content.part5_3_list2
+              </li>
+            </ul>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part5_4
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part5_5
+            </p>
+            <div
+              class="gcu-content-part-title text-15-normal"
+            >
+              gcu.content.title6
+            </div>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part6_1
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part6_2
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part6_3
+            </p>
+            <ul
+              class="text-14-normal"
+            >
+              <li>
+                gcu.content.part6_3_list1
+              </li>
+              <li>
+                gcu.content.part6_3_list2
+              </li>
+              <li>
+                gcu.content.part6_3_list3
+              </li>
+            </ul>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part6_4
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part6_5
+            </p>
+            <div
+              class="gcu-content-part-title text-15-normal"
+            >
+              gcu.content.title8
+            </div>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part8_1
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              gcu.content.part8_2
+            </p>
+            <div
+              class="gcu-content-part-title text-15-normal"
+            >
+              gcu.content.title9
+            </div>
+            <p
+              class="text-14-normal"
+            >
+              <span
+                class="text-14-bold"
               >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
+                gcu.content.part9_1_title
+              </span>
+              <span>
+                gcu.content.part9_1_content
+              </span>
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              <span
+                class="text-14-bold"
               >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              feedback.accessibility.window_title
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-label="feedback.accessibility.button_close"
-                              className="modal-paper-close-button"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-label="feedback.accessibility.button_close"
-                                className="modal-paper-close-button"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="feedback.accessibility.button_close"
-                                  centerRipple={true}
-                                  className="MuiIconButton-root modal-paper-close-button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="feedback.accessibility.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <button
-                                      aria-label="feedback.accessibility.button_close"
-                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <Icon
-                                          icon="test-file-stub"
-                                          size={16}
-                                          spin={false}
-                                        >
-                                          <Component
-                                            className="styles__icon___23x3R"
-                                            height={16}
-                                            style={Object {}}
-                                            width={16}
-                                          >
-                                            <svg
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <use
-                                                xlinkHref="#test-file-stub"
-                                              />
-                                            </svg>
-                                          </Component>
-                                        </Icon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                            <GCUContent>
-                              <div
-                                className="gcu-content-root"
-                              >
-                                <div
-                                  className="gcu-content-wrapper"
-                                >
-                                  <p
-                                    className="text-14-normal version"
-                                  >
-                                    gcu.version
-                                  </p>
-                                  <div
-                                    className="gcu-content-part-title text-15-normal"
-                                  >
-                                    gcu.content.title1
-                                  </div>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part1_1
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part1_2
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part1_3
-                                  </p>
-                                  <div
-                                    className="gcu-content-part-title text-15-normal"
-                                  >
-                                    gcu.content.title2
-                                  </div>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part2_1
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part2_2
-                                  </p>
-                                  <ul
-                                    className="text-14-normal"
-                                  >
-                                    <li>
-                                      gcu.content.part2_2_list1
-                                    </li>
-                                    <li>
-                                      gcu.content.part2_2_list2
-                                    </li>
-                                    <li>
-                                      gcu.content.part2_2_list3
-                                    </li>
-                                  </ul>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part2_3
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part2_4
-                                  </p>
-                                  <div
-                                    className="gcu-content-part-title text-15-normal"
-                                  >
-                                    gcu.content.title3
-                                  </div>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part3_1
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part3_2
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part3_3
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part3_4
-                                  </p>
-                                  <div
-                                    className="gcu-content-part-title text-15-normal"
-                                  >
-                                    gcu.content.title4
-                                  </div>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part4_1
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "gcu.content.part4_2",
-                                      }
-                                    }
-                                  />
-                                  <div
-                                    className="gcu-content-part-title text-15-normal"
-                                  >
-                                    gcu.content.title5
-                                  </div>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part5_1
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part5_2
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part5_3
-                                  </p>
-                                  <ul
-                                    className="text-14-normal"
-                                  >
-                                    <li>
-                                      gcu.content.part5_3_list1
-                                    </li>
-                                    <li>
-                                      gcu.content.part5_3_list2
-                                    </li>
-                                  </ul>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part5_4
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part5_5
-                                  </p>
-                                  <div
-                                    className="gcu-content-part-title text-15-normal"
-                                  >
-                                    gcu.content.title6
-                                  </div>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part6_1
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part6_2
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part6_3
-                                  </p>
-                                  <ul
-                                    className="text-14-normal"
-                                  >
-                                    <li>
-                                      gcu.content.part6_3_list1
-                                    </li>
-                                    <li>
-                                      gcu.content.part6_3_list2
-                                    </li>
-                                    <li>
-                                      gcu.content.part6_3_list3
-                                    </li>
-                                  </ul>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part6_4
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part6_5
-                                  </p>
-                                  <div
-                                    className="gcu-content-part-title text-15-normal"
-                                  >
-                                    gcu.content.title8
-                                  </div>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    gcu.content.part8_1
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "gcu.content.part8_2",
-                                      }
-                                    }
-                                  />
-                                  <div
-                                    className="gcu-content-part-title text-15-normal"
-                                  >
-                                    gcu.content.title9
-                                  </div>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    <span
-                                      className="text-14-bold"
-                                    >
-                                      gcu.content.part9_1_title
-                                    </span>
-                                    <span>
-                                      gcu.content.part9_1_content
-                                    </span>
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    <span
-                                      className="text-14-bold"
-                                    >
-                                      gcu.content.part9_2_title
-                                    </span>
-                                    <span>
-                                      gcu.content.part9_2_content
-                                    </span>
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    <span
-                                      className="text-14-bold"
-                                    >
-                                      gcu.content.part9_3_title
-                                    </span>
-                                    <span>
-                                      gcu.content.part9_3_content
-                                    </span>
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    <span
-                                      className="text-14-bold"
-                                    >
-                                      gcu.content.part9_4_title
-                                    </span>
-                                    <span
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "gcu.content.part9_4_content",
-                                        }
-                                      }
-                                    />
-                                  </p>
-                                  <p
-                                    className="text-14-normal"
-                                  >
-                                    <span
-                                      className="text-14-bold"
-                                    >
-                                      gcu.content.part9_5_title
-                                    </span>
-                                    <span>
-                                      gcu.content.part9_5_content
-                                    </span>
-                                  </p>
-                                </div>
-                              </div>
-                            </GCUContent>
-                            <WithStyles(ForwardRef(Button))
-                              aria-label="gcu_modal.accessibility.button_accept"
-                              className="btnPrimary"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(Button)
-                                aria-label="gcu_modal.accessibility.button_accept"
-                                className="btnPrimary"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiButton-colorInherit",
-                                    "contained": "MuiButton-contained",
-                                    "containedPrimary": "MuiButton-containedPrimary",
-                                    "containedSecondary": "MuiButton-containedSecondary",
-                                    "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                    "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                    "disableElevation": "MuiButton-disableElevation",
-                                    "disabled": "Mui-disabled",
-                                    "endIcon": "MuiButton-endIcon",
-                                    "focusVisible": "Mui-focusVisible",
-                                    "fullWidth": "MuiButton-fullWidth",
-                                    "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                    "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                    "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                    "label": "MuiButton-label",
-                                    "outlined": "MuiButton-outlined",
-                                    "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                    "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                    "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                    "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                    "root": "MuiButton-root",
-                                    "sizeLarge": "MuiButton-sizeLarge",
-                                    "sizeSmall": "MuiButton-sizeSmall",
-                                    "startIcon": "MuiButton-startIcon",
-                                    "text": "MuiButton-text",
-                                    "textPrimary": "MuiButton-textPrimary",
-                                    "textSecondary": "MuiButton-textSecondary",
-                                    "textSizeLarge": "MuiButton-textSizeLarge",
-                                    "textSizeSmall": "MuiButton-textSizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="gcu_modal.accessibility.button_accept"
-                                  className="MuiButton-root MuiButton-text btnPrimary"
-                                  component="button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  focusVisibleClassName="Mui-focusVisible"
-                                  onClick={[MockFunction]}
-                                  type="button"
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="gcu_modal.accessibility.button_accept"
-                                    className="MuiButton-root MuiButton-text btnPrimary"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    component="button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    focusVisibleClassName="Mui-focusVisible"
-                                    onClick={[MockFunction]}
-                                    type="button"
-                                  >
-                                    <button
-                                      aria-label="gcu_modal.accessibility.button_accept"
-                                      className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiButton-label"
-                                      >
-                                        legal.accessibility.button_close
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={false}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={false}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(Button)>
-                            </WithStyles(ForwardRef(Button))>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
-            </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</CGUModal>
+                gcu.content.part9_2_title
+              </span>
+              <span>
+                gcu.content.part9_2_content
+              </span>
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              <span
+                class="text-14-bold"
+              >
+                gcu.content.part9_3_title
+              </span>
+              <span>
+                gcu.content.part9_3_content
+              </span>
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              <span
+                class="text-14-bold"
+              >
+                gcu.content.part9_4_title
+              </span>
+              <span>
+                gcu.content.part9_4_content
+              </span>
+            </p>
+            <p
+              class="text-14-normal"
+            >
+              <span
+                class="text-14-bold"
+              >
+                gcu.content.part9_5_title
+              </span>
+              <span>
+                gcu.content.part9_5_content
+              </span>
+            </p>
+          </div>
+        </div>
+        <button
+          aria-label="gcu_modal.accessibility.button_accept"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            legal.accessibility.button_close
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap b/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
index e73f9fe284542df8c5d93672bea9a157f7f20820..69141d0536a316b3162f78c838aab7612e51e4a4 100644
--- a/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
@@ -1,222 +1,190 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataShareConsentContent component should be rendered correctly with first connexion text 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <DataShareConsentContent>
+<div>
+  <div
+    class="dataShare-content-root"
+  >
     <div
-      className="dataShare-content-root"
+      class="dataShare-content-wrapper"
     >
-      <div
-        className="dataShare-content-wrapper"
+      <h1
+        class="dataShare-content-title text-22-normal"
       >
-        <h1
-          className="dataShare-content-title text-22-normal"
-        >
-          dataShare.title1
-        </h1>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part1
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part2
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part3
-        </p>
-        <ul
-          className="text-14-normal"
-        >
-          <li
-            className="text-14-normal"
-          >
-            dataShare.item1
-          </li>
-          <li
-            className="text-14-normal"
-          >
-            dataShare.item2
-          </li>
-          <li
-            className="text-14-normal"
-          >
-            dataShare.item3
-          </li>
-        </ul>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part4
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part5
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part6
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part7
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part8
-        </p>
-        <span
-          className="text-14-normal"
-        >
-          dataShare.part9
-        </span>
-        <span
-          className="text-14-normal"
-        >
-          dataShare.part10
-        </span>
-        <span
-          className="text-14-normal"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "dataShare.link1",
-            }
-          }
-        />
-      </div>
+        dataShare.title1
+      </h1>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part2
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part3
+      </p>
+      <ul
+        class="text-14-normal"
+      >
+        <li
+          class="text-14-normal"
+        >
+          dataShare.item1
+        </li>
+        <li
+          class="text-14-normal"
+        >
+          dataShare.item2
+        </li>
+        <li
+          class="text-14-normal"
+        >
+          dataShare.item3
+        </li>
+      </ul>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part4
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part5
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part6
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part7
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part8
+      </p>
+      <span
+        class="text-14-normal"
+      >
+        dataShare.part9
+      </span>
+      <span
+        class="text-14-normal"
+      >
+        dataShare.part10
+      </span>
+      <span
+        class="text-14-normal"
+      >
+        dataShare.link1
+      </span>
     </div>
-  </DataShareConsentContent>
-</Provider>
+  </div>
+</div>
 `;
 
 exports[`DataShareConsentContent component should be rendered correctly without first connexion text 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <DataShareConsentContent>
+<div>
+  <div
+    class="dataShare-content-root"
+  >
     <div
-      className="dataShare-content-root"
+      class="dataShare-content-wrapper"
     >
-      <div
-        className="dataShare-content-wrapper"
+      <h1
+        class="dataShare-content-title text-22-normal"
       >
-        <h1
-          className="dataShare-content-title text-22-normal"
-        >
-          dataShare.title1Update
-        </h1>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.title2Update
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part1
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part2
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part3
-        </p>
-        <ul
-          className="text-14-normal"
-        >
-          <li
-            className="text-14-normal"
-          >
-            dataShare.item1
-          </li>
-          <li
-            className="text-14-normal"
-          >
-            dataShare.item2
-          </li>
-          <li
-            className="text-14-normal"
-          >
-            dataShare.item3
-          </li>
-        </ul>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part4
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part5
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part6
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part7
-        </p>
-        <p
-          className="text-14-normal"
-        >
-          dataShare.part8
-        </p>
-        <span
-          className="text-14-normal"
-        >
-          dataShare.part9
-        </span>
-        <span
-          className="text-14-normal"
-        >
-          dataShare.part10
-        </span>
-        <span
-          className="text-14-normal"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "dataShare.link1",
-            }
-          }
-        />
-      </div>
+        dataShare.title1Update
+      </h1>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.title2Update
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part1
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part2
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part3
+      </p>
+      <ul
+        class="text-14-normal"
+      >
+        <li
+          class="text-14-normal"
+        >
+          dataShare.item1
+        </li>
+        <li
+          class="text-14-normal"
+        >
+          dataShare.item2
+        </li>
+        <li
+          class="text-14-normal"
+        >
+          dataShare.item3
+        </li>
+      </ul>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part4
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part5
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part6
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part7
+      </p>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.part8
+      </p>
+      <span
+        class="text-14-normal"
+      >
+        dataShare.part9
+      </span>
+      <span
+        class="text-14-normal"
+      >
+        dataShare.part10
+      </span>
+      <span
+        class="text-14-normal"
+      >
+        dataShare.link1
+      </span>
     </div>
-  </DataShareConsentContent>
-</Provider>
+  </div>
+</div>
 `;
diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
index 7cd02919bb5d52ad64990d63e0b46b3fa277412b..2f134b674a199fe9c243f1a07083daad1b0f2310 100644
--- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
@@ -1,1476 +1,346 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LegalNoticeModal component should be rendered correctly 1`] = `
-<LegalNoticeModal
-  handleCloseClick={[MockFunction]}
-  open={true}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper",
-        "root": "modal-root",
-      }
-    }
-    onClose={[MockFunction]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      onClose={[MockFunction]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={false}
-        onClose={[MockFunction]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        legal.title_legal
-                      </div>
-                      <button
-                        aria-label="feedback.accessibility.button_close"
-                        class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label"
-                        >
-                          <svg
-                            class="styles__icon___23x3R"
-                            height="16"
-                            width="16"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                      <div
-                        class="legal-notice-root"
-                      >
-                        <div
-                          class="legal-notice-content"
-                        >
-                          <p
-                            class="version"
-                          >
-                            legal.version
-                          </p>
-                          <p>
-                            legal.site
-                          </p>
-                          <p>
-                            legal.adress
-                          </p>
-                          <p>
-                            legal.phone
-                          </p>
-                          <p
-                            class="ln-contact"
-                          >
-                            legal.mail
-                          </p>
-                          <div
-                            class="text-16-normal"
-                          >
-                            <div
-                              class="legal-notice-oneline"
-                            >
-                              <span
-                                class="text-14-normal"
-                              >
-                                legal.p1b
-                              </span>
-                              legal.p1
-                            </div>
-                            <div
-                              class="legal-notice-oneline"
-                            >
-                              <span
-                                class="text-14-normal"
-                              >
-                                legal.p2b
-                              </span>
-                              legal.p2
-                            </div>
-                            <div
-                              class="legal-notice-oneline"
-                            >
-                              <span
-                                class="text-14-normal"
-                              >
-                                legal.p3b
-                              </span>
-                              legal.p3
-                            </div>
-                            <div
-                              class="legal-notice-oneline"
-                            >
-                              <span
-                                class="text-14-normal"
-                              >
-                                legal.p4b
-                              </span>
-                              legal.p4
-                            </div>
-                            <div
-                              class="legal-notice-oneline"
-                            >
-                              <span
-                                class="text-14-normal"
-                              >
-                                legal.p5b
-                              </span>
-                              legal.p5
-                            </div>
-                            <div
-                              class="legal-notice-oneline"
-                            >
-                              <span
-                                class="text-14-normal"
-                              >
-                                legal.p6b
-                              </span>
-                              legal.p6
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                 
-                                legal.title1
-                              </h3>
-                              <p>
-                                legal.part1
-                              </p>
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                legal.title2
-                              </h3>
-                              <p>
-                                legal.part2
-                              </p>
-                              <ul>
-                                <li>
-                                  legal.part2-1
-                                </li>
-                                <li>
-                                  legal.part2-2
-                                </li>
-                                <li>
-                                  legal.part2-3
-                                  <ul>
-                                    <li>
-                                      legal.part2-3-1
-                                    </li>
-                                    <li>
-                                      legal.part2-3-2
-                                    </li>
-                                    <li>
-                                      legal.part2-3-3
-                                    </li>
-                                    <li>
-                                      legal.part2-3-4
-                                    </li>
-                                    <li>
-                                      legal.part2-3-5
-                                    </li>
-                                  </ul>
-                                </li>
-                                <li>
-                                  legal.part2-4
-                                </li>
-                              </ul>
-                              <p>
-                                legal.part2-5
-                              </p>
-                              <p>
-                                legal.part2-6
-                              </p>
-                              <ul>
-                                <li>
-                                  legal.part2-6-1
-                                </li>
-                                <li>
-                                  legal.part2-6-2
-                                </li>
-                                <li>
-                                  legal.part2-6-3
-                                </li>
-                              </ul>
-                              <p>
-                                legal.part2-7
-                              </p>
-                              <p>
-                                legal.part2-8
-                              </p>
-                              <p>
-                                legal.part2-9
-                              </p>
-                              <p>
-                                legal.part2-10
-                              </p>
-                              <p>
-                                legal.part2-11
-                              </p>
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                legal.title3
-                              </h3>
-                              <p>
-                                legal.part3-1
-                              </p>
-                              <p>
-                                legal.part3-2
-                              </p>
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                legal.title4
-                              </h3>
-                              <p>
-                                legal.part4-1
-                              </p>
-                              <p>
-                                legal.part4-2
-                              </p>
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                legal.title5
-                              </h3>
-                              <p>
-                                legal.part5
-                              </p>
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                legal.title6
-                              </h3>
-                              <p>
-                                legal.part6
-                              </p>
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                legal.title7
-                              </h3>
-                              <p>
-                                legal.part7-1
-                              </p>
-                              <p>
-                                legal.part7-2
-                              </p>
-                              <p>
-                                legal.part7-3
-                              </p>
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                legal.title8
-                              </h3>
-                              <p>
-                                legal.part8
-                              </p>
-                            </div>
-                            <div
-                              class="legal-notice-part"
-                            >
-                              <h3>
-                                legal.title9
-                              </h3>
-                              <p>
-                                legal.part9-1
-                              </p>
-                              <p>
-                                legal.part9-2
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        aria-label="gcu_modal.accessibility.button_accept"
-                        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label"
-                        >
-                          legal.accessibility.button_close
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          legal.title_legal
+        </div>
+        <button
+          aria-label="feedback.accessibility.button_close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
           >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="legal-notice-root"
+        >
+          <div
+            class="legal-notice-content"
+          >
+            <p
+              class="version"
+            >
+              legal.version
+            </p>
+            <p>
+              legal.site
+            </p>
+            <p>
+              legal.adress
+            </p>
+            <p>
+              legal.phone
+            </p>
+            <p
+              class="ln-contact"
+            >
+              legal.mail
+            </p>
             <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+              class="text-16-normal"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
+              <div
+                class="legal-notice-oneline"
+              >
+                <span
+                  class="text-14-normal"
+                >
+                  legal.p1b
+                </span>
+                legal.p1
+              </div>
+              <div
+                class="legal-notice-oneline"
+              >
+                <span
+                  class="text-14-normal"
+                >
+                  legal.p2b
+                </span>
+                legal.p2
+              </div>
+              <div
+                class="legal-notice-oneline"
+              >
+                <span
+                  class="text-14-normal"
+                >
+                  legal.p3b
+                </span>
+                legal.p3
+              </div>
+              <div
+                class="legal-notice-oneline"
               >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
+                <span
+                  class="text-14-normal"
                 >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
+                  legal.p4b
+                </span>
+                legal.p4
+              </div>
+              <div
+                class="legal-notice-oneline"
               >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
+                <span
+                  class="text-14-normal"
                 >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              legal.title_legal
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-label="feedback.accessibility.button_close"
-                              className="modal-paper-close-button"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-label="feedback.accessibility.button_close"
-                                className="modal-paper-close-button"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="feedback.accessibility.button_close"
-                                  centerRipple={true}
-                                  className="MuiIconButton-root modal-paper-close-button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="feedback.accessibility.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <button
-                                      aria-label="feedback.accessibility.button_close"
-                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <Icon
-                                          icon="test-file-stub"
-                                          size={16}
-                                          spin={false}
-                                        >
-                                          <Component
-                                            className="styles__icon___23x3R"
-                                            height={16}
-                                            style={Object {}}
-                                            width={16}
-                                          >
-                                            <svg
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <use
-                                                xlinkHref="#test-file-stub"
-                                              />
-                                            </svg>
-                                          </Component>
-                                        </Icon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                            <LegalNoticeContent>
-                              <div
-                                className="legal-notice-root"
-                              >
-                                <div
-                                  className="legal-notice-content"
-                                >
-                                  <p
-                                    className="version"
-                                  >
-                                    legal.version
-                                  </p>
-                                  <p
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "legal.site",
-                                      }
-                                    }
-                                  />
-                                  <p>
-                                    legal.adress
-                                  </p>
-                                  <p>
-                                    legal.phone
-                                  </p>
-                                  <p
-                                    className="ln-contact"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "legal.mail",
-                                      }
-                                    }
-                                  />
-                                  <div
-                                    className="text-16-normal"
-                                  >
-                                    <div
-                                      className="legal-notice-oneline"
-                                    >
-                                      <span
-                                        className="text-14-normal"
-                                      >
-                                        legal.p1b
-                                      </span>
-                                      legal.p1
-                                    </div>
-                                    <div
-                                      className="legal-notice-oneline"
-                                    >
-                                      <span
-                                        className="text-14-normal"
-                                      >
-                                        legal.p2b
-                                      </span>
-                                      legal.p2
-                                    </div>
-                                    <div
-                                      className="legal-notice-oneline"
-                                    >
-                                      <span
-                                        className="text-14-normal"
-                                      >
-                                        legal.p3b
-                                      </span>
-                                      legal.p3
-                                    </div>
-                                    <div
-                                      className="legal-notice-oneline"
-                                    >
-                                      <span
-                                        className="text-14-normal"
-                                      >
-                                        legal.p4b
-                                      </span>
-                                      legal.p4
-                                    </div>
-                                    <div
-                                      className="legal-notice-oneline"
-                                    >
-                                      <span
-                                        className="text-14-normal"
-                                      >
-                                        legal.p5b
-                                      </span>
-                                      legal.p5
-                                    </div>
-                                    <div
-                                      className="legal-notice-oneline"
-                                    >
-                                      <span
-                                        className="text-14-normal"
-                                      >
-                                        legal.p6b
-                                      </span>
-                                      legal.p6
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                         
-                                        legal.title1
-                                      </h3>
-                                      <p>
-                                        legal.part1
-                                      </p>
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                        legal.title2
-                                      </h3>
-                                      <p>
-                                        legal.part2
-                                      </p>
-                                      <ul>
-                                        <li>
-                                          legal.part2-1
-                                        </li>
-                                        <li>
-                                          legal.part2-2
-                                        </li>
-                                        <li>
-                                          legal.part2-3
-                                          <ul>
-                                            <li>
-                                              legal.part2-3-1
-                                            </li>
-                                            <li>
-                                              legal.part2-3-2
-                                            </li>
-                                            <li>
-                                              legal.part2-3-3
-                                            </li>
-                                            <li>
-                                              legal.part2-3-4
-                                            </li>
-                                            <li
-                                              dangerouslySetInnerHTML={
-                                                Object {
-                                                  "__html": "legal.part2-3-5",
-                                                }
-                                              }
-                                            />
-                                          </ul>
-                                        </li>
-                                        <li>
-                                          legal.part2-4
-                                        </li>
-                                      </ul>
-                                      <p>
-                                        legal.part2-5
-                                      </p>
-                                      <p>
-                                        legal.part2-6
-                                      </p>
-                                      <ul>
-                                        <li>
-                                          legal.part2-6-1
-                                        </li>
-                                        <li>
-                                          legal.part2-6-2
-                                        </li>
-                                        <li>
-                                          legal.part2-6-3
-                                        </li>
-                                      </ul>
-                                      <p
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "legal.part2-7",
-                                          }
-                                        }
-                                      />
-                                      <p>
-                                        legal.part2-8
-                                      </p>
-                                      <p>
-                                        legal.part2-9
-                                      </p>
-                                      <p
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "legal.part2-10",
-                                          }
-                                        }
-                                      />
-                                      <p>
-                                        legal.part2-11
-                                      </p>
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                        legal.title3
-                                      </h3>
-                                      <p>
-                                        legal.part3-1
-                                      </p>
-                                      <p>
-                                        legal.part3-2
-                                      </p>
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                        legal.title4
-                                      </h3>
-                                      <p>
-                                        legal.part4-1
-                                      </p>
-                                      <p>
-                                        legal.part4-2
-                                      </p>
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                        legal.title5
-                                      </h3>
-                                      <p>
-                                        legal.part5
-                                      </p>
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                        legal.title6
-                                      </h3>
-                                      <p>
-                                        legal.part6
-                                      </p>
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                        legal.title7
-                                      </h3>
-                                      <p>
-                                        legal.part7-1
-                                      </p>
-                                      <p
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "legal.part7-2",
-                                          }
-                                        }
-                                      />
-                                      <p>
-                                        legal.part7-3
-                                      </p>
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                        legal.title8
-                                      </h3>
-                                      <p>
-                                        legal.part8
-                                      </p>
-                                    </div>
-                                    <div
-                                      className="legal-notice-part"
-                                    >
-                                      <h3>
-                                        legal.title9
-                                      </h3>
-                                      <p>
-                                        legal.part9-1
-                                      </p>
-                                      <p>
-                                        legal.part9-2
-                                      </p>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </LegalNoticeContent>
-                            <WithStyles(ForwardRef(Button))
-                              aria-label="gcu_modal.accessibility.button_accept"
-                              className="btnPrimary"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(Button)
-                                aria-label="gcu_modal.accessibility.button_accept"
-                                className="btnPrimary"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiButton-colorInherit",
-                                    "contained": "MuiButton-contained",
-                                    "containedPrimary": "MuiButton-containedPrimary",
-                                    "containedSecondary": "MuiButton-containedSecondary",
-                                    "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                    "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                    "disableElevation": "MuiButton-disableElevation",
-                                    "disabled": "Mui-disabled",
-                                    "endIcon": "MuiButton-endIcon",
-                                    "focusVisible": "Mui-focusVisible",
-                                    "fullWidth": "MuiButton-fullWidth",
-                                    "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                    "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                    "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                    "label": "MuiButton-label",
-                                    "outlined": "MuiButton-outlined",
-                                    "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                    "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                    "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                    "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                    "root": "MuiButton-root",
-                                    "sizeLarge": "MuiButton-sizeLarge",
-                                    "sizeSmall": "MuiButton-sizeSmall",
-                                    "startIcon": "MuiButton-startIcon",
-                                    "text": "MuiButton-text",
-                                    "textPrimary": "MuiButton-textPrimary",
-                                    "textSecondary": "MuiButton-textSecondary",
-                                    "textSizeLarge": "MuiButton-textSizeLarge",
-                                    "textSizeSmall": "MuiButton-textSizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="gcu_modal.accessibility.button_accept"
-                                  className="MuiButton-root MuiButton-text btnPrimary"
-                                  component="button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  focusVisibleClassName="Mui-focusVisible"
-                                  onClick={[MockFunction]}
-                                  type="button"
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="gcu_modal.accessibility.button_accept"
-                                    className="MuiButton-root MuiButton-text btnPrimary"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    component="button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    focusVisibleClassName="Mui-focusVisible"
-                                    onClick={[MockFunction]}
-                                    type="button"
-                                  >
-                                    <button
-                                      aria-label="gcu_modal.accessibility.button_accept"
-                                      className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiButton-label"
-                                      >
-                                        legal.accessibility.button_close
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={false}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={false}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(Button)>
-                            </WithStyles(ForwardRef(Button))>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
+                  legal.p5b
+                </span>
+                legal.p5
+              </div>
+              <div
+                class="legal-notice-oneline"
+              >
+                <span
+                  class="text-14-normal"
+                >
+                  legal.p6b
+                </span>
+                legal.p6
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                   
+                  legal.title1
+                </h3>
+                <p>
+                  legal.part1
+                </p>
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                  legal.title2
+                </h3>
+                <p>
+                  legal.part2
+                </p>
+                <ul>
+                  <li>
+                    legal.part2-1
+                  </li>
+                  <li>
+                    legal.part2-2
+                  </li>
+                  <li>
+                    legal.part2-3
+                    <ul>
+                      <li>
+                        legal.part2-3-1
+                      </li>
+                      <li>
+                        legal.part2-3-2
+                      </li>
+                      <li>
+                        legal.part2-3-3
+                      </li>
+                      <li>
+                        legal.part2-3-4
+                      </li>
+                      <li>
+                        legal.part2-3-5
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    legal.part2-4
+                  </li>
+                </ul>
+                <p>
+                  legal.part2-5
+                </p>
+                <p>
+                  legal.part2-6
+                </p>
+                <ul>
+                  <li>
+                    legal.part2-6-1
+                  </li>
+                  <li>
+                    legal.part2-6-2
+                  </li>
+                  <li>
+                    legal.part2-6-3
+                  </li>
+                </ul>
+                <p>
+                  legal.part2-7
+                </p>
+                <p>
+                  legal.part2-8
+                </p>
+                <p>
+                  legal.part2-9
+                </p>
+                <p>
+                  legal.part2-10
+                </p>
+                <p>
+                  legal.part2-11
+                </p>
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                  legal.title3
+                </h3>
+                <p>
+                  legal.part3-1
+                </p>
+                <p>
+                  legal.part3-2
+                </p>
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                  legal.title4
+                </h3>
+                <p>
+                  legal.part4-1
+                </p>
+                <p>
+                  legal.part4-2
+                </p>
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                  legal.title5
+                </h3>
+                <p>
+                  legal.part5
+                </p>
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                  legal.title6
+                </h3>
+                <p>
+                  legal.part6
+                </p>
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                  legal.title7
+                </h3>
+                <p>
+                  legal.part7-1
+                </p>
+                <p>
+                  legal.part7-2
+                </p>
+                <p>
+                  legal.part7-3
+                </p>
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                  legal.title8
+                </h3>
+                <p>
+                  legal.part8
+                </p>
+              </div>
+              <div
+                class="legal-notice-part"
+              >
+                <h3>
+                  legal.title9
+                </h3>
+                <p>
+                  legal.part9-1
+                </p>
+                <p>
+                  legal.part9-2
+                </p>
+              </div>
             </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</LegalNoticeModal>
+          </div>
+        </div>
+        <button
+          aria-label="gcu_modal.accessibility.button_accept"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            legal.accessibility.button_close
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap b/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap
index 46848ba3de01a50d32be8dfeff0f603c9aef5865..2d4484beec4d4d4aabd2824cfdb3a69edcab5fa6 100644
--- a/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap
@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Minor update content component should be rendered correctly 1`] = `
-<MinorUpdateContent>
+<div>
   <div
-    className="dataShare-content-root"
+    class="dataShare-content-root"
   >
     <div
-      className="dataShare-content-wrapper"
+      class="dataShare-content-wrapper"
     >
       <h1
-        className="dataShare-content-title text-22-normal"
+        class="dataShare-content-title text-22-normal"
       >
         minorUpdate.title
       </h1>
     </div>
   </div>
-</MinorUpdateContent>
+</div>
 `;
diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
index c1e2539f86aeec44e6f24388888dd839bda6c962..0783bbe8bd4baac1ffc15c47ee7fddf4c20c265d 100644
--- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
@@ -1,1256 +1,182 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TermsView component should be rendered correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <TermsView>
+<div>
+  <div
+    class="terms-wrapper"
+  >
     <div
-      className="terms-wrapper"
+      class="terms-content"
     >
       <div
-        className="terms-content"
+        class="dataShare-content-root"
       >
-        <DataShareConsentContent>
-          <div
-            className="dataShare-content-root"
+        <div
+          class="dataShare-content-wrapper"
+        >
+          <h1
+            class="dataShare-content-title text-22-normal"
+          >
+            dataShare.title1Update
+          </h1>
+          <p
+            class="text-14-normal"
+          >
+            dataShare.title2Update
+          </p>
+          <p
+            class="text-14-normal"
+          >
+            dataShare.part1
+          </p>
+          <p
+            class="text-14-normal"
+          >
+            dataShare.part2
+          </p>
+          <p
+            class="text-14-normal"
           >
-            <div
-              className="dataShare-content-wrapper"
+            dataShare.part3
+          </p>
+          <ul
+            class="text-14-normal"
+          >
+            <li
+              class="text-14-normal"
             >
-              <h1
-                className="dataShare-content-title text-22-normal"
-              >
-                dataShare.title1Update
-              </h1>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.title2Update
-              </p>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.part1
-              </p>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.part2
-              </p>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.part3
-              </p>
-              <ul
-                className="text-14-normal"
-              >
-                <li
-                  className="text-14-normal"
-                >
-                  dataShare.item1
-                </li>
-                <li
-                  className="text-14-normal"
-                >
-                  dataShare.item2
-                </li>
-                <li
-                  className="text-14-normal"
-                >
-                  dataShare.item3
-                </li>
-              </ul>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.part4
-              </p>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.part5
-              </p>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.part6
-              </p>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.part7
-              </p>
-              <p
-                className="text-14-normal"
-              >
-                dataShare.part8
-              </p>
-              <span
-                className="text-14-normal"
-              >
-                dataShare.part9
-              </span>
-              <span
-                className="text-14-normal"
-              >
-                dataShare.part10
-              </span>
-              <span
-                className="text-14-normal"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "dataShare.link1",
-                  }
-                }
-              />
-            </div>
-          </div>
-        </DataShareConsentContent>
-        <label
-          className="inline"
-        >
-          <input
-            checked={false}
-            className="inputCheckbox"
-            name="Data-consent-validation"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          dataShare.validDataConsent
-        </label>
-        <label
-          className="inline"
-        >
-          <input
-            checked={false}
-            className="inputCheckbox"
-            id="gcu"
-            name="GCU-validation"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <div>
-            <span>
-              dataShare.validCGU
-            </span>
-            <WithStyles(ForwardRef(Button))
-              className="btnText"
-              onClick={[Function]}
-              size="small"
+              dataShare.item1
+            </li>
+            <li
+              class="text-14-normal"
             >
-              <ForwardRef(Button)
-                className="btnText"
-                classes={
-                  Object {
-                    "colorInherit": "MuiButton-colorInherit",
-                    "contained": "MuiButton-contained",
-                    "containedPrimary": "MuiButton-containedPrimary",
-                    "containedSecondary": "MuiButton-containedSecondary",
-                    "containedSizeLarge": "MuiButton-containedSizeLarge",
-                    "containedSizeSmall": "MuiButton-containedSizeSmall",
-                    "disableElevation": "MuiButton-disableElevation",
-                    "disabled": "Mui-disabled",
-                    "endIcon": "MuiButton-endIcon",
-                    "focusVisible": "Mui-focusVisible",
-                    "fullWidth": "MuiButton-fullWidth",
-                    "iconSizeLarge": "MuiButton-iconSizeLarge",
-                    "iconSizeMedium": "MuiButton-iconSizeMedium",
-                    "iconSizeSmall": "MuiButton-iconSizeSmall",
-                    "label": "MuiButton-label",
-                    "outlined": "MuiButton-outlined",
-                    "outlinedPrimary": "MuiButton-outlinedPrimary",
-                    "outlinedSecondary": "MuiButton-outlinedSecondary",
-                    "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                    "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                    "root": "MuiButton-root",
-                    "sizeLarge": "MuiButton-sizeLarge",
-                    "sizeSmall": "MuiButton-sizeSmall",
-                    "startIcon": "MuiButton-startIcon",
-                    "text": "MuiButton-text",
-                    "textPrimary": "MuiButton-textPrimary",
-                    "textSecondary": "MuiButton-textSecondary",
-                    "textSizeLarge": "MuiButton-textSizeLarge",
-                    "textSizeSmall": "MuiButton-textSizeSmall",
-                  }
-                }
-                onClick={[Function]}
-                size="small"
-              >
-                <WithStyles(ForwardRef(ButtonBase))
-                  className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
-                  component="button"
-                  disabled={false}
-                  focusRipple={true}
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <ForwardRef(ButtonBase)
-                    className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "focusVisible": "Mui-focusVisible",
-                        "root": "MuiButtonBase-root",
-                      }
-                    }
-                    component="button"
-                    disabled={false}
-                    focusRipple={true}
-                    focusVisibleClassName="Mui-focusVisible"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <button
-                      className="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
-                      disabled={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={0}
-                      type="button"
-                    >
-                      <span
-                        className="MuiButton-label"
-                      >
-                        dataShare.validCGU_button
-                      </span>
-                      <WithStyles(memo)
-                        center={false}
-                      >
-                        <ForwardRef(TouchRipple)
-                          center={false}
-                          classes={
-                            Object {
-                              "child": "MuiTouchRipple-child",
-                              "childLeaving": "MuiTouchRipple-childLeaving",
-                              "childPulsate": "MuiTouchRipple-childPulsate",
-                              "ripple": "MuiTouchRipple-ripple",
-                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                              "root": "MuiTouchRipple-root",
-                            }
-                          }
-                        >
-                          <span
-                            className="MuiTouchRipple-root"
-                          >
-                            <TransitionGroup
-                              childFactory={[Function]}
-                              component={null}
-                              exit={true}
-                            />
-                          </span>
-                        </ForwardRef(TouchRipple)>
-                      </WithStyles(memo)>
-                    </button>
-                  </ForwardRef(ButtonBase)>
-                </WithStyles(ForwardRef(ButtonBase))>
-              </ForwardRef(Button)>
-            </WithStyles(ForwardRef(Button))>
-            <span>
-              dataShare.validLegal
-            </span>
-            <WithStyles(ForwardRef(Button))
-              className="btnText"
-              onClick={[Function]}
-              size="small"
+              dataShare.item2
+            </li>
+            <li
+              class="text-14-normal"
             >
-              <ForwardRef(Button)
-                className="btnText"
-                classes={
-                  Object {
-                    "colorInherit": "MuiButton-colorInherit",
-                    "contained": "MuiButton-contained",
-                    "containedPrimary": "MuiButton-containedPrimary",
-                    "containedSecondary": "MuiButton-containedSecondary",
-                    "containedSizeLarge": "MuiButton-containedSizeLarge",
-                    "containedSizeSmall": "MuiButton-containedSizeSmall",
-                    "disableElevation": "MuiButton-disableElevation",
-                    "disabled": "Mui-disabled",
-                    "endIcon": "MuiButton-endIcon",
-                    "focusVisible": "Mui-focusVisible",
-                    "fullWidth": "MuiButton-fullWidth",
-                    "iconSizeLarge": "MuiButton-iconSizeLarge",
-                    "iconSizeMedium": "MuiButton-iconSizeMedium",
-                    "iconSizeSmall": "MuiButton-iconSizeSmall",
-                    "label": "MuiButton-label",
-                    "outlined": "MuiButton-outlined",
-                    "outlinedPrimary": "MuiButton-outlinedPrimary",
-                    "outlinedSecondary": "MuiButton-outlinedSecondary",
-                    "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                    "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                    "root": "MuiButton-root",
-                    "sizeLarge": "MuiButton-sizeLarge",
-                    "sizeSmall": "MuiButton-sizeSmall",
-                    "startIcon": "MuiButton-startIcon",
-                    "text": "MuiButton-text",
-                    "textPrimary": "MuiButton-textPrimary",
-                    "textSecondary": "MuiButton-textSecondary",
-                    "textSizeLarge": "MuiButton-textSizeLarge",
-                    "textSizeSmall": "MuiButton-textSizeSmall",
-                  }
-                }
-                onClick={[Function]}
-                size="small"
-              >
-                <WithStyles(ForwardRef(ButtonBase))
-                  className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
-                  component="button"
-                  disabled={false}
-                  focusRipple={true}
-                  focusVisibleClassName="Mui-focusVisible"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <ForwardRef(ButtonBase)
-                    className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
-                    classes={
-                      Object {
-                        "disabled": "Mui-disabled",
-                        "focusVisible": "Mui-focusVisible",
-                        "root": "MuiButtonBase-root",
-                      }
-                    }
-                    component="button"
-                    disabled={false}
-                    focusRipple={true}
-                    focusVisibleClassName="Mui-focusVisible"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <button
-                      className="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
-                      disabled={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={0}
-                      type="button"
-                    >
-                      <span
-                        className="MuiButton-label"
-                      >
-                        dataShare.validLegal_button
-                      </span>
-                      <WithStyles(memo)
-                        center={false}
-                      >
-                        <ForwardRef(TouchRipple)
-                          center={false}
-                          classes={
-                            Object {
-                              "child": "MuiTouchRipple-child",
-                              "childLeaving": "MuiTouchRipple-childLeaving",
-                              "childPulsate": "MuiTouchRipple-childPulsate",
-                              "ripple": "MuiTouchRipple-ripple",
-                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                              "root": "MuiTouchRipple-root",
-                            }
-                          }
-                        >
-                          <span
-                            className="MuiTouchRipple-root"
-                          >
-                            <TransitionGroup
-                              childFactory={[Function]}
-                              component={null}
-                              exit={true}
-                            />
-                          </span>
-                        </ForwardRef(TouchRipple)>
-                      </WithStyles(memo)>
-                    </button>
-                  </ForwardRef(ButtonBase)>
-                </WithStyles(ForwardRef(ButtonBase))>
-              </ForwardRef(Button)>
-            </WithStyles(ForwardRef(Button))>
-            <span>
-              dataShare.validLegal2
-            </span>
-          </div>
-        </label>
+              dataShare.item3
+            </li>
+          </ul>
+          <p
+            class="text-14-normal"
+          >
+            dataShare.part4
+          </p>
+          <p
+            class="text-14-normal"
+          >
+            dataShare.part5
+          </p>
+          <p
+            class="text-14-normal"
+          >
+            dataShare.part6
+          </p>
+          <p
+            class="text-14-normal"
+          >
+            dataShare.part7
+          </p>
+          <p
+            class="text-14-normal"
+          >
+            dataShare.part8
+          </p>
+          <span
+            class="text-14-normal"
+          >
+            dataShare.part9
+          </span>
+          <span
+            class="text-14-normal"
+          >
+            dataShare.part10
+          </span>
+          <span
+            class="text-14-normal"
+          >
+            dataShare.link1
+          </span>
+        </div>
       </div>
-      <div
-        className="terms-footer"
+      <label
+        class="inline"
       >
-        <WithStyles(ForwardRef(Button))
-          aria-label="dataShare.accessibility.button_accept"
-          className="btnPrimary"
-          disabled={true}
-          onClick={[Function]}
-        >
-          <ForwardRef(Button)
-            aria-label="dataShare.accessibility.button_accept"
-            className="btnPrimary"
-            classes={
-              Object {
-                "colorInherit": "MuiButton-colorInherit",
-                "contained": "MuiButton-contained",
-                "containedPrimary": "MuiButton-containedPrimary",
-                "containedSecondary": "MuiButton-containedSecondary",
-                "containedSizeLarge": "MuiButton-containedSizeLarge",
-                "containedSizeSmall": "MuiButton-containedSizeSmall",
-                "disableElevation": "MuiButton-disableElevation",
-                "disabled": "Mui-disabled",
-                "endIcon": "MuiButton-endIcon",
-                "focusVisible": "Mui-focusVisible",
-                "fullWidth": "MuiButton-fullWidth",
-                "iconSizeLarge": "MuiButton-iconSizeLarge",
-                "iconSizeMedium": "MuiButton-iconSizeMedium",
-                "iconSizeSmall": "MuiButton-iconSizeSmall",
-                "label": "MuiButton-label",
-                "outlined": "MuiButton-outlined",
-                "outlinedPrimary": "MuiButton-outlinedPrimary",
-                "outlinedSecondary": "MuiButton-outlinedSecondary",
-                "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                "root": "MuiButton-root",
-                "sizeLarge": "MuiButton-sizeLarge",
-                "sizeSmall": "MuiButton-sizeSmall",
-                "startIcon": "MuiButton-startIcon",
-                "text": "MuiButton-text",
-                "textPrimary": "MuiButton-textPrimary",
-                "textSecondary": "MuiButton-textSecondary",
-                "textSizeLarge": "MuiButton-textSizeLarge",
-                "textSizeSmall": "MuiButton-textSizeSmall",
-              }
-            }
-            disabled={true}
-            onClick={[Function]}
+        <input
+          class="inputCheckbox"
+          name="Data-consent-validation"
+          type="checkbox"
+        />
+        dataShare.validDataConsent
+      </label>
+      <label
+        class="inline"
+      >
+        <input
+          class="inputCheckbox"
+          id="gcu"
+          name="GCU-validation"
+          type="checkbox"
+        />
+        <div>
+          <span>
+            dataShare.validCGU
+          </span>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+            tabindex="0"
+            type="button"
           >
-            <WithStyles(ForwardRef(ButtonBase))
-              aria-label="dataShare.accessibility.button_accept"
-              className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
-              component="button"
-              disabled={true}
-              focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
-              onClick={[Function]}
-              type="button"
+            <span
+              class="MuiButton-label"
             >
-              <ForwardRef(ButtonBase)
-                aria-label="dataShare.accessibility.button_accept"
-                className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
-                classes={
-                  Object {
-                    "disabled": "Mui-disabled",
-                    "focusVisible": "Mui-focusVisible",
-                    "root": "MuiButtonBase-root",
-                  }
-                }
-                component="button"
-                disabled={true}
-                focusRipple={true}
-                focusVisibleClassName="Mui-focusVisible"
-                onClick={[Function]}
-                type="button"
-              >
-                <button
-                  aria-label="dataShare.accessibility.button_accept"
-                  className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
-                  disabled={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={-1}
-                  type="button"
-                >
-                  <span
-                    className="MuiButton-label"
-                  >
-                    dataShare.button_accept
-                  </span>
-                </button>
-              </ForwardRef(ButtonBase)>
-            </WithStyles(ForwardRef(ButtonBase))>
-          </ForwardRef(Button)>
-        </WithStyles(ForwardRef(Button))>
-      </div>
-      <CGUModal
-        handleCloseClick={[Function]}
-        open={false}
-      >
-        <WithStyles(ForwardRef(Dialog))
-          aria-labelledby="accessibility-title"
-          classes={
-            Object {
-              "paper": "modal-paper",
-              "root": "modal-root",
-            }
-          }
-          onClose={[Function]}
-          open={false}
-        >
-          <ForwardRef(Dialog)
-            aria-labelledby="accessibility-title"
-            classes={
-              Object {
-                "container": "MuiDialog-container",
-                "paper": "MuiDialog-paper modal-paper",
-                "paperFullScreen": "MuiDialog-paperFullScreen",
-                "paperFullWidth": "MuiDialog-paperFullWidth",
-                "paperScrollBody": "MuiDialog-paperScrollBody",
-                "paperScrollPaper": "MuiDialog-paperScrollPaper",
-                "paperWidthFalse": "MuiDialog-paperWidthFalse",
-                "paperWidthLg": "MuiDialog-paperWidthLg",
-                "paperWidthMd": "MuiDialog-paperWidthMd",
-                "paperWidthSm": "MuiDialog-paperWidthSm",
-                "paperWidthXl": "MuiDialog-paperWidthXl",
-                "paperWidthXs": "MuiDialog-paperWidthXs",
-                "root": "MuiDialog-root modal-root",
-                "scrollBody": "MuiDialog-scrollBody",
-                "scrollPaper": "MuiDialog-scrollPaper",
-              }
-            }
-            onClose={[Function]}
-            open={false}
+              dataShare.validCGU_button
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <span>
+            dataShare.validLegal
+          </span>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall"
+            tabindex="0"
+            type="button"
           >
-            <ForwardRef(Modal)
-              BackdropComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "Naked": Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "propTypes": Object {
-                      "children": [Function],
-                      "className": [Function],
-                      "classes": [Function],
-                      "invisible": [Function],
-                      "open": [Function],
-                      "transitionDuration": [Function],
-                    },
-                    "render": [Function],
-                  },
-                  "displayName": "WithStyles(ForwardRef(Backdrop))",
-                  "options": Object {
-                    "defaultTheme": Object {
-                      "breakpoints": Object {
-                        "between": [Function],
-                        "down": [Function],
-                        "keys": Array [
-                          "xs",
-                          "sm",
-                          "md",
-                          "lg",
-                          "xl",
-                        ],
-                        "only": [Function],
-                        "up": [Function],
-                        "values": Object {
-                          "lg": 1280,
-                          "md": 960,
-                          "sm": 600,
-                          "xl": 1920,
-                          "xs": 0,
-                        },
-                        "width": [Function],
-                      },
-                      "direction": "ltr",
-                      "mixins": Object {
-                        "gutters": [Function],
-                        "toolbar": Object {
-                          "@media (min-width:0px) and (orientation: landscape)": Object {
-                            "minHeight": 48,
-                          },
-                          "@media (min-width:600px)": Object {
-                            "minHeight": 64,
-                          },
-                          "minHeight": 56,
-                        },
-                      },
-                      "overrides": Object {},
-                      "palette": Object {
-                        "action": Object {
-                          "activatedOpacity": 0.12,
-                          "active": "rgba(0, 0, 0, 0.54)",
-                          "disabled": "rgba(0, 0, 0, 0.26)",
-                          "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                          "disabledOpacity": 0.38,
-                          "focus": "rgba(0, 0, 0, 0.12)",
-                          "focusOpacity": 0.12,
-                          "hover": "rgba(0, 0, 0, 0.04)",
-                          "hoverOpacity": 0.04,
-                          "selected": "rgba(0, 0, 0, 0.08)",
-                          "selectedOpacity": 0.08,
-                        },
-                        "augmentColor": [Function],
-                        "background": Object {
-                          "default": "#fafafa",
-                          "paper": "#fff",
-                        },
-                        "common": Object {
-                          "black": "#000",
-                          "white": "#fff",
-                        },
-                        "contrastThreshold": 3,
-                        "divider": "rgba(0, 0, 0, 0.12)",
-                        "error": Object {
-                          "contrastText": "#fff",
-                          "dark": "#d32f2f",
-                          "light": "#e57373",
-                          "main": "#f44336",
-                        },
-                        "getContrastText": [Function],
-                        "grey": Object {
-                          "100": "#f5f5f5",
-                          "200": "#eeeeee",
-                          "300": "#e0e0e0",
-                          "400": "#bdbdbd",
-                          "50": "#fafafa",
-                          "500": "#9e9e9e",
-                          "600": "#757575",
-                          "700": "#616161",
-                          "800": "#424242",
-                          "900": "#212121",
-                          "A100": "#d5d5d5",
-                          "A200": "#aaaaaa",
-                          "A400": "#303030",
-                          "A700": "#616161",
-                        },
-                        "info": Object {
-                          "contrastText": "#fff",
-                          "dark": "#1976d2",
-                          "light": "#64b5f6",
-                          "main": "#2196f3",
-                        },
-                        "primary": Object {
-                          "contrastText": "#fff",
-                          "dark": "#303f9f",
-                          "light": "#7986cb",
-                          "main": "#3f51b5",
-                        },
-                        "secondary": Object {
-                          "contrastText": "#fff",
-                          "dark": "#c51162",
-                          "light": "#ff4081",
-                          "main": "#f50057",
-                        },
-                        "success": Object {
-                          "contrastText": "rgba(0, 0, 0, 0.87)",
-                          "dark": "#388e3c",
-                          "light": "#81c784",
-                          "main": "#4caf50",
-                        },
-                        "text": Object {
-                          "disabled": "rgba(0, 0, 0, 0.38)",
-                          "hint": "rgba(0, 0, 0, 0.38)",
-                          "primary": "rgba(0, 0, 0, 0.87)",
-                          "secondary": "rgba(0, 0, 0, 0.54)",
-                        },
-                        "tonalOffset": 0.2,
-                        "type": "light",
-                        "warning": Object {
-                          "contrastText": "rgba(0, 0, 0, 0.87)",
-                          "dark": "#f57c00",
-                          "light": "#ffb74d",
-                          "main": "#ff9800",
-                        },
-                      },
-                      "props": Object {},
-                      "shadows": Array [
-                        "none",
-                        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                      ],
-                      "shape": Object {
-                        "borderRadius": 4,
-                      },
-                      "spacing": [Function],
-                      "transitions": Object {
-                        "create": [Function],
-                        "duration": Object {
-                          "complex": 375,
-                          "enteringScreen": 225,
-                          "leavingScreen": 195,
-                          "short": 250,
-                          "shorter": 200,
-                          "shortest": 150,
-                          "standard": 300,
-                        },
-                        "easing": Object {
-                          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                        },
-                        "getAutoHeightDuration": [Function],
-                      },
-                      "typography": Object {
-                        "body1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00938em",
-                          "lineHeight": 1.5,
-                        },
-                        "body2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.01071em",
-                          "lineHeight": 1.43,
-                        },
-                        "button": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.02857em",
-                          "lineHeight": 1.75,
-                          "textTransform": "uppercase",
-                        },
-                        "caption": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.75rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.03333em",
-                          "lineHeight": 1.66,
-                        },
-                        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                        "fontSize": 14,
-                        "fontWeightBold": 700,
-                        "fontWeightLight": 300,
-                        "fontWeightMedium": 500,
-                        "fontWeightRegular": 400,
-                        "h1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "6rem",
-                          "fontWeight": 300,
-                          "letterSpacing": "-0.01562em",
-                          "lineHeight": 1.167,
-                        },
-                        "h2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "3.75rem",
-                          "fontWeight": 300,
-                          "letterSpacing": "-0.00833em",
-                          "lineHeight": 1.2,
-                        },
-                        "h3": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "3rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0em",
-                          "lineHeight": 1.167,
-                        },
-                        "h4": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "2.125rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00735em",
-                          "lineHeight": 1.235,
-                        },
-                        "h5": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1.5rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0em",
-                          "lineHeight": 1.334,
-                        },
-                        "h6": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1.25rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.0075em",
-                          "lineHeight": 1.6,
-                        },
-                        "htmlFontSize": 16,
-                        "overline": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.75rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.08333em",
-                          "lineHeight": 2.66,
-                          "textTransform": "uppercase",
-                        },
-                        "pxToRem": [Function],
-                        "round": [Function],
-                        "subtitle1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00938em",
-                          "lineHeight": 1.75,
-                        },
-                        "subtitle2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.00714em",
-                          "lineHeight": 1.57,
-                        },
-                      },
-                      "zIndex": Object {
-                        "appBar": 1100,
-                        "drawer": 1200,
-                        "mobileStepper": 1000,
-                        "modal": 1300,
-                        "snackbar": 1400,
-                        "speedDial": 1050,
-                        "tooltip": 1500,
-                      },
-                    },
-                    "name": "MuiBackdrop",
-                  },
-                  "propTypes": Object {
-                    "classes": [Function],
-                    "innerRef": [Function],
-                  },
-                  "render": [Function],
-                  "useStyles": [Function],
-                }
-              }
-              BackdropProps={
-                Object {
-                  "transitionDuration": Object {
-                    "enter": 225,
-                    "exit": 195,
-                  },
-                }
-              }
-              className="MuiDialog-root modal-root"
-              closeAfterTransition={true}
-              disableEscapeKeyDown={false}
-              onClose={[Function]}
-              open={false}
+            <span
+              class="MuiButton-label"
+            >
+              dataShare.validLegal_button
+            </span>
+            <span
+              class="MuiTouchRipple-root"
             />
-          </ForwardRef(Dialog)>
-        </WithStyles(ForwardRef(Dialog))>
-      </CGUModal>
-      <LegalNoticeModal
-        handleCloseClick={[Function]}
-        open={false}
+          </button>
+          <span>
+            dataShare.validLegal2
+          </span>
+        </div>
+      </label>
+    </div>
+    <div
+      class="terms-footer"
+    >
+      <button
+        aria-label="dataShare.accessibility.button_accept"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
+        disabled=""
+        tabindex="-1"
+        type="button"
       >
-        <WithStyles(ForwardRef(Dialog))
-          aria-labelledby="accessibility-title"
-          classes={
-            Object {
-              "paper": "modal-paper",
-              "root": "modal-root",
-            }
-          }
-          onClose={[Function]}
-          open={false}
+        <span
+          class="MuiButton-label"
         >
-          <ForwardRef(Dialog)
-            aria-labelledby="accessibility-title"
-            classes={
-              Object {
-                "container": "MuiDialog-container",
-                "paper": "MuiDialog-paper modal-paper",
-                "paperFullScreen": "MuiDialog-paperFullScreen",
-                "paperFullWidth": "MuiDialog-paperFullWidth",
-                "paperScrollBody": "MuiDialog-paperScrollBody",
-                "paperScrollPaper": "MuiDialog-paperScrollPaper",
-                "paperWidthFalse": "MuiDialog-paperWidthFalse",
-                "paperWidthLg": "MuiDialog-paperWidthLg",
-                "paperWidthMd": "MuiDialog-paperWidthMd",
-                "paperWidthSm": "MuiDialog-paperWidthSm",
-                "paperWidthXl": "MuiDialog-paperWidthXl",
-                "paperWidthXs": "MuiDialog-paperWidthXs",
-                "root": "MuiDialog-root modal-root",
-                "scrollBody": "MuiDialog-scrollBody",
-                "scrollPaper": "MuiDialog-scrollPaper",
-              }
-            }
-            onClose={[Function]}
-            open={false}
-          >
-            <ForwardRef(Modal)
-              BackdropComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "Naked": Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "propTypes": Object {
-                      "children": [Function],
-                      "className": [Function],
-                      "classes": [Function],
-                      "invisible": [Function],
-                      "open": [Function],
-                      "transitionDuration": [Function],
-                    },
-                    "render": [Function],
-                  },
-                  "displayName": "WithStyles(ForwardRef(Backdrop))",
-                  "options": Object {
-                    "defaultTheme": Object {
-                      "breakpoints": Object {
-                        "between": [Function],
-                        "down": [Function],
-                        "keys": Array [
-                          "xs",
-                          "sm",
-                          "md",
-                          "lg",
-                          "xl",
-                        ],
-                        "only": [Function],
-                        "up": [Function],
-                        "values": Object {
-                          "lg": 1280,
-                          "md": 960,
-                          "sm": 600,
-                          "xl": 1920,
-                          "xs": 0,
-                        },
-                        "width": [Function],
-                      },
-                      "direction": "ltr",
-                      "mixins": Object {
-                        "gutters": [Function],
-                        "toolbar": Object {
-                          "@media (min-width:0px) and (orientation: landscape)": Object {
-                            "minHeight": 48,
-                          },
-                          "@media (min-width:600px)": Object {
-                            "minHeight": 64,
-                          },
-                          "minHeight": 56,
-                        },
-                      },
-                      "overrides": Object {},
-                      "palette": Object {
-                        "action": Object {
-                          "activatedOpacity": 0.12,
-                          "active": "rgba(0, 0, 0, 0.54)",
-                          "disabled": "rgba(0, 0, 0, 0.26)",
-                          "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                          "disabledOpacity": 0.38,
-                          "focus": "rgba(0, 0, 0, 0.12)",
-                          "focusOpacity": 0.12,
-                          "hover": "rgba(0, 0, 0, 0.04)",
-                          "hoverOpacity": 0.04,
-                          "selected": "rgba(0, 0, 0, 0.08)",
-                          "selectedOpacity": 0.08,
-                        },
-                        "augmentColor": [Function],
-                        "background": Object {
-                          "default": "#fafafa",
-                          "paper": "#fff",
-                        },
-                        "common": Object {
-                          "black": "#000",
-                          "white": "#fff",
-                        },
-                        "contrastThreshold": 3,
-                        "divider": "rgba(0, 0, 0, 0.12)",
-                        "error": Object {
-                          "contrastText": "#fff",
-                          "dark": "#d32f2f",
-                          "light": "#e57373",
-                          "main": "#f44336",
-                        },
-                        "getContrastText": [Function],
-                        "grey": Object {
-                          "100": "#f5f5f5",
-                          "200": "#eeeeee",
-                          "300": "#e0e0e0",
-                          "400": "#bdbdbd",
-                          "50": "#fafafa",
-                          "500": "#9e9e9e",
-                          "600": "#757575",
-                          "700": "#616161",
-                          "800": "#424242",
-                          "900": "#212121",
-                          "A100": "#d5d5d5",
-                          "A200": "#aaaaaa",
-                          "A400": "#303030",
-                          "A700": "#616161",
-                        },
-                        "info": Object {
-                          "contrastText": "#fff",
-                          "dark": "#1976d2",
-                          "light": "#64b5f6",
-                          "main": "#2196f3",
-                        },
-                        "primary": Object {
-                          "contrastText": "#fff",
-                          "dark": "#303f9f",
-                          "light": "#7986cb",
-                          "main": "#3f51b5",
-                        },
-                        "secondary": Object {
-                          "contrastText": "#fff",
-                          "dark": "#c51162",
-                          "light": "#ff4081",
-                          "main": "#f50057",
-                        },
-                        "success": Object {
-                          "contrastText": "rgba(0, 0, 0, 0.87)",
-                          "dark": "#388e3c",
-                          "light": "#81c784",
-                          "main": "#4caf50",
-                        },
-                        "text": Object {
-                          "disabled": "rgba(0, 0, 0, 0.38)",
-                          "hint": "rgba(0, 0, 0, 0.38)",
-                          "primary": "rgba(0, 0, 0, 0.87)",
-                          "secondary": "rgba(0, 0, 0, 0.54)",
-                        },
-                        "tonalOffset": 0.2,
-                        "type": "light",
-                        "warning": Object {
-                          "contrastText": "rgba(0, 0, 0, 0.87)",
-                          "dark": "#f57c00",
-                          "light": "#ffb74d",
-                          "main": "#ff9800",
-                        },
-                      },
-                      "props": Object {},
-                      "shadows": Array [
-                        "none",
-                        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                      ],
-                      "shape": Object {
-                        "borderRadius": 4,
-                      },
-                      "spacing": [Function],
-                      "transitions": Object {
-                        "create": [Function],
-                        "duration": Object {
-                          "complex": 375,
-                          "enteringScreen": 225,
-                          "leavingScreen": 195,
-                          "short": 250,
-                          "shorter": 200,
-                          "shortest": 150,
-                          "standard": 300,
-                        },
-                        "easing": Object {
-                          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                        },
-                        "getAutoHeightDuration": [Function],
-                      },
-                      "typography": Object {
-                        "body1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00938em",
-                          "lineHeight": 1.5,
-                        },
-                        "body2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.01071em",
-                          "lineHeight": 1.43,
-                        },
-                        "button": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.02857em",
-                          "lineHeight": 1.75,
-                          "textTransform": "uppercase",
-                        },
-                        "caption": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.75rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.03333em",
-                          "lineHeight": 1.66,
-                        },
-                        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                        "fontSize": 14,
-                        "fontWeightBold": 700,
-                        "fontWeightLight": 300,
-                        "fontWeightMedium": 500,
-                        "fontWeightRegular": 400,
-                        "h1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "6rem",
-                          "fontWeight": 300,
-                          "letterSpacing": "-0.01562em",
-                          "lineHeight": 1.167,
-                        },
-                        "h2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "3.75rem",
-                          "fontWeight": 300,
-                          "letterSpacing": "-0.00833em",
-                          "lineHeight": 1.2,
-                        },
-                        "h3": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "3rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0em",
-                          "lineHeight": 1.167,
-                        },
-                        "h4": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "2.125rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00735em",
-                          "lineHeight": 1.235,
-                        },
-                        "h5": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1.5rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0em",
-                          "lineHeight": 1.334,
-                        },
-                        "h6": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1.25rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.0075em",
-                          "lineHeight": 1.6,
-                        },
-                        "htmlFontSize": 16,
-                        "overline": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.75rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.08333em",
-                          "lineHeight": 2.66,
-                          "textTransform": "uppercase",
-                        },
-                        "pxToRem": [Function],
-                        "round": [Function],
-                        "subtitle1": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "1rem",
-                          "fontWeight": 400,
-                          "letterSpacing": "0.00938em",
-                          "lineHeight": 1.75,
-                        },
-                        "subtitle2": Object {
-                          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                          "fontSize": "0.875rem",
-                          "fontWeight": 500,
-                          "letterSpacing": "0.00714em",
-                          "lineHeight": 1.57,
-                        },
-                      },
-                      "zIndex": Object {
-                        "appBar": 1100,
-                        "drawer": 1200,
-                        "mobileStepper": 1000,
-                        "modal": 1300,
-                        "snackbar": 1400,
-                        "speedDial": 1050,
-                        "tooltip": 1500,
-                      },
-                    },
-                    "name": "MuiBackdrop",
-                  },
-                  "propTypes": Object {
-                    "classes": [Function],
-                    "innerRef": [Function],
-                  },
-                  "render": [Function],
-                  "useStyles": [Function],
-                }
-              }
-              BackdropProps={
-                Object {
-                  "transitionDuration": Object {
-                    "enter": 225,
-                    "exit": 195,
-                  },
-                }
-              }
-              className="MuiDialog-root modal-root"
-              closeAfterTransition={true}
-              disableEscapeKeyDown={false}
-              onClose={[Function]}
-              open={false}
-            />
-          </ForwardRef(Dialog)>
-        </WithStyles(ForwardRef(Dialog))>
-      </LegalNoticeModal>
+          dataShare.button_accept
+        </span>
+      </button>
     </div>
-  </TermsView>
-</Provider>
+  </div>
+</div>
 `;
diff --git a/yarn.lock b/yarn.lock
index 26a9cd54951874e33da9145762c5564230895411..e0265d44fa9babf79e67cafa1666c46c9849ae70 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2671,7 +2671,7 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/cheerio@*", "@types/cheerio@^0.22.22":
+"@types/cheerio@*":
   version "0.22.31"
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.31.tgz#b8538100653d6bb1b08a1e46dec75b4f2a5d5eb6"
   integrity sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==
@@ -7656,15 +7656,6 @@ enzyme-shallow-equal@^1.0.5:
     has "^1.0.3"
     object-is "^1.1.5"
 
-enzyme-to-json@^3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz#94f85c413bcae8ab67be53b0a94b69a560e27823"
-  integrity sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==
-  dependencies:
-    "@types/cheerio" "^0.22.22"
-    lodash "^4.17.21"
-    react-is "^16.12.0"
-
 enzyme@3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
@@ -14858,7 +14849,7 @@ react-inspector@^5.1:
     is-dom "^1.0.0"
     prop-types "^15.0.0"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==