diff --git a/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.html b/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.html
new file mode 100644
index 000000000..1fb26780b
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.html
@@ -0,0 +1,32 @@
+<mat-card class="row listing-container">
+
+	<ng-template #costTemplate let-cost let-i="index">
+		<div class="row">
+			<div class="col-auto">
+				<mat-form-field>
+					<app-single-auto-complete [formControl]="cost.get('code')"  placeholder="{{'ADDEDITCOST-EDITOR.CODE' | translate}}" [configuration]="currencyAutoCompleteConfiguration"></app-single-auto-complete>
+				</mat-form-field>
+			</div>
+			<div class="col-auto">
+				<mat-form-field>
+					<input matInput placeholder="Description" type="text" [formControl]="cost.get('description')">
+				</mat-form-field>
+			</div>
+			<div class="col-auto">
+				<mat-form-field>
+					<input matInput placeholder="Title" type="text" [formControl]="cost.get('title')">
+				</mat-form-field>
+			</div>
+			<div class="col-auto">
+				<mat-form-field>
+					<input matInput placeholder="Value" type="text" [formControl]="cost.get('value')">
+				</mat-form-field>
+			</div>
+		</div>
+	</ng-template>
+
+	<mat-card class="col-12 cost-element" *ngFor="let cost of form['controls']; let i = index">
+		<ng-container *ngTemplateOutlet="costTemplate; context: { $implicit: cost, index: i }">
+		</ng-container>
+	</mat-card>
+</mat-card>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.scss b/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.scss
new file mode 100644
index 000000000..52f45cc20
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.scss
@@ -0,0 +1,10 @@
+.listing-container {
+	height: fit-content;
+	width: fit-content;
+	background-color: whitesmoke;
+}
+
+
+.cost-element {
+	margin-bottom: 1em;
+}
diff --git a/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.ts b/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.ts
new file mode 100644
index 000000000..1272e51c6
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/editor/cost-editor/cost-listing/cost-listing.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { BaseComponent } from '@common/base/base.component';
+import { FormArray } from '@angular/forms';
+import { takeUntil } from 'rxjs/operators';
+import { CostModel } from '@app/core/model/dmp/cost';
+import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
+import { CurrencyService } from '@app/core/services/currency/currency.service';
+import { Observable } from 'rxjs';
+import { LocalFetchModel } from '@app/core/model/local-fetch/local-fetch.model';
+
+@Component({
+  selector: 'app-cost-listing',
+  templateUrl: './cost-listing.component.html',
+  styleUrls: ['./cost-listing.component.scss']
+})
+export class CostListingComponent extends BaseComponent implements OnInit {
+
+	@Input() form: FormArray;
+
+	costs: CostModel[] = [];
+
+	currencyAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
+		filterFn: this.searchCurrency.bind(this),
+		initialItems: () => this.searchCurrency(''),
+		displayFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
+		titleFn: (item) => typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name,
+		valueAssign: (item) => this.getValue(item)
+	};
+
+  constructor(
+	private currencyService: CurrencyService,
+  ) {
+	  super();
+  }
+
+  ngOnInit() {
+	  this.form.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(value => {
+		 this.costs = value;
+	  });
+  }
+
+  searchCurrency(like: string): Observable<LocalFetchModel[]> {
+	return this.currencyService.get(like);
+}
+
+	getValue(item: any): any {
+		console.log(item);
+		return item;
+	}
+
+}
diff --git a/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html
index 5e18a75dd..2d85e7ccc 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html
@@ -140,10 +140,12 @@
 				</mat-form-field>
 				<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
 			</div>
-			<div class="row pt-1">
-					<button matSuffix class="input-btn" type="button" (click)="addCost($event)">
-						<mat-icon class="icon-btn">add_circle</mat-icon>
-					</button>
+			<div class="row pt-3">
+				<mat-label class="col-12 cost-placeholder">Costs</mat-label>
+				<app-cost-listing class="col-12" [form] = "formGroup.get('extraProperties').get('costs')"></app-cost-listing>
+				<button class="col-12" matSuffix class="input-btn" type="button" (click)="addCost($event)">
+					<mat-icon class="icon-btn">add_circle</mat-icon>
+				</button>
 			</div>
 			<div class="row pt-2">
 				<mat-form-field class="col-sm-12 col-md-8">
diff --git a/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss
index 05d8ae793..595aabb5c 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss
@@ -37,3 +37,7 @@
 ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
   padding-bottom: 1.25em;
 }
+
+.cost-placeholder {
+	text-decoration: underline;
+}