diff --git a/src/app/annuaire/annuaire.component.scss b/src/app/annuaire/annuaire.component.scss
index 25f45664e76d7c45bbaffd7acbd2d2547b1dd049..e66c8fb0b7cf16314dd4c43ec684c234eaeff1da 100644
--- a/src/app/annuaire/annuaire.component.scss
+++ b/src/app/annuaire/annuaire.component.scss
@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: calc(100vh - $header-height - $footer-height);
   &.logged {
     justify-content: flex-start;
   }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1e510d4de01e0fe08c392981239c983472aac3fd..a5f733049866b9d636d4df1d10eeb315e66a0dbd 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -268,6 +268,7 @@ const routes: Routes = [
         canActivate: [AdminGuard],
         loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule),
       },
+      footerOutletRoute,
     ],
   },
   {
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 47450c16443cac4e7ab26caa1a046c50dd45acb7..50bf8e16b1f4116f794509706d5f92087e2b1771 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -2,6 +2,11 @@
 @import 'color';
 @import 'layout';
 
+.app-container {
+  display: block;
+  flex-direction: column;
+}
+
 @media print {
   .app-body {
     height: 100% !important;
@@ -13,6 +18,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
+  height: calc(100svh - #{$header-height});
 }
 
 .loader {
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 485808c276b3920ae950891f2d967f11ae32d8c5..e3224939d8aba477096c5a5ec5665645dfe306b5 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -15,9 +15,6 @@
   border-bottom: solid 1px $grey-4;
   background-color: $white;
   padding: 0 20px;
-  position: sticky;
-  top: 0;
-  z-index: 50;
   .right-header {
     @media #{$tablet} {
       display: none !important;
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index ffd74fcd4492159b672248871d51790c64e0f70c..ca9a419d6c7ba0b4380da3f4147ed8f8cdf1471e 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -4,32 +4,23 @@
 @import 'typography';
 
 .loginPage {
-  height: calc(100vh - $header-height - $footer-height);
   display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media #{$phone} {
+  width: 100%;
+  max-width: 980px;
+  box-sizing: border-box;
+  margin: auto;
+  margin-top: 2rem;
+  min-height: 450px;
+  max-height: 80vh;
+  overflow-y: auto;
+  color: $grey-1;
+  background: $white;
+  border-radius: 8px;
+  border: 1px solid $grey-6;
+  padding: 70px 40px;
+  @media #{$desktop} {
     padding: 1rem;
-    align-items: flex-start;
-  }
-
-  .form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-    width: 100%;
-    max-width: 980px;
-    box-sizing: border-box;
-    color: $grey-1;
-    background: $white;
-    border-radius: 8px;
-    border: 1px solid $grey-6;
-    padding: 70px 40px;
-    * {
-      max-width: 340px;
-    }
+    margin-top: 1rem;
   }
 
   .title {
@@ -51,6 +42,11 @@
     color: $orange-warning;
   }
 
+  .form {
+    max-width: 340px;
+    margin: auto;
+  }
+
   .form-group {
     margin: 1.5rem 0;
     .notValidate {
@@ -114,3 +110,9 @@
     }
   }
 }
+
+@media #{$tablet} {
+  .loginPage {
+    height: 100%;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 2ce37610ade1829154274f467019a169ce717069..68647ddc27864ea4e857dde42f1431eca4586218 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -28,6 +28,9 @@ body {
   padding: 0;
   color: $black;
   background-color: $grey-8;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+  overflow: hidden;
   ::-webkit-scrollbar {
     width: 8px;
   }