diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html
index 2508728ab..4c97ab437 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html
@@ -1,15 +1,30 @@
 <!-- MAIN CONTENT -->
 <div class="main-content-page" [ngClass]="{'pb-2': !hasFocus}">
 	<!-- TITLE -->
-	<div class="col-12">
+	<div class="">
 		<div class="row fielset-header">
-			<mat-form-field class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
+			<div class="col-auto">
+				<div class="row flex-column h-100">
+					<div class="col">
+						<div class="container h-100 numbering-container border border-primary rounded text-center">
+							<div class="row">
+								<div class="col-12 numbering"><span>{{numbering}}</span></div>
+							</div>
+						</div>
+					</div>
+					<div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align">
+					</div> 
+				</div>
+			</div>
+			<!-- <mat-form-field class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
 				<input [ngClass]="{'text-danger':form.get('title').invalid &&form.get('title').touched}" matInput type="text" [value]="numbering" disabled>
-			</mat-form-field>
-			<mat-form-field class="col field-title" floatLabel="never">
-				<textarea matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+' '+('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput" [formControl]="this.form.get('title')"></textarea>
-				<mat-error *ngIf="this.form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
-			</mat-form-field>
+			</mat-form-field> -->
+			<div class="col">
+				<mat-form-field class="w-100 field-title" floatLabel="never">
+					<textarea matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+' '+('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput" [formControl]="this.form.get('title')"></textarea>
+					<mat-error *ngIf="this.form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
+				</mat-form-field>
+			</div>
 		</div>
 	</div>
 	<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.scss b/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.scss
index 294f273fc..8c78699e9 100644
--- a/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.scss
+++ b/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.scss
@@ -148,4 +148,18 @@ $blue-color-light: #5cf7f2;
 ::ng-deep label {
     margin: 0;
     color: #212121;
-}
\ No newline at end of file
+}
+
+.numbering-container {
+
+    border: 1px solid #F0F0F0!important;
+
+    .numbering {
+        font-size: 17px; 
+        font-weight: 400; color: #a0a0a0;
+        padding-top: var(--mat-form-field-container-vertical-padding);
+        padding-bottom: var(--mat-form-field-container-vertical-padding);
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+    }
+}