diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/components/visibility-rule/description-template-editor-visibility-rule.component.html b/dmp-frontend/src/app/ui/admin/description-template/editor/components/visibility-rule/description-template-editor-visibility-rule.component.html
index f6c91f924..eaa386fcf 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/editor/components/visibility-rule/description-template-editor-visibility-rule.component.html
+++ b/dmp-frontend/src/app/ui/admin/description-template/editor/components/visibility-rule/description-template-editor-visibility-rule.component.html
@@ -34,11 +34,16 @@
 				<!-- SHOW FIELDS -->
 				<mat-optgroup [label]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDS' | translate">
 					<mat-option *ngFor="let option of fieldOptions" [value]="option.id" style="line-height: normal;" [disabled]="parentIds.includes(option.id) ||hiddenBy.includes(option.id)" [matTooltip]="getToolTipMessage(option.id)" [matTooltipShowDelay]="700">
-						<span>
-							{{option.label? option.label:'<'+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>' }} </span> <br>
-								<small>
+						<div class="row mt-2 mb-2">
+							<div class="col">
+								<span class="title-text">
+									{{option.label? option.label:'<'+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>' }} 
+								</span> <br>
+								<span class="subtitle-text">
 									{{option.id}}
-								</small>
+								</span>
+							</div>
+						</div>
 					</mat-option>
 				</mat-optgroup>