diff --git a/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/field-options/notification-template-field-options.component.html b/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/field-options/notification-template-field-options.component.html
index 5caa525f7..8fe4b0c24 100644
--- a/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/field-options/notification-template-field-options.component.html
+++ b/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/field-options/notification-template-field-options.component.html
@@ -25,7 +25,7 @@
 <div class="d-flex flex-column">
 	<ng-container *ngFor="let options of form.get('optional')['controls']; let i = index">
 		<div class="d-flex flex-wrap">
-			<div class="col-md-4">
+			<div class="col-12 col-md">
 				<mat-form-field class="w-100">
 					<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
 					<input matInput [formControl]="options.get('key')">
@@ -33,7 +33,7 @@
 					<mat-error *ngIf="options.get('key').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 			</div>
-			<div class="col-auto">
+			<div class="col-12 col-md-3">
 				<mat-form-field class="w-100">
 					<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
 					<mat-select name="channel" [formControl]="options.get('type')">
@@ -45,7 +45,7 @@
 					<mat-error *ngIf="options.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 			</div>
-			<div class="col-auto">
+			<div class="col-12 col-md-3">
 				<mat-form-field class="w-100">
 					<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
 					<input matInput [formControl]="options.get('value')">
@@ -53,11 +53,11 @@
 					<mat-error *ngIf="options.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 			</div>
-		</div>
-		<div class="col-auto">
-			<button mat-icon-button (click)="removeSubjectOptionalItem(i)" [disabled]="form.disabled">
-				<mat-icon>remove</mat-icon>
-			</button>
+			<div class="col-12 col-md-auto">
+				<button mat-icon-button (click)="removeSubjectOptionalItem(i)" [disabled]="form.disabled">
+					<mat-icon>remove</mat-icon>
+				</button>
+			</div>
 		</div>
 	</ng-container>
 	<div class="col-auto">
@@ -69,11 +69,11 @@
 
 <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.FORMATTING' | translate}}</h4>	
 <div class="d-flex flex-wrap" *ngFor="let item of form.get('mandatory').value; let i = index">
-	<mat-form-field class="col-md-4">
+	<mat-form-field class="col-6">
 		<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
 		<input matInput [value]="item" [disabled] = "true">
 	</mat-form-field>
-	<mat-form-field class="col-md-4">
+	<mat-form-field class="col-6">
 		<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
 		<input matInput [value] ="formatting[item]" (change)="formattingValueChange($event, item)">
 		<mat-error *ngIf="form.get('formatting').hasError('backendError')">{{form.get('formatting').getError('backendError').message}}</mat-error>
@@ -81,11 +81,11 @@
 </div>
 <div class="d-flex flex-wrap" *ngFor="let item of form.get('optional')['controls']; let i = index">
 	<ng-container *ngIf="item.valid">
-		<mat-form-field class="col-md-4">
+		<mat-form-field class="col-6">
 			<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
 			<input matInput [value]="item.value.key" [disabled] = "true">
 		</mat-form-field>
-		<mat-form-field class="col-md-4">
+		<mat-form-field class="col-6">
 			<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
 			<input matInput [value]="formatting[item]" (change)="formattingValueChange($event, item)">
 			<mat-error *ngIf="form.get('formatting').hasError('backendError')">{{form.get('formatting').getError('backendError').message}}</mat-error>
diff --git a/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html b/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
index ea7a495c9..6ad0ad058 100644
--- a/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
+++ b/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
@@ -213,7 +213,7 @@
 						</div>
 						<div class="row">
 							<div class="col-12">
-								<div class="container">
+								<div class="container-fluid">
 									<div class="row">
 										<div class="col-12 col-lg-4">
 											<mat-form-field class="w-100">