diff --git a/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html b/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html
index 3b3e4992b..ef7805ef3 100644
--- a/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html
@@ -28,9 +28,9 @@
 					<mat-card-title *ngIf="isNew">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</mat-card-title>
 				</mat-card-header>
 				<mat-card-content>
-					<div class="row mt-4">
-						<div class="col-6">
-							<mat-form-field class="col-md-12">
+					<div class="d-flex flex-wrap mt-4">
+						<div class="col-md-12">
+							<mat-form-field class="w-100">
 								<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label>
 								<mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required>
 									<mat-option *ngFor="let type of notificationTypeEnum" [value]="type">
@@ -80,16 +80,18 @@
 					</div>
 
 					<!-- Subject -->
-					<div class="row">
+					<div class="d-flex flex-wrap">
 						<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3>
-						<mat-form-field class="col-md-12">
-							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label>
-							<input matInput [formControl]="formGroup.get('value').get('subjectText')">
-							<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error>
-							<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						</mat-form-field>
-						<div class="col-4">
-							<mat-form-field class="col-md-12">
+						<div class="col-md-6">
+							<mat-form-field class="w-100">
+								<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label>
+								<input matInput [formControl]="formGroup.get('value').get('subjectText')">
+								<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error>
+								<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+							</mat-form-field>
+						</div>
+						<div class="col-md-6">
+							<mat-form-field class="w-100">
 								<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label>
 								<input matInput [formControl]="formGroup.get('value').get('subjectKey')">
 								<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('backendError')">{{formGroup.get('value').get('subjectKey').getError('backendError').message}}</mat-error>
@@ -113,8 +115,8 @@
 					<!-- Body -->
 					<div>
 						<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3>
-						<div class="col-4">
-							<mat-form-field class="col-md-12">
+						<div class="col-md-6">
+							<mat-form-field class="w-100">
 								<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label>
 								<input matInput [formControl]="formGroup.get('value').get('bodyKey')">
 								<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('backendError')">{{formGroup.get('value').get('bodyKey').getError('backendError').message}}</mat-error>
@@ -123,7 +125,7 @@
 						</div>	
 						<div class="col-12">
 							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</mat-label>
-							<editor class="w-100" [init]="{
+							<editor class="w-100 mt-2" [init]="{
 							base_url: '/tinymce',
 							suffix: '.min',
 							height: 800,
@@ -149,7 +151,7 @@
 					<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}}
 						<mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox>
 					</h4>
-					<div *ngIf="bodyFieldOptionsEnabled == true">
+					<ng-container *ngIf="bodyFieldOptionsEnabled == true">
 						<app-notification-template-field-options-component
 							[form]="formGroup.get('value').get('bodyFieldOptions')"
 							[validationErrorModel]="editorModel.validationErrorModel"
@@ -157,7 +159,7 @@
 							[bodyMandatoryFields]="subjectMandatoryFields"
 							[formatting]="bodyFormatting">
 						</app-notification-template-field-options-component>
-						</div>
+					</ng-container>
 					<!--Extra Options -->
 					<div class="row">
 						<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3>