diff --git a/src/components/Connection/SGEConnect/SgeConnect.scss b/src/components/Connection/SGEConnect/SgeConnect.scss
index 7a02ec9d467ca437008c501eb6db0d8d3294b179..73e386abaa51eadb1f8b5fe376286496a5e90fdb 100644
--- a/src/components/Connection/SGEConnect/SgeConnect.scss
+++ b/src/components/Connection/SGEConnect/SgeConnect.scss
@@ -13,8 +13,6 @@
   top: 4rem;
   width: 100%;
   height: 92vh;
-  overflow-y: auto;
-  overscroll-behavior: contain;
   @media (min-width: $width-large-phone) {
     top: 8rem;
     height: 85vh;
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 1f5cbf4592e9c7e4a2e8784ed913d357f6fd4d03..88c9b5f087f90f0719cacb93929b1c31f939a1e0 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -142,9 +142,6 @@ const SgeConnectView: React.FC = () => {
         setHeaderHeight={defineHeaderHeight}
         desktopTitleKey={'common.title_sge_connect'}
         displayBackArrow={true}
-        backFunction={() =>
-          dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: false }))
-        }
       ></Header>
       <Content height={headerHeight}>
         <div className="sge-view">
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index b3f663e1a20eac8ead33825146066f2ca829e2a6..6b58abe11526cef0b868cef075968a8a410aded6 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -339,7 +339,6 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
       </BarRight>
     </CozyBar>
     <Header
-      backFunction={[Function]}
       desktopTitleKey="common.title_sge_connect"
       displayBackArrow={true}
       setHeaderHeight={[Function]}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 49a4fc643c9eedaea8a402beccc410536e74e511..3a469698acd1c2763813fac605baae53afe10cfe 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,15 +1,16 @@
-import IconButton from '@material-ui/core/IconButton'
-import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
-import FeedbackIcon from 'assets/icons/ico/feedback.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { ScreenType } from 'enum/screen.enum'
 import React, { useCallback, useEffect, useRef } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import './header.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector, useDispatch } from 'react-redux'
 import { AppStore } from 'store'
 import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import './header.scss'
+import { useHistory } from 'react-router-dom'
+
+import { ScreenType } from 'enum/screen.enum'
+import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
+import FeedbackIcon from 'assets/icons/ico/feedback.svg'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from '@material-ui/core/IconButton'
 
 interface HeaderProps {
   textKey?: string
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 1a73a5fe52558e97cdde7e43a0f59b8748042f00..58b400875df97adae6f402c919734b5db7e52a09 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -22,17 +22,17 @@
       $dark-2 100%
     );
     width: 100%;
-    display: flex;
-    justify-content: flex-end;
     .header-text {
       padding: 0 1rem 1rem 1rem;
       color: $grey-bright;
     }
   }
   .header-content {
-    width: 85%;
+    margin: 0 0 0 220px;
+    display: flex;
+    flex-direction: column;
     @media #{$tablet} {
-      width: 100%;
+      margin: 0;
     }
     @media #{$large-phone} {
       margin: 60px 0 0 0;
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 63369debd4a3f418c3b063be15c330ce58711b52..977aa5666dd3e1b703ae9ea0b95e787f1fdb0988 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -45,6 +45,76 @@ body {
   color: #32363f;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  z-index: $z-header;
+  position: fixed;
+  top: 48px;
+  left: 0;
+  @media #{$large-phone} {
+    top: 0;
+  }
+  .header-top {
+    background: radial-gradient(
+      circle,
+      rgba(52, 54, 65, 1) 0%,
+      rgba(27, 28, 34, 1) 100%
+    );
+    width: 100%;
+    .header-text {
+      padding: 0 1rem 1rem 1rem;
+      color: $grey-bright;
+    }
+  }
+  .header-content {
+    margin: 0 0 0 220px;
+    display: flex;
+    flex-direction: column;
+    @media #{$tablet} {
+      margin: 0;
+    }
+    @media #{$large-phone} {
+      margin: 60px 0 0 0;
+    }
+    .header-content-top {
+      display: flex;
+      flex-direction: row;
+      &.header-content-top-right {
+        justify-content: flex-end;
+      }
+      .header-text {
+        padding: 2rem 1rem;
+        flex: 1;
+      }
+      .header-text-desktop {
+        display: flex;
+        flex: 1;
+        padding: 2rem 1.25rem;
+        color: $grey-bright;
+      }
+      .header-back-button {
+        padding: 0 0.75rem;
+      }
+      @media #{$large-phone} {
+        .header-text {
+          padding: 0 1rem 1rem 1rem;
+          color: $grey-bright;
+        }
+        .header-text-desktop {
+          display: none;
+        }
+        .header-feedbacks-button {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 .content-view-loading {
   height: 80vh;
   width: 100%;