diff --git a/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html b/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html
index 2df7ace400..10a0e7a830 100644
--- a/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html
@@ -12,33 +12,27 @@
   >)
 </div>
 
-<ng-template #modalContent let-modal>
-  <div class="modal-header">
-    <h5 class="modal-title" id="modal-basic-title">
-      SwitchTenant
-    </h5>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <form [formGroup]="form" (ngSubmit)="save()">
-    <div class="modal-body">
+<abp-modal *ngIf="isModalVisible" [(visible)]="isModalVisible">
+  <ng-template #abpHeader>
+    <h5>Switch Tenant</h5>
+  </ng-template>
+  <ng-template #abpBody>
+    <form>
       <div class="mt-2">
         <div class="form-group">
           <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
-          <input type="text" id="name" class="form-control" formControlName="name" />
+          <input type="text" id="name" name="tenant" class="form-control" [(ngModel)]="selected.name" />
         </div>
         <p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
       </div>
-    </div>
-
-    <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modal.close()">
-        {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
-      </button>
-      <button type="submit" class="btn btn-primary">
-        <i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
-      </button>
-    </div>
-  </form>
-</ng-template>
+    </form>
+  </ng-template>
+  <ng-template #abpFooter>
+    <button #abpClose type="button" class="btn btn-secondary">
+      {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
+    </button>
+    <button type="button" class="btn btn-primary" (click)="save()">
+      <i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
+    </button>
+  </ng-template>
+</abp-modal>
diff --git a/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts b/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts
index ab10940f10..0ef6cc58ad 100644
--- a/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts
@@ -1,40 +1,51 @@
+import { ABP, SessionSetTenantId } from '@abp/ng.core';
+import { ToasterService } from '@abp/ng.theme.shared';
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ABP } from '@abp/ng.core';
+import { Store } from '@ngxs/store';
+import { throwError } from 'rxjs';
+import { catchError, take } from 'rxjs/operators';
+import snq from 'snq';
+import { AccountService } from '../../services/account.service';
 
 @Component({
   selector: 'abp-tenant-box',
   templateUrl: './tenant-box.component.html',
 })
 export class TenantBoxComponent {
-  constructor(private modalService: NgbModal, private fb: FormBuilder) {}
+  constructor(private store: Store, private toasterService: ToasterService, private accountService: AccountService) {}
 
-  form: FormGroup;
+  selected = {} as ABP.BasicItem;
 
-  selected: ABP.BasicItem;
+  isModalVisible: boolean;
 
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
 
-  createForm() {
-    this.form = this.fb.group({
-      name: [this.selected.name],
-    });
-  }
-
-  openModal() {
-    this.createForm();
-    this.modalService.open(this.modalContent);
-  }
-
   onSwitch() {
-    this.selected = {} as ABP.BasicItem;
-    this.openModal();
+    this.isModalVisible = true;
   }
 
   save() {
-    this.selected = this.form.value;
-    this.modalService.dismissAll();
+    this.selected.name = this.selected.name ? this.selected.name : '';
+
+    this.accountService
+      .findTenant(this.selected.name)
+      .pipe(
+        take(1),
+        catchError(err => {
+          this.toasterService.error(snq(() => err.error.error_description, 'An error occured.'), 'Error');
+          return throwError(err);
+        }),
+      )
+      .subscribe(({ success, tenantId }) => {
+        if (success) {
+          this.store.dispatch(new SessionSetTenantId(tenantId));
+          this.isModalVisible = false;
+        } else {
+          this.toasterService.error(`Given tenant is not available: ${this.selected.name}`, 'Error');
+          this.selected = {} as ABP.BasicItem;
+          this.store.dispatch(new SessionSetTenantId(null));
+        }
+      });
   }
 }
diff --git a/npm/ng-packs/packages/account/src/lib/models/index.ts b/npm/ng-packs/packages/account/src/lib/models/index.ts
index 5f30ef383a..4dcd63408e 100644
--- a/npm/ng-packs/packages/account/src/lib/models/index.ts
+++ b/npm/ng-packs/packages/account/src/lib/models/index.ts
@@ -1 +1,3 @@
 export * from './options';
+export * from './user';
+export * from './tenant';
diff --git a/npm/ng-packs/packages/account/src/lib/models/tenant.ts b/npm/ng-packs/packages/account/src/lib/models/tenant.ts
new file mode 100644
index 0000000000..08d5c321d4
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/models/tenant.ts
@@ -0,0 +1,4 @@
+export interface Tenant {
+    success: boolean;
+    tenantId: string;
+}
\ No newline at end of file