diff --git a/roadmap.md b/roadmap.md
index 3aa832c..f40c9f0 100644
--- a/roadmap.md
+++ b/roadmap.md
@@ -5,8 +5,10 @@
 - Improve skier sprites when turning
 - Define new default tracks, records and ghosts
 - Improve online data list to match big items list
-- Use mailing server
 - Define premium url & link
+- Add verification step 
+- ✔️ ~~Add password management step~~
+- ✔️ ~~Use mailing server~~
 - ✔️ ~~Implement async multiplayer~~
 - ✔️ ~~Improve spectators dynamic and animation~~
 - ✔️ ~~Rework skier dynamic~~
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 26a2b65..6bbdeea 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -88,5 +88,17 @@ export const routes: Routes = [
         data: { type: 'online' },
         canActivate: [AuthGuard, AvailableGuard]
     },
+    {
+        path: 'reset-password',
+        loadComponent: () =>
+            import('./pages/reset-password/reset-password.component').then(m => m.ResetPasswordComponent),
+        canActivate: [AvailableGuard]
+    },
+    {
+        path: 'reset-password/:token',
+        loadComponent: () =>
+            import('./pages/reset-password/reset-password.component').then(m => m.ResetPasswordComponent),
+        canActivate: [AvailableGuard]
+    },
     { path: '**', pathMatch: 'full', redirectTo: '' }
 ];
diff --git a/src/app/common/scss/components.scss b/src/app/common/scss/components.scss
index 123b31a..e692125 100644
--- a/src/app/common/scss/components.scss
+++ b/src/app/common/scss/components.scss
@@ -17,6 +17,10 @@
     border: 1px solid var(--color-primary);
     color: var(--color-primary);
 
+    &.placeholder {
+        margin-top: 1rem;
+    }
+
     &.tertiary {
         border: 1px solid var(--color-tertiary);
         color: var(--color-tertiary);
@@ -73,6 +77,11 @@
     position: sticky;
     top: 0;
     background-color: var(--color-surface);
+
+    &.placeholder {
+        color: var(--color-tertiary);
+        text-align: center;
+    }
 }
 
 .retro-subtitle {
@@ -92,6 +101,10 @@
     color: var(--color-primary);
     font-weight: 400;
 
+    &.placeholder {
+        text-align: center;
+    }
+
     &.tertiary {
         color: var(--color-tertiary);
     }
@@ -101,11 +114,28 @@
     }
 }
 
+.retro-hint {
+    font-size: var(--text-small);
+    color: var(--color-primary-light);
+    text-align: right;
+}
+
 .retro-link {
     color: var(--color-tertiary);
     font-weight: 500;
 }
 
+.retro-placeholder-image {
+    display: flex;
+    padding: 2rem;
+    justify-content: center;
+    align-items: center;
+    img {
+        fill: var(--color-tertiary);
+        color: var(--color-tertiary);
+    }
+}
+
 .retro-placeholder {
     font-size: var(--text-small);
     padding: 1rem 0.5rem;
diff --git a/src/app/common/services/auth.service.ts b/src/app/common/services/auth.service.ts
index b829c2e..e74b5f8 100644
--- a/src/app/common/services/auth.service.ts
+++ b/src/app/common/services/auth.service.ts
@@ -58,4 +58,12 @@ export class AuthService {
             ? User.buildFromRecord(environment.pb.authStore.record as RecordModel)
             : null;
     }
+
+    public sendResetPasswordMail(email: string): Promise<boolean> {
+        return environment.pb.collection('users').requestPasswordReset(email);
+    }
+
+    public changePassword(password: string, passwordConfirm: string, token: string): Promise<boolean> {
+        return environment.pb.collection('users').confirmPasswordReset(token, password, passwordConfirm);
+    }
 }
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
index 17d8972..7efe154 100644
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@@ -5,7 +5,9 @@
 </app-toolbar>
 <div class="retro-content">
     @if(!serverAvailable()) {
-    <div class="retro-placeholder fill">Unfortunately online services are not available, please try again later.</div>
+    <div class="retro-placeholder fill">
+        Unfortunately online services are not available, please try again later.
+    </div>
     } @else {
     <div class="retro-title">Ride online</div>
     <div class="retro-text">
@@ -33,6 +35,11 @@
                     placeholder="6 to 16 char."
                 />
             </div>
+            <div class="retro-hint">
+                <a class="retro-link" routerLink="/reset-password">
+                    Forgot password ?
+                </a>
+            </div>
             @if(loginError()) {
             <div class="retro-text error">{{ loginError() }}</div>
             }
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index de42c2f..fdd3077 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -25,7 +25,7 @@ interface RegisterForm extends LoginForm {
     name: FormControl<string | null>;
 }
 
-const emailValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
+export const emailValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
     let email: string = control?.value;
     if (email?.length) {
         const regex = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
diff --git a/src/app/pages/reset-password/reset-password.component.html b/src/app/pages/reset-password/reset-password.component.html
new file mode 100644
index 0000000..dd55e03
--- /dev/null
+++ b/src/app/pages/reset-password/reset-password.component.html
@@ -0,0 +1,101 @@
+<app-toolbar>
+    <ng-container ngProjectAs="left-actions">
+        <app-button-icon
+            icon="arrow_back"
+            routerLink="/login"
+        ></app-button-icon>
+    </ng-container>
+</app-toolbar>
+<div class="retro-content">
+    @if(token) { @if(passwordChanged && passwordChanged()) {
+    <div class="retro-placeholder-image">
+        <img src="assets/icons/password.svg" />
+    </div>
+    <div class="retro-title placeholder">Password updated</div>
+    <div class="retro-text placeholder">
+        Password updated successfully! You're all set to get back on the
+        mountain and enjoy the ride.
+    </div>
+    <button class="retro-button placeholder" routerLink="/login">
+        Go to login
+    </button>
+    } @else {
+    <div class="retro-title">Set your new password</div>
+    <div class="form-container">
+        <div class="retro-form-line">
+            <div class="label">Password</div>
+            <input
+                class="retro-input"
+                type="password"
+                [formControl]="password"
+                placeholder="6 to 16 char."
+            />
+        </div>
+        <div class="retro-form-line">
+            <div class="label">Confirm password</div>
+            <input
+                class="retro-input"
+                type="password"
+                [formControl]="passwordConfirm"
+                placeholder="6 to 16 char."
+            />
+        </div>
+        <button
+            class="retro-button"
+            [disabled]="
+                password.invalid ||
+                passwordConfirm.invalid ||
+                password.value !== passwordConfirm.value
+            "
+            (click)="changePassword()"
+        >
+            Save your new password
+        </button>
+        @if(password.valid && passwordConfirm.valid && password.value !==
+        passwordConfirm.value ) {
+        <div class="retro-text error">Passwords don’t match. Try again.</div>
+        } @if(passwordChanged && !passwordChanged()) {
+        <div class="retro-text error">
+            Something went wrong while updating your password. Please try again.
+        </div>
+        }
+    </div>
+    } } @else { @if(mailSent()) {
+    <div class="retro-placeholder-image">
+        <img src="assets/icons/mailSent.svg" />
+    </div>
+    <div class="retro-title placeholder">Mail sent</div>
+    <div class="retro-text placeholder">
+        Check your inbox for a message from us. Follow the instructions in the
+        email to reset your password and get back on track!
+    </div>
+    } @else {
+    <div class="retro-title">Reset your password</div>
+    <div class="retro-text">
+        Forgot your password? No worries, we’ve got you covered!
+    </div>
+    <div class="retro-text">
+        Simply enter your email below and click the button. You’ll receive an
+        email shortly with instructions to reset your password and create a new
+        one.
+    </div>
+    <div class="form-container">
+        <div class="retro-form-line">
+            <div class="label">Email</div>
+            <input
+                class="retro-input"
+                type="email"
+                [formControl]="email"
+                placeholder="Profile email"
+            />
+        </div>
+        <button
+            class="retro-button"
+            [disabled]="email.invalid"
+            (click)="sendMail()"
+        >
+            Send password reset mail
+        </button>
+    </div>
+    } }
+</div>
diff --git a/src/app/pages/reset-password/reset-password.component.scss b/src/app/pages/reset-password/reset-password.component.scss
new file mode 100644
index 0000000..5865101
--- /dev/null
+++ b/src/app/pages/reset-password/reset-password.component.scss
@@ -0,0 +1,13 @@
+:host {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: 1rem;
+
+    .form-container {
+        padding: 1rem 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+}
diff --git a/src/app/pages/reset-password/reset-password.component.ts b/src/app/pages/reset-password/reset-password.component.ts
new file mode 100644
index 0000000..280e163
--- /dev/null
+++ b/src/app/pages/reset-password/reset-password.component.ts
@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, inject, signal, type Signal } from '@angular/core';
+import { ToolbarComponent } from '../../common/components/toolbar/toolbar.component';
+import { ButtonIconComponent } from '../../common/components/button-icon/button-icon.component';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { emailValidator } from '../login/login.component';
+import { AuthService } from '../../common/services/auth.service';
+
+@Component({
+    selector: 'app-reset-password',
+    imports: [ButtonIconComponent, ReactiveFormsModule, RouterLink, ToolbarComponent],
+    templateUrl: './reset-password.component.html',
+    styleUrl: './reset-password.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ResetPasswordComponent {
+    private authService = inject(AuthService);
+    private route = inject(ActivatedRoute);
+
+    protected mailSent = signal(false);
+    protected passwordChanged?: Signal<boolean>;
+    protected email = new FormControl('', [Validators.required, emailValidator]);
+    protected password = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(16)]);
+    protected passwordConfirm = new FormControl('', [
+        Validators.required,
+        Validators.minLength(6),
+        Validators.maxLength(16)
+    ]);
+    protected readonly token = (this.route.snapshot.params as { token: string }).token;
+
+    protected sendMail(): void {
+        if (this.email.valid) {
+            this.authService.sendResetPasswordMail(this.email.value!).then(success => {
+                if (success) {
+                    this.mailSent.set(true);
+                    this.email.reset();
+                }
+            });
+        }
+    }
+
+    protected changePassword(): void {
+        if (
+            this.token &&
+            this.password.valid &&
+            this.passwordConfirm.valid &&
+            this.password.value === this.passwordConfirm.value
+        ) {
+            this.authService
+                .changePassword(this.password.value!, this.passwordConfirm.value!, this.token)
+                .then(result => {
+                    this.passwordChanged = signal(result);
+                });
+        }
+    }
+}
diff --git a/src/assets/icons/mailSent.svg b/src/assets/icons/mailSent.svg
new file mode 100644
index 0000000..e94da05
--- /dev/null
+++ b/src/assets/icons/mailSent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#9747ff"><path d="M626-195v82q0 15-12 24t-28 9H113q-14 0-23.5-9.5T80-113v-298q0-14 9.5-23.5T113-444h133v-206q0-97 68.5-163.5T480-880h173q95 0 161 67.5T880-650v570h-60v-115H626Zm0-60h194v-395q0-70-48.5-120T653-820H480q-72 0-123 49t-51 121v206h280q16 0 28 9t12 24v156ZM400-575v-60h326v60H400Zm-47 313 213-122H140l213 122Zm0 55L140-329v189h426v-189L353-207ZM140-384v244-244Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/password.svg b/src/assets/icons/password.svg
new file mode 100644
index 0000000..700c85c
--- /dev/null
+++ b/src/assets/icons/password.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#9747ff"><path d="M80-200v-61h800v61H80Zm38-254-40-22 40-68H40v-45h78l-40-68 40-22 38 67 38-67 40 22-40 68h78v45h-78l40 68-40 22-38-67-38 67Zm324 0-40-24 40-68h-78v-45h78l-40-68 40-22 38 67 38-67 40 22-40 68h78v45h-78l40 68-40 24-38-67-38 67Zm324 0-40-24 40-68h-78v-45h78l-40-68 40-22 38 67 38-67 40 22-40 68h78v45h-78l40 68-40 24-38-67-38 67Z"/></svg>
\ No newline at end of file