diff --git a/.vscode/settings.json b/.vscode/settings.json
index 36ae6a1b3625bad9df638e51d82b577f199abd25..c0691ad76d3a84ec9f8e15a3e8f7ca2e639bd492 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -47,6 +47,7 @@
     "grandlyon",
     "instagram",
     "linkedin",
+    "lockdown",
     "matomo",
     "metropole",
     "Metropole",
diff --git a/src/app/admin/admin.scss b/src/app/admin/admin.scss
index 9030f4d2bb69d34bec23603779f8cb23e16644d0..353c296646fd3c6298549cb31dad6b7288a4bfd5 100644
--- a/src/app/admin/admin.scss
+++ b/src/app/admin/admin.scss
@@ -1,14 +1,39 @@
 @import 'color';
 
+header {
+  padding-top: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+}
+
 .adminLayout {
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 1rem;
   margin: auto;
   padding-bottom: 1rem;
   width: 80%;
 }
 
+h3.inline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
 .incomplete {
   color: $red;
 }
@@ -29,26 +54,6 @@
   font-weight: bold;
 }
 
-.lockdownCheckbox {
-  background: $white;
-  border-radius: 4px;
-  padding: 0 16px;
-  height: 44px;
-  padding-top: 22px;
-  outline: none;
-  border: 1px solid;
-  margin: 8px 0;
-  &.checked {
-    color: $white;
-    background: $green-1;
-    border: none;
-  }
-  input,
-  label {
-    cursor: pointer;
-  }
-}
-
 ::ng-deep .ag-row-group-leaf-indent {
   margin-left: 0 !important;
 }
diff --git a/src/app/admin/components/lockdown-info/manage-lockdown-info.component.html b/src/app/admin/components/lockdown-info/manage-lockdown-info.component.html
index 7dd9b0cbf0c22a9b93496e8436d5ff27434f12f5..570021ebbf19463401065b4c63e481da9a8c2968 100644
--- a/src/app/admin/components/lockdown-info/manage-lockdown-info.component.html
+++ b/src/app/admin/components/lockdown-info/manage-lockdown-info.component.html
@@ -2,19 +2,15 @@
 <div *ngIf="isLoading" class="loader" aria-busy="true">
   <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
 </div>
-<div *ngIf="!isLoading" fxLayout="column" fxLayoutAlign="center center">
+<div *ngIf="!isLoading" class="adminLayout">
   <h2>Gestion de l'affichage des infos Covid</h2>
   <div *ngIf="lockdownInfoDisplay">Les infos covid sont actuellement affichées dans les fiches structure.</div>
   <div *ngIf="!lockdownInfoDisplay">Les infos covid ne sont actuellement pas affichées dans les fiches structure.</div>
-  <div *ngIf="!error" class="lockdownCheckbox" [ngClass]="{ checked: lockdownInfoDisplay }">
-    <input
-      type="checkbox"
-      name="lockdownInfo"
-      id="lockdownInfo"
-      [checked]="lockdownInfoDisplay"
-      (change)="toggleLockdownInfo()"
-    />
-    <label for="lockdownInfo"> Afficher les infos covid</label>
-  </div>
+  <app-switch
+    *ngIf="!error"
+    label="Afficher les infos covid"
+    [checked]="lockdownInfoDisplay"
+    (action)="toggleLockdownInfo()"
+  />
   <p *ngIf="error" class="error">Une erreur s'est produite a l'enregistrement, veuillez ré-essayer plus tard.</p>
 </div>
diff --git a/src/app/admin/components/manage-employers/manage-employers.component.html b/src/app/admin/components/manage-employers/manage-employers.component.html
index d7686dd76e34f0ec06edd35401723d0f4b3a635b..c39a858e24db3ae6d269ac58da9017e821a5f36f 100644
--- a/src/app/admin/components/manage-employers/manage-employers.component.html
+++ b/src/app/admin/components/manage-employers/manage-employers.component.html
@@ -1,5 +1,5 @@
 <app-admin-nav-bar />
-<div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center" class="userBlock">
+<div class="adminLayout">
   <h2>
     Gestion des employeurs
     <span *ngIf="unvalidatedEmployers && validatedEmployers">
diff --git a/src/app/admin/components/manage-jobs/manage-jobs.component.html b/src/app/admin/components/manage-jobs/manage-jobs.component.html
index d118c5d964f570a84623a3ef40a9318906e40ba2..edd4f9fc41e07dace632dee0806c5c24e406b1fb 100644
--- a/src/app/admin/components/manage-jobs/manage-jobs.component.html
+++ b/src/app/admin/components/manage-jobs/manage-jobs.component.html
@@ -1,5 +1,5 @@
 <app-admin-nav-bar />
-<div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center" class="userBlock">
+<div class="adminLayout">
   <h2>
     Gestion des fonctions
     <span *ngIf="unvalidatedJobs && validatedJobs"> ({{ unvalidatedJobs.length + validatedJobs.length }}) </span>
@@ -41,7 +41,7 @@
     <button type="submit" [ngClass]="{ invalid: !newJobForm.valid }">Créer</button>
   </form>
 
-  <div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center" class="userBlock">
+  <div class="adminLayout">
     <h2>
       Gestion des groupes de fonctions
       <span *ngIf="jobsGroups"> ({{ jobsGroups.length }}) </span>
diff --git a/src/app/admin/components/manage-users/manage-users.component.html b/src/app/admin/components/manage-users/manage-users.component.html
index b49da702384f71f5b201daf45522d163ef539f11..63dc9f15417598025f07bc12ee5a26d4511e70ef 100644
--- a/src/app/admin/components/manage-users/manage-users.component.html
+++ b/src/app/admin/components/manage-users/manage-users.component.html
@@ -1,5 +1,5 @@
 <app-admin-nav-bar />
-<div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center" class="userBlock">
+<div class="adminLayout">
   <h2>
     Gestion des utilisateurs
     <span *ngIf="unVerifiedUsers && unAttachedUsers && attachedUsers">
@@ -23,7 +23,7 @@
     [frameworkComponents]="frameworkComponents"
   />
 
-  <h3 *ngIf="unAttachedUsers" class="title">
+  <h3 *ngIf="unAttachedUsers" class="title inline">
     Utilisateurs non rattachés ({{ unAttachedUsers.length }})
     <app-v3-button
       [label]="'Exporter'"
@@ -47,7 +47,7 @@
     (gridReady)="onGridReady($event, 'unattached')"
   />
 
-  <h3 *ngIf="attachedUsers" class="title">
+  <h3 *ngIf="attachedUsers" class="title inline">
     Utilisateurs rattachés ({{ attachedUsers.length }})
     <app-v3-button
       [label]="'Exporter'"
diff --git a/src/app/admin/components/nav-bar/nav-bar.component.html b/src/app/admin/components/nav-bar/nav-bar.component.html
index d104dacc5aaa6394d0a738326d5ba792c744b237..e3622a1d71b9b6244aeda60dbdcde256176c4ada 100644
--- a/src/app/admin/components/nav-bar/nav-bar.component.html
+++ b/src/app/admin/components/nav-bar/nav-bar.component.html
@@ -1,8 +1,6 @@
-<div fxLayout="column" fxLayoutGap="20px" class="content-container">
-  <div fxLayout="row" fxLayoutAlign="center center">
-    <h1>Administration</h1>
-  </div>
-  <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center center">
+<header>
+  <h1>Administration</h1>
+  <nav>
     <app-v3-button
       [label]="'Revendication structure'"
       [variant]="buttonTypeEnumV3.Secondary"
@@ -43,6 +41,6 @@
       [variant]="buttonTypeEnumV3.Secondary"
       (click)="router.navigateByUrl(routes.lockdownInfo.link)"
     />
-    <a target="_blank" class="custom-link" rel="noopener noreferrer" [href]="ghostLink">Ghost</a>
-  </div>
-</div>
+    <app-v3-button [variant]="buttonTypeEnumV3.Tertiary" [label]="'Ghost'" (click)="openGhost()" />
+  </nav>
+</header>
diff --git a/src/app/admin/components/nav-bar/nav-bar.component.ts b/src/app/admin/components/nav-bar/nav-bar.component.ts
index 0df80d7def49002d263bb3d7917aaa69f8347bd8..2d5dcb173586919b48e69b06bb3a407bed51de4b 100644
--- a/src/app/admin/components/nav-bar/nav-bar.component.ts
+++ b/src/app/admin/components/nav-bar/nav-bar.component.ts
@@ -7,6 +7,7 @@ import { AdminRoutes } from '../../admin-routing.module';
 @Component({
   selector: 'app-admin-nav-bar',
   templateUrl: './nav-bar.component.html',
+  styleUrl: '../../admin.scss',
 })
 export class NavBarComponent {
   public ghostLink = this.runtimeConfigLoaderService.getConfigObjectKey('ghostAdmin');
@@ -17,4 +18,8 @@ export class NavBarComponent {
     private runtimeConfigLoaderService: RuntimeConfigLoaderService,
     public router: Router,
   ) {}
+
+  public openGhost(): void {
+    window.open(this.ghostLink);
+  }
 }