diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html b/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
index 10778779d..f2753c4eb 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
@@ -203,8 +203,12 @@
 										<div class="row">
 											<div class="col-12">
 												<div class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *</div>
+											</div>
+											<div class="col-12">
 												<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
-												<mat-form-field>
+											</div>
+											<div class="col-12">
+												<mat-form-field class="w-100">
 													<input type="text" matInput formControlName="title" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) +' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' |translate)">
 													<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('backendError')">{{selectedTocEntry.form.get('title').getError('backendError').message}}</mat-error> 
 													<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>