diff --git a/scripts/createConnections.js b/scripts/createConnections.js
index 4cd7ec75f3ed7024d54189ad3a84680c221f34e6..52e256761b062f39d1154bbd0fdd5aa2da341d7b 100644
--- a/scripts/createConnections.js
+++ b/scripts/createConnections.js
@@ -4,9 +4,9 @@ const axios = require('axios')
 const headers = {
   Accept: 'application/json',
   Authorization:
-    'Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhcHAiLCJpYXQiOjE2MDY5OTU1OTgsImlzcyI6ImNvenkudG9vbHM6ODA4MCIsInN1YiI6ImVjb2x5byIsInNlc3Npb25faWQiOiI5ODI3ZmVlMjc5MDNmN2U2MGRmNjUwMThjZjAwOTk1ZiJ9.epzyD0QWnP5LHTXgEFaKLAGyrtDT0gjFzW6bQFsoLu2YFYN1ZVLyhz4vF5gTHZoaIwHETCXShnpwQiAICwtU8w',
+    'Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhcHAiLCJpYXQiOjE2MDc1OTMzNzAsImlzcyI6ImNvenkudG9vbHM6ODA4MCIsInN1YiI6ImVjb2x5byIsInNlc3Npb25faWQiOiI5ZDMxM2U2OThjMmQ5ZDE4NTZhMmJmNmMxMTAwOWU1MyJ9.TMoNUwm-omHauYmYzoep7I94e-NftJ7BX9jThe6axJThroRdng-SaADDvnTgSwB4UJF6rVIpdfMrOPG5k-rRow',
   Cookie:
-    'cozysessid=AAAAAF_Izko5ODI3ZmVlMjc5MDNmN2U2MGRmNjUwMThjZjAwOTk1Zo-CT2_orrO4wnc6rr-gk-V_8gYax1xpEJmZpStKuADY',
+    'cozysessid=AAAAAF_OTPM5ZDMxM2U2OThjMmQ5ZDE4NTZhMmJmNmMxMTAwOWU1Mw_c9TTnUCv2heuSwCbk7S4-Bdykc1uey24fI6j1ePpz',
   'content-type': 'application/json',
 }
 
diff --git a/src/styles/components/_modal.scss b/src/components/CommonKit/Modal/Modal.scss
similarity index 65%
rename from src/styles/components/_modal.scss
rename to src/components/CommonKit/Modal/Modal.scss
index f8035c490632c64fcc1ec7b4701583cf1f704317..c9126fb52986ef029488ad2b3c8f29dbfbf36d2f 100644
--- a/src/styles/components/_modal.scss
+++ b/src/components/CommonKit/Modal/Modal.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .modal-overlay {
   display: none;
@@ -53,33 +53,9 @@
       align-items: center;
       color: $white;
     }
-    .wm-header {
-      background: $multi-color-radial-gradient;
-      background-clip: 'text';
-      -webkit-background-clip: text;
-      color: transparent;
-      margin-top: 2rem;
-    }
-    .wm-name {
-      background: $multi-color-radial-gradient;
-      background-clip: 'text';
-      -webkit-background-clip: text;
-      color: transparent;
-      margin-bottom: 1.25rem;
-    }
     .button-ok {
       width: 90%;
       margin-bottom: 2rem;
     }
-    .wm-perso {
-      text-align: center;
-      width: 60%;
-      margin: 1rem;
-    }
-    .wm-connect {
-      text-align: center;
-      width: 88%;
-      margin: 1rem;
-    }
   }
 }
diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx
index 5a1b69cf3b3fe9b72f7f0012f5bb5e38de3053ec..49e08848ba8b478e78ac32a01ce69b211982f9d6 100644
--- a/src/components/CommonKit/Modal/Modal.tsx
+++ b/src/components/CommonKit/Modal/Modal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, ReactNode } from 'react'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
-
+import './Modal.scss'
 interface ModalProps {
   open: boolean
   border?: boolean
diff --git a/src/styles/components/_auth.scss b/src/components/Connection/Auth.scss
similarity index 59%
rename from src/styles/components/_auth.scss
rename to src/components/Connection/Auth.scss
index b4c77eef0258d030e6a89e138a2671a7884e63e7..c9f2c45ea86956cf4b1b9b2e01354c750bbf628d 100644
--- a/src/styles/components/_auth.scss
+++ b/src/components/Connection/Auth.scss
@@ -1,22 +1,22 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
-.authform-button-content{
+.authform-button-content {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   @media #{$large-phone} {
-   justify-content: left;
+    justify-content: left;
   }
-  .authform-button-content-icon{
+  .authform-button-content-icon {
     margin: 0 1.375rem;
   }
-  .authform-button-text{
+  .authform-button-text {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
     max-width: 10.625rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Connection/ConnectionLaunch.scss b/src/components/Connection/ConnectionLaunch.scss
new file mode 100644
index 0000000000000000000000000000000000000000..52183f931c5e590549fc02c895121e26608f736e
--- /dev/null
+++ b/src/components/Connection/ConnectionLaunch.scss
@@ -0,0 +1,40 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+// KonnectorLoading
+.klaunch-content {
+  margin: 0.5rem 1.5rem;
+  @media #{$large-phone} {
+    margin: 0.5rem 0;
+  }
+  .klaunch-content-text {
+    color: $grey-bright;
+    margin: 1rem;
+    text-align: center;
+    .kc-wait {
+      color: $soft-grey;
+      margin-bottom: 2rem;
+    }
+  }
+  .klaunch-content-text-center {
+    text-align: center;
+  }
+  .klaunch-info {
+    margin: 1.5rem;
+    .konnector-config {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      .kce-picto-txt {
+        color: $red-primary;
+        margin: 1.25rem;
+      }
+      .kcs-picto-txt {
+        color: $multi-color;
+        margin: 1.25rem;
+      }
+    }
+  }
+}
diff --git a/src/components/Connection/ConnectionLaunch.tsx b/src/components/Connection/ConnectionLaunch.tsx
index 0a221cacb6fffa3acc02cfa3da5b4f91e75dda9f..fc63cb1a66afab12ef0c4a7b20dff32b78b180f1 100644
--- a/src/components/Connection/ConnectionLaunch.tsx
+++ b/src/components/Connection/ConnectionLaunch.tsx
@@ -17,6 +17,7 @@ import Modal from 'components/CommonKit/Modal/Modal'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import errorIcon from 'assets/icons/visu/data-nok.svg'
 import successIcon from 'assets/icons/visu/data-ok.svg'
+import './ConnectionLaunch.scss'
 
 const loadingOptions = {
   loop: true,
diff --git a/src/styles/components/_form.scss b/src/components/Connection/ConnectionLoginForm.scss
similarity index 77%
rename from src/styles/components/_form.scss
rename to src/components/Connection/ConnectionLoginForm.scss
index cdacb2d40ca969f22e6e6585f525e13e0c99285e..258cf9df8a7441e9ca934cbcc0615746a0640aa7 100644
--- a/src/styles/components/_form.scss
+++ b/src/components/Connection/ConnectionLoginForm.scss
@@ -1,5 +1,19 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+// KonnectorLoginForm
+.kloginauthform {
+  .create-account {
+    color: $grey-bright;
+  }
+  .kloginauthform-text {
+    color: $grey-bright;
+    padding-top: 1rem;
+  }
+  .kloginauthform-button {
+    margin-bottom: 1rem;
+  }
+}
 
 .form {
   padding: 1rem;
diff --git a/src/components/Connection/ConnectionLoginForm.tsx b/src/components/Connection/ConnectionLoginForm.tsx
index e8a494ea285080699163a3ff08388ab4d3c388eb..c61650daeae0b8efb81fd6fcee07bfcc4cd726cc 100644
--- a/src/components/Connection/ConnectionLoginForm.tsx
+++ b/src/components/Connection/ConnectionLoginForm.tsx
@@ -14,6 +14,8 @@ import iconGRDFLogo from 'assets/icons/visu/grdf-logo.svg'
 import iconEGLLogo from 'assets/icons/visu/egl-logo.svg'
 import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import './Auth.scss'
+import './ConnectionLoginForm.scss'
 
 interface ConnectionLoginFormProps {
   fluidConfig: FluidConfig
diff --git a/src/components/Connection/ConnectionNotFound.scss b/src/components/Connection/ConnectionNotFound.scss
new file mode 100644
index 0000000000000000000000000000000000000000..180ec9800d9a9338742a2ce3bd015aebfbe20cd5
--- /dev/null
+++ b/src/components/Connection/ConnectionNotFound.scss
@@ -0,0 +1,16 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+// KonnectorNotFound
+.knotfound {
+  margin: 0 1.5rem;
+  @media #{$large-phone} {
+    margin: 0;
+  }
+  .knotfound-text {
+    color: $grey-bright;
+    padding-top: 1rem;
+  }
+  .knotfound-button {
+    margin-bottom: 1rem;
+  }
+}
diff --git a/src/components/Connection/ConnectionNotFound.tsx b/src/components/Connection/ConnectionNotFound.tsx
index 96a388bb3fb2d0d2d28c6ae7f355873068d3fd2c..fa24ecf2a6fb080d3d6c8163edbc4a7f8972a1ea 100644
--- a/src/components/Connection/ConnectionNotFound.tsx
+++ b/src/components/Connection/ConnectionNotFound.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
 import StyledButton from 'components/CommonKit/Button/StyledButton'
-
+import './ConnectionNotFound.scss'
 interface ConnectionNotFoundProps {
   konnectorSlug: string
 }
diff --git a/src/components/Connection/ConnectionOAuthForm.scss b/src/components/Connection/ConnectionOAuthForm.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ba1d2923f2c352e4d24b34f47c539b0c4dcbcb41
--- /dev/null
+++ b/src/components/Connection/ConnectionOAuthForm.scss
@@ -0,0 +1,21 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+// KonnectorOAuthForm
+.koauthform {
+  margin: 0 1.5rem;
+  padding: 0 1rem;
+  .create-account {
+    color: $grey-bright;
+  }
+  @media #{$large-phone} {
+    margin: 0;
+    padding: 0 1rem;
+  }
+  .koauthform-text {
+    color: $grey-bright;
+    padding-top: 1rem;
+  }
+  .koauthform-button {
+    margin-bottom: 1rem;
+  }
+}
diff --git a/src/components/Connection/ConnectionOAuthForm.tsx b/src/components/Connection/ConnectionOAuthForm.tsx
index 550f0d8d61545d06be1a9e02707249b4df2ff18c..6594f99ead998e37889eeca31e372b221e037ad5 100644
--- a/src/components/Connection/ConnectionOAuthForm.tsx
+++ b/src/components/Connection/ConnectionOAuthForm.tsx
@@ -7,7 +7,7 @@ import OAuthForm from 'components/Connection/OAuthForm'
 import StyledButton from 'components/CommonKit/Button/StyledButton'
 import AccountService from 'services/account.service'
 import TriggerService from 'services/triggers.service'
-
+import './ConnectionOAuthForm.scss'
 interface ConnectionOAuthFormProps {
   fluidConfig: FluidConfig
   konnector: Konnector
diff --git a/src/components/Connection/ConnectionResult.scss b/src/components/Connection/ConnectionResult.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aefee5e6557bf843c9e513b86c83e4fec1142d02
--- /dev/null
+++ b/src/components/Connection/ConnectionResult.scss
@@ -0,0 +1,67 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.accordion-update-result {
+  margin: 1rem 0;
+  @media #{$large-phone} {
+    margin: 0.5rem 0;
+  }
+}
+.accordion-update {
+  flex: 2;
+  padding: 0.5rem 1rem;
+}
+.accordion-update-errored {
+  padding: 0.5rem 1rem;
+  background-color: $red-primary;
+}
+.accordion-state {
+  flex: 2;
+  margin-right: 1rem;
+}
+.accordion-frequency {
+  flex: 1;
+  padding: 0 1rem;
+}
+.accordion-caption {
+  color: $grey-bright;
+  text-transform: lowercase;
+  &::first-letter {
+    text-transform: uppercase;
+  }
+}
+.accordion-caption-errored {
+  display: flex;
+  align-items: center;
+  color: $grey-bright;
+}
+.warning-white {
+  margin-right: 1rem;
+}
+.warning-icon {
+  margin-right: 1rem;
+}
+.accordion-content {
+  overflow: hidden;
+  transition: max-height 0.6s ease;
+  .info-provider {
+    padding: 0;
+    color: $grey-bright;
+    margin-bottom: 0;
+  }
+}
+.inline-buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 0 2rem;
+  @media #{$large-phone} {
+    padding: 0 1rem;
+  }
+}
+.konnector-delete {
+  margin-right: 0.25rem;
+  color: $red-primary !important;
+}
+.konnector-update {
+  margin-left: 0.25rem;
+}
diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx
index 769b85633c6730ac21fb813c58182d38b0653fa3..2dbea09454ffb97672db0e3988749e45bdf083f8 100644
--- a/src/components/Connection/ConnectionResult.tsx
+++ b/src/components/Connection/ConnectionResult.tsx
@@ -22,7 +22,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import warningWhite from 'assets/icons/ico/warning-white.svg'
 import StyledButton from 'components/CommonKit/Button/StyledButton'
 import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
-
+import './ConnectionResult.scss'
 interface ConnectionResultProps {
   account: Account
   konnector: Konnector
diff --git a/src/components/Connection/OAuthForm.tsx b/src/components/Connection/OAuthForm.tsx
index 252f08b711621538fced7e818129dcbdd312207b..bace6ef622cd8ddb40ec1d0aecbe97f855e2360f 100644
--- a/src/components/Connection/OAuthForm.tsx
+++ b/src/components/Connection/OAuthForm.tsx
@@ -14,7 +14,7 @@ import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
 import ModalGRDF from './ModalGRDF'
-
+import './Auth.scss'
 interface OAuthFormProps {
   konnector: Konnector
   onSuccess: Function
diff --git a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.scss b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8182aca7af197cc87f4ab967a1ad8b538b7bfd2b
--- /dev/null
+++ b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.scss
@@ -0,0 +1,44 @@
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
+
+// Enedis Half Hour Load Activation
+.cta-box {
+  background-color: rgba(18, 18, 18, 0.8);
+  position: absolute;
+  left: 0;
+  width: calc(100vw - 220px);
+  padding: 0rem 1rem 0rem 0rem;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 37.5rem;
+  @media #{$large-phone} {
+    height: 29rem;
+    width: 100vw;
+  }
+  @media #{$tablet} {
+    width: 100vw;
+  }
+
+  .cta-box-header {
+    text-align: center;
+    font-weight: bold;
+    letter-spacing: 0.2px;
+    margin-bottom: 1.5em;
+    color: $grey-bright;
+    width: 50%;
+    @media #{$large-phone} {
+      width: 80%;
+    }
+  }
+  .cta-box-button {
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+    @media #{$large-phone} {
+      width: 80%;
+    }
+  }
+}
diff --git a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
index 9f1a5da1529ed7ae6a78372af37f5343fa6bbdf9..d051891569136def8cd93ee13850fb6500cc59b3 100644
--- a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
+++ b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
@@ -6,6 +6,7 @@ import ConfigService from 'services/fluidConfig.service'
 import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
+import './ActivateHalfHourLoad.scss'
 
 const ActivateHalfHourLoad = () => {
   const { t } = useI18n()
diff --git a/src/styles/components/_navigator.scss b/src/components/ConsumptionNavigator/ConsumptionNavigator.scss
similarity index 75%
rename from src/styles/components/_navigator.scss
rename to src/components/ConsumptionNavigator/ConsumptionNavigator.scss
index 4c06c76238bba44f1af8796f81123db223baa4a5..c934f5412bcc504fa2141c53e963ccc7f1a9ae12 100644
--- a/src/styles/components/_navigator.scss
+++ b/src/components/ConsumptionNavigator/ConsumptionNavigator.scss
@@ -1,10 +1,9 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/breakpoint';
 
 .cn {
   display: flex;
   justify-content: center;
-  .cn-tabs{
+  .cn-tabs {
     width: 50.625rem;
     @media #{$large-phone} {
       width: 100%;
@@ -14,4 +13,4 @@
       outline: none !important;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx b/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
index d20588ec8adfab19fe0490ce88b922e12f09df83..3b1ba0aa5a90e0ef9901a2edcd522078ac9a7b55 100644
--- a/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
+++ b/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
@@ -6,7 +6,7 @@ import { TimeStep } from 'enum/timeStep.enum'
 
 import Tabs from 'components/CommonKit/Tabs/StyledTabs'
 import Tab from 'components/CommonKit/Tabs/StyledTab'
-
+import './ConsumptionNavigator.scss'
 interface ConsumptionNavigatorProps {
   fluidTypes: FluidType[]
   multiFluid: boolean
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..59e717757e20fce669c3ba5d6961327c7b09da93
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.scss
@@ -0,0 +1,17 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.cv {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 27.5rem;
+  @media #{$large-phone} {
+    width: 100%;
+  }
+  .cv-info {
+    min-height: 1.5rem;
+    display: flex;
+    align-items: center;
+  }
+}
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index ad0b3b4fca4f3372fc8e586b4f5e05e85f8463c9..e4a5af3b85c54049273a49c561e269cb1a358733 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -11,7 +11,7 @@ import DataloadConsumptionVisualizer from 'components/ConsumptionVisualizer/Data
 import DetailedConsumptionVisualizer from 'components/ConsumptionVisualizer/DetailedConsumptionVisualizer'
 import LastDataConsumptionVisualizer from 'components/ConsumptionVisualizer/LastDataConsumptionVisualizer'
 import ErrorDataConsumptionVisualizer from 'components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer'
-
+import './ConsumptionVisualizer.scss'
 interface ConsumptionVisualizerProps {
   fluidTypes: FluidType[]
   timeStep: TimeStep
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d8e7927d57569eef860db628be61a5f3ef777053
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.scss
@@ -0,0 +1,79 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.cv-load {
+  min-height: 5.25rem;
+  display: flex;
+  align-items: center;
+  .cv-load-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: $grey-bright;
+    .cv-load-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0.5rem 0.5rem;
+      &.cv-load-section-left {
+        align-items: flex-end;
+      }
+      &.cv-load-section-right {
+        align-items: flex-start;
+      }
+      .cv-load-value {
+        flex-direction: row;
+        & span {
+          align-self: flex-end;
+          margin-left: 0.5em;
+        }
+      }
+    }
+  }
+}
+.cv-euro {
+  display: flex;
+  flex-direction: row;
+  .cv-euro-link {
+    text-decoration: none;
+    color: transparent;
+  }
+  .cv-euro-fluid {
+    padding: 0 0.5rem;
+    display: flex;
+    align-items: center;
+    .cv-euro-fluid-icon {
+      margin-right: 0.5rem;
+    }
+    & div {
+      padding-top: 0.2rem;
+    }
+  }
+  .electricity {
+    color: $elec-color;
+  }
+  .electricity-compare {
+    color: $elec-compare-color;
+  }
+  .water {
+    color: $water-color;
+  }
+  .water-compare {
+    color: $water-compare-color;
+  }
+  .gas {
+    color: $gas-color;
+  }
+  .gas-compare {
+    color: $gas-compare-color;
+  }
+  .multifluid {
+    color: $white;
+  }
+  .multifluid-compare {
+    color: $multi-compare-color;
+  }
+  .error {
+    color: $red-primary;
+  }
+}
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 6c17b3cf38c80d9543c2c8b6d27266cd563ea678..e2cd4fec9a59d5c30b065cf1c3f283610f80cf9a 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -11,7 +11,7 @@ import { getPicto } from 'utils/picto'
 import { formatNumberValues } from 'utils/utils'
 
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-
+import './DataloadConsumptionVisualizer.scss'
 interface DataloadConsumptionVisualizerProps {
   fluidTypes: FluidType[]
   dataload: Dataload
diff --git a/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5ddc316fab6617ae85d9a98dcd20a178973362f5
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.scss
@@ -0,0 +1,8 @@
+@import 'src/styles/base/color';
+
+.cv-button {
+  border: none;
+  background: none;
+  color: $soft-grey;
+  text-decoration: underline;
+}
diff --git a/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
index 32da7289e3b93fcb3cc06624305d3779ccdee6e3..0b23e1f5fe4b9fc0d3d5132a12948ce3c63c7229 100644
--- a/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType } from 'enum/fluid.enum'
 import { TimeStep } from 'enum/timeStep.enum'
-
+import './DetailedConsumptionVisualizer.scss'
 interface DetailedConsumptionVisualizerProps {
   fluidTypes: FluidType[]
   timeStep: TimeStep
diff --git a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f53c69afaf39ade6892966d2a1947198d0654174
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.scss
@@ -0,0 +1,14 @@
+@import 'src/styles/base/color';
+
+.error-line {
+  color: $red-primary;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.underlined-error {
+  border-bottom: solid 1px $red-primary;
+}
+.warning-icon {
+  margin-right: 4px;
+}
diff --git a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
index 4e0b09de54048ec3a5051f11579e5834711c0eb6..117d342f5817da4f15c17d70cadf41295d0d072a 100644
--- a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
@@ -3,6 +3,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { DateTime, Interval } from 'luxon'
 import warning from 'assets/icons/ico/warning.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import './ErrorDataConsumptionVisualizer.scss'
 
 interface ErrorDataConsumptionVisualizerProps {
   lastDateWithAllData: DateTime
diff --git a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
index b0b464f8604cc429f643afa8a6f0693b1830ddc4..04437e19cd9a88b4041ffaedc0131575ac847321 100644
--- a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType } from 'enum/fluid.enum'
 import { TimeStep } from 'enum/timeStep.enum'
+import './DetailedConsumptionVisualizer.scss'
 
 interface LastDataConsumptionVisualizerProps {
   fluidTypes: FluidType[]
diff --git a/src/components/Ecogesture/EcogestureCard.scss b/src/components/Ecogesture/EcogestureCard.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4442a93738cc13e19b1503d4fcef77f1aa45f7ae
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureCard.scss
@@ -0,0 +1,64 @@
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
+
+// EcogestureCard
+.ec {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .ecogesture-card-notif {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    right: 8px;
+    top: 8px;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: $dark-light;
+    border-radius: 50%;
+    border: 1px solid $dark-light;
+    z-index: 1;
+    background: $blue-radial-gradient;
+    font-size: 12px;
+  }
+
+  .ec-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    &.ec-content-unlocked {
+      padding: 0.4rem 0;
+    }
+    &.ec-content-challenge {
+      padding: 0.5rem 0;
+    }
+    .ec-content-icon {
+      min-height: 50px;
+    }
+    .ec-content-short-name {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      text-align: center;
+    }
+    .ec-content-nwh {
+      margin-top: 0.25rem;
+      color: $soft-grey;
+    }
+  }
+}
+.cp-eg-1 {
+  height: 8rem;
+  width: 100%;
+  margin-right: 0.25rem;
+  text-align: center;
+}
+.cp-eg-2 {
+  height: 8rem;
+  width: 100%;
+  margin-left: 0.25rem;
+  text-align: center;
+}
diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index e3771b68fa5b9230e1424848f8b467da859d595e..4fc5078f030de80d1a88f0dbd883b55c177244ff 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -4,7 +4,7 @@ import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { importIconbyId } from 'utils/utils'
-
+import './EcogestureCard.scss'
 interface EcogestureCardProps {
   ecogesture: Ecogesture
   handleClick?: (ecogesture: Ecogesture) => void
diff --git a/src/styles/components/_ecogesture.scss b/src/components/Ecogesture/EcogestureList.scss
similarity index 51%
rename from src/styles/components/_ecogesture.scss
rename to src/components/Ecogesture/EcogestureList.scss
index 10332c12e3521c8cffbdefc73e399e11405fb09a..9a77dc7b9adcc2ee9dcef441d832c4e13720dc77 100644
--- a/src/styles/components/_ecogesture.scss
+++ b/src/components/Ecogesture/EcogestureList.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
 
 // EcogestureCardContainer
 .ecogesture-root {
@@ -153,166 +153,3 @@
     }
   }
 }
-
-// EcogestureCard
-.ec {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  .ecogesture-card-notif {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    right: 8px;
-    top: 8px;
-    width: 1.25rem;
-    height: 1.25rem;
-    color: $dark-light;
-    border-radius: 50%;
-    border: 1px solid $dark-light;
-    z-index: 1;
-    background: $blue-radial-gradient;
-    font-size: 12px;
-  }
-
-  .ec-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    &.ec-content-unlocked {
-      padding: 0.4rem 0;
-    }
-    &.ec-content-challenge {
-      padding: 0.5rem 0;
-    }
-    .ec-content-icon {
-      min-height: 50px;
-    }
-    .ec-content-short-name {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      text-align: center;
-    }
-    .ec-content-nwh {
-      margin-top: 0.25rem;
-      color: $soft-grey;
-    }
-  }
-}
-.cp-eg-1 {
-  height: 8rem;
-  width: 100%;
-  margin-right: 0.25rem;
-  text-align: center;
-}
-.cp-eg-2 {
-  height: 8rem;
-  width: 100%;
-  margin-left: 0.25rem;
-  text-align: center;
-}
-
-// EcogestureModal
-.em-header {
-  color: $grey-bright;
-  border-bottom: 1px solid rgba(163, 163, 163, 0.4);
-  padding-bottom: 1em;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.em-root {
-  overflow: auto;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  /* width */
-  &::-webkit-scrollbar {
-    width: 10px;
-  }
-  /* Track */
-  &::-webkit-scrollbar-track {
-    background: $scrollbar-track;
-  }
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background: $scrollbar-thumb;
-  }
-  .em-content {
-    padding: 1.5rem 2.5rem 0;
-
-    @media #{$large-phone} {
-      width: 100%;
-      padding: 1.5rem 1.5rem 0;
-    }
-    .em-content-box-img {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      .icon {
-        margin-bottom: 1rem;
-      }
-    }
-    .em-detail {
-      display: flex;
-      flex-direction: row;
-      margin: 0.5em 0;
-      .em-detail-nwh {
-        display: flex;
-        flex: 1;
-        align-self: flex-start;
-        margin-top: 0.65rem;
-        color: $soft-grey;
-        .em-detail-nwh-unit {
-          margin-left: 0.2rem;
-        }
-      }
-      .em-picto-flow {
-        display: flex;
-        align-self: flex-end;
-        .em-pic-content {
-          margin: 0.3em;
-        }
-      }
-    }
-    .em-title {
-      margin-bottom: 0;
-      text-align: center;
-    }
-
-    .long-name {
-      font-weight: bold;
-      line-height: 150%;
-      margin: 0.5rem 0 1rem;
-    }
-    .em-description {
-      padding-bottom: 2rem;
-    }
-  }
-}
-.em-content-box-text {
-  display: flex;
-  flex-direction: column;
-  padding: 1.5rem 2.5rem;
-  @media #{$large-phone} {
-    padding: 1.5rem 1.5rem;
-  }
-  .em-description {
-    padding-bottom: 2rem;
-  }
-  .em-description-2 {
-    padding-top: 2rem;
-  }
-  .em-description-3 {
-    padding-bottom: 0.5rem;
-  }
-  .em-title {
-    margin-bottom: 0;
-  }
-}
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index c6c6506f9d7eed939721deb516693e73920eea8e..9dda23d544c252f9fc04e064c1dcadec1fe8224a 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -19,6 +19,7 @@ import EcogestureModal from 'components/Ecogesture/EcogestureModal'
 import NegaWattModal from 'components/Ecogesture/NegaWattModal'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import './EcogestureList.scss'
 
 const EcogesturesList: React.FC = () => {
   const { t } = useI18n()
diff --git a/src/components/Ecogesture/EcogestureModal.scss b/src/components/Ecogesture/EcogestureModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..549348ef0982d9d413842301d4b65067ae2691e1
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureModal.scss
@@ -0,0 +1,103 @@
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
+
+// EcogestureModal
+.em-header {
+  color: $grey-bright;
+  border-bottom: 1px solid rgba(163, 163, 163, 0.4);
+  padding-bottom: 1em;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.em-root {
+  overflow: auto;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  /* width */
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: $scrollbar-track;
+  }
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: $scrollbar-thumb;
+  }
+  .em-content {
+    padding: 1.5rem 2.5rem 0;
+
+    @media #{$large-phone} {
+      width: 100%;
+      padding: 1.5rem 1.5rem 0;
+    }
+    .em-content-box-img {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .icon {
+        margin-bottom: 1rem;
+      }
+    }
+    .em-detail {
+      display: flex;
+      flex-direction: row;
+      margin: 0.5em 0;
+      .em-detail-nwh {
+        display: flex;
+        flex: 1;
+        align-self: flex-start;
+        margin-top: 0.65rem;
+        color: $soft-grey;
+        .em-detail-nwh-unit {
+          margin-left: 0.2rem;
+        }
+      }
+      .em-picto-flow {
+        display: flex;
+        align-self: flex-end;
+        .em-pic-content {
+          margin: 0.3em;
+        }
+      }
+    }
+    .em-title {
+      margin-bottom: 0;
+      text-align: center;
+    }
+
+    .long-name {
+      font-weight: bold;
+      line-height: 150%;
+      margin: 0.5rem 0 1rem;
+    }
+    .em-description {
+      padding-bottom: 2rem;
+    }
+  }
+}
+.em-content-box-text {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 2.5rem;
+  @media #{$large-phone} {
+    padding: 1.5rem 1.5rem;
+  }
+  .em-description {
+    padding-bottom: 2rem;
+  }
+  .em-description-2 {
+    padding-top: 2rem;
+  }
+  .em-description-3 {
+    padding-bottom: 0.5rem;
+  }
+  .em-title {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index 4f00d021203b758af72c3a3c6d92129c25f798c8..6392042a387a5fc3e7538a1bd0427e7020762be7 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -8,6 +8,7 @@ import Modal from 'components/CommonKit/Modal/Modal'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
 import { importIconbyId } from 'utils/utils'
+import './EcogestureModal.scss'
 
 interface EcogestureModalProps {
   open: boolean
diff --git a/src/components/FAQ/FAQContent.scss b/src/components/FAQ/FAQContent.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b33647103d9a41f4627f54aa228f09295ff47d60
--- /dev/null
+++ b/src/components/FAQ/FAQContent.scss
@@ -0,0 +1,30 @@
+@import 'src/styles/base/breakpoint';
+
+// FAQ
+.faq-view-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 0;
+  margin-top: 1.5rem;
+  .faq-view-content {
+    width: 45.75rem;
+    @media #{$large-phone} {
+      width: 100%;
+    }
+    .faq-content-detail {
+      padding-bottom: 0.6rem;
+      .text-bold {
+        font-weight: bold;
+      }
+      .text-underline {
+        text-decoration: underline;
+      }
+      .spaceline {
+        height: 0.6rem;
+        display: block;
+      }
+    }
+  }
+}
diff --git a/src/components/FAQ/FAQContent.tsx b/src/components/FAQ/FAQContent.tsx
index b677f3fbb2ca66abbf5aa17dd8e63a8bf46fa4b4..eb00f7bb29959f80e914ebfdb926efb237162ee7 100644
--- a/src/components/FAQ/FAQContent.tsx
+++ b/src/components/FAQ/FAQContent.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import GenericExpansionPanel from 'components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel'
 import FAQJSon from 'db/FAQ.json'
+import './FAQContent.scss'
 
 const decoreText = (line: string) => {
   if (line === ' ') {
diff --git a/src/styles/components/_faq.scss b/src/components/FAQ/FAQLink.scss
similarity index 59%
rename from src/styles/components/_faq.scss
rename to src/components/FAQ/FAQLink.scss
index f825f0989a426a16e91302b3423cab3eaed732a4..2e042d93e53035a4c494e0f9bf514e690e999638 100644
--- a/src/styles/components/_faq.scss
+++ b/src/components/FAQ/FAQLink.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 // FAQContainer
 .faq-root {
@@ -49,32 +49,3 @@
     }
   }
 }
-
-// FAQ
-.faq-view-root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 0;
-  margin-top: 1.5rem;
-  .faq-view-content {
-    width: 45.75rem;
-    @media #{$large-phone} {
-      width: 100%;
-    }
-    .faq-content-detail {
-      padding-bottom: 0.6rem;
-      .text-bold {
-        font-weight: bold;
-      }
-      .text-underline {
-        text-decoration: underline;
-      }
-      .spaceline {
-        height: 0.6rem;
-        display: block;
-      }
-    }
-  }
-}
diff --git a/src/components/FAQ/FAQLink.tsx b/src/components/FAQ/FAQLink.tsx
index 941d6020fcd2832bc287878a8f33624a4119bdd7..0b1759d52b00c7b64b4c089baee94b3656a3513d 100644
--- a/src/components/FAQ/FAQLink.tsx
+++ b/src/components/FAQ/FAQLink.tsx
@@ -5,6 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import QuestionMarkIcon from 'assets/icons/ico/question-mark.svg'
+import './FAQLink.scss'
 
 const FAQLink: React.FC = () => {
   const { t } = useI18n()
diff --git a/src/components/Favorite/FavoriteModal.scss b/src/components/Favorite/FavoriteModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..441bb698e9a9327fdba8838dd7d1fd12fe95dc35
--- /dev/null
+++ b/src/components/Favorite/FavoriteModal.scss
@@ -0,0 +1,31 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.wm-header {
+  background: $multi-color-radial-gradient;
+  background-clip: 'text';
+  -webkit-background-clip: text;
+  color: transparent;
+  margin-top: 2rem;
+}
+.wm-name {
+  background: $multi-color-radial-gradient;
+  background-clip: 'text';
+  -webkit-background-clip: text;
+  color: transparent;
+  margin-bottom: 1.25rem;
+}
+.button-ok {
+  width: 90%;
+  margin-bottom: 2rem;
+}
+.wm-perso {
+  text-align: center;
+  width: 60%;
+  margin: 1rem;
+}
+.wm-connect {
+  text-align: center;
+  width: 88%;
+  margin: 1rem;
+}
diff --git a/src/components/Favorite/FavoriteModal.tsx b/src/components/Favorite/FavoriteModal.tsx
index 7c474a97bcdc0f913515e26262e433f1a061cedd..2afbc7e4e064e83ef517ccd77d935b7fc01857d9 100644
--- a/src/components/Favorite/FavoriteModal.tsx
+++ b/src/components/Favorite/FavoriteModal.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Modal from 'components/CommonKit/Modal/Modal'
 import StyledButton from 'components/CommonKit/Button/StyledButton'
-
+import './FavoriteModal.scss'
 interface FavoriteModalContainerProps {
   open: boolean
   handleCloseClick: () => void
diff --git a/src/styles/components/_feedback.scss b/src/components/Feedback/FeedBackModal.scss
similarity index 96%
rename from src/styles/components/_feedback.scss
rename to src/components/Feedback/FeedBackModal.scss
index baab42b3b7d250a662fecc89de4adc2eecfabff1..954428c8000d433975d042172dff8b42480cc8b2 100644
--- a/src/styles/components/_feedback.scss
+++ b/src/components/Feedback/FeedBackModal.scss
@@ -1,5 +1,4 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
 
 .fb-root {
   overflow-y: auto;
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index ac63c359dd2cb69827a1ec2d63d0450d6784157d..2ab2c918cc8c5fbdb02c01bbcd37f081230a86c5 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -17,6 +17,7 @@ import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
 import warningIcon from 'assets/icons/ico/warning-yellow.svg'
 import successIcon from 'assets/icons/visu/data-ok.svg'
 import MailService from 'services/mail.service'
+import './FeedbackModal.scss'
 
 const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
 const browser = detect()
diff --git a/src/components/FluidChart/FluidChart.scss b/src/components/FluidChart/FluidChart.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b8dba015919f6eff78a976e6821a96b2ac7b79f
--- /dev/null
+++ b/src/components/FluidChart/FluidChart.scss
@@ -0,0 +1,51 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+//SelectFluid
+// .sf {
+//   display: flex;
+//   flex-direction: column;
+//   .sf-header {
+//     .sf-header-title {
+//       color: $grey-bright;
+//     }
+//     .sf-header-text {
+//       color: $soft-grey;
+//     }
+//   }
+//   .sf-content {
+//     display: flex;
+//     flex-direction: column;
+//     align-items: center;
+//     margin-top: 3rem;
+//     .sf-link {
+//       margin: 1rem;
+//     }
+//   }
+// }
+
+//FluidContainer
+.fc-root {
+  background-color: $dark-light-2;
+  padding: 2rem 2rem 1rem 2rem;
+  margin-bottom: 1rem;
+  @media #{$large-phone} {
+    padding: 1.5rem 1rem 1rem 1rem;
+    margin-bottom: 0.5rem;
+  }
+  .fc-content {
+    min-height: 31.875rem;
+    @media #{$large-phone} {
+      min-height: 23.875rem;
+    }
+    .fc-loader {
+      min-height: 31.875rem;
+      @media #{$large-phone} {
+        min-height: 23.875rem;
+      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 2ab7a96b9daa98fb3fd8b0ae31dd10094adff57b..5c10d3b6edfd19f7beb292694ccaf3d392b819ed 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -8,7 +8,7 @@ import ConsumptionService from 'services/consumption.service'
 
 import FluidChartContent from 'components/FluidChart/FluidChartContent'
 import ActivateHalfHourLoad from 'components/ConsumptionNavigator/ActivateHalfHourLoad'
-
+import './FluidChart.scss'
 interface FluidChartProps {
   timeStep: TimeStep
   fluidTypes: FluidType[]
diff --git a/src/components/FluidChart/FluidChartContent.scss b/src/components/FluidChart/FluidChartContent.scss
new file mode 100644
index 0000000000000000000000000000000000000000..21ac4548f28e21f774941186b1534dccc1ed62d0
--- /dev/null
+++ b/src/components/FluidChart/FluidChartContent.scss
@@ -0,0 +1,64 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+//FluidView
+.fv-root {
+  direction: 'rtl';
+  .fv-nav-period {
+    display: flex;
+    flex-direction: row;
+    & .nav-button {
+      flex: 1;
+      font-size: large;
+    }
+  }
+  .fv-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 8.375rem;
+    margin-bottom: 0.25rem;
+  }
+  .fv-footer {
+    display: flex;
+    justify-content: center;
+    .fv-footer-compare {
+      width: 100%;
+      max-width: 58.75rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      & :hover {
+        cursor: pointer;
+      }
+      & .fv-footer-label {
+        flex: 1;
+        display: flex;
+        justify-content: flex-start;
+        color: $soft-grey;
+        &.selected {
+          color: $white;
+        }
+      }
+    }
+
+    .fv-footer-challenge {
+      width: 100%;
+      max-width: 58.75rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .fv-link {
+        text-decoration: none;
+        color: $soft-grey;
+      }
+      & .fv-footer-label-padding {
+        flex: 1;
+        display: flex;
+        justify-content: flex-start;
+        padding-left: 0.75rem;
+        color: $soft-grey;
+      }
+    }
+  }
+}
diff --git a/src/components/FluidChart/FluidChartContent.tsx b/src/components/FluidChart/FluidChartContent.tsx
index 2790d0bea1c8df8a809621e62baba5c6f6fa39c7..3ac06b9f10c01bda25e96952fc17e5f5ba23940d 100644
--- a/src/components/FluidChart/FluidChartContent.tsx
+++ b/src/components/FluidChart/FluidChartContent.tsx
@@ -10,6 +10,7 @@ import DateChartService from 'services/dateChart.service'
 import Switch from 'components/CommonKit/Switch/StyledSwitch'
 import FluidChartSwipe from 'components/FluidChart/FluidChartSwipe'
 import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
+import './FluidChartContent.scss'
 
 interface FluidChartContentProps {
   fluidTypes: FluidType[]
diff --git a/src/components/FluidChart/FluidChartSlide.scss b/src/components/FluidChart/FluidChartSlide.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0a247a3238cbcaea32d389a34989555973063e18
--- /dev/null
+++ b/src/components/FluidChart/FluidChartSlide.scss
@@ -0,0 +1,19 @@
+@import 'src/styles/base/breakpoint';
+
+.fs-slide {
+  min-height: 22rem;
+  overflow-x: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @media #{$large-phone} {
+    min-height: 14rem;
+  }
+  .chart-none {
+    visibility: hidden;
+    width: 0;
+  }
+  .chart-block {
+    visibility: visible;
+  }
+}
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 0f3ca01e7a4c153b8d635af46590f523aabe8c59..bd0e58fffa65062df9a4373dfd54788bd6131600 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -13,6 +13,7 @@ import DateChartService from 'services/dateChart.service'
 
 import BarChart from 'components/Charts/BarChart'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import './FluidChartSlide.scss'
 
 interface FluidChartSlideProps {
   index: number
diff --git a/src/components/FluidChart/FluidChartSwipe.scss b/src/components/FluidChart/FluidChartSwipe.scss
new file mode 100644
index 0000000000000000000000000000000000000000..df38cdc35b13e30ad0988e539276d615072f4fe2
--- /dev/null
+++ b/src/components/FluidChart/FluidChartSwipe.scss
@@ -0,0 +1,15 @@
+@import 'src/styles/base/breakpoint';
+
+//FluidSwipe
+.fs-root {
+  flex: 1;
+  height: 22rem;
+  @media #{$large-phone} {
+    height: 14rem;
+  }
+  .chart-loading {
+    width: 100%;
+    justify-content: center;
+    display: flex;
+  }
+}
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index bb612c347438501844f206d0983cc04684e6cecf..999ea2f9ecf3b88ef7ff9a59525146cde805140e 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -8,6 +8,7 @@ import { FluidType } from 'enum/fluid.enum'
 import { Dataload } from 'models'
 
 import FluidChartSlide from 'components/FluidChart/FluidChartSlide'
+import './FluidChartSwipe.scss'
 
 const VirtualizeSwipeableViews = virtualize(SwipeableViews)
 
diff --git a/src/styles/components/_oldDataModal.scss b/src/components/Home/OldFluidDataModal.scss
similarity index 94%
rename from src/styles/components/_oldDataModal.scss
rename to src/components/Home/OldFluidDataModal.scss
index 9902b3804c3ffccf38e724e1d3a1354746a4f1e8..5b7e8ab37ad5ed9a8bcf42b27e20a86b7cf9ccf7 100644
--- a/src/styles/components/_oldDataModal.scss
+++ b/src/components/Home/OldFluidDataModal.scss
@@ -1,3 +1,5 @@
+@import 'src/styles/base/color';
+
 .od-content {
   padding: 1.5rem;
   p {
diff --git a/src/components/Home/OldFluidDataModal.tsx b/src/components/Home/OldFluidDataModal.tsx
index a9dca0ffc1d9413bc313f0375d40c6427117d502..1c8a50d64f514d31b877445b2c2a737a47d78ea5 100644
--- a/src/components/Home/OldFluidDataModal.tsx
+++ b/src/components/Home/OldFluidDataModal.tsx
@@ -9,7 +9,7 @@ import { Redirect } from 'react-router-dom'
 
 import { FluidType } from 'enum/fluid.enum'
 import { FluidStatus } from 'models'
-
+import './OldFluidDataModal.scss'
 interface OldFluidDataModalProps {
   open: boolean
   fluidStatus: FluidStatus[]
diff --git a/src/components/Konnector/KonnectorViewerCard.scss b/src/components/Konnector/KonnectorViewerCard.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6eb517cf0fb673e7c43af17f9fe3cbf9af3b2d7a
--- /dev/null
+++ b/src/components/Konnector/KonnectorViewerCard.scss
@@ -0,0 +1,54 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  color: $white;
+  padding: 1rem 0;
+  margin-bottom: 2vh;
+  border-radius: 4px;
+  background: $grey-linear-gradient-background;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
+  transition: background-color 0.6s ease;
+  &.active {
+    background-color: $accordion-active-background;
+  }
+
+  .accordion-header {
+    display: flex;
+    align-items: center;
+    border: none;
+    outline: none;
+    padding: 0 1rem;
+    &:hover {
+      cursor: pointer;
+    }
+    .accordion-icon {
+      margin-right: 1rem;
+      @media #{$large-phone} {
+        max-width: 16vw;
+      }
+    }
+    .accordion-info {
+      flex: 3;
+      color: $grey-bright;
+      @media #{$large-phone} {
+        display: block;
+      }
+      .accordion-title {
+        flex: 1;
+        @media #{$large-phone} {
+          // margin-bottom: 1rem;
+        }
+      }
+    }
+    .state-picto {
+      position: absolute;
+      display: flex;
+    }
+  }
+}
+.--errored {
+  border: solid 1px $red-primary;
+}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 7acc60717cbb139b8607f36b7297c48bb78879d5..5107dba1954f92479692bc32aa7e229e2d274536 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -19,7 +19,7 @@ import ConnectionNotFound from 'components/Connection/ConnectionNotFound'
 import ConnectionForm from 'components/Connection/ConnectionForm'
 import ConnectionResult from 'components/Connection/ConnectionResult'
 import ConnectionLaunch from 'components/Connection/ConnectionLaunch'
-
+import './KonnectorViewerCard.scss'
 interface KonnectorViewerCardProps {
   fluidConfig: FluidConfig
   konnector: Konnector | null
diff --git a/src/components/Konnector/KonnectorViewerList.scss b/src/components/Konnector/KonnectorViewerList.scss
new file mode 100644
index 0000000000000000000000000000000000000000..43a42bff7bc9997cdc90a0def87516954cbfd822
--- /dev/null
+++ b/src/components/Konnector/KonnectorViewerList.scss
@@ -0,0 +1,28 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.kv-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5rem;
+  .kv-content {
+    width: 45.75rem;
+    @media #{$large-phone} {
+      width: 100%;
+    }
+    .kv-header {
+      margin-top: 2.5rem;
+      margin-bottom: 1.25rem;
+      color: $grey-bright;
+    }
+  }
+}
+.state-icon {
+  height: 22px;
+  width: 22px;
+  position: absolute;
+  bottom: 8px;
+  left: 30px;
+}
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 4dc60c02115aaa5e970d5f5bb4e5613c13f68263..25cdafcf226517a53466f290a54b7cf79ea67235 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -7,7 +7,7 @@ import { FluidConfig } from 'models'
 import ConfigService from 'services/fluidConfig.service'
 
 import KonnectorViewerListItem from 'components/Konnector/KonnectorViewerListItem'
-
+import './KonnectorViewerList.scss'
 interface KonnectorViewerListProps {
   isParam: boolean
 }
diff --git a/src/styles/components/_legalnotice.scss b/src/components/LegalNotice/LegalNoticeLink.scss
similarity index 93%
rename from src/styles/components/_legalnotice.scss
rename to src/components/LegalNotice/LegalNoticeLink.scss
index 7a121180ac5af6280e2a3b610e765b5ab6aa3842..0e881bb07447add2fa66d0feaaed8de1f5f5ea1c 100644
--- a/src/styles/components/_legalnotice.scss
+++ b/src/components/LegalNotice/LegalNoticeLink.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
 
 // LegalContainer
 .legal-notice-root {
@@ -36,7 +36,6 @@
     }
   }
 }
-
 .legal-notice-card-link {
   color: black;
 }
diff --git a/src/components/LegalNotice/LegalNoticeLink.tsx b/src/components/LegalNotice/LegalNoticeLink.tsx
index efc79367429a2560b6e83eb1eeb13dde00095c1b..cc63978a3160590c2e62dc02f566f46402b1e6b6 100644
--- a/src/components/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/LegalNotice/LegalNoticeLink.tsx
@@ -5,6 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import './LegalNoticeLink.scss'
 
 const LegalNoticeLink: React.FC = () => {
   const { t } = useI18n()
diff --git a/src/components/LegalNotice/LegalNoticeView.scss b/src/components/LegalNotice/LegalNoticeView.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4892e19f7b3bc74827827a43bdbd0886808eb128
--- /dev/null
+++ b/src/components/LegalNotice/LegalNoticeView.scss
@@ -0,0 +1,38 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+// LegalContainer
+.legal-notice-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: $white;
+  padding: 1.5rem 1.5rem 0;
+  .legal-notice-content {
+    p {
+      color: $white;
+    }
+    a {
+      color: $white;
+      text-decoration: none;
+    }
+    li {
+      margin: 1rem 0;
+    }
+    h2 {
+      color: $white;
+    }
+    h3 {
+      color: $white;
+      margin: 2.5rem 0 1rem;
+    }
+    .ln-contact {
+      color: $multi-color;
+    }
+    width: 45.75rem;
+    @media #{$large-phone} {
+      width: 100%;
+    }
+  }
+}
diff --git a/src/components/LegalNotice/LegalNoticeView.tsx b/src/components/LegalNotice/LegalNoticeView.tsx
index 71e43ff8496b133929d2bdc78fc692decf8e4043..526e260eedc7919d73289ecfa573630cc70f727c 100644
--- a/src/components/LegalNotice/LegalNoticeView.tsx
+++ b/src/components/LegalNotice/LegalNoticeView.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react'
 import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
 import Content from 'components/Content/Content'
+import './LegalNoticeView.scss'
 
 const LegalNoticeView: React.FC = () => {
   const [headerHeight, setHeaderHeight] = useState<number>(0)
diff --git a/src/styles/components/_nav.scss b/src/components/Navbar/NavBar.scss
similarity index 96%
rename from src/styles/components/_nav.scss
rename to src/components/Navbar/NavBar.scss
index 29fc686536260b1368b13147f0e6df19d785789f..29e8a99cf313542dc1fb066889d6105483a10008 100644
--- a/src/styles/components/_nav.scss
+++ b/src/components/Navbar/NavBar.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .o-sidebar {
   background-color: $dark-light;
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 922c3c1923402140a1248a0de2400082ba58a49b..2cc1a3689de268575fc88239ad87ade7c81c06d5 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -17,6 +17,7 @@ import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
 import logoTiga from 'assets/png/logo-TIGA.png'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { EcolyoState } from 'store'
+import './NavBar.scss'
 
 export const Navbar: React.FC = () => {
   const { t } = useI18n()
diff --git a/src/styles/components/_report.scss b/src/components/Options/ReportOptions.scss
similarity index 94%
rename from src/styles/components/_report.scss
rename to src/components/Options/ReportOptions.scss
index 16505e1fcf6ad153d5b2d8388eaf1920dcfcde7d..9f9fde66e03ab30412be30f1d031809a9ebd9cf4 100644
--- a/src/styles/components/_report.scss
+++ b/src/components/Options/ReportOptions.scss
@@ -1,3 +1,5 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 .report-option-root {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions.tsx
index 584e6b79cb69e5ae2a0e70f61d3a0cebe3b70bfe..a9f7ee7a163bad79c1dccf53f69ae68a72da2dba 100644
--- a/src/components/Options/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions.tsx
@@ -5,6 +5,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { EcolyoState } from 'store'
 import { updateProfile } from 'store/profile/profile.actions'
 import ProfileService from 'services/profile.service'
+import './ReportOptions.scss'
 
 const ReportOptions: React.FC = () => {
   const { t } = useI18n()
diff --git a/src/styles/components/_indicators.scss b/src/components/PerformanceIndicator/FluidPerformanceIndicator.scss
similarity index 83%
rename from src/styles/components/_indicators.scss
rename to src/components/PerformanceIndicator/FluidPerformanceIndicator.scss
index 9a7f344e62c1b5e6fca483056762a1a1290799ac..216632e0927b43bfb6c8328104b75585dc599afe 100644
--- a/src/styles/components/_indicators.scss
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 //FluidIndicator
 .fi-root {
@@ -25,30 +25,6 @@
       font-size: 1rem;
     }
   }
-  //SingleFluidIndicator
-  .sfi-content {
-    min-height: 16rem;
-    width: 45.75rem;
-    @media #{$large-phone} {
-      width: 100%;
-    }
-    .sfi-header {
-      margin-top: 2.5rem;
-      margin-bottom: 1.25rem;
-      color: $grey-bright;
-    }
-    .sfi-redirect {
-      margin-bottom: 1.25rem;
-      display: flex;
-      flex-wrap: wrap;
-      .redirect-card-link:nth-child(2) {
-        margin-left: 0.625rem;
-      }
-      .redirect-card-link {
-        flex: 1;
-      }
-    }
-  }
 }
 
 //FluidPerformanceIndicator
@@ -76,7 +52,7 @@
     .fpi-content {
       display: flex;
       flex-direction: row;
-      justify-content: center;
+      // justify-content: center;
       &:first-child() {
         margin-bottom: 0.75rem;
       }
@@ -168,4 +144,3 @@
   justify-content: center;
   align-items: center;
 }
-
diff --git a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
index 5c8c81d42c367d7707e1511148e183a716fc80bc..5b1ce95fbad7c827ed7c2df0f777237c26e1e9c3 100644
--- a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
@@ -11,7 +11,7 @@ import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import BlackArrowIcon from 'assets/icons/ico/black-arrow.svg'
 import ConverterService from 'services/converter.service'
-
+import './FluidPerformanceIndicator.scss'
 interface FluidPerformanceIndicatorProps {
   performanceIndicator: PerformanceIndicator
   fluidType: FluidType
diff --git a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
index a53b6c94d8204545ca9582ed4393e3d7fdddee63..5a3196835c61b90aa752a2824ba324c1097af824 100644
--- a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
+++ b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
@@ -13,6 +13,7 @@ import RedIndicatorIcon from 'assets/icons/visu/indicator/red.svg'
 import GreyIndicatorIcon from 'assets/icons/visu/indicator/grey.svg'
 import ErrorIndicatorIcon from 'assets/icons/visu/indicator/error.svg'
 import { FluidType } from 'enum/fluid.enum'
+import './FluidPerformanceIndicator.scss'
 
 interface PerformanceIndicatorContentProps {
   performanceIndicator: PerformanceIndicator
diff --git a/src/components/SingleFluid/SingleFluidIndicators.scss b/src/components/SingleFluid/SingleFluidIndicators.scss
new file mode 100644
index 0000000000000000000000000000000000000000..58f76cc9c2954c3a95351a469e7ff2dbf2f8ce61
--- /dev/null
+++ b/src/components/SingleFluid/SingleFluidIndicators.scss
@@ -0,0 +1,26 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+//SingleFluidIndicator
+.sfi-content {
+  min-height: 16rem;
+  width: 45.75rem;
+  @media #{$large-phone} {
+    width: 100%;
+  }
+  .sfi-header {
+    margin-top: 2.5rem;
+    margin-bottom: 1.25rem;
+    color: $grey-bright;
+  }
+  .sfi-redirect {
+    margin-bottom: 1.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    .redirect-card-link:nth-child(2) {
+      margin-left: 0.625rem;
+    }
+    .redirect-card-link {
+      flex: 1;
+    }
+  }
+}
diff --git a/src/components/SingleFluid/SingleFluidIndicators.tsx b/src/components/SingleFluid/SingleFluidIndicators.tsx
index 08602d77c4435c87c8900d8b2150cc3d8bbdfc77..2100f368463532cc1100a0a24ad4c7c16d629d5d 100644
--- a/src/components/SingleFluid/SingleFluidIndicators.tsx
+++ b/src/components/SingleFluid/SingleFluidIndicators.tsx
@@ -14,7 +14,7 @@ import PerformanceIndicatorService from 'services/performanceIndicator.service'
 
 import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent'
 import SingleFluidRedirect from 'components/SingleFluid/SingleFluidRedirect'
-
+import './SingleFluidIndicators.scss'
 interface SingleFluidIndicatorsProps {
   timeStep: TimeStep
   setIndicatorsLoaded(): void
diff --git a/src/styles/components/_card.scss b/src/components/SingleFluid/SingleFluidRedirect.scss
similarity index 67%
rename from src/styles/components/_card.scss
rename to src/components/SingleFluid/SingleFluidRedirect.scss
index 1db79c8548d1c6e1deb36b6bb3cbbd817cea6651..e6c5ef02be5bee059517bf096e9d868d81eefa32 100644
--- a/src/styles/components/_card.scss
+++ b/src/components/SingleFluid/SingleFluidRedirect.scss
@@ -1,6 +1,3 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
 // RedirectionMiniCard
 .redirect-card-link {
   color: transparent;
diff --git a/src/components/SingleFluid/SingleFluidRedirect.tsx b/src/components/SingleFluid/SingleFluidRedirect.tsx
index 729dbda1deeee315091a06aec040ac6467464799..7ef0fd51b46e2d98147a8aa21d05e32844d6e967 100644
--- a/src/components/SingleFluid/SingleFluidRedirect.tsx
+++ b/src/components/SingleFluid/SingleFluidRedirect.tsx
@@ -3,7 +3,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType } from 'enum/fluid.enum'
 import StyledIconCard from 'components/CommonKit/Card/StyledIconCard'
 import { NavLink } from 'react-router-dom'
-
+import './SingleFluidRedirect.scss'
 export interface SingleFluidRedirectProps {
   fluidTypes: FluidType[]
 }
diff --git a/src/components/SingleFluid/SingleFluidView.scss b/src/components/SingleFluid/SingleFluidView.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bf7115a90b235139a5eba3b36aad13e5329a5517
--- /dev/null
+++ b/src/components/SingleFluid/SingleFluidView.scss
@@ -0,0 +1,8 @@
+.chart-indicator-none {
+  visibility: hidden;
+  height: 0;
+}
+.chart-indicator-block {
+  visibility: visible;
+  height: auto;
+}
diff --git a/src/components/SingleFluid/SingleFluidView.tsx b/src/components/SingleFluid/SingleFluidView.tsx
index 0c49371a304e31df3e7490c12b394ac9d4d368b6..df334963ea9868450d5a48d98390461a6534e3d9 100644
--- a/src/components/SingleFluid/SingleFluidView.tsx
+++ b/src/components/SingleFluid/SingleFluidView.tsx
@@ -13,7 +13,7 @@ import Content from 'components/Content/Content'
 import FluidChart from 'components/FluidChart/FluidChart'
 import ConsumptionNavigator from 'components/ConsumptionNavigator/ConsumptionNavigator'
 import SingleFluidIndicators from 'components/SingleFluid/SingleFluidIndicators'
-
+import './SingleFluidView.scss'
 interface SingleFluidViewProps {
   fluidTypes: FluidType[]
 }
diff --git a/src/components/Splash/SplashRoot.scss b/src/components/Splash/SplashRoot.scss
new file mode 100644
index 0000000000000000000000000000000000000000..42e4ab918424b0e169bfd1b6c1927c61c76e5dd5
--- /dev/null
+++ b/src/components/Splash/SplashRoot.scss
@@ -0,0 +1,29 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.splash-root {
+  position: fixed;
+  z-index: 1500;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  opacity: 1;
+  overflow: hidden;
+  background-color: rgba(27, 28, 34, 1);
+  display: flex;
+  flex-direction: column;
+  transition-property: opacity;
+  transition-timing-function: ease-in-out;
+  &.splash-fade {
+    opacity: 0;
+  }
+}
+
+// .splash-header {
+//   height: 6rem;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   color: var(--greyBright);
+// }
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index 89b2a56179fe1b0a17959ec80cde6bd8f653b426..5b3f68ebe60fd56c00c2f6dd122d119f604db1e6 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -9,7 +9,7 @@ import {
 import { updateProfile } from 'store/profile/profile.actions'
 import { setUserSeasonList } from 'store/season/season.actions'
 import InitializationService from 'services/initialization.service'
-
+import './SplashRoot.scss'
 interface SplashRootProps {
   fadeTimer?: number
   splashComponent: ComponentType
diff --git a/src/components/Splash/SplashScreen.scss b/src/components/Splash/SplashScreen.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5415ff6404410b0a9df2d48f7116abe5ec3670de
--- /dev/null
+++ b/src/components/Splash/SplashScreen.scss
@@ -0,0 +1,45 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+.splash-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  &:first-child {
+    margin: auto;
+  }
+  .splash-logos-container {
+    align-self: flex-end;
+    margin-top: 3rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    align-items: center;
+    .logo-grand-lyon {
+      width: 100%;
+      max-width: 100px;
+    }
+    .logo-tiga {
+      width: 100%;
+      max-width: 80px;
+    }
+  }
+}
+.splash-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 10rem;
+  margin: 0 2rem;
+  .splash-footer-error-text {
+    text-align: center;
+    color: red;
+    margin: 0.5rem 0;
+  }
+  .splash-footer-button {
+    max-width: 50vw;
+  }
+}
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 706d00ec6836dda36163e2a30f2438557751ab0c..85617cdbd57fb3b9d792db063246552a3e474027 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -5,6 +5,7 @@ import logoTiga from 'assets/png/logo-TIGA.png'
 
 import * as loadingData from 'assets/anims/splash.json'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import './SplashScreen.scss'
 
 const loadingOptions = {
   loop: true,
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
index 35fe0743db3a1ea26ac26528f6277af93d5cce2b..bdb7cbfb5ee48f1e45f8c699c937b4fb01e46222 100644
--- a/src/components/Splash/SplashScreenError.tsx
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -7,6 +7,7 @@ import logoTiga from 'assets/png/logo-TIGA.png'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 
 import * as loadingData from 'assets/anims/splash.json'
+import './SplashScreen.scss'
 
 const loadingOptions = {
   loop: false,
diff --git a/src/styles/components/_version.scss b/src/components/Version/Version.scss
similarity index 61%
rename from src/styles/components/_version.scss
rename to src/components/Version/Version.scss
index 655b9fcfc3f18d998d0d8f61e721ca24e34679e1..3aa3284d95472885900429b288be13e78c436428 100644
--- a/src/styles/components/_version.scss
+++ b/src/components/Version/Version.scss
@@ -1,5 +1,4 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
 
 .version-root {
   color: $grey-bright;
diff --git a/src/components/Version/Version.tsx b/src/components/Version/Version.tsx
index 36a3b85fef38f4da00c377333c2049591b0669c3..a30c8428e4d964eb5f629f0e69fe1db511eac7ff 100644
--- a/src/components/Version/Version.tsx
+++ b/src/components/Version/Version.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Client, useClient } from 'cozy-client'
+import './Version.scss'
 
 const Version: React.FC = () => {
   const client: Client = useClient()
diff --git a/src/components/Welcome/WelcomeModal.scss b/src/components/Welcome/WelcomeModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..441bb698e9a9327fdba8838dd7d1fd12fe95dc35
--- /dev/null
+++ b/src/components/Welcome/WelcomeModal.scss
@@ -0,0 +1,31 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.wm-header {
+  background: $multi-color-radial-gradient;
+  background-clip: 'text';
+  -webkit-background-clip: text;
+  color: transparent;
+  margin-top: 2rem;
+}
+.wm-name {
+  background: $multi-color-radial-gradient;
+  background-clip: 'text';
+  -webkit-background-clip: text;
+  color: transparent;
+  margin-bottom: 1.25rem;
+}
+.button-ok {
+  width: 90%;
+  margin-bottom: 2rem;
+}
+.wm-perso {
+  text-align: center;
+  width: 60%;
+  margin: 1rem;
+}
+.wm-connect {
+  text-align: center;
+  width: 88%;
+  margin: 1rem;
+}
diff --git a/src/components/Welcome/WelcomeModal.tsx b/src/components/Welcome/WelcomeModal.tsx
index afffbfc47370609a6cd24b175fe471dd91f6a670..a44184566e883e1462d1bbc5a55e5ce38dcdf6c1 100644
--- a/src/components/Welcome/WelcomeModal.tsx
+++ b/src/components/Welcome/WelcomeModal.tsx
@@ -3,7 +3,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Modal from 'components/CommonKit/Modal/Modal'
 import StyledButton from 'components/CommonKit/Button/StyledButton'
 import userInstanceSettings from 'components/Hooks/userInstanceSettings'
-
+import './WelcomeModal.scss'
 interface WelcomeModalProps {
   open: boolean
   handleCloseClick: () => void
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
deleted file mode 100644
index aa4e5c4fd0ad01fe37c4f2b2a140c4ca646e1a6d..0000000000000000000000000000000000000000
--- a/src/styles/components/_challenges.scss
+++ /dev/null
@@ -1,628 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
-// ChallengeCardContainer
-.ccc-root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 1.5rem;
-  .ccc-content {
-    min-height: 9rem;
-    width: 45.75rem;
-    @media #{$large-phone} {
-      width: 100%;
-    }
-    .ccc-header {
-      margin-top: 0.375rem;
-      margin-bottom: 1.25rem;
-      color: $grey-bright;
-    }
-  }
-}
-.loc-root {
-  display: flex;
-  justify-content: center;
-  .loc-content {
-    width: 100%;
-    max-width: 53rem;
-    display: grid;
-    @media #{$large-phone} {
-      display: block;
-    }
-    .timeline-line {
-      background-color: $grey-bright;
-      width: 1px;
-      height: calc(100vh);
-      grid-column: 1;
-      grid-row: 1;
-      position: unset;
-      margin-left: 3.8rem;
-      @media #{$tablet} {
-        height: calc(100vh - 229px);
-      }
-      @media #{$large-phone} {
-        height: 100vh;
-        display: block;
-        position: fixed;
-      }
-    }
-    .list-of-challenge-cards {
-      padding-top: 1rem;
-      width: 100%;
-      grid-column: 1;
-      grid-row: 1;
-
-      @media #{$large-phone} {
-        display: block;
-      }
-    }
-  }
-}
-
-// ChallengeListItem
-.cli-link {
-  color: black;
-  text-decoration: none;
-}
-.cli {
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  margin: 2rem 0.5rem;
-  border-radius: 2px;
-  @media #{$large-phone} {
-    margin: 1rem 0.5rem;
-  }
-  &.cli-available {
-    background: $blue-gradient;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  &.cli-ongoing {
-    border: 1px solid $blue;
-    background: $dark-light-2;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  .cli-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding-left: 1.415rem;
-    .cli-content {
-      display: flex;
-      flex-direction: row;
-      .cli-content-icon {
-        margin: 0.5rem 0;
-        z-index: 5;
-        width: 62px;
-        height: 62px;
-      }
-      .cli-content-title {
-        color: $white;
-        margin: 0 1rem;
-        align-self: center;
-      }
-      .subtitle-finished {
-        color: $soft-grey;
-      }
-      .title-finished {
-        color: $grey-bright;
-      }
-      .subtitle-ongoing {
-        color: $blue;
-      }
-      .title-ongoing {
-        color: $white;
-      }
-      .subtitle-available {
-        color: $dark-light-2;
-      }
-      .title-available {
-        color: $dark-light-2;
-      }
-      .title-locked {
-        color: $soft-grey;
-        opacity: 0.35;
-      }
-    }
-  }
-  .cli-right {
-    align-self: center;
-    padding-right: 1.2rem;
-    &.cli-right-ongoing {
-      padding-right: calc(1.2rem + 2px);
-    }
-    &.cli-right-available {
-      padding-right: calc(1.2rem + 2px);
-    }
-  }
-}
-
-// ChallengeCard
-.cc-link {
-  color: black;
-  text-decoration: none;
-}
-.cc {
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  margin: 0.25rem 0.25rem;
-  width: 100%;
-  .cc-content-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: inherit;
-    .cc-content-title {
-      color: $white;
-      &.cc-content-title-padding {
-        padding-top: 1rem;
-      }
-    }
-    .cc-content-progress {
-      margin-top: 1rem;
-    }
-    .cc-content-timeline {
-      padding: 0 0.5rem;
-    }
-    .cc-content-visu {
-      padding: 1rem 0;
-    }
-  }
-  .cc-content-right {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    align-self: center;
-    .cc-notification {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 1.8125rem;
-      width: 1.8125rem;
-      border-radius: 50%;
-      background: $blue-radial-gradient;
-      color: $dark-light;
-      margin-right: 1rem;
-    }
-  }
-}
-
-// ChallengePage
-.cm-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  padding: 1.5rem 1rem 1.5rem;
-  width: 22.125rem;
-  @media #{$large-phone} {
-    width: 90%;
-  }
-  .win {
-    background: rgb(238, 213, 130);
-    background: Linear-gradient(
-      90deg,
-      #bf723b 0%,
-      #dd9a2b 26.04%,
-      #f6d74c 45.31%,
-      #d1880d 75%,
-      #a05b11 100%
-    );
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-  .defeat {
-    background: rgb(238, 213, 130);
-    background: Linear-gradient(
-      90deg,
-      #a66340 0%,
-      #ae5f38 33.33%,
-      #9e4e24 51.56%,
-      #a4573a 66.67%
-    );
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-  .cm-title {
-    text-align: center;
-  }
-  .cm-win-badge-star {
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    position: absolute;
-    top: 52px;
-    @media #{$large-phone} {
-      top: 65px;
-    }
-    &.--ecolyo-royal {
-      @extend .cp-content;
-      top: 0px;
-      @media #{$large-phone} {
-        top: 5px;
-      }
-    }
-    .cm-win-badge {
-      -webkit-animation: scale-in-center 0.6s
-        cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
-      animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s
-        both;
-      grid-column: 1;
-      grid-row: 1;
-      z-index: 1;
-    }
-    .cm-win-star {
-      grid-column: 1;
-      grid-row: 1;
-      -webkit-animation: rotating 60s linear infinite;
-      animation: rotating 60s linear infinite;
-    }
-  }
-  .cm-result {
-    color: $grey-bright;
-    text-align: center;
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    margin-bottom: 165px;
-    .cm-result-positif {
-      color: $green;
-    }
-    .cm-result-negatif {
-      color: $red-primary;
-    }
-  }
-  .cm-badge {
-    position: absolute;
-    top: 135px;
-    @media #{$large-phone} {
-      top: 142px;
-    }
-  }
-  .cm-button-valid {
-    margin-top: 1rem;
-    width: 100%;
-  }
-  .cm-txt {
-    text-align: center;
-    margin-bottom: 1rem;
-    width: 100%;
-  }
-  .cm-text-new-available {
-    margin-top: 1.25rem;
-  }
-}
-
-// FollowChallengeTimeLine
-.list-of-days-duration {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 3rem;
-  width: 100%;
-  @media #{$large-phone} {
-    margin-top: 1rem;
-  }
-  .day-solo {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    .day-line-label {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      .date-dash {
-        width: 50%;
-        height: 2px;
-        background-color: $grey-dark;
-      }
-      .past {
-        background-color: $blue;
-      }
-      .futur {
-        background-color: $grey-dark;
-      }
-      .none {
-        opacity: 0;
-      }
-      .date-label {
-        width: 0.625rem;
-        height: 0.625rem;
-        border-radius: 50%;
-        position: absolute;
-      }
-    }
-    .day-letter {
-      margin-top: 0.8rem;
-      text-align: center;
-      color: $soft-grey;
-    }
-    .day-date {
-      margin-top: 0.2rem;
-      text-align: center;
-      color: $soft-grey;
-    }
-  }
-}
-
-// OngoingChallengeFirstViewingDate
-.view-start-date {
-  padding: 0.25rem 0;
-  color: $blue;
-}
-
-// OngoingChallengePile
-.pile-energy-follow {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  &.--home {
-    @extend .pile-energy-follow;
-    justify-content: start;
-  }
-  .pile-section {
-    display: grid;
-    .filter-pile {
-      grid-column: 1;
-      grid-row: 1;
-      justify-self: flex-end;
-      align-self: center;
-      width: 0%;
-      position: relative;
-      right: 0;
-      opacity: 0.8;
-      background-color: $dark-light-2;
-      z-index: 1;
-    }
-    .pile-icon {
-      grid-column: 1;
-      grid-row: 1;
-      margin: -25px 0;
-    }
-  }
-  .max-energy {
-    color: $grey-dark;
-  }
-  .values-section {
-    margin-left: 1rem;
-  }
-  .no-values-section {
-    color: $white;
-    margin-left: 1rem;
-  }
-}
-
-// ChallengeDetailsViewContainer
-.ongoing-challenge {
-  min-height: 620px;
-}
-.cp-root {
-  width: 100%;
-  .cp-content {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    color: $grey-bright;
-    min-height: 84vh;
-    justify-content: space-between;
-
-    &.--locked {
-      @extend .cp-content;
-      justify-content: center;
-    }
-
-    .cp-info {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      background-color: $dark-light-2;
-      width: 100%;
-      min-height: 55vh;
-      padding-top: 1rem;
-      padding-bottom: 0.5rem;
-      &.--available {
-        @extend .cp-info;
-        height: 74vh;
-      }
-      .cp-icon {
-        margin: 1rem;
-      }
-      .cp-icon-available {
-        margin: 2rem;
-      }
-      .cp-win-badge-star {
-        display: grid;
-        align-items: center;
-        justify-items: center;
-        margin: -100px;
-        .cp-win-badge {
-          grid-column: 1;
-          grid-row: 1;
-          z-index: 1;
-        }
-        .cp-win-star {
-          grid-column: 1;
-          grid-row: 1;
-        }
-      }
-      .cp-date {
-        color: $soft-grey;
-        text-align: center;
-        margin-top: 1rem;
-      }
-      .cp-title {
-        color: $grey-bright;
-        text-align: center;
-        margin-top: 0.5rem;
-      }
-      .cp-result {
-        color: $grey-bright;
-        text-align: center;
-        margin-top: 1.5rem;
-        margin-bottom: 0.5rem;
-        .cp-result-positif {
-          color: $green;
-        }
-        .cp-result-negatif {
-          color: $red-primary;
-        }
-      }
-      .cp-description {
-        text-align: center;
-        margin-top: 1rem;
-        margin-bottom: 0.5rem;
-        margin-left: 1.25rem;
-        margin-right: 1.25rem;
-        max-width: 53rem;
-      }
-      .cp-valid {
-        justify-content: center;
-        display: flex;
-        flex-direction: row;
-        width: 90%;
-        margin-top: 0.75rem;
-        max-width: 53rem;
-        &.--ongoing {
-          @extend .cp-valid;
-          width: 25%;
-          @media #{$large-phone} {
-            width: 60%;
-          }
-        }
-        .cp-left-button {
-          margin-right: 0.25rem;
-          margin-left: 0;
-          width: 100%;
-        }
-        .cp-right-button {
-          margin-left: 0.25rem;
-          margin-right: 0;
-          width: 100%;
-        }
-      }
-      .lack-of-data-challenge {
-        margin: auto;
-        padding: 1rem;
-        width: 90%;
-        background-color: $red-primary;
-        display: flex;
-        justify-content: center;
-      }
-      .lack-of-data-content {
-        align-items: center;
-        flex-direction: column;
-        max-width: 80%;
-      }
-      .lack-of-data-content > div,span {
-        margin: 0.3rem 0;
-      }
-      .warning-white {
-        position: relative;
-      
-        & svg {
-          position: absolute;
-          top: 0;
-          left: -45px;
-        }
-      }
-      .fluid-enum {
-        font-weight: bold;
-      }
-
-    }
-    .cp-follow {
-      width: 90%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 1rem;
-      max-width: 53rem;
-    }
-    .cp-valid-locked {
-      margin-top: 2rem;
-      width: 80%;
-      max-width: 53rem;
-    }
-    .cp-bottom {
-      padding: 1.25rem 1.25rem;
-      width: 90%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      max-width: 53rem;
-      margin-bottom: 2rem;
-      @media #{$large-phone} {
-        margin-bottom: 0;
-      }
-      .cp-eg-content {
-        width: 100%;
-        .linked-ecogestures {
-          text-transform: uppercase;
-        }
-        .cp-ecogestures {
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-        }
-      }
-    }
-  }
-}
-
-// animations
-
-@-webkit-keyframes scale-in-center {
-  0% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-@keyframes scale-in-center {
-  0% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes rotating {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes rotating {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
diff --git a/src/styles/components/_consumptionvisualizer.scss b/src/styles/components/_consumptionvisualizer.scss
deleted file mode 100644
index 48519bbff64f93e51e515e0a54210f5e11a991ee..0000000000000000000000000000000000000000
--- a/src/styles/components/_consumptionvisualizer.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
-.cv {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 27.5rem;
-  @media #{$large-phone} {
-    width: 100%;
-  }
-  .cv-load {
-    min-height: 5.25rem;
-    display: flex;
-    align-items: center;
-    .cv-load-content {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      .cv-load-section {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 0.5rem 0.5rem;
-        &.cv-load-section-left {
-          align-items: flex-end;
-        }
-        &.cv-load-section-right {
-          align-items: flex-start;
-        }
-        .cv-load-value {
-          flex-direction: row;
-          & span {
-            align-self: flex-end;
-            margin-left: 0.5em;
-          }
-        }
-      }
-    }
-  }
-  .cv-euro {
-    display: flex;
-    flex-direction: row;
-    .cv-euro-link {
-      text-decoration: none;
-      color: transparent;
-    }
-    .cv-euro-fluid {
-      padding: 0 0.5rem;
-      display: flex;
-      align-items: center;
-      .cv-euro-fluid-icon {
-        margin-right: 0.5rem;
-      }
-      & div {
-        padding-top: 0.2rem;
-      }
-    }
-  }
-  .cv-info {
-    min-height: 1.5rem;
-    display: flex;
-    align-items: center;
-  }
-  .electricity {
-    color: $elec-color;
-  }
-  .electricity-compare {
-    color: $elec-compare-color;
-  }
-  .water {
-    color: $water-color;
-  }
-  .water-compare {
-    color: $water-compare-color;
-  }
-  .gas {
-    color: $gas-color;
-  }
-  .gas-compare {
-    color: $gas-compare-color;
-  }
-  .multifluid {
-    color: $white;
-  }
-  .multifluid-compare {
-    color: $multi-compare-color;
-  }
-  .error {
-    color: $red-primary;
-  }
-  .error-line {
-    color: $red-primary;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-  }
-  .underlined-error {
-    border-bottom: solid 1px $red-primary;
-  }
-  .warning-icon {
-    margin-right: 4px;
-  }
-  .cv-button {
-    border: none;
-    background: none;
-    color: $soft-grey;
-    text-decoration: underline;
-  }
-
-}
diff --git a/src/styles/components/_fluid.scss b/src/styles/components/_fluid.scss
deleted file mode 100644
index 04e1689f496d397a7449501d75ee73f10c3de487..0000000000000000000000000000000000000000
--- a/src/styles/components/_fluid.scss
+++ /dev/null
@@ -1,194 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
-//SelectFluid
-.sf {
-  display: flex;
-  flex-direction: column;
-  .sf-header {
-    .sf-header-title {
-      color: $grey-bright;
-    }
-    .sf-header-text {
-      color: $soft-grey;
-    }
-  }
-  .sf-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 3rem;
-    .sf-link {
-      margin: 1rem;
-    }
-  }
-}
-
-//FluidContainer
-.fc-root {
-  background-color: $dark-light-2;
-  padding: 2rem 2rem 1rem 2rem;
-  margin-bottom: 1rem;
-  @media #{$large-phone} {
-    padding: 1.5rem 1rem 1rem 1rem;
-    margin-bottom: 0.5rem;
-  }
-  .fc-content {
-    min-height: 31.875rem;
-    @media #{$large-phone} {
-      min-height: 23.875rem;
-    }
-    .fc-loader {
-      min-height: 31.875rem;
-      @media #{$large-phone} {
-        min-height: 23.875rem;
-      }
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-
-//FluidView
-.fv-root {
-  direction: 'rtl';
-  .fv-nav-period {
-    display: flex;
-    flex-direction: row;
-    & .nav-button {
-      flex: 1;
-      font-size: large;
-    }
-  }
-  .fv-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-height: 8.375rem;
-    margin-bottom: 0.25rem;
-  }
-  .fv-footer {
-    display: flex;
-    justify-content: center;
-    .fv-footer-compare {
-      width: 100%;
-      max-width: 58.75rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      & :hover {
-        cursor: pointer;
-      }
-      & .fv-footer-label {
-        flex: 1;
-        display: flex;
-        justify-content: flex-start;
-        color: $soft-grey;
-        &.selected {
-          color: $white;
-        }
-      }
-    }
-
-    .fv-footer-challenge {
-      width: 100%;
-      max-width: 58.75rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      .fv-link {
-        text-decoration: none;
-        color: $soft-grey;
-      }
-      & .fv-footer-label-padding {
-        flex: 1;
-        display: flex;
-        justify-content: flex-start;
-        padding-left: 0.75rem;
-        color: $soft-grey;
-      }
-    }
-  }
-}
-.chart-indicator-none {
-  visibility: hidden;
-  height: 0;
-}
-.chart-indicator-block {
-  visibility: visible;
-  height: auto;
-}
-
-//FluidSwipe
-.fs-root {
-  flex: 1;
-  height: 22rem;
-  @media #{$large-phone} {
-    height: 14rem;
-  }
-  .chart-loading {
-    width: 100%;
-    justify-content: center;
-    display: flex;
-  }
-  .fs-slide {
-    min-height: 22rem;
-    overflow-x: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    @media #{$large-phone} {
-      min-height: 14rem;
-    }
-    .chart-none {
-      visibility: hidden;
-      width: 0;
-    }
-    .chart-block {
-      visibility: visible;
-    }
-  }
-}
-
-// Enedis Half Hour Load Activation
-.cta-box {
-  background-color: rgba(18, 18, 18, 0.8);
-  position: absolute;
-  left: 0;
-  width: calc(100vw - 220px);
-  padding: 0rem 1rem 0rem 0rem;
-  z-index: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  height: 37.5rem;
-  @media #{$large-phone} {
-    height: 29rem;
-    width: 100vw;
-  }
-  @media #{$tablet} {
-    width: 100vw;
-  }
-
-  .cta-box-header {
-    text-align: center;
-    font-weight: bold;
-    letter-spacing: 0.2px;
-    margin-bottom: 1.5em;
-    color: $grey-bright;
-    width: 50%;
-    @media #{$large-phone} {
-      width: 80%;
-    }
-  }
-  .cta-box-button {
-    margin-left: auto;
-    margin-right: auto;
-    width: 50%;
-    @media #{$large-phone} {
-      width: 80%;
-    }
-  }
-}
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
deleted file mode 100644
index 26a1bd78f859c70f5c321d396156db49f86cabff..0000000000000000000000000000000000000000
--- a/src/styles/components/_konnector.scss
+++ /dev/null
@@ -1,235 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-.accordion {
-  display: flex;
-  flex-direction: column;
-  color: $white;
-  padding: 1rem 0;
-  margin-bottom: 2vh;
-  border-radius: 4px;
-  background: $grey-linear-gradient-background;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
-  transition: background-color 0.6s ease;
-  &.active {
-    background-color: $accordion-active-background;
-  }
-
-  .accordion-header {
-    display: flex;
-    align-items: center;
-    border: none;
-    outline: none;
-    padding: 0 1rem;
-    &:hover {
-      cursor: pointer;
-    }
-    .accordion-icon {
-      margin-right: 1rem;
-      @media #{$large-phone} {
-        max-width: 16vw;
-      }
-    }
-    .accordion-info {
-      flex: 3;
-      color: $grey-bright;
-      @media #{$large-phone} {
-        display: block;
-      }
-      .accordion-title {
-        flex: 1;
-        @media #{$large-phone} {
-          // margin-bottom: 1rem;
-        }
-      }
-    }
-    .state-picto {
-      position: absolute;
-      display: flex;
-    }
-  }
-  .accordion-update-result {
-    margin: 1rem 0;
-    @media #{$large-phone} {
-      margin: 0.5rem 0;
-    }
-  }
-  .accordion-update {
-    flex: 2;
-    padding: 0.5rem 1rem;
-  }
-  .accordion-update-errored {
-    padding: 0.5rem 1rem;
-    background-color: $red-primary;
-  }
-  .accordion-state {
-    flex: 2;
-    margin-right: 1rem;
-  }
-  .accordion-frequency {
-    flex: 1;
-    padding: 0 1rem;
-  }
-  .accordion-caption {
-    color: $grey-bright;
-    text-transform: lowercase;
-    &::first-letter {
-      text-transform: uppercase;
-    }
-  }
-  .accordion-caption-errored {
-    display: flex;
-    align-items: center;
-    color: $grey-bright;
-  }
-  .warning-white {
-    margin-right: 1rem;
-  }
-  .warning-icon {
-    margin-right: 1rem;
-  }
-  .accordion-content {
-    overflow: hidden;
-    transition: max-height 0.6s ease;
-    .info-provider {
-      padding: 0;
-      color: $grey-bright;
-      margin-bottom: 0;
-    }
-  }
-  .inline-buttons {
-    display: flex;
-    flex-flow: row nowrap;
-    padding: 0 2rem;
-    @media #{$large-phone} {
-      padding: 0 1rem;
-    }
-  }
-  .konnector-delete {
-    margin-right: 0.25rem;
-    color: $red-primary !important;
-  }
-  .konnector-update {
-    margin-left: 0.25rem;
-  }
-  .btn-position {
-    width: 100%;
-    margin: 0.5rem 1rem;
-  }
-}
-.--errored {
-  border: solid 1px $red-primary;
-}
-
-.kv-root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem;
-  .kv-content {
-    width: 45.75rem;
-    @media #{$large-phone} {
-      width: 100%;
-    }
-    .kv-header {
-      margin-top: 2.5rem;
-      margin-bottom: 1.25rem;
-      color: $grey-bright;
-    }
-  }
-}
-
-// KonnectorNotFound
-.knotfound {
-  margin: 0 1.5rem;
-  @media #{$large-phone} {
-    margin: 0;
-  }
-  .knotfound-text {
-    color: $grey-bright;
-    padding-top: 1rem;
-  }
-  .knotfound-button {
-    margin-bottom: 1rem;
-  }
-}
-
-// KonnectorOAuthForm
-.koauthform {
-  margin: 0 1.5rem;
-  padding: 0 1rem;
-  .create-account {
-    color: $grey-bright;
-  }
-  @media #{$large-phone} {
-    margin: 0;
-    padding: 0 1rem;
-  }
-  .koauthform-text {
-    color: $grey-bright;
-    padding-top: 1rem;
-  }
-  .koauthform-button {
-    margin-bottom: 1rem;
-  }
-}
-
-// KonnectorLoginForm
-.kloginauthform {
-  .create-account {
-    color: $grey-bright;
-  }
-  .kloginauthform-text {
-    color: $grey-bright;
-    padding-top: 1rem;
-  }
-  .kloginauthform-button {
-    margin-bottom: 1rem;
-  }
-}
-
-// KonnectorLoading
-.klaunch-content {
-  margin: 0.5rem 1.5rem;
-  @media #{$large-phone} {
-    margin: 0.5rem 0;
-  }
-  .klaunch-content-text {
-    color: $grey-bright;
-    margin: 1rem;
-    text-align: center;
-    .kc-wait {
-      color: $soft-grey;
-      margin-bottom: 2rem;
-    }
-  }
-  .klaunch-content-text-center {
-    text-align: center;
-  }
-  .klaunch-info {
-    margin: 1.5rem;
-    .konnector-config {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      .kce-picto-txt {
-        color: $red-primary;
-        margin: 1.25rem;
-      }
-      .kcs-picto-txt {
-        color: $multi-color;
-        margin: 1.25rem;
-      }
-    }
-  }
-}
-
-.state-icon {
-  height: 22px;
-  width: 22px;
-  position: absolute;
-  bottom: 8px;
-  left: 30px;
-}
diff --git a/src/styles/components/_panel.scss b/src/styles/components/_panel.scss
deleted file mode 100644
index e40dec4c4d2d90303375a2eb15247ef08b16f3be..0000000000000000000000000000000000000000
--- a/src/styles/components/_panel.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-
-@import "../base/color";
-@import "../base/breakpoint";
-
-
-
diff --git a/src/styles/components/_splash.scss b/src/styles/components/_splash.scss
deleted file mode 100644
index 797facc9bca294132baac08d96349d826703cad6..0000000000000000000000000000000000000000
--- a/src/styles/components/_splash.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
-.splash-root {
-  position: fixed;
-  z-index: 1500;
-  left: 0;
-  top: 0;
-  height: 100vh;
-  width: 100vw;
-  opacity: 1;
-  overflow: hidden;
-  background-color: rgba(27, 28, 34, 1);
-  display: flex;
-  flex-direction: column;
-  transition-property: opacity;
-  transition-timing-function: ease-in-out;
-  &.splash-fade {
-    opacity: 0;
-  }
-}
-
-.splash-header {
-    height: 6rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--greyBright);
-  }
-  .splash-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    flex: 1;
-    &:first-child {
-      margin: auto;
-    }
-    .splash-logos-container {
-      align-self: flex-end;
-      margin-top: 3rem;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      gap: 1.5rem;
-      align-items: center;
-      .logo-grand-lyon {
-        width: 100%;
-        max-width: 100px;
-      }
-      .logo-tiga {
-        width: 100%;
-        max-width: 80px;
-      }
-    }
-  }
-  .splash-footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    height: 10rem;
-    margin: 0 2rem;
-    .splash-footer-error-text {
-      text-align: center;
-      color: red;
-      margin: 0.5rem 0;
-    }
-    .splash-footer-button {
-      max-width: 50vw;
-    }
-  }
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index adfc221e369b29010fb46791a4d60a018c731962..418f64c99c3579504435716af22b485a99681c5e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,27 +7,7 @@
 @import 'base/color';
 @import 'base/breakpoint';
 @import 'base/typography';
-@import 'components/card';
-@import 'components/form';
-// @import 'components/button';
-@import 'components/konnector';
-@import 'components/fluid';
-@import 'components/navigator';
-@import 'components/consumptionvisualizer';
 @import 'components/barchart';
-@import 'components/nav';
-@import 'components/indicators';
-@import 'components/challenges';
-@import 'components/ecogesture';
-@import 'components/modal';
-@import 'components/faq';
-@import 'components/legalnotice';
-@import 'components/splash';
-@import 'components/auth';
-@import 'components/feedback';
-@import 'components/version';
-@import 'components/report';
-@import 'components/oldDataModal';
 
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');