diff --git a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
index 0f21bd0fd9..6b878f5d4d 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
@@ -26,7 +26,7 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <mat-card-content style="padding-top: 16px;">
+  <mat-card-content>
     <form [formGroup]="smsProvider" (ngSubmit)="save()">
       <fieldset [disabled]="isLoading$ | async">
         <tb-sms-provider-configuration
@@ -46,53 +46,54 @@
     </form>
   </mat-card-content>
 </mat-card>
-<mat-card appearance="outlined" class="settings-card">
-    <mat-card-header>
-      <mat-card-title>
-        <span class="mat-headline-5" translate>admin.slack-settings</span>
-      </mat-card-title>
-      <span fxFlex></span>
-      <div tb-help="slackSettings"></div>
-    </mat-card-header>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <mat-card-content style="padding-top: 16px;">
-    <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
-      <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
+<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
+  <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
+    <mat-card appearance="outlined" class="settings-card">
+      <mat-card-header>
+        <mat-card-title>
+          <span class="mat-headline-5" translate>admin.slack-settings</span>
+        </mat-card-title>
+        <span fxFlex></span>
+        <div tb-help="slackSettings"></div>
+      </mat-card-header>
+      <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+      </mat-progress-bar>
+      <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+      <mat-card-content>
         <section formGroupName="SLACK">
           <mat-form-field class="mat-block">
             <mat-label translate>admin.slack-api-token</mat-label>
-            <input matInput formControlName="botToken" />
+            <input matInput formControlName="botToken"/>
           </mat-form-field>
         </section>
-      </fieldset>
-    </form>
-  </mat-card-content>
-  <mat-card-header>
-    <mat-card-title>
-      <span class="mat-headline-5" translate>admin.mobile-settings</span>
-    </mat-card-title>
-    <span fxFlex></span>
-<!--    <div tb-help="slackSettings"></div>-->
-  </mat-card-header>
-  <mat-card-content style="padding-top: 16px;">
-    <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
-      <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
-        <section formGroupName="MOBILE">
-          <tb-file-input style="margin-bottom: 16px;"
-                         required
+      </mat-card-content>
+      <mat-card-header>
+        <mat-card-title>
+          <span class="mat-headline-5" translate>admin.mobile-settings</span>
+        </mat-card-title>
+        <span fxFlex></span>
+        <!--    <div tb-help="mobileSettings"></div>-->
+      </mat-card-header>
+      <mat-card-content>
+        <section formGroupName="MOBILE" style="margin-bottom: 16px;">
+          <tb-file-input required
                          formControlName="firebaseServiceAccountCredentials"
                          dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}"
-                         [label]="'admin.firebase-service-account-file' | translate">
+                         label="{{ 'admin.firebase-service-account-file' | translate }}"
+                         accept=".json,application/json"
+                         allowedExtensions="json"
+                         [existingFileName]="notificationSettingsForm.get('deliveryMethodsConfigs.MOBILE.firebaseServiceAccountCredentialsFileName')?.value"
+                         (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE.firebaseServiceAccountCredentialsFileName').patchValue($event)">
           </tb-file-input>
         </section>
-        <div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap">
-          <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
+        <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end">
+          <button mat-button mat-raised-button color="primary"
+                  [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
                   type="submit">{{'action.save' | translate}}
           </button>
         </div>
-      </fieldset>
-    </form>
-  </mat-card-content>
-</mat-card>
+      </mat-card-content>
+    </mat-card>
+  </fieldset>
+</form>
+
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index a12f70139b..5be232104b 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -39,13 +39,19 @@
     <mat-step [stepControl]="notificationRequestForm">
       <ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template>
       <form [formGroup]="notificationRequestForm">
-        <div fxLayout="row" fxLayoutAlign="center">
-          <mat-button-toggle-group class="tb-notification-use-template-toggle-group"
-                                   style="width: 320px;"
-                                   formControlName="useTemplate">
-            <mat-button-toggle fxFlex [value]=false>{{ 'notification.start-from-scratch' | translate }}</mat-button-toggle>
-            <mat-button-toggle fxFlex [value]=true>{{ 'notification.use-template' | translate }}</mat-button-toggle>
-          </mat-button-toggle-group>
+        <div fxLayoutAlign="center">
+          <tb-toggle-header (valueChange)="notificationRequestForm.get('useTemplate').patchValue($event)"
+                            class="tb-notification-use-template-toggle-group"
+                            ignoreMdLgSize
+                            useSelectOnMdLg="false"
+                            appearance="fill"
+                            name="useTemplate"
+                            [options]="[
+                                         { name: translate.instant('notification.start-from-scratch'), value: false},
+                                         { name: translate.instant('notification.use-template'), value: true}
+                                       ]"
+                            [value]="notificationRequestForm.get('useTemplate').value">
+          </tb-toggle-header>
         </div>
         <div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate">
           <tb-template-autocomplete
@@ -413,11 +419,12 @@
         </section>
         <section class="preview-group notification" *ngIf="preview.processedTemplates.MOBILE?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon class="tb-mat-18" svgIcon="mdi:smartphone"></mat-icon>
+            <mat-icon class="tb-mat-18" svgIcon="mdi:cellphone-text"></mat-icon>
             <div class="group-title" translate>notification.delivery-method.mobile-preview</div>
           </div>
           <div class="notification-content">
-            {{ preview.processedTemplates.MOBILE.body }}
+            <div class="subject">{{ preview.processedTemplates.MOBILE.subject }}</div>
+            <div>{{ preview.processedTemplates.MOBILE.body }}</div>
           </div>
         </section>
         <section class="preview-group">
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index 0702d6bf52..4623ab1637 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@@ -17,7 +17,7 @@
 @import "../../../../../../theme";
 
 :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
-  width: 820px;
+  width: 930px;
   height: 100%;
   max-width: 100%;
   max-height: 100vh;
@@ -76,6 +76,7 @@
     .delivery-method-container {
       display: inline-flex;
       flex: 1 1 calc(50% - 8px);
+      max-width: calc(50% - 8px);
       padding: 16px 12px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 6px;
@@ -211,58 +212,8 @@
     }
   }
 
-  .mat-button-toggle-group.tb-notification-use-template-toggle-group {
-    &.mat-button-toggle-group-appearance-standard {
-      border: none;
-      border-radius: 18px;
-      margin-bottom: 24px;
-
-      .mat-button-toggle + .mat-button-toggle {
-        border-left: none;
-      }
-    }
-
-    .mat-button-toggle {
-      background: rgba(0, 0, 0, 0.06);
-      height: 36px;
-      align-items: center;
-      display: flex;
-
-      .mat-button-toggle-ripple {
-        top: 2px;
-        left: 2px;
-        right: 2px;
-        bottom: 2px;
-        border-radius: 18px;
-      }
-    }
-
-    .mat-button-toggle-button {
-      color: #959595;
-    }
-
-    .mat-button-toggle-focus-overlay {
-      border-radius: 18px;
-      margin: 2px;
-    }
-
-    .mat-button-toggle-checked .mat-button-toggle-button {
-      background-color: $tb-primary-color;
-      color: #fff;
-      border-radius: 18px;
-      margin-left: 2px;
-      margin-right: 2px;
-    }
-
-    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-      line-height: 34px;
-      font-size: 16px;
-      font-weight: 500;
-    }
-
-    .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
-      opacity: .01;
-    }
+  .tb-notification-use-template-toggle-group {
+    margin-bottom: 24px;
   }
 
   .preview-group {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
index 938ec2756f..674da8c5e8 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
@@ -90,7 +90,7 @@ export class SentNotificationDialogComponent extends
               protected fb: FormBuilder,
               private notificationService: NotificationService,
               private dialog: MatDialog,
-              private translate: TranslateService) {
+              public translate: TranslateService) {
     super(store, router, dialogRef, fb);
 
     this.notificationDeliveryMethods.forEach(method => {
@@ -309,13 +309,17 @@ export class SentNotificationDialogComponent extends
   }
 
   allowConfigureDeliveryMethod(deliveryMethod: NotificationDeliveryMethod): boolean {
+    const tenantAllowConfigureDeliveryMethod = new Set([
+      NotificationDeliveryMethod.SLACK,
+      NotificationDeliveryMethod.MOBILE
+    ]);
     if (deliveryMethod === NotificationDeliveryMethod.WEB) {
       return false;
     }
     if(this.isSysAdmin()) {
       return true;
     } else if (this.isTenantAdmin()) {
-      return deliveryMethod === NotificationDeliveryMethod.SLACK || deliveryMethod === NotificationDeliveryMethod.MOBILE;
+      return tenantAllowConfigureDeliveryMethod.has(deliveryMethod);
     }
     return false;
   }
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index 1a623af7b9..784f36157b 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -271,6 +271,13 @@
               trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
       </div>
       <form [formGroup]="mobileTemplateForm" fxLayoutGap="8px">
+        <mat-form-field class="mat-block">
+          <mat-label translate>notification.subject</mat-label>
+          <input matInput formControlName="subject">
+          <mat-error *ngIf="mobileTemplateForm.get('subject').hasError('required')">
+            {{ 'notification.subject-required' | translate }}
+          </mat-error>
+        </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>notification.message</mat-label>
           <textarea matInput
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
index 1a5fa270a8..2de13512cd 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
@@ -17,7 +17,7 @@
 @import "../../../../../../theme";
 
 :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
-  width: 800px;
+  width: 840px;
   height: 100%;
   max-width: 100%;
   max-height: 100vh;
@@ -70,6 +70,7 @@
     .delivery-method-container {
       display: inline-flex;
       flex: 1 1 calc(50% - 8px);
+      max-width: calc(50% - 8px);
       padding: 16px 12px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 6px;
diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts
index 45c64add33..23c28ce440 100644
--- a/ui-ngx/src/app/shared/models/notification.models.ts
+++ b/ui-ngx/src/app/shared/models/notification.models.ts
@@ -88,7 +88,8 @@ export interface NotificationSettings {
   deliveryMethodsConfigs: { [key in NotificationDeliveryMethod]: NotificationDeliveryMethodConfig };
 }
 
-export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig & MobileNotificationDeliveryMethodConfig>{
+export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig &
+  MobileNotificationDeliveryMethodConfig>{
   enabled: boolean;
   method: NotificationDeliveryMethod;
 }
@@ -99,6 +100,7 @@ interface SlackNotificationDeliveryMethodConfig {
 
 interface MobileNotificationDeliveryMethodConfig {
   firebaseServiceAccountCredentials: string;
+  firebaseServiceAccountCredentialsFileName: string;
 }
 
 export interface SlackConversation {