diff --git a/CHANGELOG.md b/CHANGELOG.md
index 315162e4e..63a3f71de 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -45,6 +45,7 @@ Broker UI removal refactoring, ToS dialog.
 
 - Added Initiate Negotiation Confirm ToS Dialog
 - Support for creating "On Request" Data Offers
+- Replaced create/edit asset dialogs with full page forms with structure that enables faster asset creation
 
 ### Deployment Migration Notes
 
diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts
index 299c13cda..a64166195 100644
--- a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts
+++ b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts
@@ -33,8 +33,15 @@ export class AssetDetailDialogDataService {
     asset: UiAssetMapped,
     opts: {onAssetEditClick: OnAssetEditClickFn},
   ): AssetDetailDialogData {
+    const assetDetailsReadonly = this.assetDetailsReadonly(asset);
     return {
-      ...this.assetDetailsReadonly(asset),
+      ...assetDetailsReadonly,
+      propertyGridGroups: [
+        ...assetDetailsReadonly.propertyGridGroups,
+        ...this.assetPropertyGridGroupBuilder.buildOnRequestContactInformation(
+          asset,
+        ),
+      ],
       showDeleteButton: true,
       showEditButton: true,
       onAssetEditClick: opts.onAssetEditClick,
diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html
index 8e01cba12..b2545a6b6 100644
--- a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html
+++ b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html
@@ -3,7 +3,7 @@
     <mat-icon
       *ngIf="data.type === 'asset-details'"
       class="mat-card-avatar-icon">
-      upload
+      {{ asset.dataSourceAvailability === 'LIVE' ? 'upload' : 'contact_page' }}
     </mat-icon>
     <mat-icon
       *ngIf="data.type === 'contract-agreement'"
diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts
index 1b29b818c..e09f92bb5 100644
--- a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts
+++ b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts
@@ -398,4 +398,29 @@ export class AssetPropertyGridGroupBuilder {
 
     return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
   }
+
+  buildOnRequestContactInformation(asset: UiAssetMapped): PropertyGridGroup[] {
+    if (asset.dataSourceAvailability === 'LIVE') {
+      return [];
+    }
+    return [
+      {
+        groupLabel: 'Contact Information',
+        properties: [
+          {
+            icon: 'mail',
+            label: 'Contact E-Mail Address',
+            ...this.propertyGridUtils.guessValue(asset.onRequestContactEmail),
+          },
+          {
+            icon: 'subject',
+            label: 'Preferred E-Mail Subject',
+            ...this.propertyGridUtils.guessValue(
+              asset.onRequestContactEmailSubject,
+            ),
+          },
+        ],
+      },
+    ];
+  }
 }
diff --git a/src/app/component-library/data-address/data-address-type-select/data-address-type-select-items.ts b/src/app/component-library/data-address/data-address-type-select/data-address-type-select-items.ts
index 07261a293..dcacb056f 100644
--- a/src/app/component-library/data-address/data-address-type-select/data-address-type-select-items.ts
+++ b/src/app/component-library/data-address/data-address-type-select/data-address-type-select-items.ts
@@ -6,20 +6,6 @@ export const dataAddressTypeSelectItems = (
 ): DataAddressTypeSelectItem[] => {
   const items: DataAddressTypeSelectItem[] = [];
 
-  if (type === 'Datasource-Edit') {
-    items.push({
-      id: 'Unchanged',
-      label: 'Leave unchanged',
-    });
-  }
-
-  if (type.startsWith('Datasource')) {
-    items.push({
-      id: 'On-Request',
-      label: '"On Request" Data Offer',
-    });
-  }
-
   items.push(
     {
       id: 'Http',
diff --git a/src/app/component-library/data-address/data-address-type-select/data-address-type-select-mode.ts b/src/app/component-library/data-address/data-address-type-select/data-address-type-select-mode.ts
index 6bc7e90a6..2a9413fc7 100644
--- a/src/app/component-library/data-address/data-address-type-select/data-address-type-select-mode.ts
+++ b/src/app/component-library/data-address/data-address-type-select/data-address-type-select-mode.ts
@@ -1,4 +1 @@
-export type DataAddressTypeSelectMode =
-  | 'Datasource-Create'
-  | 'Datasource-Edit'
-  | 'Datasink';
+export type DataAddressTypeSelectMode = 'Datasource-Create' | 'Datasink';
diff --git a/src/app/routes/connector-ui/asset-page/data-category-select/data-category-select-data.ts b/src/app/component-library/edit-asset-form/data-category-select/data-category-select-data.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/data-category-select/data-category-select-data.ts
rename to src/app/component-library/edit-asset-form/data-category-select/data-category-select-data.ts
diff --git a/src/app/routes/connector-ui/asset-page/data-category-select/data-category-select-item.service.ts b/src/app/component-library/edit-asset-form/data-category-select/data-category-select-item.service.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/data-category-select/data-category-select-item.service.ts
rename to src/app/component-library/edit-asset-form/data-category-select/data-category-select-item.service.ts
diff --git a/src/app/routes/connector-ui/asset-page/data-category-select/data-category-select-item.ts b/src/app/component-library/edit-asset-form/data-category-select/data-category-select-item.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/data-category-select/data-category-select-item.ts
rename to src/app/component-library/edit-asset-form/data-category-select/data-category-select-item.ts
diff --git a/src/app/component-library/edit-asset-form/data-category-select/data-category-select.component.html b/src/app/component-library/edit-asset-form/data-category-select/data-category-select.component.html
new file mode 100644
index 000000000..9bce0ab73
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/data-category-select/data-category-select.component.html
@@ -0,0 +1,16 @@
+<edit-asset-form-label
+  htmlFor="create-asset-form-data-category"
+  [ctrl]="control"
+  [label]="label"></edit-asset-form-label>
+<mat-form-field class="w-full" color="accent">
+  <mat-select
+    id="create-asset-form-data-category"
+    placeholder="Select data category..."
+    [formControl]="control"
+    [compareWith]="'id' | compareByField">
+    <mat-option [value]="null"></mat-option>
+    <mat-option *ngFor="let item of items" [value]="item">
+      {{ item.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
diff --git a/src/app/routes/connector-ui/asset-page/data-category-select/data-category-select.component.ts b/src/app/component-library/edit-asset-form/data-category-select/data-category-select.component.ts
similarity index 77%
rename from src/app/routes/connector-ui/asset-page/data-category-select/data-category-select.component.ts
rename to src/app/component-library/edit-asset-form/data-category-select/data-category-select.component.ts
index eff3b4595..b19189147 100644
--- a/src/app/routes/connector-ui/asset-page/data-category-select/data-category-select.component.ts
+++ b/src/app/component-library/edit-asset-form/data-category-select/data-category-select.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostBinding, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {DATA_CATEGORY_SELECT_DATA} from './data-category-select-data';
 import {DataCategorySelectItem} from './data-category-select-item';
@@ -14,9 +14,5 @@ export class DataCategorySelectComponent {
   @Input()
   control!: FormControl<DataCategorySelectItem | null>;
 
-  @HostBinding('class.flex')
-  @HostBinding('class.flex-row')
-  cls = true;
-
   items = DATA_CATEGORY_SELECT_DATA;
 }
diff --git a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-items.pipe.ts b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-items.pipe.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-items.pipe.ts
rename to src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-items.pipe.ts
diff --git a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-data.ts b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-data.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-data.ts
rename to src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-data.ts
diff --git a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item.service.ts b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item.service.ts
similarity index 94%
rename from src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item.service.ts
rename to src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item.service.ts
index bd38df5f2..89f39282d 100644
--- a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item.service.ts
+++ b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item.service.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {associateBy, groupedBy} from '../../../../core/utils/map-utils';
+import {associateBy, groupedBy} from 'src/app/core/utils/map-utils';
 import {DataCategorySelectItem} from '../data-category-select/data-category-select-item';
 import {DATA_SUBCATEGORY_SELECT_DATA} from './data-subcategory-select-data';
 import {DataSubcategorySelectItem} from './data-subcategory-select-item';
diff --git a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item.ts b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item.ts
rename to src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item.ts
diff --git a/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select.component.html b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select.component.html
new file mode 100644
index 000000000..2207dec16
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select.component.html
@@ -0,0 +1,18 @@
+<edit-asset-form-label
+  htmlFor="create-asset-form-data-subcategory"
+  [ctrl]="control"
+  [label]="label"></edit-asset-form-label>
+<mat-form-field class="w-full" color="accent">
+  <mat-select
+    id="create-asset-form-data-subcategory"
+    placeholder="Select data subcategory..."
+    [formControl]="control"
+    [compareWith]="'id' | compareByField">
+    <mat-option [value]="null">-</mat-option>
+    <mat-option
+      *ngFor="let item of dataCategory | dataSubcategoryItems"
+      [value]="item">
+      {{ item.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
diff --git a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select.component.ts b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select.component.ts
similarity index 79%
rename from src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select.component.ts
rename to src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select.component.ts
index 217b9de41..c6ea3fc87 100644
--- a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select.component.ts
+++ b/src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostBinding, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {DataCategorySelectItem} from '../data-category-select/data-category-select-item';
 import {DataSubcategorySelectItem} from './data-subcategory-select-item';
@@ -16,8 +16,4 @@ export class DataSubcategorySelectComponent {
 
   @Input()
   control!: FormControl<DataSubcategorySelectItem | null>;
-
-  @HostBinding('class.flex')
-  @HostBinding('class.flex-row')
-  cls = true;
 }
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component.html b/src/app/component-library/edit-asset-form/edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component.html
new file mode 100644
index 000000000..24d023919
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component.html
@@ -0,0 +1,9 @@
+<edit-asset-form-label [label]="label" [ctrl]="control"></edit-asset-form-label>
+<mat-form-field class="w-full m-1" color="accent">
+  <mat-select [formControl]="control">
+    <mat-option *ngIf="!control.value" [value]="null"></mat-option>
+    <mat-option *ngFor="let item of items" [value]="item.id">
+      {{ item.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component.ts b/src/app/component-library/edit-asset-form/edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component.ts
new file mode 100644
index 000000000..c44e7c1d4
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component.ts
@@ -0,0 +1,30 @@
+import {Component, Input, OnChanges} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {SimpleChangesTyped} from '../../../core/utils/angular-utils';
+import {DataAddressType} from '../../data-address/data-address-type-select/data-address-type';
+import {dataAddressTypeSelectItems} from '../../data-address/data-address-type-select/data-address-type-select-items';
+import {DataAddressTypeSelectMode} from '../../data-address/data-address-type-select/data-address-type-select-mode';
+
+@Component({
+  selector: 'edit-asset-form-data-address-type-select',
+  templateUrl: 'edit-asset-form-data-address-type-select.component.html',
+})
+export class EditAssetFormDataAddressTypeSelectComponent implements OnChanges {
+  @Input()
+  label!: string;
+
+  @Input()
+  control!: FormControl<DataAddressType | null>;
+
+  @Input()
+  mode: DataAddressTypeSelectMode = 'Datasource-Create';
+
+  items = dataAddressTypeSelectItems(this.mode);
+  ngOnChanges(
+    changes: SimpleChangesTyped<EditAssetFormDataAddressTypeSelectComponent>,
+  ) {
+    if (changes.mode) {
+      this.items = dataAddressTypeSelectItems(this.mode);
+    }
+  }
+}
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form-group/edit-asset-form-group.component.html b/src/app/component-library/edit-asset-form/edit-asset-form-group/edit-asset-form-group.component.html
new file mode 100644
index 000000000..3ec1f6c84
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form-group/edit-asset-form-group.component.html
@@ -0,0 +1,15 @@
+<div
+  class="grid grid-cols-1 gap-x-8 gap-y-10 !border-b !border-gray-900/10 pb-12 md:grid-cols-3">
+  <div>
+    <h2 class="!text-base !font-medium !leading-7 !text-gray-900 !m-0">
+      {{ myTitle }}
+    </h2>
+    <p class="!mt-1 !text-sm !leading-6 !text-gray-600 !font-light">
+      {{ description }}
+    </p>
+  </div>
+
+  <div class="grid gap-x-6 gap-y-6 md:col-span-2">
+    <ng-content></ng-content>
+  </div>
+</div>
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form-group/edit-asset-form-group.component.ts b/src/app/component-library/edit-asset-form/edit-asset-form-group/edit-asset-form-group.component.ts
new file mode 100644
index 000000000..ebc142103
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form-group/edit-asset-form-group.component.ts
@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'edit-asset-form-group',
+  templateUrl: './edit-asset-form-group.component.html',
+})
+export class EditAssetFormGroupComponent {
+  @Input() myTitle!: string;
+  @Input() description!: string;
+}
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form-label/edit-asset-form-label.component.html b/src/app/component-library/edit-asset-form/edit-asset-form-label/edit-asset-form-label.component.html
new file mode 100644
index 000000000..8c4339a97
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form-label/edit-asset-form-label.component.html
@@ -0,0 +1,9 @@
+<label
+  [ngClass]="
+    ctrl?.invalid && (ctrl?.touched || ctrl?.dirty)
+      ? 'text-red-600'
+      : 'text-gray-900'
+  "
+  [for]="htmlFor"
+  >{{ label }}<span *ngIf="isRequired()" class="ml-0.5">*</span></label
+>
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form-label/edit-asset-form-label.component.ts b/src/app/component-library/edit-asset-form/edit-asset-form-label/edit-asset-form-label.component.ts
new file mode 100644
index 000000000..71eccf219
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form-label/edit-asset-form-label.component.ts
@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'edit-asset-form-label',
+  templateUrl: './edit-asset-form-label.component.html',
+})
+export class EditAssetFormLabelComponent {
+  @Input() label!: string;
+  @Input() htmlFor?: string;
+  @Input() ctrl?: FormControl<any>;
+
+  isRequired(): boolean {
+    return this.ctrl?.hasValidator(Validators.required) || false;
+  }
+}
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form.module.ts b/src/app/component-library/edit-asset-form/edit-asset-form.module.ts
new file mode 100644
index 000000000..2f1bb2a37
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form.module.ts
@@ -0,0 +1,87 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatNativeDateModule} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {RouterModule} from '@angular/router';
+import {CatalogModule} from '../catalog/catalog.module';
+import {PipesAndDirectivesModule} from '../pipes-and-directives/pipes-and-directives.module';
+import {UiElementsModule} from '../ui-elements/ui-elements.module';
+import {DataCategorySelectComponent} from './data-category-select/data-category-select.component';
+import {DataSubcategoryItemsPipe} from './data-subcategory-select/data-subcategory-items.pipe';
+import {DataSubcategorySelectComponent} from './data-subcategory-select/data-subcategory-select.component';
+import {EditAssetFormDataAddressTypeSelectComponent} from './edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component';
+import {EditAssetFormGroupComponent} from './edit-asset-form-group/edit-asset-form-group.component';
+import {EditAssetFormLabelComponent} from './edit-asset-form-label/edit-asset-form-label.component';
+import {EditAssetFormComponent} from './edit-asset-form/edit-asset-form.component';
+import {KeywordSelectComponent} from './keyword-select/keyword-select.component';
+import {LanguageSelectComponent} from './language-select/language-select.component';
+import {TransportModeSelectComponent} from './transport-mode-select/transport-mode-select.component';
+
+@NgModule({
+  imports: [
+    // Angular
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+
+    // Angular Material
+    MatBadgeModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatSlideToggleModule,
+    MatStepperModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatInputModule,
+    MatRadioModule,
+    MatIconModule,
+    MatDialogModule,
+    MatNativeDateModule,
+
+    // EDC UI Modules
+    CatalogModule,
+    PipesAndDirectivesModule,
+    UiElementsModule,
+  ],
+  declarations: [
+    EditAssetFormComponent,
+    EditAssetFormGroupComponent,
+    EditAssetFormLabelComponent,
+    KeywordSelectComponent,
+    DataCategorySelectComponent,
+    DataSubcategorySelectComponent,
+    DataSubcategoryItemsPipe,
+    EditAssetFormDataAddressTypeSelectComponent,
+    TransportModeSelectComponent,
+    LanguageSelectComponent,
+  ],
+  exports: [EditAssetFormComponent, EditAssetFormLabelComponent],
+  providers: [],
+})
+export class EditAssetFormModule {}
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/assets-id-validator-builder.ts b/src/app/component-library/edit-asset-form/edit-asset-form/assets-id-validator-builder.ts
similarity index 92%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/assets-id-validator-builder.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/assets-id-validator-builder.ts
index bfef34c99..15983dc7b 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/assets-id-validator-builder.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/assets-id-validator-builder.ts
@@ -6,7 +6,7 @@ import {
 } from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
-import {AssetService} from '../../../../core/services/asset.service';
+import {AssetService} from 'src/app/core/services/asset.service';
 
 @Injectable({
   providedIn: 'root',
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form/edit-asset-form.component.html b/src/app/component-library/edit-asset-form/edit-asset-form/edit-asset-form.component.html
new file mode 100644
index 000000000..086bcd8c3
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/edit-asset-form.component.html
@@ -0,0 +1,938 @@
+<div id="edit-asset-form">
+  <form class="flex flex-col gap-y-12 mt-4" [formGroup]="form.all">
+    <edit-asset-form-group
+      *ngIf="form.datasource"
+      myTitle="Datasource"
+      description="Define the datasource of the asset">
+      <!-- Datasource Type -->
+      <div>
+        <edit-asset-form-label
+          label="Datasource Type"
+          htmlFor="create-asset-form-datasource-type"
+          [ctrl]="
+            form.datasource.controls.dataSourceAvailability
+          "></edit-asset-form-label>
+        <mat-radio-group
+          class="!flex !flex-col !gap-1 w-full mt-2"
+          aria-label="Select an option"
+          [formControl]="form.datasource.controls.dataSourceAvailability">
+          <mat-radio-button *ngIf="form.mode === 'EDIT'" value="Unchanged">
+            Keep the datasource unchanged.
+          </mat-radio-button>
+          <mat-radio-button value="On-Request">
+            I do not have a datasource.
+          </mat-radio-button>
+          <mat-radio-button value="Datasource">
+            I want to connect to a datasource.
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+
+      <ng-container
+        *ngIf="form.datasource.value.dataSourceAvailability === 'On-Request'">
+        <!-- Contact E-Mail for On Request Assets -->
+        <div class="mt-2">
+          <edit-asset-form-label
+            label="Contact E-Mail"
+            htmlFor="create-asset-form-contact-email"
+            [ctrl]="
+              form.datasource.controls.contactEmail
+            "></edit-asset-form-label>
+          <mat-form-field
+            *ngIf="form.datasource.controls.contactEmail; let ctrl"
+            class="w-full mt-1">
+            <input
+              id="create-asset-form-contact-email"
+              matInput
+              [formControl]="ctrl"
+              [placeholder]="'contact@my-org.com'" />
+            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.email">
+              {{ validationMessages.invalidEmailMessage }}
+            </mat-error>
+            <mat-hint class="">
+              This email address will be offered to potential consumers for
+              contacting you. This is done in place of having an actual data
+              source connected.
+            </mat-hint>
+          </mat-form-field>
+        </div>
+
+        <!-- Contact E-Mail Subject for On Request Assets -->
+        <div class="mt-5">
+          <edit-asset-form-label
+            label="Preferred E-Mail Subject"
+            htmlFor="create-asset-form-contact-subject"
+            [ctrl]="
+              form.datasource.controls.contactPreferredEmailSubject
+            "></edit-asset-form-label>
+          <mat-form-field
+            *ngIf="
+              form.datasource.controls.contactPreferredEmailSubject;
+              let ctrl
+            "
+            class="w-full mt-1">
+            <input
+              id="create-asset-form-contact-subject"
+              matInput
+              [formControl]="ctrl"
+              [placeholder]="'Data Offer \'xyz\''" />
+            <mat-hint class="">
+              Will be added to the mailto-link and displayed to potential
+              consumers to use.
+            </mat-hint>
+          </mat-form-field>
+        </div>
+      </ng-container>
+
+      <ng-container
+        *ngIf="
+          form.datasource.controls.dataSourceAvailability.value === 'Datasource'
+        ">
+        <!-- Data Address Type -->
+        <div class="mt-5">
+          <edit-asset-form-data-address-type-select
+            label="Type"
+            mode="Datasource-Create"
+            [control]="form.datasource.controls.dataAddressType">
+          </edit-asset-form-data-address-type-select>
+        </div>
+
+        <!-- Data Source Type CUSTOM -->
+        <div
+          *ngIf="
+            form.dataAddressType === 'Custom-Data-Address-Json' &&
+              form.datasource.controls.dataDestination;
+            let ctrl
+          ">
+          <edit-asset-form-label
+            label="Custom Datasource Config (JSON)"
+            htmlFor="create-asset-form-custom-datasource-json"
+            [ctrl]="ctrl"></edit-asset-form-label>
+          <mat-form-field class="w-full mt-1">
+            <textarea
+              id="create-asset-form-custom-datasource-json"
+              class="h-36"
+              matInput
+              placeholder='{"https://w3id.org/edc/v0.0.1/ns/type": "HttpData", ...}'
+              [formControl]="ctrl"></textarea>
+            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.jsonInvalid">
+              {{ validationMessages.invalidJsonMessage }}
+            </mat-error>
+          </mat-form-field>
+        </div>
+
+        <!-- Data Source Type HTTP -->
+        <ng-container *ngIf="form.dataAddressType === 'Http'">
+          <!-- Method (Rest-Api) -->
+          <div>
+            <edit-asset-form-label
+              label="Http Method"
+              htmlFor="create-asset-form-http-method"
+              [ctrl]="
+                form.datasource.controls.httpMethod
+              "></edit-asset-form-label>
+            <mat-form-field
+              *ngIf="form.datasource.controls.httpMethod; let ctrl"
+              class="w-full">
+              <mat-select
+                id="create-asset-form-http-method"
+                [formControl]="ctrl">
+                <mat-option *ngFor="let method of methods" [value]="method"
+                  >{{ method }}
+                </mat-option>
+              </mat-select>
+              <mat-hint class="mat-hint">
+                The consuming side <b>must</b> provide a Custom HTTP Method with
+                method parameterization enabled.</mat-hint
+              >
+            </mat-form-field>
+            <!-- Toggle Method Parametrization Button -->
+            <div
+              *ngIf="form.datasource.controls.httpProxyMethod; let ctrl"
+              class="mt-1 flex flex-col gap-1">
+              <button
+                class="w-min"
+                mat-button
+                [color]="ctrl.value ? 'warn' : 'accent'"
+                (click)="$event.preventDefault(); ctrl.setValue(!ctrl.value)">
+                {{ ctrl.value ? 'Disable' : 'Enable' }}
+                Method Parameterization
+              </button>
+            </div>
+          </div>
+
+          <!-- Base Path (Rest-Api) -->
+          <div *ngIf="form.datasource.controls.httpUrl; let ctrl" class="mt-4">
+            <edit-asset-form-label
+              htmlFor="create-asset-form-url"
+              [label]="form.proxyPath ? 'Base URL' : 'URL'"
+              [ctrl]="ctrl"></edit-asset-form-label>
+            <mat-form-field class="w-full mt-1">
+              <input
+                id="create-asset-form-url"
+                matInput
+                [formControl]="ctrl"
+                [placeholder]="'https://'" />
+              <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
+                {{ validationMessages.invalidUrlMessage }}
+              </mat-error>
+              <mat-hint *ngIf="form.proxyPath">
+                The consuming side <b>must</b> provide a Custom HTTP Subpath
+                with method parameterization enabled. The Custom HTTP Subpath
+                will be appended to the base path.
+              </mat-hint>
+            </mat-form-field>
+            <!-- Toggle Proxy Path Button -->
+            <div
+              *ngIf="form.datasource.controls.httpProxyPath; let ctrl"
+              [ngClass]="ctrl.value ? 'mt-4' : '-mt-2'">
+              <button
+                mat-button
+                [color]="ctrl.value ? 'warn' : 'accent'"
+                (click)="$event.preventDefault(); ctrl.setValue(!ctrl.value)">
+                {{ ctrl.value ? 'Disable' : 'Enable' }} Path Parameterization
+              </button>
+            </div>
+          </div>
+
+          <div class="mt-3">
+            <edit-asset-form-label
+              [label]="
+                (form.proxyQueryParams ? 'Default' : '') + ' Query Params'
+              "></edit-asset-form-label>
+            <div class="mt-6"></div>
+            <div
+              *ngFor="
+                let header of form.datasource.controls.httpQueryParams.controls;
+                let i = index
+              "
+              class="flex flex-row space-x-[10px] -mt-3">
+              <!-- Query Param Name -->
+              <mat-form-field class="w-1/3">
+                <mat-label>Name</mat-label>
+                <input
+                  matInput
+                  placeholder="key"
+                  required
+                  autocomplete="new-query-param-name"
+                  [formControl]="header.controls.paramName" />
+                {{ header.errors }}
+                <mat-error
+                  *ngIf="
+                    header.controls.paramName.invalid &&
+                    header.controls.paramName.errors?.invalidQueryParam
+                  "
+                  >{{ validationMessages.invalidQueryParam }}
+                </mat-error>
+              </mat-form-field>
+              <!-- Query Param Value -->
+              <mat-form-field class="grow">
+                <mat-label>Value</mat-label>
+                <input
+                  matInput
+                  placeholder="..."
+                  autocomplete="new-query-param-value"
+                  [formControl]="header.controls.paramValue" />
+                <mat-error
+                  *ngIf="
+                    header.controls.paramValue.invalid &&
+                    header.controls.paramValue.errors?.invalidQueryParam
+                  "
+                  >{{ validationMessages.invalidQueryParam }}
+                </mat-error>
+              </mat-form-field>
+              <!-- Query Param Delete Button -->
+              <button
+                class="shrink"
+                mat-button
+                color="warn"
+                style="height: 42px; margin-top: 4px; margin-left: 8px"
+                (click)="form.onHttpQueryParamsRemoveClick($event, i)">
+                Remove
+              </button>
+            </div>
+            <mat-hint *ngIf="form.proxyQueryParams" class="mat-hint">
+              With query param parameterization enabled, the default query
+              params and the query params provided by the consumer will be
+              merged.
+            </mat-hint>
+            <div class="flex flex-row mb-[10px] space-x-[10px] mt-2">
+              <!-- Add Query Param Button -->
+              <button
+                mat-button
+                color="accent"
+                (click)="form.onHttpQueryParamsAddClick($event)">
+                Add {{ form.proxyQueryParams ? 'Default' : '' }} Query Param
+              </button>
+              <!-- Toggle Proxy Query Param Parameterization Button -->
+              <button
+                *ngIf="form.datasource.controls.httpProxyQueryParams; let ctrl"
+                mat-button
+                [color]="ctrl.value ? 'warn' : 'accent'"
+                (click)="$event.preventDefault(); ctrl.setValue(!ctrl.value)">
+                {{ ctrl.value ? 'Disable' : 'Enable' }} Query Param
+                Parameterization
+              </button>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-1 mt-3">
+            <edit-asset-form-label label="Request Body"></edit-asset-form-label>
+            <mat-hint class="mat-hint">
+              The request body can only be set from the consumer side, if
+              parameterization is enabled.
+            </mat-hint>
+            <!-- Toggle Proxy Body Button -->
+            <div
+              *ngIf="form.datasource.controls.httpProxyBody; let ctrl"
+              class="flex flex-row mb-[10px]">
+              <button
+                mat-button
+                [color]="ctrl.value ? 'warn' : 'accent'"
+                (click)="$event.preventDefault(); ctrl.setValue(!ctrl.value)">
+                {{ ctrl.value ? 'Disable' : 'Enable' }} Request Body
+                Parameterization
+              </button>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-1 mt-3">
+            <edit-asset-form-label
+              label="Authentication"></edit-asset-form-label>
+            <!-- Add Authentication Button -->
+            <div
+              *ngIf="
+                form.datasource.controls.httpAuthHeaderType.value === 'None'
+              "
+              class="flex flex-row">
+              <button
+                mat-button
+                color="accent"
+                (click)="
+                  form.datasource.controls.httpAuthHeaderType.setValue(
+                    'Vault-Secret'
+                  )
+                ">
+                Add Authentication
+              </button>
+            </div>
+            <!-- Auth Header Value Type -->
+            <mat-form-field
+              *ngIf="
+                form.datasource.controls.httpAuthHeaderType.value !== 'None'
+              "
+              class="grow mt-4">
+              <mat-label>Type</mat-label>
+              <mat-select
+                [formControl]="form.datasource.controls.httpAuthHeaderType">
+                <mat-option value="Vault-Secret">
+                  Header with Vault Secret
+                </mat-option>
+                <mat-option value="Value">Header with Value</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <div
+              *ngIf="
+                form.datasource.controls.httpAuthHeaderType.value !== 'None'
+              "
+              class="flex flex-row space-x-[10px] -mt-3">
+              <!-- Auth Header Name -->
+              <mat-form-field class="w-1/3">
+                <mat-label>Auth Header Name</mat-label>
+                <input
+                  matInput
+                  placeholder="Authorization"
+                  autocomplete="new-auth-header-name"
+                  [formControl]="form.datasource.controls.httpAuthHeaderName" />
+              </mat-form-field>
+              <!-- Auth Header Value -->
+              <mat-form-field
+                *ngIf="
+                  form.datasource.controls.httpAuthHeaderType.value === 'Value'
+                "
+                class="grow">
+                <mat-label>Auth Header Value</mat-label>
+                <input
+                  matInput
+                  placeholder="Bearer ..."
+                  [formControl]="
+                    form.datasource.controls.httpAuthHeaderValue
+                  " />
+              </mat-form-field>
+              <!-- Auth Header Secret Name -->
+              <mat-form-field
+                *ngIf="
+                  form.datasource.controls.httpAuthHeaderType.value ===
+                  'Vault-Secret'
+                "
+                class="grow">
+                <mat-label>Vault Secret Name</mat-label>
+                <input
+                  matInput
+                  placeholder="MySecret123"
+                  [formControl]="
+                    form.datasource.controls.httpAuthHeaderSecretName
+                  " />
+              </mat-form-field>
+            </div>
+            <!-- Remove Authentication Button -->
+            <div
+              *ngIf="
+                form.datasource.controls.httpAuthHeaderType.value !== 'None'
+              "
+              class="flex flex-row -mt-4">
+              <button
+                mat-button
+                color="warn"
+                (click)="
+                  form.datasource.controls.httpAuthHeaderType.setValue('None')
+                ">
+                Remove Authentication
+              </button>
+            </div>
+          </div>
+
+          <div class="mt-4">
+            <edit-asset-form-label
+              label="Additional Headers"></edit-asset-form-label>
+            <div class="mt-8"></div>
+            <div
+              *ngFor="
+                let header of form.datasource.controls.httpHeaders.controls;
+                let i = index
+              "
+              class="flex flex-row space-x-[10px] -mt-3">
+              <!-- Header Name -->
+              <mat-form-field class="w-1/3">
+                <mat-label>Header Name</mat-label>
+                <input
+                  matInput
+                  placeholder="Header"
+                  autocomplete="new-header-name"
+                  [formControl]="header.controls.headerName" />
+              </mat-form-field>
+              <!-- Header Value -->
+              <mat-form-field class="grow">
+                <mat-label>Header Value</mat-label>
+                <input
+                  matInput
+                  placeholder="..."
+                  autocomplete="new-header-value"
+                  [formControl]="header.controls.headerValue" />
+              </mat-form-field>
+              <!-- Header Delete Button -->
+              <button
+                mat-button
+                color="warn"
+                style="height: 42px; margin-top: 4px; margin-left: 8px"
+                (click)="form.onHttpHeadersRemoveClick($event, i)">
+                Remove
+              </button>
+            </div>
+            <!-- Add Header Button -->
+            <div class="flex flex-row -mt-3">
+              <button
+                mat-button
+                color="accent"
+                (click)="form.onHttpHeadersAddClick($event)">
+                Add Additional Header
+              </button>
+            </div>
+          </div>
+        </ng-container>
+      </ng-container>
+    </edit-asset-form-group>
+
+    <edit-asset-form-group
+      myTitle="General Information"
+      description="Fill out general information about the asset">
+      <!-- Name -->
+      <div>
+        <edit-asset-form-label
+          label="Name"
+          htmlFor="create-asset-form-name"
+          [ctrl]="form.general.controls.name"></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-name"
+            matInput
+            type="text"
+            placeholder="My Asset"
+            [formControl]="form.general.controls.name" />
+        </mat-form-field>
+      </div>
+
+      <!-- ID -->
+      <div *ngIf="form.general.controls.id; let ctrl">
+        <edit-asset-form-label
+          label="ID"
+          htmlFor="create-asset-form-id"
+          [ctrl]="ctrl"></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-id"
+            matInput
+            type="text"
+            placeholder="my-asset"
+            [formControl]="ctrl" />
+          <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
+            {{ validationMessages.invalidWhitespacesOrColonsMessage }}
+          </mat-error>
+          <mat-error *ngIf="ctrl.invalid && ctrl.errors?.requiresPrefix">
+            {{ validationMessages.invalidPrefix('ID', 'urn:artifact') }}
+          </mat-error>
+          <mat-error *ngIf="ctrl.invalid && ctrl.errors?.idAlreadyExists">
+            {{ validationMessages.idExistsErrorMessage }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <!-- Description -->
+      <div>
+        <edit-asset-form-label
+          label="Description"
+          htmlFor="create-asset-form-description"
+          [ctrl]="form.general.controls.description"></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <textarea
+            id="create-asset-form-description"
+            class="h-36"
+            matInput
+            [formControl]="form.general.controls.description"
+            [placeholder]="
+              '# My Asset\n\nAt vero eos et accusam et justo duo dolores et ea rebum.\n\n## Details\n\nAt vero eos et accusam et justo duo dolores et ea **rebum**.'
+            "></textarea>
+          <mat-hint class="flex flex-row items-center gap-1 mb-1">
+            The description uses
+            <a
+              class="link"
+              externalLink
+              href="https://www.markdownguide.org/basic-syntax/"
+              >Markdown syntax</a
+            >
+          </mat-hint>
+        </mat-form-field>
+      </div>
+
+      <!-- Keywords -->
+      <div class="mt-3">
+        <keyword-select
+          label="Keywords"
+          [control]="form.general.controls.keywords"></keyword-select>
+      </div>
+
+      <!-- Show Advanced Fields -->
+      <mat-checkbox [formControl]="form.general.controls.showAdvancedFields"
+        >Show Advanced Fields</mat-checkbox
+      >
+
+      <ng-container *ngIf="form.general.value.showAdvancedFields">
+        <!-- Version -->
+        <div class="mt-4">
+          <edit-asset-form-label
+            label="Version"
+            htmlFor="create-asset-form-version"
+            [ctrl]="form.general.controls.version"></edit-asset-form-label>
+          <mat-form-field class="w-full">
+            <input
+              id="create-asset-form-version"
+              matInput
+              type="text"
+              placeholder="1.0.0"
+              [formControl]="form.general.controls.version" />
+          </mat-form-field>
+        </div>
+
+        <!-- Language -->
+        <div>
+          <language-select
+            label="Language"
+            [control]="form.general.controls.language"></language-select>
+        </div>
+      </ng-container>
+    </edit-asset-form-group>
+
+    <edit-asset-form-group
+      *ngIf="form.general.controls.dataCategory"
+      myTitle="Mobility Information"
+      description="Fill out the asset's mobility information">
+      <!-- Data Category -->
+      <data-category-select
+        *ngIf="form.general.controls.dataCategory"
+        class="grow"
+        label="Data Category"
+        [control]="form.general.controls.dataCategory"></data-category-select>
+
+      <!-- Data Subcategory -->
+      <data-subcategory-select
+        *ngIf="form.general.controls.dataSubcategory"
+        class="grow"
+        label="Data Subcategory"
+        [dataCategory]="form.dataCategory"
+        [control]="
+          form.general.controls.dataSubcategory
+        "></data-subcategory-select>
+
+      <ng-container
+        *ngIf="form.general.value.showAdvancedFields && form.advanced">
+        <!-- Transport Mode -->
+        <transport-mode-select
+          label="Transport Mode"
+          [control]="
+            form.advanced.controls.transportMode
+          "></transport-mode-select>
+
+        <!-- Data Model -->
+        <div>
+          <edit-asset-form-label
+            label="Data Model"
+            htmlFor="create-asset-form-data-model"
+            [ctrl]="form.advanced.controls.dataModel"></edit-asset-form-label>
+          <mat-form-field class="w-full">
+            <input
+              id="create-asset-form-data-model"
+              matInput
+              placeholder="unspecified"
+              [formControl]="form.advanced.controls.dataModel" />
+          </mat-form-field>
+        </div>
+      </ng-container>
+    </edit-asset-form-group>
+
+    <edit-asset-form-group
+      *ngIf="form.general.value.showAdvancedFields"
+      myTitle="Documentation"
+      description="Provide context information about the datasource">
+      <!-- Endpoint Documentation -->
+      <div>
+        <edit-asset-form-label
+          label="Endpoint Documentation"
+          htmlFor="create-asset-form-endpoint-documentation"
+          [ctrl]="
+            form.general.controls.endpointDocumentation
+          "></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-endpoint-documentation"
+            matInput
+            type="text"
+            placeholder="https://"
+            [formControl]="form.general.controls.endpointDocumentation" />
+        </mat-form-field>
+      </div>
+
+      <!-- Content Type -->
+      <div>
+        <edit-asset-form-label
+          label="Content Type"
+          htmlFor="create-asset-form-content-type"
+          [ctrl]="form.general.controls.contentType"></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-content-type"
+            matInput
+            type="text"
+            placeholder="application/json"
+            [formControl]="form.general.controls.contentType" />
+        </mat-form-field>
+      </div>
+
+      <ng-container *ngIf="form.advanced">
+        <!-- Data sample URLs -->
+        <div class="mt-4">
+          <edit-asset-form-label label="Data samples"></edit-asset-form-label>
+          <div class="mt-6"></div>
+          <div
+            *ngFor="
+              let sample of form.advanced.controls.dataSampleUrls.controls;
+              let i = index
+            "
+            class="flex flex-row space-x-2 -mt-2">
+            <mat-form-field class="grow">
+              <mat-label>URL</mat-label>
+              <input
+                matInput
+                placeholder="https://my-org.com/my-data-offer/samples/1"
+                [formControl]="sample" />
+            </mat-form-field>
+            <button
+              mat-button
+              color="warn"
+              style="height: 42px; margin-top: 4px; margin-left: 8px"
+              (click)="form.onDataSampleUrlsRemoveClick($event, i)">
+              Remove
+            </button>
+          </div>
+          <div class="-mt-2">
+            <button
+              mat-button
+              color="accent"
+              (click)="form.onDataSampleUrlsAddClick($event)">
+              Add data sample
+            </button>
+          </div>
+        </div>
+        <!-- Reference file URLs -->
+        <div class="mt-4">
+          <edit-asset-form-label
+            label="Reference files"></edit-asset-form-label>
+          <div class="mt-6"></div>
+          <div
+            *ngFor="
+              let file of form.advanced.controls.referenceFileUrls.controls;
+              let i = index
+            "
+            class="flex flex-row space-x-2 -mt-2">
+            <mat-form-field class="grow">
+              <mat-label>URL</mat-label>
+              <input
+                matInput
+                placeholder="https://my-org.com/my-data-offer/documentation/api-reference"
+                [formControl]="file" />
+            </mat-form-field>
+            <button
+              mat-button
+              color="warn"
+              style="height: 42px; margin-top: 4px; margin-left: 8px"
+              (click)="form.onReferenceFileUrlsRemoveClick($event, i)">
+              Remove
+            </button>
+          </div>
+          <div class="-mt-2">
+            <button
+              mat-button
+              color="accent"
+              (click)="form.onReferenceFileUrlsAddClick($event)">
+              Add reference file
+            </button>
+          </div>
+        </div>
+        <!-- Reference files description -->
+        <div
+          *ngIf="form.advanced.controls.referenceFileUrls.length"
+          class="mt-2">
+          <edit-asset-form-label
+            label="Reference files description"
+            htmlFor="edit-asset-form-reference-files-description"
+            [ctrl]="
+              form.advanced.controls.referenceFilesDescription
+            "></edit-asset-form-label>
+          <mat-form-field class="w-full">
+            <textarea
+              id="edit-asset-form-reference-files-description"
+              class="h-28"
+              matInput
+              placeholder="..."
+              [formControl]="
+                form.advanced.controls.referenceFilesDescription
+              "></textarea>
+            <mat-hint
+              >Additional information regarding the reference files
+            </mat-hint>
+          </mat-form-field>
+        </div>
+      </ng-container>
+    </edit-asset-form-group>
+
+    <edit-asset-form-group
+      *ngIf="form.general.value.showAdvancedFields && form.advanced"
+      myTitle="Location / Time"
+      description="Fill out location and time information about the asset">
+      <!-- Temporal coverage -->
+      <div
+        *ngIf="form.advanced.controls.temporalCoverage; let ctrl"
+        class="mt-4">
+        <edit-asset-form-label
+          label="Temporal coverage"></edit-asset-form-label>
+        <mat-form-field class="w-full" color="accent">
+          <mat-date-range-input [formGroup]="ctrl" [rangePicker]="picker">
+            <input
+              matStartDate
+              formControlName="from"
+              placeholder="Start date" />
+            <input
+              matEndDate
+              formControlName="toInclusive"
+              placeholder="End date (inclusive)" />
+          </mat-date-range-input>
+          <mat-hint>DD/MM/YYYY (optional) – DD/MM/YYYY (optional)</mat-hint>
+          <mat-datepicker-toggle
+            matSuffix
+            [for]="picker"></mat-datepicker-toggle>
+          <mat-date-range-picker #picker></mat-date-range-picker>
+          <mat-error *ngIf="ctrl.invalid"
+            >{{ validationMessages.invalidDateRangeMessage }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <!-- Data update frequency -->
+      <div class="mt-3">
+        <edit-asset-form-label
+          label="Data update frequency"
+          htmlFor="create-asset-form-data-update-frequency"
+          [ctrl]="
+            form.advanced.controls.dataUpdateFrequency
+          "></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-data-update-frequency"
+            matInput
+            placeholder="every month"
+            [formControl]="form.advanced.controls.dataUpdateFrequency" />
+        </mat-form-field>
+      </div>
+
+      <!-- Geo reference method -->
+      <div>
+        <edit-asset-form-label
+          label="Geo reference method"
+          htmlFor="create-asset-form-geo-ref-method"
+          [ctrl]="
+            form.advanced.controls.geoReferenceMethod
+          "></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-geo-ref-method"
+            matInput
+            placeholder="Lat/Lon"
+            [formControl]="form.advanced.controls.geoReferenceMethod" />
+        </mat-form-field>
+      </div>
+
+      <!-- Geo location -->
+      <div>
+        <edit-asset-form-label
+          label="Geo location"
+          htmlFor="create-asset-form-geo-location"
+          [ctrl]="form.advanced.controls.geoLocation"></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-geo-location"
+            matInput
+            placeholder="40.741895,-73.989308"
+            [formControl]="form.advanced.controls.geoLocation" />
+        </mat-form-field>
+      </div>
+
+      <!-- NUTS locations -->
+      <div>
+        <edit-asset-form-label label="NUTS locations"></edit-asset-form-label>
+        <div class="mt-6"></div>
+        <div
+          *ngFor="
+            let location of form.advanced.controls.nutsLocations.controls;
+            let i = index
+          "
+          class="flex flex-row space-x-2 -mt-2">
+          <mat-form-field class="grow">
+            <mat-label>NUTS location</mat-label>
+            <input matInput placeholder="DE929" [formControl]="location" />
+          </mat-form-field>
+          <button
+            mat-button
+            color="warn"
+            style="height: 42px; margin-top: 4px; margin-left: 8px"
+            (click)="form.onNutsLocationsRemoveClick($event, i)">
+            Remove
+          </button>
+        </div>
+        <div class="-mt-2">
+          <button
+            mat-button
+            color="accent"
+            (click)="form.onNutsLocationsAddClick($event)">
+            Add location
+          </button>
+        </div>
+      </div>
+    </edit-asset-form-group>
+
+    <edit-asset-form-group
+      *ngIf="form.general.value.showAdvancedFields"
+      myTitle="Legal Information"
+      description="Provide legal information and define the conditions for use">
+      <!-- Sovereign legal name -->
+      <div *ngIf="form.advanced">
+        <edit-asset-form-label
+          label="Sovereign"
+          htmlFor="create-asset-form-sovereign"
+          [ctrl]="
+            form.advanced.controls.sovereignLegalName
+          "></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-sovereign"
+            matInput
+            placeholder="Data Owning Company GMBH"
+            [formControl]="form.advanced.controls.sovereignLegalName" />
+          <mat-hint>Legal name of the data owner</mat-hint>
+        </mat-form-field>
+      </div>
+
+      <!-- Publisher -->
+      <div class="mt-3">
+        <edit-asset-form-label
+          label="Publisher"
+          htmlFor="create-asset-form-publisher"
+          [ctrl]="form.general.controls.publisher"></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-publisher"
+            matInput
+            type="text"
+            placeholder="https://"
+            [formControl]="form.general.controls.publisher" />
+        </mat-form-field>
+      </div>
+
+      <!-- Standard License -->
+      <div>
+        <edit-asset-form-label
+          label="Standard License"
+          htmlFor="create-asset-form-standard-license"
+          [ctrl]="
+            form.general.controls.standardLicense
+          "></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <input
+            id="create-asset-form-standard-license"
+            matInput
+            type="text"
+            placeholder="https://"
+            [formControl]="form.general.controls.standardLicense" />
+        </mat-form-field>
+      </div>
+
+      <!-- Conditions for use -->
+      <div *ngIf="form.advanced">
+        <edit-asset-form-label
+          label="Conditions for use"
+          htmlFor="create-asset-form-conditions-for-use"
+          [ctrl]="
+            form.advanced.controls.conditionsForUse
+          "></edit-asset-form-label>
+        <mat-form-field class="w-full">
+          <textarea
+            id="create-asset-form-conditions-for-use"
+            class="h-28"
+            matInput
+            placeholder="Please cite the dataset as..."
+            [formControl]="form.advanced.controls.conditionsForUse"></textarea>
+          <mat-hint
+            >Additional not legally relevant usage instructions (e.g. how to
+            cite the dataset)
+          </mat-hint>
+        </mat-form-field>
+      </div>
+    </edit-asset-form-group>
+    <button
+      class="w-40 h-10 self-end"
+      mat-raised-button
+      color="primary"
+      [disabled]="!form.all.valid || isLoading"
+      (click)="$event.preventDefault(); submitClicked.emit()">
+      {{ form.mode === 'CREATE' ? 'Create' : 'Update' }}
+    </button>
+  </form>
+</div>
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form/edit-asset-form.component.ts b/src/app/component-library/edit-asset-form/edit-asset-form/edit-asset-form.component.ts
new file mode 100644
index 000000000..59477a806
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/edit-asset-form.component.ts
@@ -0,0 +1,21 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ValidationMessages} from 'src/app/core/validators/validation-messages';
+import {EditAssetForm} from './form/edit-asset-form';
+import {DATA_SOURCE_HTTP_METHODS} from './form/http-methods';
+
+@Component({
+  selector: 'edit-asset-form',
+  templateUrl: './edit-asset-form.component.html',
+  providers: [],
+})
+export class EditAssetFormComponent {
+  @Input() isLoading!: boolean;
+  @Output() submitClicked = new EventEmitter();
+
+  methods = DATA_SOURCE_HTTP_METHODS;
+
+  constructor(
+    public form: EditAssetForm,
+    public validationMessages: ValidationMessages,
+  ) {}
+}
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-advanced-form-builder.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/asset-advanced-form-builder.ts
similarity index 85%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-advanced-form-builder.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/asset-advanced-form-builder.ts
index 3c5df5bdf..9fffeccb7 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-advanced-form-builder.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/asset-advanced-form-builder.ts
@@ -2,20 +2,20 @@ import {Injectable} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {urlValidator} from 'src/app/core/validators/url-validator';
 import {validOptionalDateRange} from 'src/app/core/validators/valid-optional-date-range';
-import {AssetAdvancedFormModel} from './model/asset-advanced-form-model';
-import {AssetEditorDialogFormValue} from './model/asset-editor-dialog-form-model';
+import {
+  AssetAdvancedFormModel,
+  AssetAdvancedFormValue,
+} from './model/asset-advanced-form-model';
 
 @Injectable()
 export class AssetAdvancedFormBuilder {
   constructor(private formBuilder: FormBuilder) {}
 
   buildFormGroup(
-    initial: AssetEditorDialogFormValue['advanced'],
+    initial: AssetAdvancedFormValue,
   ): FormGroup<AssetAdvancedFormModel> {
     return this.formBuilder.nonNullable.group({
       dataModel: initial?.dataModel!,
-      dataCategory: [initial?.dataCategory || null, Validators.required],
-      dataSubcategory: initial?.dataSubcategory || null,
       transportMode: initial?.transportMode || null,
       geoReferenceMethod: initial?.geoReferenceMethod!,
       sovereignLegalName: initial?.sovereignLegalName!,
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-datasource-form-builder.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/asset-datasource-form-builder.ts
similarity index 92%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-datasource-form-builder.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/asset-datasource-form-builder.ts
index 0fafca5dc..e3d871fc7 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-datasource-form-builder.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/asset-datasource-form-builder.ts
@@ -1,9 +1,9 @@
 import {Injectable} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {switchDisabledControls} from 'src/app/core/utils/form-group-utils';
+import {jsonValidator} from 'src/app/core/validators/json-validator';
+import {urlValidator} from 'src/app/core/validators/url-validator';
 import {validQueryParam} from 'src/app/core/validators/valid-query-param';
-import {switchDisabledControls} from '../../../../../core/utils/form-group-utils';
-import {jsonValidator} from '../../../../../core/validators/json-validator';
-import {urlValidator} from '../../../../../core/validators/url-validator';
 import {assetDatasourceFormEnabledCtrls} from './model/asset-datasource-form-enabled-ctrls';
 import {
   AssetDatasourceFormModel,
@@ -27,6 +27,8 @@ export class AssetDatasourceFormBuilder {
   ): FormGroup<AssetDatasourceFormModel> {
     const datasource: FormGroup<AssetDatasourceFormModel> =
       this.formBuilder.nonNullable.group({
+        dataSourceAvailability: initial?.dataSourceAvailability!,
+
         dataAddressType: initial?.dataAddressType!,
         dataDestination: [
           initial?.dataDestination!,
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form/form/asset-general-form-builder.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/asset-general-form-builder.ts
new file mode 100644
index 000000000..9b0e3492a
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/asset-general-form-builder.ts
@@ -0,0 +1,99 @@
+import {Injectable} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {combineLatest, distinctUntilChanged, pairwise} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {ActiveFeatureSet} from 'src/app/core/config/active-feature-set';
+import {value$} from 'src/app/core/utils/form-group-utils';
+import {noWhitespacesOrColonsValidator} from 'src/app/core/validators/no-whitespaces-or-colons-validator';
+import {AssetsIdValidatorBuilder} from '../assets-id-validator-builder';
+import {AssetEditDialogMode} from './model/asset-edit-dialog-mode';
+import {
+  AssetGeneralFormModel,
+  AssetGeneralFormValue,
+} from './model/asset-general-form-model';
+
+@Injectable()
+export class AssetGeneralFormBuilder {
+  constructor(
+    private formBuilder: FormBuilder,
+    private assetsIdValidatorBuilder: AssetsIdValidatorBuilder,
+    private activeFeatureSet: ActiveFeatureSet,
+  ) {}
+
+  buildFormGroup(
+    initial: AssetGeneralFormValue,
+    mode: AssetEditDialogMode,
+  ): FormGroup<AssetGeneralFormModel> {
+    const general: FormGroup<AssetGeneralFormModel> =
+      this.formBuilder.nonNullable.group({
+        id: [
+          initial.id!,
+          [Validators.required, noWhitespacesOrColonsValidator],
+          [this.assetsIdValidatorBuilder.assetIdDoesNotExistsValidator()],
+        ],
+        name: [initial.name!, Validators.required],
+        description: [initial.description!],
+        keywords: [initial.keywords!],
+        showAdvancedFields: [initial.showAdvancedFields || false],
+        version: [initial.version!],
+        contentType: [initial.contentType!],
+        language: [initial.language || null],
+        publisher: [initial.publisher!],
+        standardLicense: [initial.standardLicense!],
+        endpointDocumentation: [initial.endpointDocumentation!],
+      });
+
+    if (this.activeFeatureSet.hasMdsFields()) {
+      general.addControl(
+        'dataCategory',
+        this.formBuilder.control(
+          initial.dataCategory || null,
+          Validators.required,
+        ),
+      );
+      general.addControl(
+        'dataSubcategory',
+        this.formBuilder.control(initial.dataSubcategory || null),
+      );
+    }
+
+    if (mode === 'CREATE') {
+      this.initIdGeneration(general.controls.id, general.controls.name);
+    } else {
+      general.controls.id.disable();
+    }
+
+    return general;
+  }
+
+  private initIdGeneration(
+    idCtrl: FormControl<string>,
+    nameCtrl: FormControl<string>,
+  ) {
+    combineLatest([value$<string>(nameCtrl).pipe(distinctUntilChanged())])
+      .pipe(
+        map(([title]) => this.generateId(title)),
+        pairwise(),
+      )
+      .subscribe(([previousId, currentId]) => {
+        if (!idCtrl.value || idCtrl.value === previousId) {
+          idCtrl.setValue(currentId);
+        }
+      });
+  }
+
+  private generateId(name: string | null) {
+    if (!name) {
+      return '';
+    }
+    return this.cleanIdComponent(name);
+  }
+
+  private cleanIdComponent(s: string | null) {
+    return (s ?? '')
+      .trim()
+      .replace(':', '-')
+      .replaceAll(' ', '-')
+      .toLowerCase();
+  }
+}
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-edit-dialog-form-mapper.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/edit-asset-form-initializer.ts
similarity index 67%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-edit-dialog-form-mapper.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/edit-asset-form-initializer.ts
index 8e3924784..1a5de70af 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-edit-dialog-form-mapper.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/edit-asset-form-initializer.ts
@@ -1,61 +1,72 @@
 import {Injectable} from '@angular/core';
-import {UiAssetMapped} from '../../../../../core/services/models/ui-asset-mapped';
+import {UiAssetMapped} from 'src/app/core/services/models/ui-asset-mapped';
 import {LanguageSelectItemService} from '../../language-select/language-select-item.service';
 import {AssetDatasourceFormValue} from './model/asset-datasource-form-model';
-import {AssetEditorDialogFormValue} from './model/asset-editor-dialog-form-model';
+import {EditAssetFormValue} from './model/edit-asset-form-model';
 
 /**
- * Handles AngularForms for AssetEditorDialog
+ * Handles AngularForms for Edit Asset Form
  */
 @Injectable()
-export class AssetEditDialogFormMapper {
+export class EditAssetFormInitializer {
   constructor(private languageSelectItemService: LanguageSelectItemService) {}
 
-  forCreate(): AssetEditorDialogFormValue {
+  forCreate(): EditAssetFormValue {
     return {
       mode: 'CREATE',
-      metadata: {
+      general: {
         id: '',
-        title: '',
-        version: '',
-        contentType: '',
+        name: '',
         description: '',
         keywords: [],
+        dataCategory: null,
+        dataSubcategory: null,
+        version: '',
+        contentType: '',
         language: this.languageSelectItemService.english(),
         publisher: '',
         standardLicense: '',
         endpointDocumentation: '',
+        showAdvancedFields: false,
       },
       advanced: {
         dataModel: '',
-        dataCategory: null,
-        dataSubcategory: null,
         transportMode: null,
         geoReferenceMethod: '',
+        conditionsForUse: '',
+        dataUpdateFrequency: '',
+        sovereignLegalName: '',
+        geoLocation: '',
+        nutsLocations: [],
+        dataSampleUrls: [],
+        referenceFileUrls: [],
+        referenceFilesDescription: '',
+        temporalCoverage: {from: null, toInclusive: null},
       },
       datasource: this.emptyHttpDatasource(),
     };
   }
 
-  forEdit(asset: UiAssetMapped): AssetEditorDialogFormValue {
+  forEdit(asset: UiAssetMapped): EditAssetFormValue {
     return {
       mode: 'EDIT',
-      metadata: {
+      general: {
         id: asset.assetId,
-        title: asset.title,
-        version: asset.version,
-        contentType: asset.mediaType,
+        name: asset.title,
         description: asset.description,
         keywords: asset.keywords,
+        dataCategory: asset.dataCategory,
+        dataSubcategory: asset.dataSubcategory,
+        version: asset.version,
+        contentType: asset.mediaType,
         language: asset.language,
         publisher: asset.publisherHomepage,
         standardLicense: asset.licenseUrl,
         endpointDocumentation: asset.landingPageUrl,
+        showAdvancedFields: true,
       },
       advanced: {
         dataModel: asset.dataModel,
-        dataCategory: asset.dataCategory,
-        dataSubcategory: asset.dataSubcategory,
         transportMode: asset.transportMode,
         geoReferenceMethod: asset.geoReferenceMethod,
         sovereignLegalName: asset.sovereignLegalName,
@@ -71,12 +82,16 @@ export class AssetEditDialogFormMapper {
           toInclusive: asset.temporalCoverageToInclusive,
         },
       },
-      datasource: this.emptyEditDatasource(),
+      datasource: this.emptyEditDatasource(asset),
     };
   }
 
   private emptyHttpDatasource(): AssetDatasourceFormValue {
     return {
+      dataSourceAvailability: 'On-Request',
+      contactEmail: '',
+      contactPreferredEmailSubject: '',
+
       dataAddressType: 'Http',
       dataDestination: '',
 
@@ -98,10 +113,13 @@ export class AssetEditDialogFormMapper {
     };
   }
 
-  private emptyEditDatasource(): AssetDatasourceFormValue {
+  private emptyEditDatasource(asset: UiAssetMapped): AssetDatasourceFormValue {
     return {
       ...this.emptyHttpDatasource(),
-      dataAddressType: 'Unchanged',
+      dataSourceAvailability:
+        asset.dataSourceAvailability === 'LIVE' ? 'Unchanged' : 'On-Request',
+      contactEmail: asset.onRequestContactEmail ?? '',
+      contactPreferredEmailSubject: asset.onRequestContactEmailSubject ?? '',
     };
   }
 }
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-edit-dialog-form.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/edit-asset-form.ts
similarity index 53%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-edit-dialog-form.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/edit-asset-form.ts
index 2ca953ccf..6834e127c 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-edit-dialog-form.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/edit-asset-form.ts
@@ -1,68 +1,47 @@
 import {Injectable} from '@angular/core';
 import {FormBuilder, FormGroup} from '@angular/forms';
-import {DataAddressType} from '../../../../../component-library/data-address/data-address-type-select/data-address-type';
-import {ActiveFeatureSet} from '../../../../../core/config/active-feature-set';
+import {ActiveFeatureSet} from 'src/app/core/config/active-feature-set';
 import {DataCategorySelectItem} from '../../data-category-select/data-category-select-item';
-import {AssetEditDialogMode} from '../asset-edit-dialog-mode';
 import {AssetAdvancedFormBuilder} from './asset-advanced-form-builder';
 import {AssetDatasourceFormBuilder} from './asset-datasource-form-builder';
-import {AssetMetadataFormBuilder} from './asset-metadata-form-builder';
+import {AssetGeneralFormBuilder} from './asset-general-form-builder';
 import {AssetAdvancedFormModel} from './model/asset-advanced-form-model';
 import {AssetDatasourceFormModel} from './model/asset-datasource-form-model';
+import {AssetEditDialogMode} from './model/asset-edit-dialog-mode';
+import {AssetGeneralFormModel} from './model/asset-general-form-model';
+import {DataAddress} from './model/data-address';
 import {
-  AssetEditorDialogFormModel,
-  AssetEditorDialogFormValue,
-} from './model/asset-editor-dialog-form-model';
-import {AssetMetadataFormModel} from './model/asset-metadata-form-model';
+  EditAssetFormModel,
+  EditAssetFormValue,
+} from './model/edit-asset-form-model';
 
 /**
- * Handles AngularForms for AssetEditorDialog
+ * Handles AngularForms for Edit Asset Form
  */
 @Injectable()
-export class AssetEditDialogForm {
-  all!: FormGroup<AssetEditorDialogFormModel>;
-
-  /**
-   * FormGroup for stepper step "Metadata"
-   */
-  metadata!: AssetEditorDialogFormModel['metadata'];
-
-  /**
-   * FormGroup for stepper step "Advanced"
-   */
-  advanced!: AssetEditorDialogFormModel['advanced'];
-
-  /**
-   * FormGroup for stepper step "Data Source"
-   */
-  datasource!: AssetEditorDialogFormModel['datasource'];
-
-  /**
-   * Quick access to selected data address type
-   */
-  get dataAddressType(): DataAddressType | null {
-    return this.datasource!.controls.dataAddressType.value;
-  }
+export class EditAssetForm {
+  all!: FormGroup<EditAssetFormModel>;
 
-  /**
-   * Quick access to selected data category
-   */
-  get dataCategory(): DataCategorySelectItem | null {
-    return this.advanced!.controls.dataCategory.value;
+  general!: EditAssetFormModel['general'];
+
+  datasource!: EditAssetFormModel['datasource'];
+
+  advanced!: EditAssetFormModel['advanced'];
+
+  get value(): EditAssetFormValue {
+    return this.all.value;
   }
 
-  /**
-   * Quick Access to Dialog Mode
-   */
   get mode(): AssetEditDialogMode {
     return this.all.controls.mode.value;
   }
 
-  /**
-   * Quick access to full value
-   */
-  get value(): AssetEditorDialogFormValue {
-    return this.all.value;
+  get dataAddressType(): DataAddress | null {
+    return this.datasource!.controls.dataAddressType.value;
+  }
+
+  get dataCategory(): DataCategorySelectItem | null {
+    return this.general.controls.dataCategory!.value;
   }
 
   get proxyMethod(): boolean {
@@ -79,50 +58,47 @@ export class AssetEditDialogForm {
 
   constructor(
     private formBuilder: FormBuilder,
-    private activeFeatureSet: ActiveFeatureSet,
-    private assetMetadataFormBuilder: AssetMetadataFormBuilder,
-    private assetAdvancedFormBuilder: AssetAdvancedFormBuilder,
+    private assetGeneralFormBuilder: AssetGeneralFormBuilder,
     private assetDatasourceFormBuilder: AssetDatasourceFormBuilder,
+    private assetAdvancedFormBuilder: AssetAdvancedFormBuilder,
+    private activeFeatureSet: ActiveFeatureSet,
   ) {}
 
-  reset(initial: AssetEditorDialogFormValue) {
+  reset(initial: EditAssetFormValue) {
     this.all = this.buildFormGroup(initial);
-    this.metadata = this.all.controls.metadata;
-    this.advanced = this.all.controls.advanced;
+    this.general = this.all.controls.general;
     this.datasource = this.all.controls.datasource;
+    this.advanced = this.all.controls.advanced;
   }
 
-  buildFormGroup(
-    initial: AssetEditorDialogFormValue,
-  ): FormGroup<AssetEditorDialogFormModel> {
-    const metadata: FormGroup<AssetMetadataFormModel> =
-      this.assetMetadataFormBuilder.buildFormGroup(
-        initial.metadata!,
+  buildFormGroup(initial: EditAssetFormValue): FormGroup<EditAssetFormModel> {
+    const general: FormGroup<AssetGeneralFormModel> =
+      this.assetGeneralFormBuilder.buildFormGroup(
+        initial.general!,
         initial.mode!,
       );
 
-    const formGroup: FormGroup<AssetEditorDialogFormModel> =
+    const datasource: FormGroup<AssetDatasourceFormModel> =
+      this.assetDatasourceFormBuilder.buildFormGroup(initial.datasource!);
+
+    const formGroup: FormGroup<EditAssetFormModel> =
       this.formBuilder.nonNullable.group({
         mode: [initial.mode as AssetEditDialogMode],
-        metadata,
+        general,
+        datasource,
       });
 
     if (this.activeFeatureSet.hasMdsFields()) {
       const advanced: FormGroup<AssetAdvancedFormModel> =
-        this.assetAdvancedFormBuilder.buildFormGroup(initial.advanced);
+        this.assetAdvancedFormBuilder.buildFormGroup(initial.advanced!);
       formGroup.addControl('advanced', advanced);
     }
 
-    if (initial.mode !== 'EDIT') {
-      const datasource: FormGroup<AssetDatasourceFormModel> =
-        this.assetDatasourceFormBuilder.buildFormGroup(initial.datasource!);
-      formGroup.addControl('datasource', datasource);
-    }
-
     return formGroup;
   }
 
-  onHttpHeadersAddClick() {
+  onHttpHeadersAddClick(buttonClickedEvent: Event) {
+    buttonClickedEvent.preventDefault();
     this.datasource!.controls.httpHeaders.push(
       this.assetDatasourceFormBuilder.buildHeaderFormGroup({
         headerName: '',
@@ -131,11 +107,13 @@ export class AssetEditDialogForm {
     );
   }
 
-  onHttpHeadersRemoveClick(index: number) {
+  onHttpHeadersRemoveClick(buttonClickedEvent: Event, index: number) {
+    buttonClickedEvent.preventDefault();
     this.datasource!.controls.httpHeaders.removeAt(index);
   }
 
-  onHttpQueryParamsAddClick() {
+  onHttpQueryParamsAddClick(buttonClickedEvent: Event) {
+    buttonClickedEvent.preventDefault();
     this.datasource!.controls.httpQueryParams.push(
       this.assetDatasourceFormBuilder.buildQueryParamFormGroup({
         paramName: '',
@@ -144,37 +122,45 @@ export class AssetEditDialogForm {
     );
   }
 
-  onHttpQueryParamsRemoveClick(index: number) {
+  // markAllAsTouched added as a workaround to get labels outside of mat-form-field to show invalid state correctly
+  onHttpQueryParamsRemoveClick(buttonClickedEvent: Event, index: number) {
+    buttonClickedEvent.preventDefault();
     this.datasource!.controls.httpQueryParams.removeAt(index);
   }
 
-  onNutsLocationsAddClick() {
+  onNutsLocationsAddClick(buttonClickedEvent: Event) {
+    buttonClickedEvent.preventDefault();
     this.advanced!.controls.nutsLocations.push(
       this.assetAdvancedFormBuilder.buildRequiredString(''),
     );
   }
 
-  onNutsLocationsRemoveClick(index: number) {
+  onNutsLocationsRemoveClick(buttonClickedEvent: Event, index: number) {
+    buttonClickedEvent.preventDefault();
     this.advanced!.controls.nutsLocations.removeAt(index);
   }
 
-  onDataSampleUrlsAddClick() {
+  onDataSampleUrlsAddClick(buttonClickedEvent: Event) {
+    buttonClickedEvent.preventDefault();
     this.advanced!.controls.dataSampleUrls.push(
       this.assetAdvancedFormBuilder.buildRequiredUrl(''),
     );
   }
 
-  onDataSampleUrlsRemoveClick(index: number) {
+  onDataSampleUrlsRemoveClick(buttonClickedEvent: Event, index: number) {
+    buttonClickedEvent.preventDefault();
     this.advanced!.controls.dataSampleUrls.removeAt(index);
   }
 
-  onReferenceFileUrlsAddClick() {
+  onReferenceFileUrlsAddClick(buttonClickedEvent: Event) {
+    buttonClickedEvent.preventDefault();
     this.advanced!.controls.referenceFileUrls.push(
       this.assetAdvancedFormBuilder.buildRequiredUrl(''),
     );
   }
 
-  onReferenceFileUrlsRemoveClick(index: number) {
+  onReferenceFileUrlsRemoveClick(buttonClickedEvent: Event, index: number) {
+    buttonClickedEvent.preventDefault();
     this.advanced!.controls.referenceFileUrls.removeAt(index);
   }
 }
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/http-methods.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/http-methods.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/http-methods.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/http-methods.ts
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-advanced-form-model.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-advanced-form-model.ts
similarity index 70%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-advanced-form-model.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-advanced-form-model.ts
index 6dd62daba..4c9c803ac 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-advanced-form-model.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-advanced-form-model.ts
@@ -4,18 +4,14 @@ import {
   FormGroup,
   ɵFormGroupValue,
 } from '@angular/forms';
-import {DataCategorySelectItem} from '../../../data-category-select/data-category-select-item';
-import {DataSubcategorySelectItem} from '../../../data-subcategory-select/data-subcategory-select-item';
 import {TransportModeSelectItem} from '../../../transport-mode-select/transport-mode-select-item';
 import {TemporalCoverageFormModel} from './temporal-coverage-form-model';
 
 /**
- * Form Model for AssetEditorDialog > Advanced
+ * Form Model for Edit Asset Form > Advanced
  * (MDS Properties)
  */
 export interface AssetAdvancedFormModel {
-  dataCategory: FormControl<DataCategorySelectItem | null>;
-  dataSubcategory: FormControl<DataSubcategorySelectItem | null>;
   dataModel: FormControl<string>;
   geoReferenceMethod: FormControl<string>;
   transportMode: FormControl<TransportModeSelectItem | null>;
@@ -31,6 +27,6 @@ export interface AssetAdvancedFormModel {
 }
 
 /**
- * Form Value for AssetEditorDialog > Advanced
+ * Form Value for Edit Asset Form > Advanced
  */
 export type AssetAdvancedFormValue = ɵFormGroupValue<AssetAdvancedFormModel>;
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-datasource-form-enabled-ctrls.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-datasource-form-enabled-ctrls.ts
similarity index 79%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-datasource-form-enabled-ctrls.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-datasource-form-enabled-ctrls.ts
index 3767c8248..11b6830b5 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-datasource-form-enabled-ctrls.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-datasource-form-enabled-ctrls.ts
@@ -9,27 +9,29 @@ export const assetDatasourceFormEnabledCtrls = (
   const customDataAddressJson =
     value.dataAddressType === 'Custom-Data-Address-Json';
 
-  const onRequest = value.dataAddressType === 'On-Request';
+  const onRequest = value.dataSourceAvailability === 'On-Request';
 
-  const http = value.dataAddressType === 'Http';
+  const http = value.dataAddressType === 'Http' && !onRequest;
   const httpAuth = value.httpAuthHeaderType !== 'None';
   const httpAuthByValue = value.httpAuthHeaderType === 'Value';
   const httpAuthByVault = value.httpAuthHeaderType === 'Vault-Secret';
   const proxyPath = !!value.httpProxyPath;
 
   return {
-    dataAddressType: true,
-
-    // Custom Datasource JSON
-    dataDestination: customDataAddressJson,
+    dataSourceAvailability: true,
 
     // On Request Datasource
     contactEmail: onRequest,
     contactPreferredEmailSubject: onRequest,
 
+    dataAddressType: !onRequest,
+
+    // Custom Datasource JSON
+    dataDestination: !onRequest && customDataAddressJson,
+
     // Http Datasource Fields
     httpUrl: http,
-    httpMethod: http,
+    httpMethod: http && !value.httpProxyMethod,
 
     httpAuthHeaderType: http,
     httpAuthHeaderName: http && httpAuth,
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-datasource-form-model.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-datasource-form-model.ts
similarity index 83%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-datasource-form-model.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-datasource-form-model.ts
index cc5f49260..3da71b80f 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-datasource-form-model.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-datasource-form-model.ts
@@ -5,16 +5,19 @@ import {
   ɵFormGroupValue,
 } from '@angular/forms';
 import {UiDataSourceHttpDataMethod} from '@sovity.de/edc-client';
-import {DataAddressType} from '../../../../../../component-library/data-address/data-address-type-select/data-address-type';
+import {DataAddress} from './data-address';
+import {DatasourceType} from './datasource-type';
 import {HttpDatasourceAuthHeaderType} from './http-datasource-auth-header-type';
 import {HttpDatasourceHeaderFormModel} from './http-datasource-header-form-model';
 import {HttpDatasourceQueryParamFormModel} from './http-datasource-query-param-form-model';
 
 /**
- * Form Model for AssetEditorDialog > Datasource
+ * Form Model for Edit Asset Form > Datasource
  */
 export interface AssetDatasourceFormModel {
-  dataAddressType: FormControl<DataAddressType>;
+  dataSourceAvailability: FormControl<DatasourceType>;
+
+  dataAddressType: FormControl<DataAddress>;
 
   // Custom Datasource JSON
   dataDestination: FormControl<string>;
@@ -41,7 +44,7 @@ export interface AssetDatasourceFormModel {
 }
 
 /**
- * Form Value for AssetEditorDialog > Datasource
+ * Form Value for Edit Asset Form > Datasource
  */
 export type AssetDatasourceFormValue =
   ɵFormGroupValue<AssetDatasourceFormModel>;
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog-mode.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-edit-dialog-mode.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog-mode.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-edit-dialog-mode.ts
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-general-form-model.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-general-form-model.ts
new file mode 100644
index 000000000..67fdf44ab
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-general-form-model.ts
@@ -0,0 +1,28 @@
+import {FormControl, ɵFormGroupValue} from '@angular/forms';
+import {DataCategorySelectItem} from '../../../data-category-select/data-category-select-item';
+import {DataSubcategorySelectItem} from '../../../data-subcategory-select/data-subcategory-select-item';
+import {LanguageSelectItem} from '../../../language-select/language-select-item';
+
+/**
+ * Form Model for Edit Asset Form > General
+ */
+export interface AssetGeneralFormModel {
+  id: FormControl<string>;
+  name: FormControl<string>;
+  description: FormControl<string>;
+  keywords: FormControl<string[]>;
+  dataCategory?: FormControl<DataCategorySelectItem | null>;
+  dataSubcategory?: FormControl<DataSubcategorySelectItem | null>;
+  showAdvancedFields: FormControl<boolean>;
+  version: FormControl<string>;
+  contentType: FormControl<string>;
+  language: FormControl<LanguageSelectItem | null>;
+  publisher: FormControl<string>;
+  standardLicense: FormControl<string>;
+  endpointDocumentation: FormControl<string>;
+}
+
+/**
+ * Form Value for Edit Asset Form > General
+ */
+export type AssetGeneralFormValue = ɵFormGroupValue<AssetGeneralFormModel>;
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form/form/model/data-address.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/data-address.ts
new file mode 100644
index 000000000..5186bd121
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/data-address.ts
@@ -0,0 +1,4 @@
+export type DataAddress =
+  | 'Custom-Data-Address-Json'
+  | 'Custom-Transfer-Process-Request'
+  | 'Http';
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form/form/model/datasource-type.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/datasource-type.ts
new file mode 100644
index 000000000..c738373ca
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/datasource-type.ts
@@ -0,0 +1 @@
+export type DatasourceType = 'Datasource' | 'On-Request' | 'Unchanged';
diff --git a/src/app/component-library/edit-asset-form/edit-asset-form/form/model/edit-asset-form-model.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/edit-asset-form-model.ts
new file mode 100644
index 000000000..73e6599c3
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/edit-asset-form-model.ts
@@ -0,0 +1,20 @@
+import {FormControl, FormGroup, ɵFormGroupValue} from '@angular/forms';
+import {AssetAdvancedFormModel} from './asset-advanced-form-model';
+import {AssetDatasourceFormModel} from './asset-datasource-form-model';
+import {AssetEditDialogMode} from './asset-edit-dialog-mode';
+import {AssetGeneralFormModel} from './asset-general-form-model';
+
+/**
+ * Form Model for Edit Asset Form
+ */
+export interface EditAssetFormModel {
+  mode: FormControl<AssetEditDialogMode>;
+  general: FormGroup<AssetGeneralFormModel>;
+  datasource: FormGroup<AssetDatasourceFormModel>;
+  advanced?: FormGroup<AssetAdvancedFormModel>;
+}
+
+/**
+ * Form Value for Edit Asset Form
+ */
+export type EditAssetFormValue = ɵFormGroupValue<EditAssetFormModel>;
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-auth-header-type.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-auth-header-type.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-auth-header-type.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-auth-header-type.ts
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-header-form-model.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-header-form-model.ts
similarity index 67%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-header-form-model.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-header-form-model.ts
index 784e9d096..17739e929 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-header-form-model.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-header-form-model.ts
@@ -1,7 +1,7 @@
 import {FormControl, ɵFormGroupValue} from '@angular/forms';
 
 /**
- * Form Model for AssetEditorDialog > Datasource > HTTP/REST > Header
+ * Form Model for Edit Asset Form > Datasource > HTTP/REST > Header
  */
 export interface HttpDatasourceHeaderFormModel {
   headerName: FormControl<string>;
@@ -9,7 +9,7 @@ export interface HttpDatasourceHeaderFormModel {
 }
 
 /**
- * Form Value for AssetEditorDialog > Datasource > HTTP/REST > Header
+ * Form Value for Edit Asset Form > Datasource > HTTP/REST > Header
  */
 export type HttpDatasourceHeaderFormValue =
   ɵFormGroupValue<HttpDatasourceHeaderFormModel>;
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-query-param-form-model.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-query-param-form-model.ts
similarity index 68%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-query-param-form-model.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-query-param-form-model.ts
index 719bf5448..747723c5a 100644
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-query-param-form-model.ts
+++ b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-query-param-form-model.ts
@@ -1,7 +1,7 @@
 import {FormControl, ɵFormGroupValue} from '@angular/forms';
 
 /**
- * Form Model for AssetEditorDialog > Datasource > HTTP/REST > Header
+ * Form Model for Edit Asset Form > Datasource > HTTP/REST > Header
  */
 export interface HttpDatasourceQueryParamFormModel {
   paramName: FormControl<string>;
@@ -9,7 +9,7 @@ export interface HttpDatasourceQueryParamFormModel {
 }
 
 /**
- * Form Value for AssetEditorDialog > Datasource > HTTP/REST > QueryParam
+ * Form Value for Edit Asset Form > Datasource > HTTP/REST > QueryParam
  */
 export type HttpDatasourceQueryParamFormValue =
   ɵFormGroupValue<HttpDatasourceQueryParamFormModel>;
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/temporal-coverage-form-model.ts b/src/app/component-library/edit-asset-form/edit-asset-form/form/model/temporal-coverage-form-model.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/temporal-coverage-form-model.ts
rename to src/app/component-library/edit-asset-form/edit-asset-form/form/model/temporal-coverage-form-model.ts
diff --git a/src/app/routes/connector-ui/asset-page/keyword-select/keyword-select.component.html b/src/app/component-library/edit-asset-form/keyword-select/keyword-select.component.html
similarity index 74%
rename from src/app/routes/connector-ui/asset-page/keyword-select/keyword-select.component.html
rename to src/app/component-library/edit-asset-form/keyword-select/keyword-select.component.html
index 198ba94b7..df7acea8e 100644
--- a/src/app/routes/connector-ui/asset-page/keyword-select/keyword-select.component.html
+++ b/src/app/component-library/edit-asset-form/keyword-select/keyword-select.component.html
@@ -1,5 +1,8 @@
-<mat-form-field class="grow" appearance="outline" color="accent">
-  <mat-label>{{ label }}</mat-label>
+<edit-asset-form-label
+  htmlFor="create-asset-form-keywords"
+  [ctrl]="control"
+  [label]="label"></edit-asset-form-label>
+<mat-form-field class="w-full">
   <mat-chip-list
     #chipList
     aria-label="keyword selection"
@@ -13,6 +16,7 @@
       </button>
     </mat-chip>
     <input
+      id="create-asset-form-keywords"
       placeholder="Add keyword..."
       [matChipInputAddOnBlur]="true"
       [matChipInputFor]="chipList"
diff --git a/src/app/routes/connector-ui/asset-page/keyword-select/keyword-select.component.ts b/src/app/component-library/edit-asset-form/keyword-select/keyword-select.component.ts
similarity index 80%
rename from src/app/routes/connector-ui/asset-page/keyword-select/keyword-select.component.ts
rename to src/app/component-library/edit-asset-form/keyword-select/keyword-select.component.ts
index bdfb24b83..81e602161 100644
--- a/src/app/routes/connector-ui/asset-page/keyword-select/keyword-select.component.ts
+++ b/src/app/component-library/edit-asset-form/keyword-select/keyword-select.component.ts
@@ -1,8 +1,8 @@
 import {COMMA, ENTER, SEMICOLON} from '@angular/cdk/keycodes';
-import {Component, HostBinding, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {MatChipInputEvent} from '@angular/material/chips';
-import {removeOnce} from '../../../../core/utils/array-utils';
+import {removeOnce} from 'src/app/core/utils/array-utils';
 
 @Component({
   selector: 'keyword-select',
@@ -17,10 +17,6 @@ export class KeywordSelectComponent {
   @Input()
   control!: FormControl<string[]>;
 
-  @HostBinding('class.flex')
-  @HostBinding('class.flex-row')
-  cls = true;
-
   remove(keyword: string) {
     this.control.setValue(removeOnce(this.control.value, keyword));
   }
diff --git a/src/app/routes/connector-ui/asset-page/language-select/language-select-data.ts b/src/app/component-library/edit-asset-form/language-select/language-select-data.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/language-select/language-select-data.ts
rename to src/app/component-library/edit-asset-form/language-select/language-select-data.ts
diff --git a/src/app/routes/connector-ui/asset-page/language-select/language-select-item.service.ts b/src/app/component-library/edit-asset-form/language-select/language-select-item.service.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/language-select/language-select-item.service.ts
rename to src/app/component-library/edit-asset-form/language-select/language-select-item.service.ts
diff --git a/src/app/routes/connector-ui/asset-page/language-select/language-select-item.ts b/src/app/component-library/edit-asset-form/language-select/language-select-item.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/language-select/language-select-item.ts
rename to src/app/component-library/edit-asset-form/language-select/language-select-item.ts
diff --git a/src/app/routes/connector-ui/asset-page/language-select/language-select.component.html b/src/app/component-library/edit-asset-form/language-select/language-select.component.html
similarity index 78%
rename from src/app/routes/connector-ui/asset-page/language-select/language-select.component.html
rename to src/app/component-library/edit-asset-form/language-select/language-select.component.html
index 76859b135..3d5df210a 100644
--- a/src/app/routes/connector-ui/asset-page/language-select/language-select.component.html
+++ b/src/app/component-library/edit-asset-form/language-select/language-select.component.html
@@ -1,5 +1,7 @@
-<mat-form-field class="grow form-field" color="accent">
-  <mat-label>{{ label }}</mat-label>
+<edit-asset-form-label
+  label="Language"
+  [ctrl]="control"></edit-asset-form-label>
+<mat-form-field class="w-full mt-1" color="accent">
   <mat-select [formControl]="control" [compareWith]="'id' | compareByField">
     <mat-option [value]="null">-</mat-option>
     <mat-option *ngFor="let item of items.highlightItems" [value]="item">
diff --git a/src/app/routes/connector-ui/asset-page/language-select/language-select.component.ts b/src/app/component-library/edit-asset-form/language-select/language-select.component.ts
similarity index 77%
rename from src/app/routes/connector-ui/asset-page/language-select/language-select.component.ts
rename to src/app/component-library/edit-asset-form/language-select/language-select.component.ts
index d90ca3822..8724fb7d3 100644
--- a/src/app/routes/connector-ui/asset-page/language-select/language-select.component.ts
+++ b/src/app/component-library/edit-asset-form/language-select/language-select.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostBinding, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {LanguageSelectItem} from './language-select-item';
 import {LanguageSelectItemService} from './language-select-item.service';
@@ -14,9 +14,5 @@ export class LanguageSelectComponent {
   @Input()
   control!: FormControl<LanguageSelectItem | null>;
 
-  @HostBinding('class.flex')
-  @HostBinding('class.flex-row')
-  cls = true;
-
   constructor(public items: LanguageSelectItemService) {}
 }
diff --git a/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-data.ts b/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-data.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-data.ts
rename to src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-data.ts
diff --git a/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-item.service.ts b/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-item.service.ts
similarity index 91%
rename from src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-item.service.ts
rename to src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-item.service.ts
index 78b905432..241865c62 100644
--- a/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-item.service.ts
+++ b/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-item.service.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {associateBy} from '../../../../core/utils/map-utils';
+import {associateBy} from 'src/app/core/utils/map-utils';
 import {TRANSPORT_MODE_SELECT_DATA} from './transport-mode-select-data';
 import {TransportModeSelectItem} from './transport-mode-select-item';
 
diff --git a/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-item.ts b/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-item.ts
similarity index 100%
rename from src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-item.ts
rename to src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-item.ts
diff --git a/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select.component.html b/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select.component.html
new file mode 100644
index 000000000..fd8e9a3c3
--- /dev/null
+++ b/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select.component.html
@@ -0,0 +1,12 @@
+<edit-asset-form-label [label]="label" [ctrl]="control"></edit-asset-form-label
+><mat-form-field class="w-full">
+  <mat-select
+    placeholder="Select transport mode..."
+    [formControl]="control"
+    [compareWith]="'id' | compareByField">
+    <mat-option [value]="null"></mat-option>
+    <mat-option *ngFor="let item of items" [value]="item">
+      {{ item.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
diff --git a/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select.component.ts b/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select.component.ts
similarity index 77%
rename from src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select.component.ts
rename to src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select.component.ts
index aa0e91685..4a5edd6e8 100644
--- a/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select.component.ts
+++ b/src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostBinding, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {TRANSPORT_MODE_SELECT_DATA} from './transport-mode-select-data';
 import {TransportModeSelectItem} from './transport-mode-select-item';
@@ -14,9 +14,5 @@ export class TransportModeSelectComponent {
   @Input()
   control!: FormControl<TransportModeSelectItem | null>;
 
-  @HostBinding('class.flex')
-  @HostBinding('class.flex-row')
-  cls = true;
-
   items = TRANSPORT_MODE_SELECT_DATA;
 }
diff --git a/src/app/core/services/api/fake-backend/connector-fake-impl/asset-fake-service.ts b/src/app/core/services/api/fake-backend/connector-fake-impl/asset-fake-service.ts
index f483a6178..7dd4e44e0 100644
--- a/src/app/core/services/api/fake-backend/connector-fake-impl/asset-fake-service.ts
+++ b/src/app/core/services/api/fake-backend/connector-fake-impl/asset-fake-service.ts
@@ -9,7 +9,12 @@ import {
 import {Patcher, patchObj} from '../../../../utils/object-utils';
 import {TestAssets} from './data/test-assets';
 
-let assets: UiAsset[] = [TestAssets.full, TestAssets.boring, TestAssets.short];
+let assets: UiAsset[] = [
+  TestAssets.full,
+  TestAssets.boring,
+  TestAssets.short,
+  TestAssets.onRequestAsset,
+];
 
 export const assetPage = (): AssetPage => {
   return {
diff --git a/src/app/core/services/api/fake-backend/edc-fake-backend.ts b/src/app/core/services/api/fake-backend/edc-fake-backend.ts
index 8089a21f9..f8c7cca65 100644
--- a/src/app/core/services/api/fake-backend/edc-fake-backend.ts
+++ b/src/app/core/services/api/fake-backend/edc-fake-backend.ts
@@ -108,7 +108,7 @@ export const EDC_FAKE_BACKEND: FetchAPI = async (
       return ok(IdResponseDtoToJSON(deleted));
     })
 
-    .url('ui/pages/asset-page/assets/*/metadata')
+    .url('ui/pages/asset-page/assets/*')
     .on('PUT', (assetId) => {
       const editRequest = UiAssetEditRequestFromJSON(body);
       const created = editAsset(assetId, editRequest);
diff --git a/src/app/core/services/asset-builder.ts b/src/app/core/services/asset-builder.ts
index f6c887a60..8eb1d587f 100644
--- a/src/app/core/services/asset-builder.ts
+++ b/src/app/core/services/asset-builder.ts
@@ -1,13 +1,13 @@
 import {Injectable} from '@angular/core';
 import {UiAsset} from '@sovity.de/edc-client';
-import {DataCategorySelectItem} from '../../routes/connector-ui/asset-page/data-category-select/data-category-select-item';
-import {DataCategorySelectItemService} from '../../routes/connector-ui/asset-page/data-category-select/data-category-select-item.service';
-import {DataSubcategorySelectItem} from '../../routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item';
-import {DataSubcategorySelectItemService} from '../../routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item.service';
-import {LanguageSelectItem} from '../../routes/connector-ui/asset-page/language-select/language-select-item';
-import {LanguageSelectItemService} from '../../routes/connector-ui/asset-page/language-select/language-select-item.service';
-import {TransportModeSelectItem} from '../../routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-item';
-import {TransportModeSelectItemService} from '../../routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-item.service';
+import {DataCategorySelectItem} from 'src/app/component-library/edit-asset-form/data-category-select/data-category-select-item';
+import {DataCategorySelectItemService} from 'src/app/component-library/edit-asset-form/data-category-select/data-category-select-item.service';
+import {DataSubcategorySelectItem} from 'src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item';
+import {DataSubcategorySelectItemService} from 'src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item.service';
+import {LanguageSelectItem} from 'src/app/component-library/edit-asset-form/language-select/language-select-item';
+import {LanguageSelectItemService} from 'src/app/component-library/edit-asset-form/language-select/language-select-item.service';
+import {TransportModeSelectItem} from 'src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-item';
+import {TransportModeSelectItemService} from 'src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-item.service';
 import {AdditionalAssetProperty, UiAssetMapped} from './models/ui-asset-mapped';
 
 /**
diff --git a/src/app/core/services/asset-data-source-mapper.ts b/src/app/core/services/asset-data-source-mapper.ts
index b0fca2fd9..5f0462f2a 100644
--- a/src/app/core/services/asset-data-source-mapper.ts
+++ b/src/app/core/services/asset-data-source-mapper.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {UiDataSource} from '@sovity.de/edc-client';
-import {AssetDatasourceFormValue} from '../../routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-datasource-form-model';
-import {HttpDatasourceHeaderFormValue} from '../../routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-header-form-model';
+import {AssetDatasourceFormValue} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-datasource-form-model';
+import {HttpDatasourceHeaderFormValue} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-header-form-model';
 import {getAuthFields} from '../utils/form-value-utils';
 import {QueryParamsMapper} from './query-params-mapper';
 
@@ -10,20 +10,22 @@ export class AssetDataSourceMapper {
   constructor(private queryParamsMapper: QueryParamsMapper) {}
 
   buildDataSourceOrNull(
-    formValue: AssetDatasourceFormValue,
+    formValue: AssetDatasourceFormValue | undefined,
   ): UiDataSource | null {
-    if (formValue.dataAddressType === 'Unchanged') {
+    if (!formValue || formValue.dataSourceAvailability === 'Unchanged') {
       return null;
     }
     return this.buildDataSource(formValue);
   }
 
   buildDataSource(formValue: AssetDatasourceFormValue): UiDataSource {
+    if (formValue.dataSourceAvailability === 'On-Request') {
+      return this.buildOnRequestDataSource(formValue);
+    }
+
     switch (formValue?.dataAddressType) {
       case 'Custom-Data-Address-Json':
         return this.buildCustomDataSource(formValue);
-      case 'On-Request':
-        return this.buildOnRequestDataSource(formValue);
       case 'Http':
         return this.buildHttpDataSource(formValue);
       default:
diff --git a/src/app/core/services/asset-request-builder.ts b/src/app/core/services/asset-request-builder.ts
index d492d57ad..45fd05d49 100644
--- a/src/app/core/services/asset-request-builder.ts
+++ b/src/app/core/services/asset-request-builder.ts
@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {UiAssetCreateRequest, UiAssetEditRequest} from '@sovity.de/edc-client';
-import {AssetEditorDialogFormValue} from '../../routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-editor-dialog-form-model';
+import {EditAssetFormValue} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/edit-asset-form-model';
 import {toGmtZeroHourDate} from '../utils/date-utils';
 import {AssetDataSourceMapper} from './asset-data-source-mapper';
 import {AssetRequestCommonMetadata} from './asset-request-common-metadata';
@@ -9,10 +9,8 @@ import {AssetRequestCommonMetadata} from './asset-request-common-metadata';
 export class AssetRequestBuilder {
   constructor(private assetDataSourceMapper: AssetDataSourceMapper) {}
 
-  buildAssetCreateRequest(
-    formValue: AssetEditorDialogFormValue,
-  ): UiAssetCreateRequest {
-    const id = formValue.metadata?.id!;
+  buildAssetCreateRequest(formValue: EditAssetFormValue): UiAssetCreateRequest {
+    const id = formValue.general?.id!;
     const metadata = this.buildAssetRequestCommonMetadata(formValue);
     const dataSource = this.assetDataSourceMapper.buildDataSource(
       formValue.datasource!,
@@ -24,12 +22,10 @@ export class AssetRequestBuilder {
     };
   }
 
-  buildAssetEditRequest(
-    formValue: AssetEditorDialogFormValue,
-  ): UiAssetEditRequest {
+  buildAssetEditRequest(formValue: EditAssetFormValue): UiAssetEditRequest {
     const metadata = this.buildAssetRequestCommonMetadata(formValue);
     const dataSourceOrNull = this.assetDataSourceMapper.buildDataSourceOrNull(
-      formValue.datasource!,
+      formValue.datasource,
     );
     return {
       ...metadata,
@@ -38,24 +34,23 @@ export class AssetRequestBuilder {
   }
 
   buildAssetRequestCommonMetadata(
-    formValue: AssetEditorDialogFormValue,
+    formValue: EditAssetFormValue,
   ): AssetRequestCommonMetadata {
-    const title = formValue.metadata?.title!;
-    const version = formValue.metadata?.version;
-    const description = formValue.metadata?.description;
-    const language = formValue.metadata?.language?.id;
-    const keywords = formValue.metadata?.keywords;
-    const licenseUrl = formValue.metadata?.standardLicense;
-    const publisherHomepage = formValue.metadata?.publisher;
-    const mediaType = formValue.metadata?.contentType;
-    const landingPageUrl = formValue.metadata?.endpointDocumentation;
+    const title = formValue.general?.name!;
+    const version = formValue.general?.version;
+    const description = formValue.general?.description;
+    const language = formValue.general?.language?.id;
+    const keywords = formValue.general?.keywords;
+    const licenseUrl = formValue.general?.standardLicense;
+    const publisherHomepage = formValue.general?.publisher;
+    const mediaType = formValue.general?.contentType;
+    const landingPageUrl = formValue.general?.endpointDocumentation;
+    const dataCategory = formValue.general?.dataCategory?.id;
+    const dataSubcategory = formValue.general?.dataSubcategory?.id;
 
-    const dataCategory = formValue.advanced?.dataCategory?.id;
-    const dataSubcategory = formValue.advanced?.dataSubcategory?.id;
     const transportMode = formValue.advanced?.transportMode?.id;
     const geoReferenceMethod = formValue.advanced?.geoReferenceMethod;
     const dataModel = formValue.advanced?.dataModel;
-
     const sovereignLegalName = formValue.advanced?.sovereignLegalName;
     const geoLocation = formValue.advanced?.geoLocation;
     const nutsLocations = formValue.advanced?.nutsLocations;
diff --git a/src/app/core/services/models/nav-item-group.ts b/src/app/core/services/models/nav-item-group.ts
new file mode 100644
index 000000000..9d103c7a8
--- /dev/null
+++ b/src/app/core/services/models/nav-item-group.ts
@@ -0,0 +1,6 @@
+import {NavItem} from './nav-item';
+
+export interface NavItemGroup {
+  title?: string;
+  items: NavItem[];
+}
diff --git a/src/app/core/services/models/nav-item.ts b/src/app/core/services/models/nav-item.ts
new file mode 100644
index 000000000..8cacc74d6
--- /dev/null
+++ b/src/app/core/services/models/nav-item.ts
@@ -0,0 +1,8 @@
+import {EdcUiFeature} from '../../config/profiles/edc-ui-feature';
+
+export interface NavItem {
+  path: string;
+  title: string;
+  icon: string;
+  requiresFeature?: EdcUiFeature;
+}
diff --git a/src/app/core/services/models/ui-asset-mapped.ts b/src/app/core/services/models/ui-asset-mapped.ts
index 6e1a59a34..2a13f58f6 100644
--- a/src/app/core/services/models/ui-asset-mapped.ts
+++ b/src/app/core/services/models/ui-asset-mapped.ts
@@ -1,8 +1,8 @@
 import {UiAsset} from '@sovity.de/edc-client';
-import {DataCategorySelectItem} from '../../../routes/connector-ui/asset-page/data-category-select/data-category-select-item';
-import {DataSubcategorySelectItem} from '../../../routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item';
-import {LanguageSelectItem} from '../../../routes/connector-ui/asset-page/language-select/language-select-item';
-import {TransportModeSelectItem} from '../../../routes/connector-ui/asset-page/transport-mode-select/transport-mode-select-item';
+import {DataCategorySelectItem} from 'src/app/component-library/edit-asset-form/data-category-select/data-category-select-item';
+import {DataSubcategorySelectItem} from 'src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item';
+import {LanguageSelectItem} from 'src/app/component-library/edit-asset-form/language-select/language-select-item';
+import {TransportModeSelectItem} from 'src/app/component-library/edit-asset-form/transport-mode-select/transport-mode-select-item';
 
 /**
  * UiAsset with replaced fixed vocabulary items.
diff --git a/src/app/core/services/nav-items-builder.ts b/src/app/core/services/nav-items-builder.ts
new file mode 100644
index 000000000..a8d24f917
--- /dev/null
+++ b/src/app/core/services/nav-items-builder.ts
@@ -0,0 +1,78 @@
+import {Injectable} from '@angular/core';
+import {routes} from 'src/app/routes/connector-ui/connector-ui-routing.module';
+import {ActiveFeatureSet} from '../config/active-feature-set';
+import {NavItemGroup} from './models/nav-item-group';
+
+/**
+ * Builds NavItems from Angular routes
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class NavItemsBuilder {
+  private navItemGroups: NavItemGroup[] = [
+    {
+      items: [{path: 'dashboard', icon: 'data_usage', title: 'Dashboard'}],
+    },
+    {
+      title: 'Providing',
+      items: [
+        {path: 'create-asset', icon: 'post_add', title: 'Create Data Offer'},
+        {path: 'my-assets', icon: 'upload', title: 'Assets'},
+        {path: 'policies', icon: 'policy', title: 'Policies'},
+        {
+          path: 'contract-definitions',
+          icon: 'rule',
+          title: 'Contract Definitions',
+        },
+      ],
+    },
+    {
+      title: 'Consuming',
+      items: [
+        {path: 'catalog-browser', icon: 'sim_card', title: 'Catalog Browser'},
+        {path: 'contracts', icon: 'assignment_turned_in', title: 'Contracts'},
+        {
+          path: 'transfer-history',
+          icon: 'assignment',
+          title: 'Transfer History',
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          path: 'logout',
+          icon: 'logout',
+          title: 'Logout',
+          requiresFeature: 'logout-button',
+        },
+      ],
+    },
+  ];
+
+  constructor(private activeFeatureSet: ActiveFeatureSet) {}
+
+  buildNavItemGroups(): NavItemGroup[] {
+    const allNavItemRoutesExist = this.navItemGroups
+      .flatMap((navItemGroup) =>
+        navItemGroup.items.map((navItem) => navItem.path),
+      )
+      .every((path) => routes.find((route) => route.path === path));
+
+    if (!allNavItemRoutesExist) {
+      throw new Error('All nav item routes must exist in the routes array');
+    }
+
+    return this.navItemGroups
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) => {
+          return item.requiresFeature
+            ? this.activeFeatureSet.has(item.requiresFeature)
+            : true;
+        }),
+      }))
+      .filter((group) => group.items.length > 0);
+  }
+}
diff --git a/src/app/core/services/query-params-mapper.ts b/src/app/core/services/query-params-mapper.ts
index f27c1426e..b03ff896d 100644
--- a/src/app/core/services/query-params-mapper.ts
+++ b/src/app/core/services/query-params-mapper.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpDatasourceQueryParamFormValue} from '../../routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-query-param-form-model';
+import {HttpDatasourceQueryParamFormValue} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-query-param-form-model';
 import {
   everythingAfter,
   everythingBefore,
diff --git a/src/app/core/services/transfer-data-sink-mapper.ts b/src/app/core/services/transfer-data-sink-mapper.ts
index 253b10707..a97285b78 100644
--- a/src/app/core/services/transfer-data-sink-mapper.ts
+++ b/src/app/core/services/transfer-data-sink-mapper.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpDatasourceHeaderFormValue} from '../../routes/connector-ui/asset-page/asset-edit-dialog/form/model/http-datasource-header-form-model';
+import {HttpDatasourceHeaderFormValue} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-header-form-model';
 import {ContractAgreementTransferDialogFormValue} from '../../routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form-model';
 import {getAuthFields} from '../utils/form-value-utils';
 import {mapKeys, removeNullValues} from '../utils/record-utils';
diff --git a/src/app/core/utils/form-value-utils.ts b/src/app/core/utils/form-value-utils.ts
index d649760fd..4908e54a2 100644
--- a/src/app/core/utils/form-value-utils.ts
+++ b/src/app/core/utils/form-value-utils.ts
@@ -1,4 +1,4 @@
-import {AssetDatasourceFormValue} from '../../routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-datasource-form-model';
+import {AssetDatasourceFormValue} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/asset-datasource-form-model';
 import {ContractAgreementTransferDialogFormValue} from '../../routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form-model';
 
 export function getAuthFields(
diff --git a/src/app/routes/connector-ui/asset-edit-page/asset-edit-page.module.ts b/src/app/routes/connector-ui/asset-edit-page/asset-edit-page.module.ts
new file mode 100644
index 000000000..f0b5c9814
--- /dev/null
+++ b/src/app/routes/connector-ui/asset-edit-page/asset-edit-page.module.ts
@@ -0,0 +1,22 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {EditAssetFormModule} from '../../../component-library/edit-asset-form/edit-asset-form.module';
+import {UiElementsModule} from '../../../component-library/ui-elements/ui-elements.module';
+import {AssetEditPageComponent} from './asset-edit-page/asset-edit-page.component';
+
+@NgModule({
+  imports: [
+    // Angular
+    CommonModule,
+    RouterModule,
+
+    // EDC UI Modules
+    EditAssetFormModule,
+    UiElementsModule,
+  ],
+  declarations: [AssetEditPageComponent],
+  exports: [AssetEditPageComponent],
+  providers: [],
+})
+export class AssetEditPageModule {}
diff --git a/src/app/routes/connector-ui/asset-edit-page/asset-edit-page/asset-edit-page.component.html b/src/app/routes/connector-ui/asset-edit-page/asset-edit-page/asset-edit-page.component.html
new file mode 100644
index 000000000..8ca26da4c
--- /dev/null
+++ b/src/app/routes/connector-ui/asset-edit-page/asset-edit-page/asset-edit-page.component.html
@@ -0,0 +1,15 @@
+<div class="p-8">
+  <div class="flex flex-row justify-center">
+    <loading-state
+      *ngIf="asset.isLoading"
+      class="min-h-[35rem]"></loading-state>
+    <error-state
+      *ngIf="asset.isError"
+      class="min-h-[35rem]"
+      [error]="asset.errorOrUndefined"></error-state>
+  </div>
+  <edit-asset-form
+    *ngIf="asset.isReady"
+    [isLoading]="isLoading"
+    (submitClicked)="onSubmit()"></edit-asset-form>
+</div>
diff --git a/src/app/routes/connector-ui/asset-edit-page/asset-edit-page/asset-edit-page.component.ts b/src/app/routes/connector-ui/asset-edit-page/asset-edit-page/asset-edit-page.component.ts
new file mode 100644
index 000000000..2d0e56a70
--- /dev/null
+++ b/src/app/routes/connector-ui/asset-edit-page/asset-edit-page/asset-edit-page.component.ts
@@ -0,0 +1,128 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {EMPTY, Observable, catchError, finalize, tap} from 'rxjs';
+import {IdResponseDto} from '@sovity.de/edc-client';
+import {AssetAdvancedFormBuilder} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/asset-advanced-form-builder';
+import {AssetDatasourceFormBuilder} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/asset-datasource-form-builder';
+import {AssetGeneralFormBuilder} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/asset-general-form-builder';
+import {EditAssetForm} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/edit-asset-form';
+import {EditAssetFormInitializer} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/edit-asset-form-initializer';
+import {EditAssetFormValue} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/edit-asset-form-model';
+import {EdcApiService} from 'src/app/core/services/api/edc-api.service';
+import {AssetRequestBuilder} from 'src/app/core/services/asset-request-builder';
+import {AssetService} from 'src/app/core/services/asset.service';
+import {Fetched} from 'src/app/core/services/models/fetched';
+import {UiAssetMapped} from 'src/app/core/services/models/ui-asset-mapped';
+import {NotificationService} from 'src/app/core/services/notification.service';
+
+@Component({
+  selector: 'asset-edit-page',
+  templateUrl: './asset-edit-page.component.html',
+  providers: [EditAssetFormInitializer, AssetRequestBuilder],
+  viewProviders: [
+    EditAssetForm,
+    AssetGeneralFormBuilder,
+    AssetDatasourceFormBuilder,
+    AssetAdvancedFormBuilder,
+  ],
+})
+export class AssetEditPageComponent implements OnInit {
+  asset: Fetched<UiAssetMapped | undefined> = new Fetched(
+    'loading',
+    undefined,
+    undefined,
+  );
+  isLoading = false;
+
+  constructor(
+    private editAssetFormInitializer: EditAssetFormInitializer,
+    private form: EditAssetForm,
+    private assetRequestBuilder: AssetRequestBuilder,
+    private edcApiService: EdcApiService,
+    private assetServiceMapped: AssetService,
+    private notificationService: NotificationService,
+    private router: Router,
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit(): void {
+    this.route.params.subscribe((params) => {
+      if (params.id) {
+        this.assetServiceMapped
+          .fetchAssets()
+          .pipe(
+            Fetched.wrap({
+              failureMessage: 'Failed fetching asset list.',
+            }),
+          )
+          .pipe(
+            Fetched.map((assets): UiAssetMapped | undefined =>
+              assets.find((asset) => asset.assetId === params.id),
+            ),
+          )
+          .subscribe((asset) => {
+            this.asset = asset;
+
+            if (asset.isReady) {
+              this.form.reset(
+                this.editAssetFormInitializer.forEdit(asset.data!),
+              );
+            }
+          });
+      } else {
+        this.form.reset(this.editAssetFormInitializer.forCreate());
+        this.asset.state = 'ready';
+      }
+    });
+  }
+
+  onSubmit() {
+    const formValue = this.form.value;
+
+    // Workaround around disabled controls not being included in the form value
+    if (formValue.mode !== 'CREATE') {
+      formValue.general!.id = this.form.general.controls.id.getRawValue();
+    }
+
+    this.form.all.disable();
+    this.isLoading = true;
+
+    this._saveRequest(formValue)
+      .pipe(
+        tap(() => {
+          this.notificationService.showInfo('Successfully saved asset');
+        }),
+        catchError((error) => {
+          console.error('Failed saving asset!', error);
+          this.notificationService.showError('Failed saving asset!');
+          this.form.all.enable();
+          return EMPTY;
+        }),
+        finalize(() => {
+          this.isLoading = false;
+        }),
+      )
+      .subscribe(() => this.router.navigate(['my-assets']));
+  }
+
+  private _saveRequest(
+    formValue: EditAssetFormValue,
+  ): Observable<IdResponseDto> {
+    const mode = this.form.mode;
+
+    if (mode === 'CREATE') {
+      const createRequest =
+        this.assetRequestBuilder.buildAssetCreateRequest(formValue);
+      return this.edcApiService.createAsset(createRequest);
+    }
+
+    if (mode === 'EDIT') {
+      const assetId = formValue.general?.id!;
+      const editRequest =
+        this.assetRequestBuilder.buildAssetEditRequest(formValue);
+      return this.edcApiService.editAsset(assetId, editRequest);
+    }
+
+    throw new Error(`Unsupported mode: ${mode}`);
+  }
+}
diff --git a/src/app/routes/connector-ui/asset-page/asset-cards/asset-cards.component.html b/src/app/routes/connector-ui/asset-page/asset-cards/asset-cards.component.html
index d3d444d46..f2d8d9f37 100644
--- a/src/app/routes/connector-ui/asset-page/asset-cards/asset-cards.component.html
+++ b/src/app/routes/connector-ui/asset-page/asset-cards/asset-cards.component.html
@@ -1,6 +1,8 @@
 <mat-card *ngFor="let asset of assets" class="asset-card">
   <mat-card-header>
-    <mat-icon mat-card-avatar>upload</mat-icon>
+    <mat-icon mat-card-avatar>{{
+      asset.dataSourceAvailability === 'LIVE' ? 'upload' : 'contact_page'
+    }}</mat-icon>
     <mat-card-title>
       <a
         class="link"
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog-data.ts b/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog-data.ts
deleted file mode 100644
index 35e7e625d..000000000
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog-data.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {AssetEditorDialogFormValue} from './form/model/asset-editor-dialog-form-model';
-
-export interface AssetEditDialogData {
-  initialFormValue: AssetEditorDialogFormValue;
-}
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog-result.ts b/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog-result.ts
deleted file mode 100644
index af21e6881..000000000
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog-result.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {UiAssetMapped} from '../../../../core/services/models/ui-asset-mapped';
-
-export interface AssetEditDialogResult {
-  /**
-   * Updated asset list for the asset page
-   */
-  refreshedList: UiAssetMapped[];
-
-  /**
-   * The updated / created asset
-   */
-  asset: UiAssetMapped;
-}
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.component.html b/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.component.html
deleted file mode 100644
index a416b4254..000000000
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.component.html
+++ /dev/null
@@ -1,796 +0,0 @@
-<h1 mat-dialog-title>
-  {{ form.mode === 'CREATE' ? 'Create New Asset' : 'Edit Asset' }}
-</h1>
-<mat-dialog-content class="w-[800px]">
-  <mat-vertical-stepper [linear]="true">
-    <!-- Step: Metadata -->
-    <mat-step [stepControl]="form.metadata">
-      <form [formGroup]="form.metadata">
-        <ng-template matStepLabel>General Information</ng-template>
-        <div class="flex flex-col mt-[10px]">
-          <div class="flex flex-row space-x-[10px]">
-            <!-- Name -->
-            <mat-form-field class="grow">
-              <mat-label>Name</mat-label>
-              <input
-                matInput
-                autocomplete="new-name"
-                [formControl]="form.metadata.controls.title" />
-            </mat-form-field>
-
-            <!-- Version -->
-            <mat-form-field class="grow">
-              <mat-label>Version</mat-label>
-              <input
-                matInput
-                autocomplete="new-id"
-                [formControl]="form.metadata.controls.version"
-                [placeholder]="'1.0'" />
-            </mat-form-field>
-          </div>
-
-          <!-- ID -->
-          <mat-form-field
-            *ngIf="form.metadata.controls.id; let ctrl"
-            class="grow">
-            <mat-label>Asset ID</mat-label>
-            <input
-              placeholder="my-asset-1"
-              matInput
-              autocomplete="new-id"
-              [formControl]="ctrl" />
-            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
-              {{ validationMessages.invalidWhitespacesOrColonsMessage }}
-            </mat-error>
-            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.requiresPrefix">
-              {{ validationMessages.invalidPrefix('ID', 'urn:artifact') }}
-            </mat-error>
-            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.idAlreadyExists">
-              {{ validationMessages.idExistsErrorMessage }}
-            </mat-error>
-          </mat-form-field>
-
-          <!-- Description -->
-
-          <mat-form-field>
-            <mat-label>Description</mat-label>
-            <textarea
-              class="h-36"
-              matInput
-              [formControl]="form.metadata.controls.description"
-              [placeholder]="
-                '# My Asset\n\nAt vero eos et accusam et justo duo dolores et ea rebum.\n\n## Details\n\nAt vero eos et accusam et justo duo dolores et ea **rebum**.'
-              "></textarea>
-            <mat-hint class="flex flex-row items-center gap-1 mb-1">
-              The description uses
-              <a
-                class="link"
-                externalLink
-                href="https://www.markdownguide.org/basic-syntax/"
-                >Markdown syntax</a
-              >
-            </mat-hint>
-          </mat-form-field>
-
-          <div class="my-2"></div>
-
-          <!-- Keywords -->
-          <keyword-select
-            label="Keywords"
-            [control]="form.metadata.controls.keywords"></keyword-select>
-
-          <!-- Language -->
-          <language-select
-            class="grow"
-            label="Language"
-            [control]="form.metadata.controls.language"></language-select>
-
-          <div class="flex flex-row space-x-[10px]">
-            <!-- Content Type -->
-            <mat-form-field class="grow">
-              <mat-label>Content Type</mat-label>
-              <input
-                matInput
-                [formControl]="form.metadata.controls.contentType"
-                [placeholder]="'text/plain'" />
-            </mat-form-field>
-          </div>
-
-          <!-- Endpoint Documentation -->
-          <mat-form-field
-            *ngIf="form.metadata.controls.endpointDocumentation; let ctrl"
-            class="grow">
-            <mat-label>Endpoint Documentation</mat-label>
-            <input placeholder="https://" matInput [formControl]="ctrl" />
-            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
-              {{ validationMessages.invalidUrlMessage }}
-            </mat-error>
-          </mat-form-field>
-
-          <div class="flex flex-row space-x-[10px]">
-            <!-- Publisher -->
-            <mat-form-field
-              *ngIf="form.metadata.controls.publisher; let ctrl"
-              class="grow">
-              <mat-label>Publisher</mat-label>
-              <input placeholder="https://" matInput [formControl]="ctrl" />
-              <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
-                {{ validationMessages.invalidUrlMessage }}
-              </mat-error>
-            </mat-form-field>
-
-            <!-- Standard License -->
-            <mat-form-field
-              *ngIf="form.metadata.controls.standardLicense; let ctrl"
-              class="grow">
-              <mat-label>Standard License</mat-label>
-              <input placeholder="https://" matInput [formControl]="ctrl" />
-              <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
-                {{ validationMessages.invalidUrlMessage }}
-              </mat-error>
-            </mat-form-field>
-          </div>
-        </div>
-      </form>
-    </mat-step>
-    <!-- Step: Advanced -->
-    <mat-step *ngIf="form.advanced" [stepControl]="form.advanced">
-      <form [formGroup]="form.advanced">
-        <ng-template matStepLabel>Advanced Information</ng-template>
-        <div class="flex flex-col mt-[10px]">
-          <div class="flex flex-row space-x-[10px]">
-            <!-- Data Category -->
-            <data-category-select
-              class="grow"
-              label="Data Category"
-              [control]="
-                form.advanced.controls.dataCategory
-              "></data-category-select>
-
-            <!-- Data Subcategory -->
-            <data-subcategory-select
-              class="grow"
-              label="Data Subcategory"
-              [dataCategory]="form.dataCategory"
-              [control]="
-                form.advanced.controls.dataSubcategory
-              "></data-subcategory-select>
-          </div>
-
-          <!-- Data Model -->
-          <mat-form-field>
-            <mat-label>Data Model</mat-label>
-            <input
-              matInput
-              placeholder="unspecified"
-              [formControl]="form.advanced.controls.dataModel" />
-          </mat-form-field>
-
-          <div class="flex flex-row space-x-[10px]">
-            <!-- Transport Mode -->
-            <transport-mode-select
-              class="grow"
-              label="Transport Mode"
-              [control]="
-                form.advanced.controls.transportMode
-              "></transport-mode-select>
-
-            <!-- Geo reference method -->
-            <mat-form-field class="grow">
-              <mat-label>Geo reference method</mat-label>
-              <input
-                matInput
-                placeholder="Lat/Lon"
-                [formControl]="form.advanced.controls.geoReferenceMethod" />
-            </mat-form-field>
-          </div>
-
-          <!-- Sovereign legal name -->
-          <mat-form-field>
-            <mat-label>Sovereign</mat-label>
-            <input
-              matInput
-              placeholder="Data Owning Company GMBH"
-              [formControl]="form.advanced.controls.sovereignLegalName" />
-            <mat-hint>Legal name of the data owner</mat-hint>
-          </mat-form-field>
-
-          <!-- Data update frequency -->
-          <div class="flex flex-row space-x-[10px] mt-[15px]">
-            <mat-form-field class="grow">
-              <mat-label>Data update frequency</mat-label>
-              <input
-                matInput
-                placeholder="every month"
-                [formControl]="form.advanced.controls.dataUpdateFrequency" />
-            </mat-form-field>
-
-            <!-- Geo location -->
-            <mat-form-field class="grow">
-              <mat-label>Geo location</mat-label>
-              <input
-                matInput
-                placeholder="40.741895,-73.989308"
-                [formControl]="form.advanced.controls.geoLocation" />
-            </mat-form-field>
-          </div>
-
-          <!-- NUTS locations -->
-          <div class="form-section-title">NUTS locations</div>
-          <div
-            *ngFor="
-              let location of form.advanced.controls.nutsLocations.controls;
-              let i = index
-            "
-            class="flex flex-row space-x-[10px]">
-            <mat-form-field class="grow">
-              <mat-label>NUTS location</mat-label>
-              <input matInput placeholder="DE929" [formControl]="location" />
-            </mat-form-field>
-
-            <button
-              mat-button
-              color="warn"
-              style="height: 54px; margin-top: 4px; margin-left: 8px"
-              (click)="form.onNutsLocationsRemoveClick(i)">
-              Remove
-            </button>
-          </div>
-
-          <div class="flex flex-row mb-[10px]">
-            <button
-              mat-button
-              color="accent"
-              (click)="form.onNutsLocationsAddClick()">
-              Add location
-            </button>
-          </div>
-
-          <!-- Data sample URLs -->
-          <div class="form-section-title">Data samples</div>
-          <div
-            *ngFor="
-              let sample of form.advanced.controls.dataSampleUrls.controls;
-              let i = index
-            "
-            class="flex flex-row space-x-[10px]">
-            <mat-form-field class="grow">
-              <mat-label>URL</mat-label>
-              <input
-                matInput
-                placeholder="https://my-org.com/my-data-offer/samples/1"
-                [formControl]="sample" />
-            </mat-form-field>
-
-            <button
-              mat-button
-              color="warn"
-              style="height: 54px; margin-top: 4px; margin-left: 8px"
-              (click)="form.onDataSampleUrlsRemoveClick(i)">
-              Remove
-            </button>
-          </div>
-
-          <div class="flex flex-row mb-[10px]">
-            <button
-              mat-button
-              color="accent"
-              (click)="form.onDataSampleUrlsAddClick()">
-              Add data sample
-            </button>
-          </div>
-
-          <!-- Reference file URLs -->
-          <div class="form-section-title">Reference files</div>
-          <div
-            *ngFor="
-              let file of form.advanced.controls.referenceFileUrls.controls;
-              let i = index
-            "
-            class="flex flex-row space-x-[10px]">
-            <mat-form-field class="grow">
-              <mat-label>URL</mat-label>
-              <input
-                matInput
-                placeholder="https://my-org.com/my-data-offer/documentation/api-reference"
-                [formControl]="file" />
-            </mat-form-field>
-
-            <button
-              mat-button
-              color="warn"
-              style="height: 54px; margin-top: 4px; margin-left: 8px"
-              (click)="form.onReferenceFileUrlsRemoveClick(i)">
-              Remove
-            </button>
-          </div>
-
-          <div class="flex flex-row mb-[20px]">
-            <button
-              mat-button
-              color="accent"
-              (click)="form.onReferenceFileUrlsAddClick()">
-              Add reference file
-            </button>
-          </div>
-
-          <!-- Reference files description -->
-          <mat-form-field
-            *ngIf="form.advanced.controls.referenceFileUrls.length > 0">
-            <mat-label>Reference files description</mat-label>
-            <textarea
-              class="h-28"
-              matInput
-              placeholder="..."
-              [formControl]="
-                form.advanced.controls.referenceFilesDescription
-              "></textarea>
-            <mat-hint
-              >Additional information regarding the reference files
-            </mat-hint>
-          </mat-form-field>
-
-          <!-- Temporal coverage -->
-          <mat-form-field
-            *ngIf="form.advanced.controls.temporalCoverage; let ctrl"
-            class="mt-[20px]"
-            color="accent">
-            <mat-label>Temporal coverage</mat-label>
-            <mat-date-range-input [formGroup]="ctrl" [rangePicker]="picker">
-              <input
-                matStartDate
-                formControlName="from"
-                placeholder="Start date" />
-              <input
-                matEndDate
-                formControlName="toInclusive"
-                placeholder="End date (inclusive)" />
-            </mat-date-range-input>
-            <mat-hint>DD/MM/YYYY (optional) – DD/MM/YYYY (optional)</mat-hint>
-            <mat-datepicker-toggle
-              matSuffix
-              [for]="picker"></mat-datepicker-toggle>
-            <mat-date-range-picker #picker></mat-date-range-picker>
-            <mat-error *ngIf="ctrl.invalid"
-              >{{ validationMessages.invalidDateRangeMessage }}
-            </mat-error>
-          </mat-form-field>
-
-          <!-- Conditions for use -->
-          <mat-form-field class="mt-[20px]">
-            <mat-label>Conditions for use</mat-label>
-            <textarea
-              class="h-28"
-              matInput
-              placeholder="Please cite the dataset as..."
-              [formControl]="
-                form.advanced.controls.conditionsForUse
-              "></textarea>
-            <mat-hint
-              >Additional not legally relevant usage instructions (e.g. how to
-              cite the dataset)
-            </mat-hint>
-          </mat-form-field>
-        </div>
-      </form>
-    </mat-step>
-    <!-- Step: Datasource -->
-    <mat-step *ngIf="form.datasource" [stepControl]="form.datasource">
-      <form [formGroup]="form.datasource">
-        <ng-template matStepLabel>Datasource Information</ng-template>
-        <div class="form-section-title">Datasource</div>
-        <div class="flex flex-col mt-[10px]">
-          <!-- Data Address Type -->
-          <data-address-type-select
-            label="Type"
-            [mode]="
-              form.mode === 'EDIT' ? 'Datasource-Edit' : 'Datasource-Create'
-            "
-            [control]="
-              form.datasource.controls.dataAddressType
-            "></data-address-type-select>
-
-          <!-- Data Source Type CUSTOM -->
-          <mat-form-field
-            *ngIf="
-              form.dataAddressType === 'Custom-Data-Address-Json' &&
-                form.datasource.controls.dataDestination;
-              let ctrl
-            ">
-            <mat-label>Custom Datasource Config (JSON)</mat-label>
-            <textarea
-              matInput
-              placeholder='{"https://w3id.org/edc/v0.0.1/ns/type": "HttpData", ...}'
-              [formControl]="ctrl"></textarea>
-            <mat-error *ngIf="ctrl.invalid && ctrl.errors?.jsonInvalid">
-              {{ validationMessages.invalidJsonMessage }}
-            </mat-error>
-          </mat-form-field>
-
-          <!-- Data Source Type ON_REQUEST -->
-          <ng-container *ngIf="form.dataAddressType === 'On-Request'">
-            <!-- Contact E-Mail -->
-            <div class="form-section-title">Contact E-Mail</div>
-
-            <div class="mb-[10px] px-[3px] text-sm">
-              This email address will be offered to potential consumers for
-              contacting you. This is done in place of having an actual data
-              source connected.
-            </div>
-
-            <mat-form-field
-              *ngIf="form.datasource.controls.contactEmail; let ctrl"
-              class="grow">
-              <mat-label>Contact E-Mail</mat-label>
-              <input
-                matInput
-                [formControl]="ctrl"
-                [placeholder]="'contact@my-org.com'" />
-              <mat-error *ngIf="ctrl.invalid && ctrl.errors?.email">
-                {{ validationMessages.invalidEmailMessage }}
-              </mat-error>
-            </mat-form-field>
-
-            <!-- Contact E-Mail Preferred Subject -->
-            <div class="form-section-title">Preferred E-Mail Subject</div>
-
-            <div class="mb-[10px] px-[3px] text-sm">
-              Will be added to the mailto-link and displayed to potential
-              consumers to use.
-            </div>
-
-            <mat-form-field
-              *ngIf="
-                form.datasource.controls.contactPreferredEmailSubject;
-                let ctrl
-              "
-              class="grow">
-              <mat-label>Preferred E-Mail Subject</mat-label>
-              <input
-                matInput
-                [formControl]="ctrl"
-                [placeholder]="'Data Offer \'xyz\''" />
-            </mat-form-field>
-          </ng-container>
-
-          <!-- Data Source Type HTTP -->
-          <ng-container *ngIf="form.dataAddressType === 'Http'">
-            <div class="form-section-title">Method</div>
-
-            <div *ngIf="form.proxyMethod" class="mb-[10px] px-[3px] text-sm">
-              The consuming side <b>must</b> provide a Custom HTTP Method with
-              method parameterization enabled.
-            </div>
-
-            <!-- Method (Rest-Api) -->
-            <ng-container *ngIf="!form.proxyMethod">
-              <mat-form-field
-                *ngIf="form.datasource.controls.httpMethod; let ctrl">
-                <mat-label>
-                  {{ form.proxyMethod ? 'Default' : '' }} Method
-                </mat-label>
-                <mat-select [formControl]="ctrl">
-                  <mat-option *ngFor="let method of methods" [value]="method"
-                    >{{ method }}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-            </ng-container>
-
-            <!-- Toggle Proxy Method Button -->
-            <div
-              *ngIf="form.datasource.controls.httpProxyMethod; let ctrl"
-              class="flex flex-row mb-[10px]">
-              <button
-                mat-button
-                [color]="ctrl.value ? 'warn' : 'accent'"
-                (click)="ctrl.setValue(!ctrl.value)">
-                {{ ctrl.value ? 'Disable' : 'Enable' }} Method Parameterization
-              </button>
-            </div>
-
-            <div class="form-section-title">URL</div>
-
-            <div *ngIf="form.proxyPath" class="mb-[10px] px-[3px] text-sm">
-              The consuming side <b>must</b> provide a Custom HTTP Subpath with
-              method parameterization is enabled. The Custom HTTP Subpath will
-              be appended to the base path.
-            </div>
-
-            <!-- Base Path (Rest-Api) -->
-            <mat-form-field
-              *ngIf="form.datasource.controls.httpUrl; let ctrl"
-              class="grow">
-              <mat-label *ngIf="!form.proxyPath">URL</mat-label>
-              <mat-label *ngIf="form.proxyPath">Base URL</mat-label>
-              <input matInput [formControl]="ctrl" [placeholder]="'https://'" />
-              <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">
-                {{ validationMessages.invalidUrlMessage }}
-              </mat-error>
-            </mat-form-field>
-
-            <!-- Toggle Proxy Path Button -->
-            <div
-              *ngIf="form.datasource.controls.httpProxyPath; let ctrl"
-              class="flex flex-row mb-[10px]">
-              <button
-                mat-button
-                [color]="ctrl.value ? 'warn' : 'accent'"
-                (click)="ctrl.setValue(!ctrl.value)">
-                {{ ctrl.value ? 'Disable' : 'Enable' }} Path Parameterization
-              </button>
-            </div>
-
-            <div class="form-section-title">
-              {{ form.proxyQueryParams ? 'Default' : '' }} Query Params
-            </div>
-
-            <div
-              *ngFor="
-                let header of form.datasource.controls.httpQueryParams.controls;
-                let i = index
-              "
-              class="flex flex-row space-x-[10px]">
-              <!-- Query Param Name -->
-              <mat-form-field class="w-1/3">
-                <mat-label>Query Param Name</mat-label>
-                <input
-                  matInput
-                  placeholder="key"
-                  required
-                  autocomplete="new-query-param-name"
-                  [formControl]="header.controls.paramName" />
-                {{ header.errors }}
-                <mat-error
-                  *ngIf="
-                    header.controls.paramName.invalid &&
-                    header.controls.paramName.errors?.invalidQueryParam
-                  "
-                  >{{ validationMessages.invalidQueryParam }}
-                </mat-error>
-              </mat-form-field>
-
-              <!-- Query Param Value -->
-              <mat-form-field class="grow">
-                <mat-label>Value</mat-label>
-                <input
-                  matInput
-                  placeholder="..."
-                  autocomplete="new-query-param-value"
-                  [formControl]="header.controls.paramValue" />
-                <mat-error
-                  *ngIf="
-                    header.controls.paramValue.invalid &&
-                    header.controls.paramValue.errors?.invalidQueryParam
-                  "
-                  >{{ validationMessages.invalidQueryParam }}
-                </mat-error>
-              </mat-form-field>
-
-              <!-- Query Param Delete Button -->
-              <button
-                mat-button
-                color="warn"
-                style="height: 54px; margin-top: 4px; margin-left: 8px"
-                (click)="form.onHttpQueryParamsRemoveClick(i)">
-                Remove
-              </button>
-            </div>
-
-            <div
-              *ngIf="form.proxyQueryParams"
-              class="text-sm mb-[10px] px-[3px]">
-              With query param parameterization enabled, the default query
-              params and the query params provided by the consumer will be
-              merged.
-            </div>
-
-            <div class="flex flex-row mb-[10px] space-x-[10px]">
-              <!-- Add Query Param Button -->
-              <button
-                mat-button
-                color="accent"
-                (click)="form.onHttpQueryParamsAddClick()">
-                Add {{ form.proxyQueryParams ? 'Default' : '' }} Query Param
-              </button>
-
-              <!-- Toggle Proxy Query Param Parameterization Button -->
-              <button
-                *ngIf="form.datasource.controls.httpProxyQueryParams; let ctrl"
-                mat-button
-                [color]="ctrl.value ? 'warn' : 'accent'"
-                (click)="ctrl.setValue(!ctrl.value)">
-                {{ ctrl.value ? 'Disable' : 'Enable' }} Query Param
-                Parameterization
-              </button>
-            </div>
-
-            <div class="form-section-title">Request Body</div>
-
-            <div class="text-sm mb-[10px] px-[3px]">
-              The request body can only be set from the consumer side, if
-              parameterization is enabled.
-            </div>
-
-            <!-- Toggle Proxy Body Button -->
-            <div
-              *ngIf="form.datasource.controls.httpProxyBody; let ctrl"
-              class="flex flex-row mb-[10px]">
-              <button
-                mat-button
-                [color]="ctrl.value ? 'warn' : 'accent'"
-                (click)="ctrl.setValue(!ctrl.value)">
-                {{ ctrl.value ? 'Disable' : 'Enable' }} Request Body
-                Parameterization
-              </button>
-            </div>
-
-            <div class="form-section-title">Authentication</div>
-
-            <!-- Add Authentication Button -->
-            <div
-              *ngIf="
-                form.datasource.controls.httpAuthHeaderType.value === 'None'
-              "
-              class="flex flex-row mb-[10px]">
-              <button
-                mat-button
-                color="accent"
-                (click)="
-                  form.datasource.controls.httpAuthHeaderType.setValue(
-                    'Vault-Secret'
-                  )
-                ">
-                Add Authentication
-              </button>
-            </div>
-
-            <!-- Auth Header Value Type -->
-            <mat-form-field
-              *ngIf="
-                form.datasource.controls.httpAuthHeaderType.value !== 'None'
-              "
-              class="grow">
-              <mat-label>Type</mat-label>
-              <mat-select
-                [formControl]="form.datasource.controls.httpAuthHeaderType">
-                <mat-option value="Vault-Secret">
-                  Header with Vault Secret
-                </mat-option>
-                <mat-option value="Value">Header with Value</mat-option>
-              </mat-select>
-            </mat-form-field>
-            <div
-              *ngIf="
-                form.datasource.controls.httpAuthHeaderType.value !== 'None'
-              "
-              class="flex flex-row space-x-[10px]">
-              <!-- Auth Header Name -->
-              <mat-form-field class="w-1/3">
-                <mat-label>Auth Header Name</mat-label>
-                <input
-                  matInput
-                  placeholder="Authorization"
-                  autocomplete="new-auth-header-name"
-                  [formControl]="form.datasource.controls.httpAuthHeaderName" />
-              </mat-form-field>
-
-              <!-- Auth Header Value -->
-              <mat-form-field
-                *ngIf="
-                  form.datasource.controls.httpAuthHeaderType.value === 'Value'
-                "
-                class="grow">
-                <mat-label>Auth Header Value</mat-label>
-                <input
-                  matInput
-                  placeholder="Bearer ..."
-                  [formControl]="
-                    form.datasource.controls.httpAuthHeaderValue
-                  " />
-              </mat-form-field>
-
-              <!-- Auth Header Secret Name -->
-              <mat-form-field
-                *ngIf="
-                  form.datasource.controls.httpAuthHeaderType.value ===
-                  'Vault-Secret'
-                "
-                class="grow">
-                <mat-label>Vault Secret Name</mat-label>
-                <input
-                  matInput
-                  placeholder="MySecret123"
-                  [formControl]="
-                    form.datasource.controls.httpAuthHeaderSecretName
-                  " />
-              </mat-form-field>
-            </div>
-
-            <!-- Remove Authentication Button -->
-            <div
-              *ngIf="
-                form.datasource.controls.httpAuthHeaderType.value !== 'None'
-              "
-              class="flex flex-row mb-[10px]">
-              <button
-                mat-button
-                color="warn"
-                (click)="
-                  form.datasource.controls.httpAuthHeaderType.setValue('None')
-                ">
-                Remove Authentication
-              </button>
-            </div>
-
-            <div class="form-section-title">Additional Headers</div>
-
-            <div
-              *ngFor="
-                let header of form.datasource.controls.httpHeaders.controls;
-                let i = index
-              "
-              class="flex flex-row space-x-[10px]">
-              <!-- Header Name -->
-              <mat-form-field class="w-1/3">
-                <mat-label>Header Name</mat-label>
-                <input
-                  matInput
-                  placeholder="Header"
-                  autocomplete="new-header-name"
-                  [formControl]="header.controls.headerName" />
-              </mat-form-field>
-
-              <!-- Header Value -->
-              <mat-form-field class="grow">
-                <mat-label>Header Value</mat-label>
-                <input
-                  matInput
-                  placeholder="..."
-                  autocomplete="new-header-value"
-                  [formControl]="header.controls.headerValue" />
-              </mat-form-field>
-
-              <!-- Header Delete Button -->
-              <button
-                mat-button
-                color="warn"
-                style="height: 54px; margin-top: 4px; margin-left: 8px"
-                (click)="form.onHttpHeadersRemoveClick(i)">
-                Remove
-              </button>
-            </div>
-
-            <!-- Add Header Button -->
-            <div class="flex flex-row mb-[10px]">
-              <button
-                mat-button
-                color="accent"
-                (click)="form.onHttpHeadersAddClick()">
-                Add Additional Header
-              </button>
-            </div>
-          </ng-container>
-        </div>
-      </form>
-    </mat-step>
-  </mat-vertical-stepper>
-</mat-dialog-content>
-
-<mat-dialog-actions class="flex flex-row justify-end">
-  <button
-    mat-button
-    color="default"
-    [mat-dialog-close]="null"
-    [disabled]="loading">
-    Cancel
-  </button>
-
-  <button
-    mat-raised-button
-    color="primary"
-    [disabled]="!form.all.valid || loading"
-    (click)="onSave()">
-    {{ form.mode === 'CREATE' ? 'Create' : 'Update' }}
-  </button>
-</mat-dialog-actions>
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.component.ts b/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.component.ts
deleted file mode 100644
index de47264f6..000000000
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.component.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import {Component, Inject, OnDestroy} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {EMPTY, Observable, Subject, switchMap} from 'rxjs';
-import {catchError, finalize, map, takeUntil, tap} from 'rxjs/operators';
-import {IdResponseDto} from '@sovity.de/edc-client';
-import {EdcApiService} from '../../../../core/services/api/edc-api.service';
-import {AssetRequestBuilder} from '../../../../core/services/asset-request-builder';
-import {AssetService} from '../../../../core/services/asset.service';
-import {NotificationService} from '../../../../core/services/notification.service';
-import {ValidationMessages} from '../../../../core/validators/validation-messages';
-import {AssetEditDialogData} from './asset-edit-dialog-data';
-import {AssetEditDialogResult} from './asset-edit-dialog-result';
-import {AssetAdvancedFormBuilder} from './form/asset-advanced-form-builder';
-import {AssetDatasourceFormBuilder} from './form/asset-datasource-form-builder';
-import {AssetEditDialogForm} from './form/asset-edit-dialog-form';
-import {AssetMetadataFormBuilder} from './form/asset-metadata-form-builder';
-import {DATA_SOURCE_HTTP_METHODS} from './form/http-methods';
-import {AssetEditorDialogFormValue} from './form/model/asset-editor-dialog-form-model';
-
-@Component({
-  selector: 'asset-edit-dialog',
-  templateUrl: './asset-edit-dialog.component.html',
-  providers: [
-    AssetAdvancedFormBuilder,
-    AssetDatasourceFormBuilder,
-    AssetEditDialogForm,
-    AssetRequestBuilder,
-    AssetMetadataFormBuilder,
-  ],
-})
-export class AssetEditDialogComponent implements OnDestroy {
-  loading = false;
-
-  methods = DATA_SOURCE_HTTP_METHODS;
-
-  constructor(
-    private edcApiService: EdcApiService,
-    private assetService: AssetService,
-    public form: AssetEditDialogForm,
-    public validationMessages: ValidationMessages,
-    private assetEntryBuilder: AssetRequestBuilder,
-    private notificationService: NotificationService,
-    private dialogRef: MatDialogRef<AssetEditDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) private data: AssetEditDialogData,
-  ) {
-    this.form.reset(this.data.initialFormValue);
-  }
-
-  onSave() {
-    const formValue = this.form.value;
-
-    // Workaround around disabled controls not being included in the form value
-    if (formValue.mode !== 'CREATE') {
-      formValue.metadata!.id = this.form.metadata.controls.id.getRawValue();
-    }
-
-    this.form.all.disable();
-    this.loading = true;
-    this._saveRequest(formValue)
-      .pipe(
-        // Save Asset
-        takeUntil(this.ngOnDestroy$),
-        tap(() => {
-          this.notificationService.showInfo('Successfully saved asset');
-        }),
-        catchError((error) => {
-          console.error('Failed saving asset!', error);
-          this.notificationService.showError('Failed saving asset!');
-          this.form.all.enable();
-          return EMPTY;
-        }),
-        switchMap(() => this.assetService.fetchAssets()),
-        map(
-          (assets): AssetEditDialogResult => ({
-            refreshedList: assets,
-            asset: assets?.find(
-              (it) => it.assetId === this.form.value.metadata?.id,
-            )!,
-          }),
-        ),
-        finalize(() => {
-          this.loading = false;
-        }),
-      )
-      .subscribe({
-        next: (result: AssetEditDialogResult) => this.close(result),
-        error: (error) => {
-          console.error('Failed refreshing asset list!', error);
-          this.notificationService.showError('Failed refreshing asset list!');
-        },
-      });
-  }
-
-  private _saveRequest(
-    formValue: AssetEditorDialogFormValue,
-  ): Observable<IdResponseDto> {
-    const mode = formValue.mode;
-
-    if (mode === 'CREATE') {
-      const createRequest =
-        this.assetEntryBuilder.buildAssetCreateRequest(formValue);
-      return this.edcApiService.createAsset(createRequest);
-    }
-
-    if (mode === 'EDIT') {
-      const assetId = formValue.metadata?.id!;
-      const editRequest =
-        this.assetEntryBuilder.buildAssetEditRequest(formValue);
-      return this.edcApiService.editAsset(assetId, editRequest);
-    }
-
-    throw new Error(`Unsupported mode: ${mode}`);
-  }
-
-  private close(params: AssetEditDialogResult) {
-    this.dialogRef.close(params);
-  }
-
-  ngOnDestroy$ = new Subject();
-
-  ngOnDestroy(): void {
-    this.ngOnDestroy$.next(null);
-    this.ngOnDestroy$.complete();
-  }
-}
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.service.ts b/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.service.ts
deleted file mode 100644
index da1dcf7ff..000000000
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/asset-edit-dialog.service.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {Injectable} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
-import {NEVER, Observable} from 'rxjs';
-import {UiAssetMapped} from '../../../../core/services/models/ui-asset-mapped';
-import {showDialogUntil} from '../../../../core/utils/mat-dialog-utils';
-import {AssetEditDialogData} from './asset-edit-dialog-data';
-import {AssetEditDialogResult} from './asset-edit-dialog-result';
-import {AssetEditDialogComponent} from './asset-edit-dialog.component';
-import {AssetEditDialogFormMapper} from './form/asset-edit-dialog-form-mapper';
-
-@Injectable()
-export class AssetEditDialogService {
-  constructor(
-    private dialog: MatDialog,
-    private assetEditDialogFormMapper: AssetEditDialogFormMapper,
-  ) {}
-
-  showCreateDialog(
-    until$: Observable<any> = NEVER,
-  ): Observable<AssetEditDialogResult | undefined> {
-    const initialFormValue = this.assetEditDialogFormMapper.forCreate();
-    return this._open({initialFormValue}, until$);
-  }
-
-  showEditDialog(
-    asset: UiAssetMapped,
-    until$: Observable<any> = NEVER,
-  ): Observable<AssetEditDialogResult | undefined> {
-    const initialFormValue = this.assetEditDialogFormMapper.forEdit(asset);
-    return this._open({initialFormValue}, until$);
-  }
-
-  private _open(
-    data: AssetEditDialogData,
-    until$: Observable<any>,
-  ): Observable<AssetEditDialogResult | undefined> {
-    return showDialogUntil(
-      this.dialog,
-      AssetEditDialogComponent,
-      {data},
-      until$,
-    );
-  }
-}
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-metadata-form-builder.ts b/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-metadata-form-builder.ts
deleted file mode 100644
index 573355703..000000000
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/asset-metadata-form-builder.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import {Injectable} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
-import {combineLatest, distinctUntilChanged, pairwise} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {value$} from '../../../../../core/utils/form-group-utils';
-import {noWhitespacesOrColonsValidator} from '../../../../../core/validators/no-whitespaces-or-colons-validator';
-import {urlValidator} from '../../../../../core/validators/url-validator';
-import {AssetEditDialogMode} from '../asset-edit-dialog-mode';
-import {AssetsIdValidatorBuilder} from '../assets-id-validator-builder';
-import {
-  AssetMetadataFormModel,
-  AssetMetadataFormValue,
-} from './model/asset-metadata-form-model';
-
-@Injectable()
-export class AssetMetadataFormBuilder {
-  constructor(
-    private formBuilder: FormBuilder,
-    private assetsIdValidatorBuilder: AssetsIdValidatorBuilder,
-  ) {}
-
-  buildFormGroup(
-    initial: AssetMetadataFormValue,
-    mode: AssetEditDialogMode,
-  ): FormGroup<AssetMetadataFormModel> {
-    const metadata: FormGroup<AssetMetadataFormModel> =
-      this.formBuilder.nonNullable.group({
-        id: [
-          initial?.id!,
-          [Validators.required, noWhitespacesOrColonsValidator],
-          [this.assetsIdValidatorBuilder.assetIdDoesNotExistsValidator()],
-        ],
-        title: [initial?.title!, Validators.required],
-        version: [initial?.version!],
-        contentType: [initial?.contentType!],
-        description: [initial?.description!],
-        keywords: [initial?.keywords!],
-        language: [initial?.language ?? null],
-        publisher: [initial?.publisher!, urlValidator],
-        standardLicense: [initial?.standardLicense!, urlValidator],
-        endpointDocumentation: [initial?.endpointDocumentation!, urlValidator],
-      });
-
-    // generate id from name and version(if available)
-    if (mode === 'CREATE') {
-      this.initIdGeneration(
-        metadata.controls.id,
-        metadata.controls.title,
-        metadata.controls.version,
-      );
-    } else {
-      metadata.controls.id.disable();
-    }
-
-    return metadata;
-  }
-
-  private initIdGeneration(
-    idCtrl: FormControl<string>,
-    titleCtrl: FormControl<string>,
-    versionCtrl: FormControl<string>,
-  ) {
-    combineLatest([
-      value$<string>(titleCtrl).pipe(distinctUntilChanged()),
-      value$<string>(versionCtrl).pipe(distinctUntilChanged()),
-    ])
-      .pipe(
-        map(([title, version]) => this.generateId(title, version)),
-        pairwise(),
-      )
-      .subscribe(([previousId, currentId]) => {
-        if (!idCtrl.value || idCtrl.value === previousId) {
-          idCtrl.setValue(currentId);
-        }
-      });
-  }
-
-  private generateId(title: string | null, version: string | null) {
-    if (!title) {
-      return '';
-    }
-    const titleClean = this.cleanIdComponent(title);
-    const versionClean = this.cleanIdComponent(version);
-    return version ? `${titleClean}-${versionClean}` : titleClean;
-  }
-
-  private cleanIdComponent(s: string | null) {
-    return (s ?? '')
-      .trim()
-      .replace(':', '-')
-      .replaceAll(' ', '-')
-      .toLowerCase();
-  }
-}
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-editor-dialog-form-model.ts b/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-editor-dialog-form-model.ts
deleted file mode 100644
index cbc11c372..000000000
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-editor-dialog-form-model.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {FormControl, FormGroup, ɵFormGroupValue} from '@angular/forms';
-import {AssetEditDialogMode} from '../../asset-edit-dialog-mode';
-import {AssetAdvancedFormModel} from './asset-advanced-form-model';
-import {AssetDatasourceFormModel} from './asset-datasource-form-model';
-import {AssetMetadataFormModel} from './asset-metadata-form-model';
-
-/**
- * Form Model for AssetEditorDialog
- */
-export interface AssetEditorDialogFormModel {
-  mode: FormControl<AssetEditDialogMode>;
-  metadata: FormGroup<AssetMetadataFormModel>;
-  advanced?: FormGroup<AssetAdvancedFormModel>;
-  datasource?: FormGroup<AssetDatasourceFormModel>;
-}
-
-/**
- * Form Value for AssetEditorDialog
- */
-export type AssetEditorDialogFormValue =
-  ɵFormGroupValue<AssetEditorDialogFormModel>;
diff --git a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-metadata-form-model.ts b/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-metadata-form-model.ts
deleted file mode 100644
index cef83fbf2..000000000
--- a/src/app/routes/connector-ui/asset-page/asset-edit-dialog/form/model/asset-metadata-form-model.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {FormControl, ɵFormGroupValue} from '@angular/forms';
-import {LanguageSelectItem} from '../../../language-select/language-select-item';
-
-/**
- * Form Model for AssetEditorDialog > Metadata
- */
-export interface AssetMetadataFormModel {
-  id: FormControl<string>;
-  title: FormControl<string>;
-  version: FormControl<string>;
-  contentType: FormControl<string>;
-  description: FormControl<string>;
-  keywords: FormControl<string[]>;
-  language: FormControl<LanguageSelectItem | null>;
-  publisher: FormControl<string>;
-  standardLicense: FormControl<string>;
-  endpointDocumentation: FormControl<string>;
-}
-
-/**
- * Form Value for AssetEditorDialog > Metadata
- */
-export type AssetMetadataFormValue = ɵFormGroupValue<AssetMetadataFormModel>;
diff --git a/src/app/routes/connector-ui/asset-page/asset-page.module.ts b/src/app/routes/connector-ui/asset-page/asset-page.module.ts
index 6a4468112..0623da6d5 100644
--- a/src/app/routes/connector-ui/asset-page/asset-page.module.ts
+++ b/src/app/routes/connector-ui/asset-page/asset-page.module.ts
@@ -25,16 +25,7 @@ import {DataAddressModule} from '../../../component-library/data-address/data-ad
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
 import {UiElementsModule} from '../../../component-library/ui-elements/ui-elements.module';
 import {AssetCardsComponent} from './asset-cards/asset-cards.component';
-import {AssetEditDialogComponent} from './asset-edit-dialog/asset-edit-dialog.component';
-import {AssetEditDialogService} from './asset-edit-dialog/asset-edit-dialog.service';
-import {AssetEditDialogFormMapper} from './asset-edit-dialog/form/asset-edit-dialog-form-mapper';
 import {AssetPageComponent} from './asset-page/asset-page.component';
-import {DataCategorySelectComponent} from './data-category-select/data-category-select.component';
-import {DataSubcategoryItemsPipe} from './data-subcategory-select/data-subcategory-items.pipe';
-import {DataSubcategorySelectComponent} from './data-subcategory-select/data-subcategory-select.component';
-import {KeywordSelectComponent} from './keyword-select/keyword-select.component';
-import {LanguageSelectComponent} from './language-select/language-select.component';
-import {TransportModeSelectComponent} from './transport-mode-select/transport-mode-select.component';
 
 @NgModule({
   imports: [
@@ -70,18 +61,7 @@ import {TransportModeSelectComponent} from './transport-mode-select/transport-mo
     PipesAndDirectivesModule,
     UiElementsModule,
   ],
-  declarations: [
-    AssetCardsComponent,
-    AssetEditDialogComponent,
-    AssetPageComponent,
-    DataCategorySelectComponent,
-    DataSubcategorySelectComponent,
-    DataSubcategoryItemsPipe,
-    KeywordSelectComponent,
-    LanguageSelectComponent,
-    TransportModeSelectComponent,
-  ],
+  declarations: [AssetCardsComponent, AssetPageComponent],
   exports: [AssetPageComponent],
-  providers: [AssetEditDialogService, AssetEditDialogFormMapper],
 })
 export class AssetPageModule {}
diff --git a/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.html b/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.html
index 65bfd342a..f8177e406 100644
--- a/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.html
+++ b/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.html
@@ -18,15 +18,17 @@
     </mat-form-field>
 
     <!-- Create Button -->
-    <button
+    <a
       id="create-button"
       color="primary"
       mat-raised-button
       style="margin-top: 8px; height: 44px"
-      (click)="onCreate()">
-      <mat-icon>add_circle_outline</mat-icon>
-      Create asset
-    </button>
+      routerLink="/create-asset">
+      <div class="flex justify-center items-center h-full gap-1">
+        <mat-icon class="mt-[1px]">add_circle_outline</mat-icon>
+        Create asset
+      </div>
+    </a>
 
     <!-- Spacer -->
     <div class="grow"></div>
diff --git a/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.ts b/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.ts
index 3b7d4a961..116920020 100644
--- a/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.ts
+++ b/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.ts
@@ -1,14 +1,13 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {BehaviorSubject, Subject, merge} from 'rxjs';
-import {filter, map, switchMap} from 'rxjs/operators';
+import {Router} from '@angular/router';
+import {BehaviorSubject, Subject} from 'rxjs';
+import {filter, switchMap} from 'rxjs/operators';
 import {OnAssetEditClickFn} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data';
 import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
 import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
 import {AssetService} from '../../../../core/services/asset.service';
 import {Fetched} from '../../../../core/services/models/fetched';
 import {UiAssetMapped} from '../../../../core/services/models/ui-asset-mapped';
-import {filterNotNull} from '../../../../core/utils/rxjs-utils';
-import {AssetEditDialogService} from '../asset-edit-dialog/asset-edit-dialog.service';
 
 export interface AssetList {
   filteredAssets: UiAssetMapped[];
@@ -22,27 +21,24 @@ export interface AssetList {
 })
 export class AssetPageComponent implements OnInit, OnDestroy {
   assetList: Fetched<AssetList> = Fetched.empty();
-  assetListUpdater$ = new Subject<UiAssetMapped[]>();
   searchText = '';
   private fetch$ = new BehaviorSubject(null);
 
   constructor(
     private assetServiceMapped: AssetService,
-    private assetEditDialogService: AssetEditDialogService,
     private assetDetailDialogDataService: AssetDetailDialogDataService,
     private assetDetailDialogService: AssetDetailDialogService,
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
-    merge(
-      this.fetch$.pipe(
+    this.fetch$
+      .pipe(
         switchMap(() => this.assetServiceMapped.fetchAssets()),
         Fetched.wrap({
           failureMessage: 'Failed fetching asset list.',
         }),
-      ),
-      this.assetListUpdater$.pipe(map(Fetched.ready)),
-    )
+      )
       .pipe(
         Fetched.map(
           (assets): AssetList => ({
@@ -60,25 +56,9 @@ export class AssetPageComponent implements OnInit, OnDestroy {
     this.refresh();
   }
 
-  onCreate() {
-    this.assetEditDialogService
-      .showCreateDialog(this.ngOnDestroy$)
-      .subscribe((result) => {
-        if (result?.refreshedList) {
-          this.assetListUpdater$.next(result.refreshedList);
-        }
-      });
-  }
-
   onAssetClick(asset: UiAssetMapped) {
     const onAssetEditClick: OnAssetEditClickFn = (asset, onAssetUpdated) => {
-      this.assetEditDialogService
-        .showEditDialog(asset, this.ngOnDestroy$)
-        .pipe(filterNotNull())
-        .subscribe((result) => {
-          this.assetListUpdater$.next(result.refreshedList);
-          onAssetUpdated(buildDialogData(result.asset));
-        });
+      this.router.navigate(['/edit-asset', asset.assetId]);
     };
 
     const buildDialogData = (asset: UiAssetMapped) =>
diff --git a/src/app/routes/connector-ui/asset-page/data-category-select/data-category-select.component.html b/src/app/routes/connector-ui/asset-page/data-category-select/data-category-select.component.html
deleted file mode 100644
index 9b6585a5a..000000000
--- a/src/app/routes/connector-ui/asset-page/data-category-select/data-category-select.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<mat-form-field class="grow form-field" color="accent">
-  <mat-label>{{ label }}</mat-label>
-  <mat-select [formControl]="control" [compareWith]="'id' | compareByField">
-    <mat-option [value]="null"></mat-option>
-    <mat-option *ngFor="let item of items" [value]="item">
-      {{ item.label }}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
diff --git a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select.component.html b/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select.component.html
deleted file mode 100644
index f622010ad..000000000
--- a/src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<mat-form-field class="grow form-field" color="accent">
-  <mat-label>{{ label }}</mat-label>
-  <mat-select [formControl]="control" [compareWith]="'id' | compareByField">
-    <mat-option [value]="null">-</mat-option>
-    <mat-option
-      *ngFor="let item of dataCategory | dataSubcategoryItems"
-      [value]="item">
-      {{ item.label }}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
diff --git a/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select.component.html b/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select.component.html
deleted file mode 100644
index 9b6585a5a..000000000
--- a/src/app/routes/connector-ui/asset-page/transport-mode-select/transport-mode-select.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<mat-form-field class="grow form-field" color="accent">
-  <mat-label>{{ label }}</mat-label>
-  <mat-select [formControl]="control" [compareWith]="'id' | compareByField">
-    <mat-option [value]="null"></mat-option>
-    <mat-option *ngFor="let item of items" [value]="item">
-      {{ item.label }}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
diff --git a/src/app/routes/connector-ui/connector-ui-routing.module.ts b/src/app/routes/connector-ui/connector-ui-routing.module.ts
index 361530d81..a948fa144 100644
--- a/src/app/routes/connector-ui/connector-ui-routing.module.ts
+++ b/src/app/routes/connector-ui/connector-ui-routing.module.ts
@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {EdcUiFeature} from '../../core/config/profiles/edc-ui-feature';
+import {AssetEditPageComponent} from './asset-edit-page/asset-edit-page/asset-edit-page.component';
 import {AssetPageComponent} from './asset-page/asset-page/asset-page.component';
 import {CatalogBrowserPageComponent} from './catalog-browser-page/catalog-browser-page/catalog-browser-page.component';
 import {ConnectorUiComponent} from './connector-ui.component';
@@ -21,51 +21,57 @@ export const routes: Routes = [
   {
     path: 'dashboard',
     component: DashboardPageComponent,
-    data: {title: 'Dashboard', icon: 'data_usage'},
+    data: {title: 'Dashboard'},
+  },
+  {
+    path: 'create-asset',
+    component: AssetEditPageComponent,
+    data: {title: 'Create Data Offer'},
+  },
+  {
+    path: 'edit-asset/:id',
+    component: AssetEditPageComponent,
+    data: {title: 'Edit Asset'},
   },
   {
     path: 'catalog-browser',
     component: CatalogBrowserPageComponent,
-    data: {title: 'Catalog Browser', icon: 'sim_card'},
+    data: {title: 'Catalog Browser'},
   },
   {
     path: 'contracts',
     component: ContractAgreementPageComponent,
-    data: {title: 'Contracts', icon: 'assignment_turned_in'},
+    data: {title: 'Contracts'},
   },
   {
     path: 'transfer-history',
     component: TransferHistoryPageComponent,
-    data: {title: 'Transfer History', icon: 'assignment'},
+    data: {title: 'Transfer History'},
   },
   {
     path: 'my-assets', // must not be "assets" to prevent conflict with assets directory
     component: AssetPageComponent,
-    data: {title: 'Assets', icon: 'upload'},
+    data: {title: 'Assets'},
   },
   {
     path: 'policies',
     component: PolicyDefinitionPageComponent,
-    data: {title: 'Policies', icon: 'policy'},
+    data: {title: 'Policies'},
   },
   {
     path: 'policies/create',
     component: PolicyDefinitionCreatePageComponent,
-    data: {title: 'Create Policy', icon: 'policy', skipNavItem: true},
+    data: {title: 'Create Policy'},
   },
   {
     path: 'contract-definitions',
     component: ContractDefinitionPageComponent,
-    data: {title: 'Contract Definitions', icon: 'rule'},
+    data: {title: 'Contract Definitions'},
   },
   {
     path: 'logout',
     component: LogoutPageComponent,
-    data: {
-      title: 'Logout',
-      icon: 'logout',
-      requiresFeature: 'logout-button' as EdcUiFeature,
-    },
+    data: {title: 'Logout'},
   },
 ];
 
diff --git a/src/app/routes/connector-ui/connector-ui.component.html b/src/app/routes/connector-ui/connector-ui.component.html
index 3c52d3d26..6642469c5 100644
--- a/src/app/routes/connector-ui/connector-ui.component.html
+++ b/src/app/routes/connector-ui/connector-ui.component.html
@@ -14,24 +14,29 @@
         [attr.src]="config.brandLogoSrc"
         [style]="config.brandLogoStyle" />
     </mat-toolbar>
-    <mat-nav-list class="overflow-auto grow">
-      <a *ngFor="let route of routes" [routerLink]="[route.path]">
-        <mat-list-item
-          *ngIf="
-            route.component &&
-            (!route.data?.requiresFeature ||
-              (route.data!.requiresFeature! | isActiveFeature))
-          "
-          [routerLinkActive]="['is-active']">
-          <mat-icon mat-list-icon>{{ route.data?.icon }}</mat-icon>
-          <span matLine>{{ route.data?.title ?? route.path }}</span>
-        </mat-list-item>
-      </a>
-    </mat-nav-list>
+    <div class="flex flex-col gap-8">
+      <div *ngFor="let navItemGroup of navItemGroups">
+        <h3
+          *ngIf="navItemGroup.title"
+          class="!ml-5 !my-0 !p-0 !font-medium !text-gray-500 !uppercase !tracking-wide !text-xs">
+          {{ navItemGroup.title }}
+        </h3>
+        <mat-nav-list>
+          <a
+            *ngFor="let navItem of navItemGroup.items"
+            [routerLink]="[navItem.path]">
+            <mat-list-item [routerLinkActive]="['is-active']">
+              <mat-icon mat-list-icon>{{ navItem.icon }}</mat-icon>
+              <span matLine>{{ navItem.title }}</span>
+            </mat-list-item>
+          </a>
+        </mat-nav-list>
+      </div>
+    </div>
     <div
       *ngIf="'sovity-zammad-integration' | isActiveFeature"
       id="contact-form"
-      class="align-to-bottom shrink-0">
+      class="align-to-bottom shrink-0 mt-auto">
       <strong>Do you have feedback or need help?</strong>
       <p><em>Select &nbsp;<kbd>SAML</kbd>&nbsp; login on following page</em></p>
       <a
@@ -71,6 +76,8 @@
       </button>
       <span>{{ titleService.getTitle() }}</span>
     </mat-toolbar>
-    <router-outlet></router-outlet>
+    <main class="container">
+      <router-outlet></router-outlet>
+    </main>
   </mat-sidenav-content>
 </mat-sidenav-container>
diff --git a/src/app/routes/connector-ui/connector-ui.component.ts b/src/app/routes/connector-ui/connector-ui.component.ts
index e1c96f450..021973886 100644
--- a/src/app/routes/connector-ui/connector-ui.component.ts
+++ b/src/app/routes/connector-ui/connector-ui.component.ts
@@ -3,10 +3,11 @@ import {Component, Inject, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 import {Observable} from 'rxjs';
 import {map, shareReplay} from 'rxjs/operators';
+import {NavItemGroup} from 'src/app/core/services/models/nav-item-group';
+import {NavItemsBuilder} from 'src/app/core/services/nav-items-builder';
 import {APP_CONFIG, AppConfig} from '../../core/config/app-config';
 import {LoginPollingService} from '../../core/services/login-polling.service';
 import {TitleUtilsService} from '../../core/services/title-utils.service';
-import {routes} from './connector-ui-routing.module';
 
 @Component({
   selector: 'connector-ui-page-layout',
@@ -22,7 +23,7 @@ export class ConnectorUiComponent implements OnInit {
       shareReplay(),
     );
 
-  routes = routes.filter((it) => !it.data?.skipNavItem);
+  navItemGroups: NavItemGroup[] = [];
 
   constructor(
     @Inject(APP_CONFIG) public config: AppConfig,
@@ -30,7 +31,10 @@ export class ConnectorUiComponent implements OnInit {
     public titleService: Title,
     private breakpointObserver: BreakpointObserver,
     private loginPollingService: LoginPollingService,
-  ) {}
+    private navItemsBuilder: NavItemsBuilder,
+  ) {
+    this.navItemGroups = this.navItemsBuilder.buildNavItemGroups();
+  }
 
   ngOnInit() {
     this.titleUtilsService.startUpdatingTitleFromRouteData('EDC Connector');
diff --git a/src/app/routes/connector-ui/connector-ui.module.ts b/src/app/routes/connector-ui/connector-ui.module.ts
index 07220ea13..6d7211378 100644
--- a/src/app/routes/connector-ui/connector-ui.module.ts
+++ b/src/app/routes/connector-ui/connector-ui.module.ts
@@ -10,6 +10,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {PipesAndDirectivesModule} from '../../component-library/pipes-and-directives/pipes-and-directives.module';
 import {UiElementsModule} from '../../component-library/ui-elements/ui-elements.module';
+import {AssetEditPageModule} from './asset-edit-page/asset-edit-page.module';
 import {AssetPageModule} from './asset-page/asset-page.module';
 import {CatalogBrowserPageModule} from './catalog-browser-page/catalog-browser-page.module';
 import {ConnectorUiRoutingModule} from './connector-ui-routing.module';
@@ -45,6 +46,7 @@ import {TransferHistoryPageModule} from './transfer-history-page/transfer-histor
 
     // Pages
     AssetPageModule,
+    AssetEditPageModule,
     CatalogBrowserPageModule,
     ContractAgreementPageModule,
     ContractDefinitionPageModule,
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form-model.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form-model.ts
index 40985f508..5e3edf595 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form-model.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form-model.ts
@@ -4,8 +4,8 @@ import {
   FormGroup,
   ɵFormGroupValue,
 } from '@angular/forms';
+import {HttpDatasourceQueryParamFormModel} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-query-param-form-model';
 import {DataAddressType} from '../../../../component-library/data-address/data-address-type-select/data-address-type';
-import {HttpDatasourceQueryParamFormModel} from '../../asset-page/asset-edit-dialog/form/model/http-datasource-query-param-form-model';
 import {HttpDatasinkAuthHeaderType} from './http-datasink-auth-header-type';
 import {HttpDatasinkHeaderFormModel} from './http-datasink-header-form-model';
 
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form.ts
index 6e0ffd680..98219c30b 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-form.ts
@@ -1,11 +1,11 @@
 import {Injectable} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {HttpDatasourceAuthHeaderType} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-auth-header-type';
+import {HttpDatasourceQueryParamFormModel} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/model/http-datasource-query-param-form-model';
 import {DataAddressType} from '../../../../component-library/data-address/data-address-type-select/data-address-type';
 import {switchDisabledControls} from '../../../../core/utils/form-group-utils';
 import {jsonValidator} from '../../../../core/validators/json-validator';
 import {urlValidator} from '../../../../core/validators/url-validator';
-import {HttpDatasourceAuthHeaderType} from '../../asset-page/asset-edit-dialog/form/model/http-datasource-auth-header-type';
-import {HttpDatasourceQueryParamFormModel} from '../../asset-page/asset-edit-dialog/form/model/http-datasource-query-param-form-model';
 import {
   ContractAgreementTransferDialogFormModel,
   ContractAgreementTransferDialogFormValue,
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
index 0a533e621..d73c7632c 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
@@ -7,15 +7,15 @@ import {
   InitiateCustomTransferRequest,
   InitiateTransferRequest,
 } from '@sovity.de/edc-client';
+import {
+  DATA_SINK_HTTP_METHODS,
+  DATA_SOURCE_HTTP_METHODS,
+} from 'src/app/component-library/edit-asset-form/edit-asset-form/form/http-methods';
 import {EdcApiService} from '../../../../core/services/api/edc-api.service';
 import {DataAddressMapper} from '../../../../core/services/data-address-mapper';
 import {NotificationService} from '../../../../core/services/notification.service';
 import {TransferDataSinkMapper} from '../../../../core/services/transfer-data-sink-mapper';
 import {ValidationMessages} from '../../../../core/validators/validation-messages';
-import {
-  DATA_SINK_HTTP_METHODS,
-  DATA_SOURCE_HTTP_METHODS,
-} from '../../asset-page/asset-edit-dialog/form/http-methods';
 import {ContractAgreementTransferDialogData} from './contract-agreement-transfer-dialog-data';
 import {ContractAgreementTransferDialogForm} from './contract-agreement-transfer-dialog-form';
 import {ContractAgreementTransferDialogFormValue} from './contract-agreement-transfer-dialog-form-model';
diff --git a/src/assets/fonts/Inter-Bold.woff2 b/src/assets/fonts/Inter-Bold.woff2
new file mode 100644
index 000000000..0f1b15763
Binary files /dev/null and b/src/assets/fonts/Inter-Bold.woff2 differ
diff --git a/src/assets/fonts/Inter-Light.woff2 b/src/assets/fonts/Inter-Light.woff2
new file mode 100644
index 000000000..dbe61437a
Binary files /dev/null and b/src/assets/fonts/Inter-Light.woff2 differ
diff --git a/src/assets/fonts/Inter-Medium.woff2 b/src/assets/fonts/Inter-Medium.woff2
new file mode 100644
index 000000000..0fd2ee737
Binary files /dev/null and b/src/assets/fonts/Inter-Medium.woff2 differ
diff --git a/src/assets/fonts/Inter-Regular.woff2 b/src/assets/fonts/Inter-Regular.woff2
new file mode 100644
index 000000000..b8699af29
Binary files /dev/null and b/src/assets/fonts/Inter-Regular.woff2 differ
diff --git a/src/assets/fonts/Inter-SemiBold.woff2 b/src/assets/fonts/Inter-SemiBold.woff2
new file mode 100644
index 000000000..95c48b184
Binary files /dev/null and b/src/assets/fonts/Inter-SemiBold.woff2 differ
diff --git a/src/styles.scss b/src/styles.scss
index 25a87f790..5fcd9403c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -238,7 +238,7 @@ body {
   @apply prose-th:px-[13px] prose-th:py-[6px] prose-th:border prose-th:border-[--tw-prose-td-borders] prose-th:align-middle prose-th:border-solid;
   @apply prose-td:px-[13px] prose-td:py-[6px] prose-td:border prose-td:border-[--tw-prose-td-borders] prose-td:align-middle prose-td:border-solid;
 
-  font: 400 14px / 20px Open Sans;
+  font: 400 14px / 20px Sans;
   letter-spacing: normal;
 
   h1,
@@ -304,3 +304,19 @@ body {
     margin-top: -1px;
   }
 }
+
+#edit-asset-form .mat-form-field-infix {
+  border-top: 4.8px solid transparent !important;
+}
+
+.normal-form-field .mat-form-field-infix {
+  border-top: 13.6px solid transparent !important;
+}
+
+#edit-asset-form .mat-form-field-subscript-wrapper {
+  font-size: 100%;
+}
+
+#edit-asset-form .mat-hint {
+  font-size: 0.75rem;
+}
diff --git a/src/tailwind.scss b/src/tailwind.scss
index db7df72e2..7eed5d6e7 100644
--- a/src/tailwind.scss
+++ b/src/tailwind.scss
@@ -2,13 +2,13 @@
  * This injects Tailwind's base styles and any base styles registered by
  * plugins.
  */
-// @tailwind base;
+@tailwind base;
 
 /**
  * This injects Tailwind's component classes and any component classes
  * registered by plugins.
  */
-// @tailwind components;
+@tailwind components;
 
 /**
  * This injects Tailwind's utility classes and any utility classes registered
diff --git a/src/theme.scss b/src/theme.scss
index 30d650f5d..f89e157c5 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -5,13 +5,44 @@
 
 // Import styles that aren't theme dependant (including typography)
 
-/* open-sans-regular - latin */
 @font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Open Sans';
+  font-display: swap;
+  font-family: 'Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('assets/fonts/Inter-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Sans';
   font-style: normal;
   font-weight: 400;
-  src: url('assets/fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('assets/fonts/Inter-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('assets/fonts/Inter-Bold.woff2') format('woff2');
 }
 
 /* material-icons-regular - latin */
@@ -41,7 +72,7 @@
 }
 
 $custom-typography: mat.define-typography-config(
-  $font-family: 'Open Sans',
+  $font-family: 'Sans',
 );
 @include mat.core($custom-typography);
 
diff --git a/tailwind.config.js b/tailwind.config.js
index e8f1b6d90..0312164eb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,14 @@ module.exports = {
   },
   darkMode: 'class', // or 'media' or 'class'
   theme: {
+    container: {
+      center: true,
+      padding: '0.5rem',
+      screens: {
+        '2xl': '87.5rem',
+        '3xl': '100rem',
+      },
+    },
     extend: {},
   },
   variants: {