diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 413d300abd39b487981a4ebd2e1cb9c3dc598489..a7e9e853344e4e054dd9f7d2468053d6689d5134 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -177,6 +177,19 @@ const routes: Routes = [
       footerOutletRoute,
     ],
   },
+  {
+    path: 'join/:id',
+    children: [
+      {
+        path: '',
+        canActivate: [AuthGuard],
+        component: StructureJoinComponent,
+        resolve: {
+          structure: StructureResolver,
+        },
+      },
+    ],
+  },
   {
     path: 'reset-password',
     children: [
diff --git a/src/app/form/form-view/form-view.module.ts b/src/app/form/form-view/form-view.module.ts
index 8d69c26d2211a62ebab716d1845dd150edf20fb9..aedd89fb3b9df0ed4545444ab6c9cf7b46adebd6 100644
--- a/src/app/form/form-view/form-view.module.ts
+++ b/src/app/form/form-view/form-view.module.ts
@@ -54,7 +54,6 @@ import { PersonalOfferGuard } from './guards/personalOffer.guard';
     PersonalOfferAccompanimentComponent,
     PersonalOfferTrainingTypeComponent,
     PersonalOfferOtherStructureChoiceComponent,
-    InformationStepComponent,
     AccountFormComponent,
     ProfileEmployerSelectionComponent,
     ProfileJobSelectionComponent,
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
index 42bce1cb3d9659aefb50476e5986f70879d70ef9..365693e770ec12f246a9e065d8032d00707914a8 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
@@ -20,7 +20,8 @@
       background-color: $grey-6;
       border-radius: 7px;
     }
-    &::-webkit-progress-value {
+    &::-webkit-progress-value,
+    &::-moz-progress-bar {
       background-color: $primary-color;
       border-radius: 12px;
     }
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index e71bed0300dd733e95ec541aaeab1c61573702cc..f8f4facbda799e3d9b16216f08277d33984d9a79 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -25,6 +25,7 @@ export class LoginComponent implements OnInit {
   public isWelcome = false;
   public userId: string;
   public token: string;
+  public returnUrl: string;
   public structure: Structure;
   public verificationSuccess = false;
   public verificationIssue = false;
@@ -56,6 +57,10 @@ export class LoginComponent implements OnInit {
       }
     });
 
+    this.activatedRoute.queryParams.subscribe((params) => {
+      this.returnUrl = params.returnUrl;
+    });
+
     // login form
     this.loginForm = this.formBuilder.group({
       email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
@@ -88,7 +93,11 @@ export class LoginComponent implements OnInit {
           if (this.isWelcome) {
             this.router.navigateByUrl('form/profile');
           } else {
-            this.router.navigateByUrl('news');
+            if (this.returnUrl) {
+              this.router.navigateByUrl(this.returnUrl);
+            } else {
+              this.router.navigateByUrl('news');
+            }
           }
         },
         () => {
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 17ea2c876f7e5479547f6ebae368be150e0b7534..b8449db73ec60f3a1a5985da8ee7824e5dc2be29 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -10,11 +10,13 @@ import { HourPickerComponent } from './hour-picker/hour-picker.component';
 import { CopyPasteComponent } from './hour-picker/copy-paste/copy-paste.component';
 import { RadioFormComponent } from './radio-form/radio-form.component';
 import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmation.component';
+import { ModalJoinConfirmationComponent } from './modal-join-confirmation/modal-join-confirmation.component';
 import { StructureOptionsModalComponent } from './structure-options-modal/structure-options-modal.component';
 import { ModalOptionsComponent } from './modal-options/modal-options.component';
 import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
 import { PasswordFormComponent } from './password-form/password-form.component';
 import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component';
+import { InformationStepComponent } from '../../form/form-view/global-components/information-step/information-step.component';
 
 // tslint:disable-next-line: max-line-length
 export {
@@ -51,9 +53,11 @@ export const SharedComponents = [
   CopyPasteComponent,
   RadioFormComponent,
   ModalConfirmationComponent,
+  ModalJoinConfirmationComponent,
   StructureOptionsModalComponent,
   ModalOptionsComponent,
   TextInputModalComponent,
   PasswordFormComponent,
   TrainingTypePickerComponent,
+  InformationStepComponent,
 ];
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..55430022df2996d7ee4c3f0281e6c49edc016f87
--- /dev/null
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html
@@ -0,0 +1,27 @@
+<div *ngIf="openned" class="modalBackground">
+  <div class="modal">
+    <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
+      <div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="empty"></div>
+        <h1>{{ title }}</h1>
+        <svg class="hide" aria-hidden="true" (click)="closeModal(false)">
+          <use [attr.xlink:href]="'assets/form/sprite.svg#close'"></use>
+        </svg>
+      </div>
+      <p class="primaryContent">{{ primaryContent }}</p>
+      <p *ngIf="secondaryContent" class="secondaryContent">{{ secondaryContent }}</p>
+      <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
+        <app-button
+          (action)="closeModal(false)"
+          [text]="'Annuler'"
+          [style]="buttonTypeEnum.modalSecondary"
+        ></app-button>
+        <app-button
+          (action)="closeModal(true)"
+          [text]="customConfirmationText ? customConfirmationText : 'Confirmer'"
+          [style]="buttonTypeEnum.modalPrimary"
+        ></app-button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..05b10cb29f0eaeff8d61c830b50dbdb98165e33e
--- /dev/null
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
@@ -0,0 +1,45 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/z-index';
+
+.modalBackground {
+  .modal {
+    max-width: 390px;
+    .contentModal {
+      padding: 20px 40px;
+
+      .headerModal {
+        width: 390px;
+        padding: 0 8px;
+        h1 {
+          @include lato-bold-18;
+          margin: 10px 0;
+        }
+        svg,
+        .empty {
+          height: 40px;
+          width: 40px;
+        }
+        svg {
+          cursor: pointer;
+        }
+      }
+      p {
+        @include lato-regular-18;
+        text-align: center;
+        margin: 10px 0;
+      }
+      .secondaryContent {
+        color: $red;
+        margin-top: -10px;
+      }
+      .footerModal {
+        gap: 8px;
+        app-button {
+          flex: 1;
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.spec.ts b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c3d8c2230701bfcae7210e66bb47f7c09e84d8e
--- /dev/null
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalConfirmationComponent } from './modal-join-confirmation.component';
+
+describe('ModalConfirmationComponent', () => {
+  let component: ModalConfirmationComponent;
+  let fixture: ComponentFixture<ModalConfirmationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ModalConfirmationComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..52c0df7b42611fe1a6945b1d729100ccb8205a23
--- /dev/null
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts
@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonType } from '../button/buttonType.enum';
+
+@Component({
+  selector: 'app-join-modal-confirmation',
+  templateUrl: './modal-join-confirmation.component.html',
+  styleUrls: ['./modal-join-confirmation.component.scss'],
+})
+export class ModalJoinConfirmationComponent {
+  @Input() public openned: boolean;
+  @Input() public title: string;
+  @Input() public primaryContent: string;
+  @Input() public secondaryContent?: string;
+  @Input() public customConfirmationText?: string;
+  @Output() closed = new EventEmitter<boolean>();
+  public buttonTypeEnum = ButtonType;
+
+  public closeModal(value: boolean): void {
+    this.closed.emit(value);
+  }
+}
diff --git a/src/app/structure-join/structure-join.component.html b/src/app/structure-join/structure-join.component.html
index 4d51a54ef9e1d015418c59e6fb408c7e8d61eb93..df5aca124ffaa9cb5a96179a7ac162142c5d0b05 100644
--- a/src/app/structure-join/structure-join.component.html
+++ b/src/app/structure-join/structure-join.component.html
@@ -1,6 +1,22 @@
-<div fxLayout="column" class="content-container full-screen">
-  <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
-    <h1>Validation de la demande de rattachement</h1>
-    <p>Merci de patienter...</p>
+<ng-container *ngIf="!structureName">
+  <div fxLayout="column" class="content-container full-screen">
+    <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
+      <h1>Validation de la demande de rattachement</h1>
+      <p>Merci de patienter...</p>
+    </div>
   </div>
-</div>
+</ng-container>
+<ng-container *ngIf="structureName">
+  <div class="container">
+    <div class="page">
+      <app-information-step
+        [step]="structureFormStepEnum.mailSentInfo"
+        [formType]="formTypeEnum.structure"
+        [structureName]="structureName"
+      ></app-information-step>
+    </div>
+    <div class="button">
+      <app-button [style]="buttonTypeEnum.Primary" [text]="'Ok'" (action)="previousUrl()"> </app-button>
+    </div>
+  </div>
+</ng-container>
diff --git a/src/app/structure-join/structure-join.component.scss b/src/app/structure-join/structure-join.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a91e8b612e317a88a8e5df91bfbbccdb60a1552b
--- /dev/null
+++ b/src/app/structure-join/structure-join.component.scss
@@ -0,0 +1,45 @@
+@import '../../assets/scss/color';
+
+.container {
+  /* Auto layout */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0px 0px;
+
+  /* Inside auto layout */
+  flex: none;
+  order: 1;
+  flex-grow: 1;
+}
+
+.page {
+  box-sizing: border-box;
+
+  /* Auto layout */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 32px 48px;
+  gap: 16px;
+
+  width: 1000px;
+  height: 579px;
+
+  /* Basic/White */
+  background: $white;
+
+  /* Grey/6 */
+  border: 1px solid $grey-6;
+  border-radius: 8px;
+
+  /* Inside auto layout */
+  flex: none;
+  order: 0;
+  flex-grow: 1;
+}
+
+.button {
+  margin-top: 16px;
+}
diff --git a/src/app/structure-join/structure-join.component.ts b/src/app/structure-join/structure-join.component.ts
index e4e8d657d4ab4250938f84543db84101e221bd10..101c22a96627951c212aa5b01efc4e704037ddc3 100644
--- a/src/app/structure-join/structure-join.component.ts
+++ b/src/app/structure-join/structure-join.component.ts
@@ -1,20 +1,43 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { formType } from '../form/form-view/formType.enum';
+import { structureFormStep } from '../form/form-view/structure-form/structureFormStep.enum';
+import { RouterListenerService } from '../services/routerListener.service';
 import { StructureService } from '../services/structure.service';
-
+import { ButtonType } from '../shared/components/button/buttonType.enum';
 @Component({
   selector: 'app-structure-join',
   templateUrl: './structure-join.component.html',
+  styleUrls: ['./structure-join.component.scss'],
 })
 export class StructureJoinComponent implements OnInit {
-  constructor(private router: Router, private route: ActivatedRoute, private structureService: StructureService) {}
+  public structureName?: string = '';
+  public structureFormStepEnum = structureFormStep;
+  public formTypeEnum = formType;
+  public buttonTypeEnum = ButtonType;
+
+  constructor(
+    private routerListener: RouterListenerService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private structureService: StructureService
+  ) {}
 
   ngOnInit(): void {
+    // Handle structure joining with
+    this.route.data.subscribe((data) => {
+      if (data.structure) {
+        this.structureName = data.structure.structureName;
+      }
+    });
+
+    // Handle structure joining with email
     this.route.queryParamMap.subscribe((params) => {
       if (
         params.get('id') &&
         params.get('userId') &&
-        (params.get('status') === 'true' || params.get('status') === 'false')
+        (params.get('status') === 'true' || params.get('status') === 'false') &&
+        !this.structureName
       ) {
         this.structureService
           .validateStructureJoin(params.get('id'), params.get('userId'), params.get('status') === 'true' ? true : false)
@@ -29,4 +52,8 @@ export class StructureJoinComponent implements OnInit {
       }
     });
   }
+
+  previousUrl() {
+    this.routerListener.goToPreviousUrl();
+  }
 }
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 11f5e19fbcdeef4e435fbba7ecb35c1863d0f0cf..71e621ba575aaeac0c817304585e89089b488902 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -500,13 +500,14 @@
       (closed)="claimStructure($event)"
     ></app-modal-confirmation>
 
-    <app-modal-confirmation
-      [openned]="joinModalOpenned"
-      [content]="
-        'Voulez-vous vraiment rejoindre cette structure&nbsp;? Une demande sera envoyée aux membres pour validation'
-      "
-      (closed)="joinStructure($event)"
-    ></app-modal-confirmation>
+  <app-join-modal-confirmation
+    [openned]="joinModalOpenned"
+    [title]="'Travaillez-vous ici&nbsp;?'"
+    [primaryContent]="'Un message sera envoyé à un administrateur de la structure'"
+    [secondaryContent]="structure.structureName"
+    [customConfirmationText]="'Rejoindre la structure'"
+    (closed)="joinStructure($event)"
+  ></app-join-modal-confirmation>
 
     <app-text-input-modal
       [openned]="structureErrorModalOpenned"
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 76f32d1e2d1782005b6dcdb06ff6735207d9d985..ad805b9a18cb7613c19fa17a5880a76407753b21 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -230,7 +230,7 @@ export class StructureDetailsComponent implements OnInit {
     if (this.userIsLoggedIn()) {
       this.toggleJoinModal();
     } else {
-      this.router.navigate(['create-structure'], { state: { newUser: this.structure, isJoin: true } });
+      this.router.navigate(['login'], { queryParams: { returnUrl: `acteurs?id=${this.structure._id}` } });
     }
   }
   public handleModify(): void {
@@ -272,6 +272,7 @@ export class StructureDetailsComponent implements OnInit {
           this.isClaimed = true;
         });
       });
+      this.router.navigate(['join', this.structure._id]);
     }
   }
 
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 05cb2231f9e81fd010dd939c5895520d3ce3ebba..91b8f1a8089e455ab82a591231942b53b52314e4 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -614,7 +614,7 @@
 <path d="M26 140H24.5C24.5 140.828 25.1716 141.5 26 141.5V140ZM83.5 87L83.5 85.5L83.5 87ZM103.426 88.0228L103.589 86.5318L103.426 88.0228ZM63.5739 88.0223L63.7373 89.5133L63.5739 88.0223ZM83.5 141.5C84.3284 141.5 85 140.828 85 140C85 139.172 84.3284 138.5 83.5 138.5V141.5ZM63.7373 89.5133C69.4973 88.882 76.0577 88.4999 83.5 88.5L83.5 85.5C75.9551 85.4999 69.2853 85.8873 63.4105 86.5312L63.7373 89.5133ZM83.5 88.5C90.9421 88.5001 97.5024 88.8825 103.262 89.5139L103.589 86.5318C97.7145 85.8878 91.0448 85.5001 83.5 85.5L83.5 88.5ZM27.5 140C27.5 127.476 30.5094 115.481 36.5387 106.319C42.5441 97.1935 51.5563 90.8484 63.7373 89.5133L63.4105 86.5312C50.2549 87.9731 40.4801 94.8727 34.0327 104.67C27.6093 114.43 24.5 127.036 24.5 140H27.5ZM83.5 138.5H26V141.5H83.5V138.5ZM129.642 100.23C123.32 92.8079 114.639 87.743 103.589 86.5318L103.262 89.5139C113.517 90.638 121.509 95.3091 127.358 102.176L129.642 100.23Z" fill="#696969"/>
 <circle cx="84.0416" cy="63.4879" r="30.9879" fill="white" stroke="#696969" stroke-width="3" stroke-linejoin="round"/>
 <path d="M154.686 93.624C151.223 90.5385 145.919 90.8517 142.842 94.3221L110.73 130.534L93.1433 116.368C89.5313 113.458 84.2499 114.036 81.3486 117.655C78.4489 121.272 79.0227 126.56 82.6326 129.468L106.442 148.646C109.928 151.453 114.998 151.027 117.968 147.678L155.382 105.486C158.458 102.018 158.147 96.7077 154.686 93.624Z" fill="#47C562" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+</symbol>
 
 
 </svg>