diff --git a/src/app/shell/provider/provider-config/can-leave-guard.service.ts b/src/app/shell/provider/provider-config/can-leave-guard.service.ts
new file mode 100644
index 0000000000..f76ff70271
--- /dev/null
+++ b/src/app/shell/provider/provider-config/can-leave-guard.service.ts
@@ -0,0 +1,26 @@
+import { CanDeactivate } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { ProviderConfigComponent } from './provider-config.component';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable, of } from 'rxjs';
+import { ProviderConfigModalComponent } from './provider-config-modal/provider-config-modal.component';
+
+@Injectable()
+export class CanDeactivateGuard implements CanDeactivate<ProviderConfigComponent> {
+
+  constructor(private dialog: MatDialog) {
+  }
+
+  canDeactivate(component: ProviderConfigComponent): Observable<boolean> {
+    if (component.orgFormGroup.dirty || component.addressFormGroup.dirty || component.photoFormGroup.dirty) {
+      return this.confirmDialog();
+    }
+    return of(true);
+  }
+
+  confirmDialog(): Observable<boolean> {
+    const dialogRef = this.dialog.open(ProviderConfigModalComponent);
+    return dialogRef.afterClosed();
+  }
+}
+
diff --git a/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.html b/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.html
new file mode 100644
index 0000000000..02e7a7407a
--- /dev/null
+++ b/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.html
@@ -0,0 +1,5 @@
+<h1 mat-dialog-title>У вас є не збережені дані, покинути сторінку?</h1>
+<div mat-dialog-actions>
+  <button mat-button (click)="closeModal(false)">Ні</button>
+  <button mat-button (click)="closeModal(true)">Так</button>
+</div>
diff --git a/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.scss b/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.spec.ts b/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.spec.ts
new file mode 100644
index 0000000000..bdb47fdc52
--- /dev/null
+++ b/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProviderConfigModalComponent } from './provider-config-modal.component';
+
+describe('ProviderConfigModalComponent', () => {
+  let component: ProviderConfigModalComponent;
+  let fixture: ComponentFixture<ProviderConfigModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProviderConfigModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProviderConfigModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.ts b/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.ts
new file mode 100644
index 0000000000..125fb7890d
--- /dev/null
+++ b/src/app/shell/provider/provider-config/provider-config-modal/provider-config-modal.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+
+@Component({
+  selector: 'app-provider-config-modal',
+  templateUrl: './provider-config-modal.component.html',
+  styleUrls: ['./provider-config-modal.component.scss']
+})
+export class ProviderConfigModalComponent {
+  constructor(private dialogRef: MatDialogRef<ProviderConfigModalComponent>) {
+  }
+
+  closeModal(value: boolean): void {
+    this.dialogRef.close(value);
+  }
+}
+
diff --git a/src/app/shell/provider/provider-config/provider-config.component.html b/src/app/shell/provider/provider-config/provider-config.component.html
index 52a5cb287d..69c3730116 100644
--- a/src/app/shell/provider/provider-config/provider-config.component.html
+++ b/src/app/shell/provider/provider-config/provider-config.component.html
@@ -21,7 +21,7 @@
                 </div>
                 <div class="box" *ngIf="valueOwnership">
                   <ng-container *ngFor="let option of ownerShipList">
-                    <div class="box_item" (click)="setValue(option, ownership)">{{option}}</div>
+                    <div class="box-item" (click)="setValue(option, ownership)">{{option}}</div>
                   </ng-container>
                 </div>
               </div>
@@ -38,27 +38,27 @@
                 </div>
                 <div class="box" *ngIf="valueOrgType">
                   <ng-container *ngFor="let option of organizationTypeList">
-                    <div class="box_item" (click)="setValue(option, orgType)">{{option}}</div>
+                    <div class="box-item" (click)="setValue(option, orgType)">{{option}}</div>
                   </ng-container>
                 </div>
               </div>
             </div>
             <div class="org-full-name">
-              <label for="groupNameFull">Повна назва організації<span class="important">*</span></label>
+              <label for="group-name-field">Повна назва організації<span class="important">*</span></label>
               <input
                 type="text"
-                id="groupNameFull"
+                id="group-name-field"
                 formControlName="orgFullName"
                 [ngClass]="{'error': !orgFormGroup.get('orgFullName').valid && orgFormGroup.get('orgFullName').touched}"
               >
             </div>
             <div class="org-short-name">
-              <label for="groupNameShort">Скорочена назва організації<span class="important">*</span></label>
-              <input type="text" id="groupNameShort" formControlName="orgShortName">
+              <label for="group-short-name-field">Скорочена назва організації<span class="important">*</span></label>
+              <input type="text" id="group-short-name-field" formControlName="orgShortName">
             </div>
             <div class="ceo-name">
-              <label for="ceoName">ПІБ керівника<span class="important">*</span></label>
-              <input type="text" id="ceoName" formControlName="ceoName">
+              <label for="ceo-name-field">ПІБ керівника<span class="important">*</span></label>
+              <input type="text" id="ceo-name-field" formControlName="ceoName">
             </div>
             <div class="ceo-birthday">
               <mat-label>Дата народження керівника<span class="important">*</span></mat-label>
@@ -69,44 +69,41 @@
               </div>
             </div>
             <div class="id-code">
-              <label for="idCode">ЄДРПОУ/ІПН<span class="important">*</span></label>
-              <input type="text" id="idCode" formControlName="personalId">
+              <label for="id-code-field">ЄДРПОУ/ІПН<span class="important">*</span></label>
+              <input type="text" id="id-code-field" formControlName="personalId">
             </div>
             <div class="phone">
-              <label for="phoneForm">Телефон<span class="important">*</span></label>
-              <input type="text" id="phoneForm" formControlName="phone">
+              <label for="phone-form-field">Телефон<span class="important">*</span></label>
+              <input type="text" id="phone-form-field" formControlName="phone" placeholder="380XXXXXXX">
             </div>
             <div class="email">
-              <label for="emailForm">Емейл<span class="important">*</span></label>
-              <input type="email" id="emailForm" formControlName="email">
+              <label for="email-form-field">Емейл<span class="important">*</span></label>
+              <input type="email" id="email-form-field" formControlName="email">
             </div>
             <div class="web-page">
-              <label for="webPageForm">Веб сайт</label>
-              <input type="text" id="webPageForm" formControlName="webPage">
+              <label for="webpage-form-field">Веб сайт</label>
+              <input type="text" id="webpage-form-field" formControlName="webPage">
             </div>
             <div class="facebook">
-              <label for="facebook">Facebook</label>
-              <input type="text" id="facebook" formControlName="facebook">
+              <label for="facebook-form-field">Facebook</label>
+              <input type="text" id="facebook-form-field" formControlName="facebook">
             </div>
             <div class="instagram">
-              <label for="instagram">Instagram</label>
-              <input type="text" id="instagram" formControlName="instagram">
+              <label for="instagram-form-field">Instagram</label>
+              <input type="text" id="instagram-form-field" formControlName="instagram">
             </div>
             <div class="owner-name">
-              <label for="ownerName">Засновник<span class="important">*</span></label>
-              <input type="text" id="ownerName" formControlName="ownerName">
-            </div>
-            <div class="buttons1">
-              <div class="buttons1_reset">
-                <button>СКАСУВАТИ</button>
-              </div>
-              <div class="buttons1_next">
-                <button
-                  mat-button matStepperNext [disabled]="orgFormGroup.valid"
-                  [ngClass]="{'disabled-button':!orgFormGroup.valid}"
-                >ДАЛІ
-                </button>
-              </div>
+              <label for="owner-name-field">Засновник<span class="important">*</span></label>
+              <input type="text" id="owner-name-field" formControlName="ownerName">
+            </div>
+            <div class="form-ownership-buttons">
+              <button class="form-ownership-buttons_reset" type="button" (click)="formReset()">СКАСУВАТИ</button>
+              <button class="form-ownership-buttons_next"
+                      type="button"
+                      matStepperNext [disabled]="orgFormGroup.valid"
+                      [ngClass]="{'disabled-button':!orgFormGroup.valid}"
+              >ДАЛІ
+              </button>
             </div>
           </div>
         </form>
@@ -117,24 +114,24 @@
             <ng-container formGroupName="legalAddress">
               <div class="header-address">Юридична адреса</div>
               <div class="region">
-                <label for="region">Область<span class="important">*</span></label>
-                <input type="text" id="region" formControlName="region">
+                <label for="region-field">Область<span class="important">*</span></label>
+                <input type="text" id="region-field" formControlName="region">
               </div>
               <div class="city">
-                <label for="city">Місто<span class="important">*</span></label>
-                <input type="text" id="city" formControlName="city">
+                <label for="city-form-field">Місто<span class="important">*</span></label>
+                <input type="text" id="city-form-field" formControlName="city">
               </div>
               <div class="district">
-                <label for="district">Район<span class="important">*</span></label>
-                <input type="text" id="district" formControlName="district">
+                <label for="district-form-field">Район<span class="important">*</span></label>
+                <input type="text" id="district-form-field" formControlName="district">
               </div>
               <div class="street">
-                <label for="street">Вулиця<span class="important">*</span></label>
-                <input type="text" id="street" formControlName="street">
+                <label for="street-form-field">Вулиця<span class="important">*</span></label>
+                <input type="text" id="street-form-field" formControlName="street">
               </div>
               <div class="building">
-                <label for="building">Будинок<span class="important">*</span></label>
-                <input type="text" id="building" formControlName="building">
+                <label for="building-form-field">Будинок<span class="important">*</span></label>
+                <input type="text" id="building-form-field" formControlName="building">
               </div>
             </ng-container>
             <div class="divider">
@@ -146,30 +143,30 @@
             </div>
             <ng-container formGroupName="actualAddress">
               <div class="region">
-                <label for="regionF">Область<span class="important">*</span></label>
-                <input type="text" id="regionF" formControlName="region">
+                <label for="regionF-form-field">Область<span class="important">*</span></label>
+                <input type="text" id="regionF-form-field" formControlName="region">
               </div>
               <div class="city">
-                <label for="cityF">Місто<span class="important">*</span></label>
-                <input type="text" id="cityF" formControlName="city">
+                <label for="cityF-form-field">Місто<span class="important">*</span></label>
+                <input type="text" id="cityF-form-field" formControlName="city">
               </div>
               <div class="district">
-                <label for="districtF">Район<span class="important">*</span></label>
-                <input type="text" id="districtF" formControlName="district">
+                <label for="districtF-form-field">Район<span class="important">*</span></label>
+                <input type="text" id="districtF-form-field" formControlName="district">
               </div>
               <div class="street">
-                <label for="streetF">Вулиця<span class="important">*</span></label>
-                <input type="text" id="streetF" formControlName="street">
+                <label for="streetF-form-field">Вулиця<span class="important">*</span></label>
+                <input type="text" id="streetF-form-field" formControlName="street">
               </div>
               <div class="building">
-                <label for="buildingF">Будинок<span class="important">*</span></label>
-                <input type="text" id="buildingF" formControlName="building">
+                <label for="buildingF-form-field">Будинок<span class="important">*</span></label>
+                <input type="text" id="buildingF-form-field" formControlName="building">
               </div>
             </ng-container>
-            <div class="buttons2">
-              <button class="buttons2_back" mat-button matStepperPrevious>НАЗАД</button>
-              <button class="reset">СКАСУВАТИ</button>
-              <button class="buttons2_next" mat-button matStepperNext
+            <div class="address-form-buttons">
+              <button class="address-form-buttons_back" matStepperPrevious>НАЗАД</button>
+              <button type="button" class="address-form-buttons_reset" (click)="formReset()">СКАСУВАТИ</button>
+              <button class="address-form-buttons_next" matStepperNext
                       [ngClass]="{'disabled-button':!addressFormGroup.valid}"
                       [disabled]="addressFormGroup.valid"
               >ДАЛІ
@@ -186,9 +183,9 @@
             <div class="photo-subheader">Додайте фото натистувши на “+”. Максимум 4 фото</div>
             <div class="logo">
               <div class="logo_button" *ngIf="(photoFormGroup.controls['photos']).value.length < 4">
-                <label for="customFile">
+                <label for="customFile-form-field">
                   <input type="file" formControlName="photo" (change)="onFileSelected($event)"
-                         accept=".jpg, .jpeg, .png" id="customFile">
+                         accept=".jpg, .jpeg, .png" id="customFile-form-field">
                   <img src="assets/icons/plus.png" alt="logo_img">
                 </label>
               </div>
@@ -201,15 +198,17 @@
             </div>
             <div class="description">
               <div class="description_header">
-                <label for="text-desc">Опис<span class="important">*</span></label>
+                <label for="text-desc-form-field">Опис<span class="important">*</span></label>
                 <p>
                   <span
-                    [ngClass]="{'highlight-text': !photoFormGroup.controls['text'].valid && photoFormGroup.controls['text'].touched }"
-                    class="default">{{photoFormGroup.controls['text'].value.length}}</span>/500</p>
+                    [ngClass]="{'highlight-text': !(photoFormGroup.controls['text']).valid && (photoFormGroup.controls['text']).touched }"
+                    class="default">{{(textValue) ? textValue.split('').length : '0'}}</span>/500</p>
               </div>
               <div class="description_form">
-                <textarea name="" id="text-desc" cols="30" rows="10"
-                          placeholder="Додайте опис вашого закладу" formControlName="text"></textarea>
+                <textarea name="" id="text-desc-form-field" cols="30" rows="10"
+                          placeholder="Додайте опис вашого закладу"
+                          [(ngModel)]="textValue"
+                          formControlName="text"></textarea>
               </div>
             </div>
             <div class="photo-checkbox">
@@ -219,16 +218,16 @@
               </mat-checkbox>
             </div>
           </div>
+          <div class="photo-form-buttons">
+            <button matStepperPrevious class="photo-form-buttons_back">НАЗАД</button>
+            <button class="photo-form-buttons_reset" (click)="formReset()">СКАСУВАТИ</button>
+            <button matStepperPrevious class="photo-form-buttons_reg"
+                    [ngClass]="{'disabled-button':!photoFormGroup.valid}"
+                    [disabled]="photoFormGroup.valid"
+            >ЗАРЕЄСТРУВАТИ
+            </button>
+          </div>
         </form>
-        <div class="buttons3">
-          <button mat-button matStepperPrevious class="buttons3_back">НАЗАД</button>
-          <button mat-button class="reset">СКАСУВАТИ</button>
-          <button mat-button matStepperPrevious class="buttons3_reg"
-                  [ngClass]="{'disabled-button':!photoFormGroup.valid}"
-                  [disabled]="photoFormGroup.valid"
-          >ЗАРЕЄСТРУВАТИ
-          </button>
-        </div>
       </mat-step>
     </mat-horizontal-stepper>
   </div>
diff --git a/src/app/shell/provider/provider-config/provider-config.component.scss b/src/app/shell/provider/provider-config/provider-config.component.scss
index 3a8d116eb4..58d3a2550c 100644
--- a/src/app/shell/provider/provider-config/provider-config.component.scss
+++ b/src/app/shell/provider/provider-config/provider-config.component.scss
@@ -31,9 +31,6 @@
 }
 
 @mixin primary-button {
-  margin-left: 2rem;
-  width: 100%;
-  max-width: 92px;
   height: 34px;
   background: #3849F9;
   border: 0.063rem solid #3849F9;
@@ -41,8 +38,10 @@
   border-radius: 1.25rem;
   font-weight: bold;
   font-size: 0.813rem;
-  line-height: 0.938rem;
   color: #FFFFFF;
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
 }
 
 @mixin white-button {
@@ -50,22 +49,24 @@
   width: 100%;
   max-width: 139px;
   height: 34px;
-  padding: 0.625rem 1.875rem 0.563rem 1.875rem;
+  padding: 0.625rem 1.875rem 0.625rem 1.875rem;
   border: 0.063rem solid #686868;
   box-sizing: border-box;
   border-radius: 1.25rem;
   font-weight: bold;
   font-size: 0.813rem;
-  line-height: 0.938rem;
   text-align: center;
   color: #444444;
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
 }
 
 @mixin button-container {
   width: 100%;
   max-width: 410px;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
   margin-top: 2rem;
 }
@@ -242,6 +243,7 @@ section {
 
       &_button {
         width: 100%;
+        max-width: 95px;
 
         label {
           width: 100%;
@@ -288,7 +290,6 @@ section {
       margin-top: 2.188rem;
 
       &_header {
-
         width: 100%;
         display: flex;
         justify-content: space-between;
@@ -297,6 +298,7 @@ section {
       &_form {
         textarea {
           width: 100%;
+          max-width: 410px;
           height: 238px;
           resize: none;
           border: 0.063rem solid #E3E3E3;
@@ -321,45 +323,63 @@ section {
       }
     }
 
-    .buttons1 {
-      @include button-container;
+    .form-ownership-buttons {
+      width: 100%;
+      max-width: 269px;
+      display: flex;
+      justify-content: space-around;
+      margin: 2rem auto 0;
 
       &_next {
-        button {
-          @include primary-button;
-        }
+        width: 100%;
+        max-width: 92px;
+        @include primary-button;
+        vertical-align: middle;
+        font-size: 0.813rem;
       }
 
       &_reset {
-        button {
-          @include white-button;
-        }
+        @include white-button;
+        vertical-align: middle;
+        font-size: 0.813rem;
       }
     }
 
-    .buttons2 {
+    .address-form-buttons {
       @include button-container;
-      justify-content: space-between;
 
-      &_next, &_back {
+      &_next, {
+        width: 100%;
+        max-width: 92px;
         @include primary-button;
-        margin: 0;
+        font-size: 0.813rem;
+
       }
 
-      .reset {
+      &_back {
+        width: 100%;
+        max-width: 105px;
+        @include primary-button;
+        font-size: 0.813rem;
+      }
+
+      &_reset {
         @include white-button;
       }
     }
-    .custom-select{
+
+    .custom-select {
       margin: 0;
       width: 100%;
       position: relative;
+
       input {
         margin-top: 0.5rem;
         @include form-style;
         cursor: pointer;
       }
-      .box{
+
+      .box {
         @include form-style;
         padding: 0;
         border-radius: 0.313rem;
@@ -367,7 +387,8 @@ section {
         position: absolute;
         z-index: 100;
         background: white;
-        &_item{
+
+        &-item {
           padding: 0.563rem 0 0.563rem 1rem;
           width: 100%;
           font-weight: normal;
@@ -377,15 +398,18 @@ section {
           height: 36px;
           cursor: pointer;
         }
-        &_item:hover{
+
+        &-item:hover {
           background: #F8F8F8;
         }
       }
     }
+
     .org-full-name, .org-short-name, .ceo-name, .id-code, .phone, .email,
     .web-page, .facebook, .instagram, .owner-name,
     .region, .city, .district, .street, .building {
       margin-top: 1rem;
+
       input {
         margin-top: 0.438rem;
         @include form-style;
@@ -393,16 +417,20 @@ section {
     }
   }
 
-  .buttons3 {
+  .photo-form-buttons {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     margin-top: 3rem;
 
     &_back {
+      width: 100%;
+      max-width: 105px;
       @include primary-button;
     }
 
-    .reset {
+    &_reset {
+      width: 100%;
+      max-width: 139px;
       @include white-button;
     }
 
diff --git a/src/app/shell/provider/provider-config/provider-config.component.ts b/src/app/shell/provider/provider-config/provider-config.component.ts
index 61b2f95bff..793c08cf5f 100644
--- a/src/app/shell/provider/provider-config/provider-config.component.ts
+++ b/src/app/shell/provider/provider-config/provider-config.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ProviderConfigService } from './provider-config.service';
+import { ProviderConfigModalComponent } from './provider-config-modal/provider-config-modal.component';
+import { MatDialog } from '@angular/material/dialog';
+
 
 @Component({
   selector: 'app-provider-config',
@@ -16,8 +20,9 @@ export class ProviderConfigComponent implements OnInit {
   organizationTypeList = ['ФОП', 'Громадська організація', 'ТОВ', 'ПП', 'Заклад освіти', 'Інше'];
   valueOwnership = false;
   valueOrgType = false;
+  textValue = '';
 
-  constructor() {
+  constructor(private providerConfigService: ProviderConfigService, private modal: MatDialog) {
   }
 
   ngOnInit(): void {
@@ -29,7 +34,7 @@ export class ProviderConfigComponent implements OnInit {
       ceoName: new FormControl(null, [Validators.required]),
       ceoBirthday: new FormControl(null, Validators.required),
       personalId: new FormControl(null, [Validators.required, Validators.maxLength(10), Validators.maxLength(8), Validators.pattern('^[0-9]*$')]),
-      phone: new FormControl(380, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
+      phone: new FormControl(null, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
       email: new FormControl(null, [Validators.required, Validators.email]),
       webPage: new FormControl(null),
       facebook: new FormControl(null),
@@ -89,7 +94,15 @@ export class ProviderConfigComponent implements OnInit {
     }
   }
 
-  setValue(value: string, controlName): void {
+  /**
+   * Getting value from custom select and setting it into controller
+   *
+   *
+   * @param value - The first input is string
+   * @param controlName - The second input is htmlElement
+   */
+
+  setValue(value: string, controlName: HTMLElement): void {
     switch (controlName.getAttribute('formControlName')) {
       case 'ownership':
         this.orgFormGroup.get('ownership').setValue(value);
@@ -101,5 +114,27 @@ export class ProviderConfigComponent implements OnInit {
         break;
     }
   }
+
+  /**
+   * showing modal that asking permission to reset form
+   *
+   * @remarks
+   * This method is part of the {@link ProviderConfigModalComponent }.
+   *
+   */
+  formReset(): void {
+    if (this.orgFormGroup.dirty || this.addressFormGroup.dirty || this.photoFormGroup.dirty) {
+      const refModal = this.modal.open(ProviderConfigModalComponent);
+      refModal.afterClosed().subscribe(value => {
+        if (value) {
+          this.orgFormGroup.reset();
+          this.addressFormGroup.reset();
+          this.photoFormGroup.reset();
+          this.selectedLogos = [];
+        }
+      });
+    }
+  }
 }
 
+
diff --git a/src/app/shell/provider/provider-config/provider-config.service.ts b/src/app/shell/provider/provider-config/provider-config.service.ts
new file mode 100644
index 0000000000..8d9c31ca07
--- /dev/null
+++ b/src/app/shell/provider/provider-config/provider-config.service.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+
+@Injectable()
+export class ProviderConfigService {
+
+  constructor(
+    private http: HttpClient,
+    private token: OidcSecurityService,
+  ) {
+  }
+}
diff --git a/src/app/shell/provider/provider-routing.module.ts b/src/app/shell/provider/provider-routing.module.ts
index 3ccc8c4f7a..91cbf3965e 100644
--- a/src/app/shell/provider/provider-routing.module.ts
+++ b/src/app/shell/provider/provider-routing.module.ts
@@ -4,20 +4,22 @@ import { PersonalCabinetComponent } from './personal-cabinet/personal-cabinet.co
 
 import { ProviderActivitiesComponent } from './provider-activities/provider-activities.component';
 import { ProviderConfigComponent } from './provider-config/provider-config.component';
+import {CanDeactivateGuard} from './provider-config/can-leave-guard.service';
 
 const routes: Routes = [
-  { path: 'cabinet', component: PersonalCabinetComponent, 
+  { path: 'cabinet', component: PersonalCabinetComponent,
   children: [
     {
-      path: 'activities', 
-      component: ProviderActivitiesComponent, 
+      path: 'activities',
+      component: ProviderActivitiesComponent,
     },
     {
-      path: 'config', 
-      component: ProviderConfigComponent, 
+      path: 'config',
+      component: ProviderConfigComponent,
+      canDeactivate: [CanDeactivateGuard]
     },
   ]
- } 
+ }
 ];
 
 @NgModule({
diff --git a/src/app/shell/provider/provider.module.ts b/src/app/shell/provider/provider.module.ts
index dab3cd04a8..7be9eea05b 100644
--- a/src/app/shell/provider/provider.module.ts
+++ b/src/app/shell/provider/provider.module.ts
@@ -1,59 +1,68 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ProviderActivitiesComponent } from './provider-activities/provider-activities.component';
-import { ProviderConfigComponent } from './provider-config/provider-config.component';
-import { ProviderRoutingModule } from './provider-routing.module';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatChipsModule } from '@angular/material/chips';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ProviderActivitiesComponent} from './provider-activities/provider-activities.component';
+import {ProviderConfigComponent} from './provider-config/provider-config.component';
+import {ProviderRoutingModule} from './provider-routing.module';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatChipsModule} from '@angular/material/chips';
 
-import { ActivitiesCardComponent } from './provider-activities/activities-card/activities-card.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatSelectModule } from '@angular/material/select';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatInputModule } from '@angular/material/input';
-import { ReactiveFormsModule } from '@angular/forms';
-import { ProviderActivitiesService } from '../../shared/services/provider-activities/provider-activities.service';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { HttpTokenInterceptor } from 'src/app/shared/interceptors/http-token.interceptor';
-import { HttpClientModule } from '@angular/common/http';
-import { ProviderState } from 'src/app/shared/store/provider.state';
-import { NgxsModule } from '@ngxs/store';
-import { MatTabsModule } from '@angular/material/tabs';
-import { PersonalCabinetComponent } from './personal-cabinet/personal-cabinet.component';
-import { MaterialModule } from '../../shared/material/material.module';
+import {ActivitiesCardComponent} from './provider-activities/activities-card/activities-card.component';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import {MatSelectModule} from '@angular/material/select';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatInputModule} from '@angular/material/input';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ProviderActivitiesService} from '../../shared/services/provider-activities/provider-activities.service';
+import {HTTP_INTERCEPTORS} from '@angular/common/http';
+import {HttpTokenInterceptor} from '../../shared/interceptors/http-token.interceptor';
+import {HttpClientModule} from '@angular/common/http';
+import {ProviderState} from 'src/app/shared/store/provider.state';
+import {NgxsModule} from '@ngxs/store';
+import {MatTabsModule} from '@angular/material/tabs';
+import {PersonalCabinetComponent} from './personal-cabinet/personal-cabinet.component';
+import {MaterialModule} from '../../shared/material/material.module';
+import {ProviderConfigService} from './provider-config/provider-config.service';
+import {ProviderConfigModalComponent} from './provider-config/provider-config-modal/provider-config-modal.component';
+import {CanDeactivateGuard} from './provider-config/can-leave-guard.service';
 
 @NgModule({
   declarations: [
     ProviderActivitiesComponent,
     ProviderConfigComponent,
     ActivitiesCardComponent,
-    PersonalCabinetComponent],
-    imports: [
-        CommonModule,
-        ProviderRoutingModule,
-        FlexLayoutModule,
-        MatButtonModule,
-        MatCardModule,
-        MatChipsModule,
-        MatFormFieldModule,
-        MatDialogModule,
-        MatSelectModule,
-        MatCheckboxModule,
-        MatInputModule,
-        ReactiveFormsModule,
-        HttpClientModule,
-        NgxsModule.forFeature([ProviderState]),
-        MatTabsModule,
-        MaterialModule
-    ],
+    PersonalCabinetComponent,
+    ProviderConfigModalComponent,
+  ],
+  imports: [
+    CommonModule,
+    ProviderRoutingModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatCardModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatDialogModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    NgxsModule.forFeature([ProviderState]),
+    MatTabsModule,
+    MaterialModule,
+    FormsModule,
+  ],
 
   providers: [
     ProviderActivitiesService,
-    { provide: HTTP_INTERCEPTORS, useClass: HttpTokenInterceptor, multi: true }
-  ]
+    ProviderConfigService,
+    {provide: HTTP_INTERCEPTORS, useClass: HttpTokenInterceptor, multi: true},
+    CanDeactivateGuard
+  ],
 
 })
-export class ProviderModule { }
+export class ProviderModule {
+}