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 1f369deebf..02f4eb3db2 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
@@ -198,6 +198,11 @@
                   <mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.text').hasError('required')">
                     {{ 'notification.button-text-required' | translate }}
                   </mat-error>
+                  <mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.text').hasError('maxlength')">
+                    {{ 'notification.button-text-max-length' | translate :
+                    {length: webTemplateForm.get('additionalConfig.actionButtonConfig.text').getError('maxlength').requiredLength}
+                    }}
+                  </mat-error>
                 </mat-form-field>
               </div>
               <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts b/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
index e894c62631..b3fa00ef72 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
@@ -99,7 +99,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
         }),
         actionButtonConfig: this.fb.group({
           enabled: [false],
-          text: [{value: '', disabled: true}, Validators.required],
+          text: [{value: '', disabled: true}, [Validators.required, Validators.maxLength(50)]],
           linkType: [ActionButtonLinkType.LINK],
           link: [{value: '', disabled: true}, Validators.required],
           dashboardId: [{value: null, disabled: true}, Validators.required],
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 b62bdba015..067258fa24 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
@@ -126,6 +126,11 @@
                   <mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.text').hasError('required')">
                     {{ 'notification.button-text-required' | translate }}
                   </mat-error>
+                  <mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.text').hasError('maxlength')">
+                    {{ 'notification.button-text-max-length' | translate :
+                    {length: webTemplateForm.get('additionalConfig.actionButtonConfig.text').getError('maxlength').requiredLength}
+                    }}
+                  </mat-error>
                 </mat-form-field>
               </div>
               <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
@@ -189,7 +194,7 @@
           <mat-label class="tb-title tb-required"
                      [ngClass]="{'tb-error': (emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')}"
                      translate>notification.message</mat-label>
-          <editor [init]="tinyMceOptions" matInput formControlName="body"></editor>
+          <editor [init]="tinyMceOptions" formControlName="body"></editor>
           <mat-error class="tb-mat-error"
             *ngIf="(emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')">
             {{ 'notification.message-required' | translate }}
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.scss b/ui-ngx/src/app/shared/components/notification/notification.component.scss
index c2d50ed106..6b196ee9ea 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.scss
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.scss
@@ -44,6 +44,8 @@
     .button {
       margin-top: 12px;
       border-color: initial;
+      height: fit-content;
+      line-height: 2;
     }
   }
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index d41ada03f8..bcaa4a183f 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2808,6 +2808,7 @@
         "basic-settings": "Basic settings",
         "button-text": "Button text",
         "button-text-required": "Button text is required",
+        "button-text-max-length": "Button text should be less than or equal to {{ length }} characters",
         "compose": "Compose",
         "conversation": "Conversation",
         "conversation-required": "Conversation is required",