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 4082e1e99a..7350b628f6 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
@@ -4,7 +4,7 @@
 >
   <span style="color: #666;">{{ 'AbpUiMultiTenancy::Tenant' | abpLocalization }}: </span>
   <strong>
-    <i>{{ selected?.name ? selected.name : ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
+    <i>{{ tenantName || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
   </strong>
   (<a id="abp-tenant-switch-link" style="color: #333; cursor: pointer" (click)="onSwitch()">{{
     'AbpUiMultiTenancy::Switch' | abpLocalization
@@ -17,11 +17,11 @@
     <h5>Switch Tenant</h5>
   </ng-template>
   <ng-template #abpBody>
-    <form>
+    <form (ngSubmit)="save()">
       <div class="mt-2">
         <div class="form-group">
           <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
-          <input [(ngModel)]="selected.name" type="text" id="name" name="tenant" class="form-control" autofocus />
+          <input [(ngModel)]="tenant.name" type="text" id="name" name="tenant" class="form-control" autofocus />
         </div>
         <p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
       </div>
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 2052d135f4..66f17b99ec 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,6 +1,6 @@
-import { ABP, SessionSetTenantId } from '@abp/ng.core';
+import { ABP, SessionSetTenant, SessionState } from '@abp/ng.core';
 import { ToasterService } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { throwError } from 'rxjs';
 import { catchError, take } from 'rxjs/operators';
@@ -11,40 +11,58 @@ import { AccountService } from '../../services/account.service';
   selector: 'abp-tenant-box',
   templateUrl: './tenant-box.component.html',
 })
-export class TenantBoxComponent {
+export class TenantBoxComponent implements OnInit {
   constructor(private store: Store, private toasterService: ToasterService, private accountService: AccountService) {}
 
-  selected = {} as ABP.BasicItem;
+  tenant = {} as ABP.BasicItem;
+
+  tenantName: string;
 
   isModalVisible: boolean;
 
-  @ViewChild('modalContent', { static: false })
-  modalContent: TemplateRef<any>;
+  ngOnInit() {
+    this.tenant = this.store.selectSnapshot(SessionState.getTenant) || ({} as ABP.BasicItem);
+    this.tenantName = this.tenant.name || '';
+  }
 
   onSwitch() {
     this.isModalVisible = true;
   }
 
   save() {
-    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.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(success ? tenantId : null));
-      });
+    if (this.tenant.name) {
+      this.accountService
+        .findTenant(this.tenant.name)
+        .pipe(
+          take(1),
+          catchError(err => {
+            this.toasterService.error(
+              snq(() => err.error.error_description, 'AbpUi::DefaultErrorMessage'),
+              'AbpUi::Error',
+            );
+            return throwError(err);
+          }),
+        )
+        .subscribe(({ success, tenantId }) => {
+          if (success) {
+            this.tenant = {
+              id: tenantId,
+              name: this.tenant.name,
+            };
+            this.tenantName = this.tenant.name;
+            this.isModalVisible = false;
+          } else {
+            this.toasterService.error(`AbpUiMultiTenancy::GivenTenantIsNotAvailable`, 'AbpUi::Error', {
+              messageLocalizationParams: [this.tenant.name],
+            });
+            this.tenant = {} as ABP.BasicItem;
+          }
+          this.store.dispatch(new SessionSetTenant(success ? this.tenant : null));
+        });
+    } else {
+      this.store.dispatch(new SessionSetTenant(null));
+      this.tenantName = null;
+      this.isModalVisible = false;
+    }
   }
 }
diff --git a/npm/ng-packs/packages/account/src/lib/models/tenant.ts b/npm/ng-packs/packages/account/src/lib/models/tenant.ts
index 08d5c321d4..732b0f6655 100644
--- a/npm/ng-packs/packages/account/src/lib/models/tenant.ts
+++ b/npm/ng-packs/packages/account/src/lib/models/tenant.ts
@@ -1,4 +1,4 @@
-export interface Tenant {
-    success: boolean;
-    tenantId: string;
-}
\ No newline at end of file
+export interface TenantIdResponse {
+  success: boolean;
+  tenantId: string;
+}
diff --git a/npm/ng-packs/packages/account/src/lib/services/account.service.ts b/npm/ng-packs/packages/account/src/lib/services/account.service.ts
index e27c32240f..6a660a695d 100644
--- a/npm/ng-packs/packages/account/src/lib/services/account.service.ts
+++ b/npm/ng-packs/packages/account/src/lib/services/account.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { RestService, Rest } from '@abp/ng.core';
-import { RegisterResponse, RegisterRequest, Tenant } from '../models';
+import { RegisterResponse, RegisterRequest, TenantIdResponse } from '../models';
 
 @Injectable({
   providedIn: 'root',
@@ -9,13 +9,13 @@ import { RegisterResponse, RegisterRequest, Tenant } from '../models';
 export class AccountService {
   constructor(private rest: RestService) {}
 
-  findTenant(tenantName: string): Observable<Tenant> {
+  findTenant(tenantName: string): Observable<TenantIdResponse> {
     const request: Rest.Request<null> = {
       method: 'GET',
       url: `/api/abp/multi-tenancy/find-tenant/${tenantName}`,
     };
 
-    return this.rest.request<null, Tenant>(request);
+    return this.rest.request<null, TenantIdResponse>(request);
   }
 
   register(body: RegisterRequest): Observable<RegisterResponse> {
diff --git a/npm/ng-packs/packages/core/src/lib/actions/session.actions.ts b/npm/ng-packs/packages/core/src/lib/actions/session.actions.ts
index 278fb59f4e..61a69b00fc 100644
--- a/npm/ng-packs/packages/core/src/lib/actions/session.actions.ts
+++ b/npm/ng-packs/packages/core/src/lib/actions/session.actions.ts
@@ -1,8 +1,10 @@
+import { ABP } from '../models';
+
 export class SessionSetLanguage {
   static readonly type = '[Session] Set Language';
   constructor(public payload: string) {}
 }
-export class SessionSetTenantId {
-  static readonly type = '[Session] Set Tenant Id';
-  constructor(public payload: string) {}
+export class SessionSetTenant {
+  static readonly type = '[Session] Set Tenant';
+  constructor(public payload: ABP.BasicItem) {}
 }
diff --git a/npm/ng-packs/packages/core/src/lib/interceptors/api.interceptor.ts b/npm/ng-packs/packages/core/src/lib/interceptors/api.interceptor.ts
index a29169de61..64e4701f82 100644
--- a/npm/ng-packs/packages/core/src/lib/interceptors/api.interceptor.ts
+++ b/npm/ng-packs/packages/core/src/lib/interceptors/api.interceptor.ts
@@ -25,6 +25,11 @@ export class ApiInterceptor implements HttpInterceptor {
       headers['Accept-Language'] = lang;
     }
 
+    const tenant = this.store.selectSnapshot(SessionState.getTenant);
+    if (!request.headers.has('__tenant') && tenant) {
+      headers['__tenant'] = tenant.id;
+    }
+
     return next
       .handle(
         request.clone({
diff --git a/npm/ng-packs/packages/core/src/lib/models/session.ts b/npm/ng-packs/packages/core/src/lib/models/session.ts
index 44392b2692..8eba0cb36c 100644
--- a/npm/ng-packs/packages/core/src/lib/models/session.ts
+++ b/npm/ng-packs/packages/core/src/lib/models/session.ts
@@ -1,6 +1,8 @@
+import { ABP } from '../models';
+
 export namespace Session {
   export interface State {
     language: string;
-    tenantId: string;
+    tenant: ABP.BasicItem;
   }
 }
diff --git a/npm/ng-packs/packages/core/src/lib/states/config.state.ts b/npm/ng-packs/packages/core/src/lib/states/config.state.ts
index 758051cce6..6a4e53bf0c 100644
--- a/npm/ng-packs/packages/core/src/lib/states/config.state.ts
+++ b/npm/ng-packs/packages/core/src/lib/states/config.state.ts
@@ -138,9 +138,10 @@ export class ConfigState {
           return undefined;
         }, state.localization.values);
 
+        interpolateParams = interpolateParams.filter(params => params != null);
         if (copy && interpolateParams && interpolateParams.length) {
-          interpolateParams.forEach((param, index) => {
-            copy = copy.replace(`'{${index}}'`, param);
+          interpolateParams.forEach(param => {
+            copy = copy.replace(/[\'\"]?\{[\d]+\}[\'\"]?/, param);
           });
         }
 
diff --git a/npm/ng-packs/packages/core/src/lib/states/session.state.ts b/npm/ng-packs/packages/core/src/lib/states/session.state.ts
index 8008084371..f009f7a574 100644
--- a/npm/ng-packs/packages/core/src/lib/states/session.state.ts
+++ b/npm/ng-packs/packages/core/src/lib/states/session.state.ts
@@ -1,6 +1,6 @@
 import { Action, Selector, State, StateContext } from '@ngxs/store';
-import { SessionSetLanguage, SessionSetTenantId } from '../actions/session.actions';
-import { Session } from '../models/session';
+import { SessionSetLanguage, SessionSetTenant } from '../actions/session.actions';
+import { ABP, Session } from '../models';
 
 @State<Session.State>({
   name: 'SessionState',
@@ -13,8 +13,8 @@ export class SessionState {
   }
 
   @Selector()
-  static getSelectedTenantId({ tenantId }: Session.State): string {
-    return tenantId;
+  static getTenant({ tenant }: Session.State): ABP.BasicItem {
+    return tenant;
   }
 
   constructor() {}
@@ -26,10 +26,10 @@ export class SessionState {
     });
   }
 
-  @Action(SessionSetTenantId)
-  sessionSetTenantId({ patchState }: StateContext<Session.State>, { payload }: SessionSetTenantId) {
+  @Action(SessionSetTenant)
+  sessionSetTenantId({ patchState }: StateContext<Session.State>, { payload }: SessionSetTenant) {
     patchState({
-      tenantId: payload,
+      tenant: payload,
     });
   }
 }