diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index cdc58037adb76fba73cd409447e624c664bda733..c85b19e81cf96446df12945e56aa0af47befa3f5 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -17,31 +17,8 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
           class="header-content-top"
         >
           <div
-            class="header-text-desktop text-14-normal-uppercase"
+            class="header-text-selection text-14-normal-uppercase"
           >
-            <button
-              aria-label="header.accessibility.button_back"
-              class="MuiButtonBase-root MuiIconButton-root header-back-button"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiIconButton-label"
-              >
-                <svg
-                  class="styles__icon___23x3R"
-                  height="16"
-                  width="16"
-                >
-                  <use
-                    xlink:href="#test-file-stub"
-                  />
-                </svg>
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </button>
             <span>
               common.title_sge_connect
             </span>
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index 13a60e4be98f167cb1f61d86aaa102607d61a519..acfca4da2852650f4c91a9615febc42ba853c501 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -111,94 +111,99 @@ const SingleEcogestureView = () => {
         displayBackArrow={true}
       />
       <Content>
-        {isLoading && (
-          <div className="loaderContainer">
-            <Loader />
-          </div>
-        )}
-        {!isLoading && !ecogesture && (
-          <ErrorPage
-            text={t('error_page.no_ecogesture')}
-            returnPage="ecogestures"
-          />
-        )}
-        {!isLoading && ecogesture && (
-          <div className="single-ecogesture">
-            <div className="icon-container">
-              {ecogestureIcon && (
-                <StyledIcon
-                  className="icon-big"
-                  icon={ecogestureIcon}
-                  size={220}
-                />
-              )}
+        <div className="content-wrapper">
+          {isLoading && (
+            <div className="loaderContainer">
+              <Loader />
             </div>
-            <div className="details">
-              <div className="text-22-bold title">{ecogesture.shortName}</div>
-              <div className="efficiency">
-                <span className="text-14-normal">
-                  {t('ecogesture_modal.efficiency')}
-                </span>
-                <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
+          )}
+          {!isLoading && !ecogesture && (
+            <ErrorPage
+              text={t('error_page.no_ecogesture')}
+              returnPage="ecogestures"
+            />
+          )}
+          {!isLoading && ecogesture && (
+            <div className="single-ecogesture">
+              <div className="icon-container">
+                {ecogestureIcon && (
+                  <StyledIcon
+                    className="icon-big"
+                    icon={ecogestureIcon}
+                    size={220}
+                  />
+                )}
               </div>
-            </div>
-            <div className="styled-container">
-              <div className="long-name text-18-bold">
-                {ecogesture.longName}
+              <div className="details">
+                <div className="text-22-bold title">{ecogesture.shortName}</div>
+                <div className="efficiency">
+                  <span className="text-14-normal">
+                    {t('ecogesture_modal.efficiency')}
+                  </span>
+                  <EfficiencyRating
+                    result={Math.round(ecogesture.efficiency)}
+                  />
+                </div>
               </div>
-              <Button
-                classes={{
-                  root: 'btnText showMore',
-                  label: 'text-15-normal',
-                }}
-                onClick={() => setShowDetails(prev => !prev)}
-              >
-                {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
-              </Button>
-
-              <Collapse in={showDetails}>
-                <div className="longDescription text-16-normal-150">
-                  {ecogesture.longDescription}
+              <div className="styled-container">
+                <div className="long-name text-18-bold">
+                  {ecogesture.longName}
                 </div>
-              </Collapse>
-            </div>
+                <Button
+                  classes={{
+                    root: 'btnText showMore',
+                    label: 'text-15-normal',
+                  }}
+                  onClick={() => setShowDetails(prev => !prev)}
+                >
+                  {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
+                </Button>
 
-            <div className="buttons-selection">
-              <IconButton
-                aria-label={t('ecogesture.objective')}
-                onClick={toggleObjective}
-                classes={{
-                  root: `btnSecondary objective-btn ${isObjective && 'active'}`,
-                  label: 'text-15-normal',
-                }}
-              >
-                <Icon
-                  className="status-icon"
-                  icon={
-                    isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
-                  }
-                  size={40}
-                />
-                <span>{t('ecogesture.objective')}</span>
-              </IconButton>
-              <IconButton
-                aria-label={t('ecogesture.doing')}
-                onClick={toggleDoing}
-                classes={{
-                  root: `btnSecondary doing-btn ${isDoing && 'active'}`,
-                  label: 'text-15-normal',
-                }}
-              >
-                <Icon
-                  className="status-icon"
-                  icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
-                  size={40}
-                />
-                <span>{t('ecogesture.doing')}</span>
-              </IconButton>
+                <Collapse in={showDetails} timeout={300}>
+                  <div className="longDescription text-16-normal-150">
+                    {ecogesture.longDescription}
+                  </div>
+                </Collapse>
+              </div>
+              <div className="buttons-selection">
+                <IconButton
+                  aria-label={t('ecogesture.objective')}
+                  onClick={toggleObjective}
+                  classes={{
+                    root: `btnSecondary objective-btn ${
+                      isObjective && 'active'
+                    }`,
+                    label: 'text-15-normal',
+                  }}
+                >
+                  <Icon
+                    className="status-icon"
+                    icon={
+                      isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
+                    }
+                    size={40}
+                  />
+                  <span>{t('ecogesture.objective')}</span>
+                </IconButton>
+                <IconButton
+                  aria-label={t('ecogesture.doing')}
+                  onClick={toggleDoing}
+                  classes={{
+                    root: `btnSecondary doing-btn ${isDoing && 'active'}`,
+                    label: 'text-15-normal',
+                  }}
+                >
+                  <Icon
+                    className="status-icon"
+                    icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
+                    size={40}
+                  />
+                  <span>{t('ecogesture.doing')}</span>
+                </IconButton>
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </Content>
     </>
   )
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index e035305baaeb0458c5215c6fdfcca0a0defea995..77ad870acd7281bfdc6ba3d5eab82475144eed9f 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -12,130 +12,134 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
   />
   <mock-content>
     <div
-      class="single-ecogesture"
+      class="content-wrapper"
     >
       <div
-        class="icon-container"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon-big styles__icon___23x3R"
-          height="220"
-          width="220"
-        >
-          <use
-            xlink:href="#test-file-stub"
-          />
-        </svg>
-      </div>
-      <div
-        class="details"
+        class="single-ecogesture"
       >
         <div
-          class="text-22-bold title"
+          class="icon-container"
         >
-          Bonhomme de neige
+          <svg
+            aria-hidden="true"
+            class="icon-big styles__icon___23x3R"
+            height="220"
+            width="220"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
         </div>
         <div
-          class="efficiency"
+          class="details"
         >
-          <span
-            class="text-14-normal"
+          <div
+            class="text-22-bold title"
+          >
+            Bonhomme de neige
+          </div>
+          <div
+            class="efficiency"
           >
-            ecogesture_modal.efficiency
-          </span>
-          <mock-efficiencyrating
-            result="4"
-          />
+            <span
+              class="text-14-normal"
+            >
+              ecogesture_modal.efficiency
+            </span>
+            <mock-efficiencyrating
+              result="4"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="styled-container"
-      >
         <div
-          class="long-name text-18-bold"
-        >
-          Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
-        </div>
-        <button
-          class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
-          tabindex="0"
-          type="button"
+          class="styled-container"
         >
-          <span
-            class="MuiButton-label text-15-normal"
+          <div
+            class="long-name text-18-bold"
           >
-            ecogesture_modal.show_more
-          </span>
-        </button>
-        <div
-          class="MuiCollapse-root MuiCollapse-hidden"
-          style="min-height: 0px;"
-        >
+            Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
+          </div>
+          <button
+            class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label text-15-normal"
+            >
+              ecogesture_modal.show_more
+            </span>
+          </button>
           <div
-            class="MuiCollapse-wrapper"
+            class="MuiCollapse-root MuiCollapse-hidden"
+            style="min-height: 0px;"
           >
             <div
-              class="MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapper"
             >
               <div
-                class="longDescription text-16-normal-150"
+                class="MuiCollapse-wrapperInner"
               >
-                On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+                <div
+                  class="longDescription text-16-normal-150"
+                >
+                  On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="buttons-selection"
-      >
-        <button
-          aria-label="ecogesture.objective"
-          class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false"
-          tabindex="0"
-          type="button"
+        <div
+          class="buttons-selection"
         >
-          <span
-            class="MuiIconButton-label text-15-normal"
+          <button
+            aria-label="ecogesture.objective"
+            class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false"
+            tabindex="0"
+            type="button"
           >
-            <svg
-              class="status-icon styles__icon___23x3R"
-              height="40"
-              width="40"
+            <span
+              class="MuiIconButton-label text-15-normal"
             >
-              <use
-                xlink:href="#test-file-stub"
-              />
-            </svg>
-            <span>
-              ecogesture.objective
+              <svg
+                class="status-icon styles__icon___23x3R"
+                height="40"
+                width="40"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+              <span>
+                ecogesture.objective
+              </span>
             </span>
-          </span>
-        </button>
-        <button
-          aria-label="ecogesture.doing"
-          class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label text-15-normal"
+          </button>
+          <button
+            aria-label="ecogesture.doing"
+            class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false"
+            tabindex="0"
+            type="button"
           >
-            <svg
-              class="status-icon styles__icon___23x3R"
-              height="40"
-              width="40"
+            <span
+              class="MuiIconButton-label text-15-normal"
             >
-              <use
-                xlink:href="#test-file-stub"
-              />
-            </svg>
-            <span>
-              ecogesture.doing
+              <svg
+                class="status-icon styles__icon___23x3R"
+                height="40"
+                width="40"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+              <span>
+                ecogesture.doing
+              </span>
             </span>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </mock-content>
diff --git a/src/components/Ecogesture/singleEcogestureView.scss b/src/components/Ecogesture/singleEcogestureView.scss
index 6eb19b4f1d16fda689603dc88d9304aed75d10ce..3f8904c15209e0b1c490c757e85e28ed4c637dae 100644
--- a/src/components/Ecogesture/singleEcogestureView.scss
+++ b/src/components/Ecogesture/singleEcogestureView.scss
@@ -1,110 +1,117 @@
 @import 'src/styles/base/color';
 
-.single-ecogesture {
-  color: $grey-bright;
+.content-wrapper {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1rem 1.2rem;
-  .icon-container {
-    margin: auto;
-    max-width: 180px;
-    width: 100%;
+  flex-direction: column;
+  height: 100%;
+  .single-ecogesture {
+    color: $grey-bright;
     display: flex;
-    .icon-big {
-      margin: auto;
-    }
-  }
-  .details {
     flex-direction: column;
-    display: flex;
     align-items: center;
-    gap: 0.5rem;
-    .title {
-      color: $soft-grey;
+    justify-content: center;
+    padding: 1rem 1.2rem;
+    .icon-container {
+      margin: auto;
+      max-width: 180px;
+      width: 100%;
+      display: flex;
+      .icon-big {
+        margin: auto;
+      }
     }
-    .efficiency {
+    .details {
+      flex-direction: column;
       display: flex;
+      align-items: center;
       gap: 0.5rem;
-    }
-  }
-  .styled-container {
-    line-height: 150%;
-    padding: 1rem;
-    margin: 1.5rem 0 1rem;
-    max-width: 500px;
-    display: flex;
-    flex-direction: column;
-    .long-name {
-      text-align: center;
-      color: white;
-    }
-
-    .showMore {
-      margin: auto;
-      text-align: center;
-      text-decoration: underline;
-      margin-top: 1.5rem;
-      span {
-        text-transform: none;
+      .title {
+        color: $soft-grey;
       }
-    }
-    .longDescription {
-      margin: 1em 0.5rem;
-      text-align: left;
-    }
-  }
-  .buttons-selection {
-    width: 100%;
-    display: flex;
-    gap: 0.5rem;
-    justify-content: center;
-    button {
-      &.btnSecondary {
-        height: 45px;
-        max-width: 160px;
-        width: 100%;
-        border-radius: 4px;
+      .efficiency {
+        display: flex;
+        gap: 0.5rem;
       }
     }
-    .objective-btn {
-      span {
-        color: $grey-bright;
+    .styled-container {
+      line-height: 150%;
+      padding: 1rem;
+      margin: 1.5rem 0 1rem;
+      max-width: 500px;
+      display: flex;
+      flex-direction: column;
+      .long-name {
+        text-align: center;
+        color: white;
       }
-      &.active {
-        background: radial-gradient(
-            105.25% 64.58% at 49.68% 70.83%,
-            rgba(12, 44, 91, 0.5) 0%,
-            rgba(255, 255, 255, 0) 100%
-          ),
-          #4470b3;
-        border-color: transparent;
+
+      .showMore {
+        margin: auto;
+        text-align: center;
+        text-decoration: underline;
+        margin-top: 1.5rem;
         span {
-          color: white;
+          text-transform: none;
         }
       }
+      .longDescription {
+        margin: 1em 0.5rem;
+        text-align: left;
+      }
     }
-    .doing-btn {
-      span {
-        color: $grey-bright;
+    .buttons-selection {
+      width: 100%;
+      display: flex;
+      gap: 0.5rem;
+      justify-content: center;
+      button {
+        &.btnSecondary {
+          height: 45px;
+          max-width: 160px;
+          width: 100%;
+          border-radius: 4px;
+        }
       }
-      &.active {
-        background: radial-gradient(
-            105.25% 64.58% at 49.68% 70.83%,
-            rgba(41, 87, 33, 0.5) 0%,
-            rgba(255, 255, 255, 0) 100%
-          ),
-          #21a90b;
-        border-color: transparent;
+      .objective-btn {
         span {
-          color: white;
+          color: $grey-bright;
+        }
+        &.active {
+          background: radial-gradient(
+              105.25% 64.58% at 49.68% 70.83%,
+              rgba(12, 44, 91, 0.5) 0%,
+              rgba(255, 255, 255, 0) 100%
+            ),
+            #4470b3;
+          border-color: transparent;
+          span {
+            color: white;
+          }
         }
       }
-    }
-    .MuiIconButton-label {
-      justify-content: flex-start;
-      color: white;
+      .doing-btn {
+        span {
+          color: $grey-bright;
+        }
+        &.active {
+          background: radial-gradient(
+              105.25% 64.58% at 49.68% 70.83%,
+              rgba(41, 87, 33, 0.5) 0%,
+              rgba(255, 255, 255, 0) 100%
+            ),
+            #21a90b;
+          border-color: transparent;
+          span {
+            color: white;
+          }
+        }
+      }
+      .MuiIconButton-label {
+        justify-content: flex-start;
+        color: white;
+      }
     }
   }
 }
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
index 6d53bb111c2198f3055ae2e954179ac2bae1ab6e..5994c2da7fe0444048c8987b10c3369c6e327eaa 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
@@ -59,8 +59,12 @@ const EcogestureSelectionDetail = ({
           {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
         </Button>
 
-        <Collapse in={showDetails} exit={false}>
-          <div className="longDescription text-16-normal-150">
+        <Collapse in={showDetails} exit={false} timeout={300}>
+          <div
+            className={`longDescription text-16-normal-150 ${
+              showDetails ? 'expanded' : ''
+            }`}
+          >
             {ecogesture.longDescription}
           </div>
         </Collapse>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index bbd6adbd92d72288c227dec29d4990211f4e943e..f7f0a01ecae5f63aeaeb869b4c73c16f9d84b92f 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
@@ -57,7 +57,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
             class="MuiCollapse-wrapperInner"
           >
             <div
-              class="longDescription text-16-normal-150"
+              class="longDescription text-16-normal-150 "
             >
               On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
             </div>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
index 62a291ea844fbf09393241af8d7bb196163a8f39..80bc7cd3771049bbc40773786a115ea63df3569f 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
@@ -12,12 +12,12 @@
 
   .content {
     display: flex;
-    gap: 0.5rem;
     flex-direction: column;
-    flex: 1;
-    justify-content: flex-start;
+    gap: 0.5rem;
+    justify-content: center;
     align-items: center;
     overflow-y: auto;
+    flex: 1;
 
     .title {
       color: $soft-grey;
@@ -33,13 +33,20 @@
       text-decoration: underline;
       margin-top: 1rem;
       cursor: pointer;
+      flex-shrink: 0;
     }
 
     .longDescription {
       margin: 1rem 0.5rem;
       text-align: left;
+      display: none;
+      transition: height 0.3s ease-in-out;
+      &.expanded {
+        display: block;
+      }
     }
   }
+
   .buttons {
     margin: 1rem 0;
     display: flex;
@@ -47,6 +54,7 @@
     flex-direction: row;
     justify-content: center;
     width: 100%;
+
     button.btnSecondary {
       padding: 0.75rem 0.25rem;
       height: 7.375rem;
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index 0e527784ddfeb7dc0be86ec364b97319f86e6830..22c116a71b4d0b2a23433b50945c40d9eca1bdec 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -4,7 +4,11 @@ import Header from 'components/Header/Header'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as ModalAction from 'store/modal/modal.slice'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import {
+  createMockEcolyoStore,
+  mockInitialEcolyoState,
+} from 'tests/__mocks__/store'
+import { ScreenType } from 'enums'
 
 const mockedNavigate = jest.fn()
 jest.mock('react-router-dom', () => ({
@@ -13,8 +17,30 @@ jest.mock('react-router-dom', () => ({
 }))
 
 describe('Header component', () => {
-  const store = createMockEcolyoStore()
-  it('should be rendered correctly', () => {
+  const store = createMockEcolyoStore(mockInitialEcolyoState)
+
+  beforeEach(() => {
+    const state = store.getState()
+    if (state.ecolyo?.global) {
+      state.ecolyo.global.screenType = ScreenType.DESKTOP
+    }
+  })
+
+  it('should be rendered correctly on mobile', () => {
+    const state = store.getState()
+    if (state.ecolyo?.global) {
+      state.ecolyo.global.screenType = ScreenType.MOBILE
+    }
+    const { container } = render(
+      <Provider store={store}>
+        <Header desktopTitleKey="mockKey" />
+      </Provider>
+    )
+    expect(container).toMatchSnapshot()
+    expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
+  })
+
+  it('should be rendered correctly on desktop', () => {
     const { container } = render(
       <Provider store={store}>
         <Header desktopTitleKey="mockKey" />
@@ -24,6 +50,25 @@ describe('Header component', () => {
     expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
   })
 
+  it('should display desktop title text when desktopTitleKey provided', () => {
+    const titleKey = 'Test Title'
+    const { getByText } = render(
+      <Provider store={store}>
+        <Header desktopTitleKey={titleKey} />
+      </Provider>
+    )
+    expect(getByText(titleKey)).toBeInTheDocument()
+  })
+
+  it('should not display desktop title text when desktopTitleKey not provided', () => {
+    const { queryByText } = render(
+      <Provider store={store}>
+        <Header desktopTitleKey="" />
+      </Provider>
+    )
+    expect(queryByText(/.+/)).not.toBeInTheDocument()
+  })
+
   it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
     const key = 'titleKey'
     render(
@@ -36,7 +81,8 @@ describe('Header component', () => {
       screen.getByLabelText('header.accessibility.button_back')
     ).toBeInTheDocument()
   })
-  it('should NOT display back button when displayBackArrow is false', async () => {
+
+  it('should NOT display back button when displayBackArrow is false', () => {
     render(
       <Provider store={store}>
         <Header desktopTitleKey="test" displayBackArrow={false} />
@@ -63,6 +109,7 @@ describe('Header component', () => {
       })
       expect(mockedNavigate).toHaveBeenCalled()
     })
+
     it('should call custom back fn when back button is clicked', async () => {
       const mockBack = jest.fn()
       render(
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index b200f36a72621b30f136f0bc0c38706c9eb30129..3fa45eaec93a3e22dc0fcecb4d36cdb2259e2926 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -12,15 +12,12 @@ import { openFeedbackModal } from 'store/modal/modal.slice'
 import './header.scss'
 
 interface HeaderProps {
-  /** translation key used as t('key.value') */
   desktopTitleKey: string
   displayBackArrow?: boolean
-  /** additional information to put below the main header */
   children?: React.ReactNode
   backFunction?: () => void
 }
 
-/** Header for desktop view */
 const Header = ({
   desktopTitleKey,
   displayBackArrow,
@@ -56,40 +53,34 @@ const Header = ({
     <header ref={header}>
       <div className="header-top">
         <div className="header-content">
-          <div
-            className={
-              !desktopTitleKey
-                ? 'header-content-top header-content-top-right'
-                : 'header-content-top'
-            }
-          >
+          <div className="header-content-top">
+            {screenType !== ScreenType.MOBILE && displayBackArrow && (
+              <IconButton
+                aria-label={t('header.accessibility.button_back')}
+                className="header-back-button"
+                onClick={handleClickBack}
+              >
+                <Icon icon={BackArrowIcon} size={16} />
+              </IconButton>
+            )}
             {desktopTitleKey && (
               <div
-                className={`header-text-desktop ${
+                className={`${
+                  displayBackArrow && desktopTitleKey
+                    ? 'header-text-selection'
+                    : 'header-text-desktop'
+                } ${
                   screenType === ScreenType.MOBILE
                     ? 'text-14-normal-uppercase'
                     : 'text-22-bold'
                 }`}
               >
-                {displayBackArrow && (
-                  <IconButton
-                    aria-label={t('header.accessibility.button_back')}
-                    className="header-back-button"
-                    onClick={handleClickBack}
-                  >
-                    <Icon icon={BackArrowIcon} size={16} />
-                  </IconButton>
-                )}
                 <span>{t(desktopTitleKey)}</span>
               </div>
             )}
             <IconButton
               aria-label={t('header.accessibility.button_open_feedbacks')}
-              className={
-                !desktopTitleKey
-                  ? 'header-feedbacks-button right'
-                  : 'header-feedbacks-button'
-              }
+              className="header-feedbacks-button"
               onClick={handleClickFeedbacks}
             >
               <Icon icon={FeedbackIcon} size={40} />
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
index 3bd7905849ab67ceeb3159018c8bfc69fbecec99..4ed477186e477d130db0be4fb2f71da704398736 100644
--- a/src/components/Header/__snapshots__/Header.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -1,6 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header component should be rendered correctly 1`] = `
+exports[`Header component should be rendered correctly on desktop 1`] = `
+<div>
+  <header>
+    <div
+      class="header-top"
+    >
+      <div
+        class="header-content"
+      >
+        <div
+          class="header-content-top"
+        >
+          <div
+            class="header-text-desktop text-22-bold"
+          >
+            <span>
+              mockKey
+            </span>
+          </div>
+          <button
+            aria-label="header.accessibility.button_open_feedbacks"
+            class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                class="styles__icon___23x3R"
+                height="40"
+                width="40"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="header-bar"
+    />
+  </header>
+</div>
+`;
+
+exports[`Header component should be rendered correctly on mobile 1`] = `
 <div>
   <header>
     <div
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 2817543e8f42e3858b513f7c97993c650d0304b1..5f794557b9db2b73101de6d789e45c004c7840dc 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -43,27 +43,40 @@ header {
     .header-content-top {
       display: flex;
       flex-direction: row;
-      &.header-content-top-right {
-        justify-content: flex-end;
-      }
+      justify-content: space-between;
+      align-items: center;
       .header-text {
-        padding: 2rem 1rem;
         flex: 1;
+        padding: 0 1rem 1rem 1rem;
+        color: $grey-bright;
+        text-align: center;
       }
       .header-text-desktop {
         display: flex;
         flex: 1;
         padding: 2rem 1.25rem;
         color: $grey-bright;
+        justify-content: center;
+        text-align: center;
+        margin-left: 64px;
+      }
+      .header-text-selection {
+        display: flex;
+        flex: 1;
+        padding: 2rem 1.25rem;
+        color: $grey-bright;
+        justify-content: center;
+        text-align: center;
+        margin-left: 24px;
+        @media #{$large-phone} {
+          display: none;
+        }
       }
-      .header-back-button {
+      .header-back-button,
+      .header-feedbacks-button {
         padding: 0 0.75rem;
       }
       @media #{$large-phone} {
-        .header-text {
-          padding: 0 1rem 1rem 1rem;
-          color: $grey-bright;
-        }
         .header-text-desktop {
           display: none;
         }