diff --git a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
index 76c4b4fd..8438797b 100644
--- a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
+++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
@@ -29,13 +29,13 @@
   </picture>
 
   <div class="package-switcher">
-    <div [(ngModel)]="licenseType" ngbRadioGroup
+    <div [(ngModel)]="selectedLicenseType" ngbRadioGroup
          class="package-switcher__btn-group btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
       <label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
-        <input ngbButton type="radio" value="Personal"> Personal
+        <input ngbButton type="radio" [value]="personalLicense"> {{ personalLicense }}
       </label>
       <label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
-        <input ngbButton type="radio" value="Commercial"> Commercial
+        <input ngbButton type="radio" [value]="commercialLicense"> {{ commercialLicense }}
       </label>
     </div>
   </div>
@@ -51,8 +51,8 @@
               </div>
               <div class="package-card__image package-card__image--dot-net"></div>
               <div class="package-card__price-wrapper">
-                <span class="package-card__price package-card__price--old">${{ licenseType === 'Commercial' ? '2000' : '200' }}</span>
-                <span class="package-card__price">${{ licenseType === 'Commercial' ? '1500' : '150' }}</span>
+                <span class="package-card__price package-card__price--old">${{ isCommercial() ? '2000' : '200' }}</span>
+                <span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
               </div>
               <h4 class="package-card__title">{{ firstBundleName }}</h4>
               <p class="package-card__description">
@@ -71,7 +71,7 @@
         <nb-card-back class="package-card package-card--back">
           <nb-card>
             <nb-card-body>
-              <h4 class="package-card__type">{{ licenseType === 'Commercial' ? 'Commercial' : 'Personal' }}</h4>
+              <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
               <ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
               <a [href]="firstBundleMail"
                  target="_blank"
@@ -95,8 +95,8 @@
               </div>
               <div class="package-card__image package-card__image--dot-net"></div>
               <div class="package-card__price-wrapper">
-                <span class="package-card__price package-card__price--old">${{ licenseType === 'Commercial' ? '2000' : '200' }}</span>
-                <span class="package-card__price">${{ licenseType === 'Commercial' ? '1500' : '150' }}</span>
+                <span class="package-card__price package-card__price--old">${{ isCommercial() ? '2000' : '200' }}</span>
+                <span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
               </div>
               <h4 class="package-card__title">{{ secondBundleName }}</h4>
               <p class="package-card__description">
@@ -115,7 +115,7 @@
         <nb-card-back class="package-card package-card--back">
           <nb-card>
             <nb-card-body>
-              <h4 class="package-card__type">{{ licenseType === 'Commercial' ? 'Commercial' : 'Personal' }}</h4>
+              <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
               <ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
               <a [href]="secondBundleMail"
                  target="_blank"
@@ -139,8 +139,8 @@
               </div>
               <div class="package-card__image package-card__image--dot-net-core"></div>
               <div class="package-card__price-wrapper">
-                <span class="package-card__price package-card__price--old">${{ licenseType === 'Commercial' ? '1800' : '180' }}</span>
-                <span class="package-card__price">${{ licenseType === 'Commercial' ? '1400' : '140' }}</span>
+                <span class="package-card__price package-card__price--old">${{ isCommercial() ? '1800' : '180' }}</span>
+                <span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
               </div>
               <h4 class="package-card__title">{{ thirdBundleName }}</h4>
               <p class="package-card__description">
@@ -159,7 +159,7 @@
         <nb-card-back class="package-card package-card--back">
           <nb-card>
             <nb-card-body>
-              <h4 class="package-card__type">{{ licenseType === 'Commercial' ? 'Commercial' : 'Personal' }}</h4>
+              <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
               <ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
               <a [href]="thirdBundleMail"
                  target="_blank"
@@ -183,8 +183,8 @@
               </div>
               <div class="package-card__image package-card__image--dot-net-core"></div>
               <div class="package-card__price-wrapper">
-                <span class="package-card__price package-card__price--old">${{ licenseType === 'Commercial' ? '1800' : '180' }}</span>
-                <span class="package-card__price">${{ licenseType === 'Commercial' ? '1400' : '140' }}</span>
+                <span class="package-card__price package-card__price--old">${{ isCommercial() ? '1800' : '180' }}</span>
+                <span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
               </div>
               <h4 class="package-card__title">{{ fourthBundleName }}</h4>
               <p class="package-card__description">
@@ -203,7 +203,7 @@
         <nb-card-back class="package-card package-card--back">
           <nb-card>
             <nb-card-body>
-              <h4 class="package-card__type">{{ licenseType === 'Commercial' ? 'Commercial' : 'Personal' }}</h4>
+              <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
               <ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
               <a [href]="fourthBundleMail"
                  target="_blank"
diff --git a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
index 7fe7055f..51087372 100644
--- a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
+++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
@@ -14,7 +14,9 @@ import { Component} from '@angular/core';
 
 export class BackendBundlesSectionComponent {
 
-  licenseType = 'Personal';
+  selectedLicenseType = 'Personal';
+  personalLicense = 'Personal';
+  commercialLicense = 'Commercial';
 
   firstBundleName = '.NET + ngx-admin E-commerce';
   secondBundleName = '.NET + ngx-admin IoT';
@@ -50,14 +52,14 @@ export class BackendBundlesSectionComponent {
   }
 
   isCommercial() {
-    return this.licenseType === 'Commercial';
+    return this.selectedLicenseType === 'Commercial';
   }
 
   private getMailToText(bundleName: string) {
     return 'mailto:support@akveo.com' +
-      `?subject=${this.licenseType} ${bundleName} Bundle` +
+      `?subject=${this.selectedLicenseType} ${bundleName} Bundle` +
       '&body=Dear Akveo, %0D%0A%0D%0A' +
-      `I would like to purchase ${this.licenseType} ${bundleName} Bundle. ` +
+      `I would like to purchase ${this.selectedLicenseType} ${bundleName} Bundle. ` +
       'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
       'Thanks and regards';
   }