diff --git a/apps/dsp-app/src/app/app-routing.module.ts b/apps/dsp-app/src/app/app-routing.module.ts
index dc35c08048..7279b18df8 100644
--- a/apps/dsp-app/src/app/app-routing.module.ts
+++ b/apps/dsp-app/src/app/app-routing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
+import { CreateListInfoPageComponent, ListComponent } from '@dasch-swiss/vre/shared/app-list';
 import {
   ResourceComponent,
   ResourcePage2Component,
@@ -18,8 +19,6 @@ import { DataModelsComponent } from './project/data-models/data-models.component
 import { DescriptionComponent } from './project/description/description.component';
 import { EditProjectFormPageComponent } from './project/edit-project-form-page/edit-project-form-page.component';
 import { ImageSettingsComponent } from './project/image-settings/image-settings.component';
-import { ListComponent } from './project/list/list.component';
-import { CreateListInfoPageComponent } from './project/list/reusable-list-info-form/create-list-info-page.component';
 import { OntologyFormComponent } from './project/ontology/ontology-form/ontology-form.component';
 import { OntologyComponent } from './project/ontology/ontology.component';
 import { OntologyClassInstanceComponent } from './project/ontology-classes/ontology-class-instance/ontology-class-instance.component';
diff --git a/apps/dsp-app/src/app/app.module.ts b/apps/dsp-app/src/app/app.module.ts
index e8f599a1eb..bdfb42b83f 100644
--- a/apps/dsp-app/src/app/app.module.ts
+++ b/apps/dsp-app/src/app/app.module.ts
@@ -23,6 +23,11 @@ import {
 } from '@dasch-swiss/vre/shared/app-config';
 import { AppDatePickerComponent } from '@dasch-swiss/vre/shared/app-date-picker';
 import { AppErrorHandler } from '@dasch-swiss/vre/shared/app-error-handler';
+import {
+  CreateListInfoPageComponent,
+  ReusableListInfoFormComponent,
+  ListComponents,
+} from '@dasch-swiss/vre/shared/app-list';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
 import {
   AppProgressIndicatorComponent,
@@ -39,6 +44,7 @@ import {
   MultiLanguageTextareaComponent,
   MutiLanguageInputComponent,
 } from '@dasch-swiss/vre/shared/app-string-literal';
+import { UiComponents } from '@dasch-swiss/vre/shared/app-ui';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as Sentry from '@sentry/angular-ivy';
@@ -49,7 +55,6 @@ import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { ConfirmDialogComponent } from './main/action/confirm-dialog/confirm-dialog.component';
 import { HintComponent } from './main/action/hint/hint.component';
 import { LoginFormComponent } from './main/action/login-form/login-form.component';
 import { SelectedResourcesComponent } from './main/action/selected-resources/selected-resources.component';
@@ -87,17 +92,6 @@ import { EditProjectFormPageComponent } from './project/edit-project-form-page/e
 import { ImageDisplayAbsoluteComponent } from './project/image-settings/image-display-absolute.component';
 import { ImageDisplayRatioComponent } from './project/image-settings/image-display-ratio.component';
 import { ImageSettingsComponent } from './project/image-settings/image-settings.component';
-import { ActionBubbleComponent } from './project/list/action-bubble/action-bubble.component';
-import { ListItemComponent } from './project/list/list-item/list-item.component';
-import { ListItemElementComponent } from './project/list/list-item-element/list-item-element.component';
-import { CreateListItemDialogComponent } from './project/list/list-item-form/edit-list-item/create-list-item-dialog.component';
-import { EditListItemDialogComponent } from './project/list/list-item-form/edit-list-item/edit-list-item-dialog.component';
-import { ListItemFormComponent } from './project/list/list-item-form/list-item-form.component';
-import { ReusableListItemFormComponent } from './project/list/list-item-form/reusable-list-item-form.component';
-import { ListComponent } from './project/list/list.component';
-import { CreateListInfoPageComponent } from './project/list/reusable-list-info-form/create-list-info-page.component';
-import { EditListInfoDialogComponent } from './project/list/reusable-list-info-form/edit-list-info-dialog.component';
-import { ReusableListInfoFormComponent } from './project/list/reusable-list-info-form/reusable-list-info-form.component';
 import { CreateResourceClassDialogComponent } from './project/ontology/create-resource-class-dialog/create-resource-class-dialog.component';
 import { EditResourceClassDialogComponent } from './project/ontology/edit-resource-class-dialog/edit-resource-class-dialog.component';
 import { OntologyFormComponent } from './project/ontology/ontology-form/ontology-form.component';
@@ -163,8 +157,9 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     ...ResourcePageComponents,
     ...RepresentationsComponents,
     ...CommonToMoveComponents,
+    ...ListComponents,
+    ...UiComponents,
     AccountComponent,
-    ActionBubbleComponent,
     AddUserComponent,
     AdminImageDirective,
     AdvancedSearchContainerComponent,
@@ -176,7 +171,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     ColorPickerComponent,
     CommonInputComponent,
     ComparisonComponent,
-    ConfirmDialogComponent,
     CookiePolicyComponent,
     CreateUserDialogComponent,
     CreateResourceClassDialogComponent,
@@ -201,15 +195,8 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     KnoraDatePipe,
     LoadingButtonDirective,
     LinkifyPipe,
-    ListComponent,
-    EditListInfoDialogComponent,
-    EditListItemDialogComponent,
     CreateListInfoPageComponent,
     ReusableListInfoFormComponent,
-    ReusableListItemFormComponent,
-    ListItemComponent,
-    ListItemElementComponent,
-    ListItemFormComponent,
     ListViewComponent,
     LoginFormComponent,
     MembershipComponent,
@@ -261,7 +248,6 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     ProjectTileComponent,
     DataModelsComponent,
     IsFalsyPipe,
-    CreateListItemDialogComponent,
     ImageDisplayAbsoluteComponent,
     MultipleViewerComponent,
   ],
diff --git a/apps/dsp-app/src/app/project/list/list.component.spec.ts b/apps/dsp-app/src/app/project/list/list.component.spec.ts
deleted file mode 100644
index 375b23fdb7..0000000000
--- a/apps/dsp-app/src/app/project/list/list.component.spec.ts
+++ /dev/null
@@ -1,304 +0,0 @@
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { MatDialogHarness } from '@angular/material/dialog/testing';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ActivatedRoute, Router } from '@angular/router';
-import {
-  ApiResponseData,
-  ListNodeInfo,
-  ListsEndpointAdmin,
-  ListsResponse,
-  MockProjects,
-  ProjectResponse,
-  ProjectsEndpointAdmin,
-  ReadProject,
-} from '@dasch-swiss/dsp-js';
-import { DialogComponent, DialogHeaderComponent } from '@dasch-swiss/vre/shared/app-common-to-move';
-import { AppConfigService, DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
-import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging';
-import { Session, SessionService } from '@dasch-swiss/vre/shared/app-session';
-import { ApplicationStateService } from '@dasch-swiss/vre/shared/app-state-service';
-import { StringifyStringLiteralPipe } from '@dsp-app/src/app/main/pipes/string-transformation/stringify-string-literal.pipe';
-import { TruncatePipe } from '@dsp-app/src/app/main/pipes/string-transformation/truncate.pipe';
-import { TestConfig } from '@dsp-app/src/test.config';
-import { TranslateModule } from '@ngx-translate/core';
-import { MockProvider } from 'ng-mocks';
-import { of } from 'rxjs';
-import { AjaxResponse } from 'rxjs/ajax';
-import { ListComponent } from './list.component';
-
-/**
- * test Host Component
- */
-@Component({
-  template: '<app-list #listComponent></app-list>',
-})
-class TestHostComponent {
-  @ViewChild('listComponent') listComponent: ListComponent;
-}
-
-/**
- * mock ListItem.
- */
-@Component({
-  template: '<app-list-item></app-list-item>',
-})
-class MockListItemComponent {}
-
-/**
- * mock ListItemForm.
- */
-@Component({
-  template: '<app-list-item-form></app-list-item-form>',
-})
-class MockListItemFormComponent {}
-
-describe('ListComponent', () => {
-  let testHostComponent: TestHostComponent;
-  let testHostFixture: ComponentFixture<TestHostComponent>;
-  let rootLoader: HarnessLoader;
-  let overlayContainer: OverlayContainer;
-
-  const appInitSpy = {
-    dspAppConfig: {
-      iriBase: 'http://rdfh.ch',
-    },
-  };
-
-  beforeEach(waitForAsync(() => {
-    const dspConnSpyObj = {
-      admin: {
-        listsEndpoint: jasmine.createSpyObj('listsEndpoint', ['getListsInProject', 'deleteListNode']),
-        projectsEndpoint: jasmine.createSpyObj('projectsEndpoint', ['getProjectByIri']),
-      },
-    };
-
-    const sessionServiceSpy = jasmine.createSpyObj('SessionService', ['getSession']);
-
-    const applicationStateServiceSpy = jasmine.createSpyObj('ApplicationStateService', ['get']);
-
-    const routerSpy = jasmine.createSpyObj('Router', ['navigate', 'navigateByUrl']);
-
-    TestBed.configureTestingModule({
-      declarations: [
-        ListComponent,
-        TestHostComponent,
-        MockListItemComponent,
-        MockListItemFormComponent,
-        DialogComponent,
-        DialogHeaderComponent,
-        StringifyStringLiteralPipe,
-        TruncatePipe,
-      ],
-      imports: [
-        BrowserAnimationsModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatIconModule,
-        MatSelectModule,
-        MatSnackBarModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        TranslateModule.forRoot(),
-      ],
-      providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            parent: {
-              paramMap: of({
-                get: (param: string) => {
-                  if (param === 'uuid') {
-                    return TestConfig.ProjectUuid;
-                  }
-                },
-              }),
-              snapshot: {
-                url: [{ path: 'project' }],
-              },
-            },
-            params: of({ list: 'mockList01' }),
-            snapshot: {
-              params: [{ id: 'http://rdfh.ch/lists/0001/mockList01' }],
-            },
-          },
-        },
-        {
-          provide: AppConfigService,
-          useValue: appInitSpy,
-        },
-        MockProvider(AppLoggingService),
-        {
-          provide: DspApiConnectionToken,
-          useValue: dspConnSpyObj,
-        },
-        {
-          provide: SessionService,
-          useValue: sessionServiceSpy,
-        },
-        {
-          provide: ApplicationStateService,
-          useValue: applicationStateServiceSpy,
-        },
-        {
-          provide: Router,
-          useValue: routerSpy,
-        },
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: {},
-        },
-        {
-          provide: MatDialogRef,
-          useValue: {},
-        },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  }));
-
-  afterEach(async () => {
-    const dialogs = await rootLoader.getAllHarnesses(MatDialogHarness);
-    await Promise.all(dialogs.map(async d => await d.close()));
-
-    // angular won't call this for us so we need to do it ourselves to avoid leaks.
-    overlayContainer.ngOnDestroy();
-  });
-
-  describe('Displaying lists', () => {
-    beforeEach(() => {
-      // mock session service
-      const sessionSpy = TestBed.inject(SessionService);
-
-      (sessionSpy as jasmine.SpyObj<SessionService>).getSession.and.callFake(() => {
-        const session: Session = {
-          id: 12345,
-          user: {
-            name: 'username',
-            jwt: 'myToken',
-            lang: 'en',
-            sysAdmin: true,
-            projectAdmin: [],
-          },
-        };
-
-        return session;
-      });
-
-      // mock application state service
-      const applicationStateServiceSpy = TestBed.inject(ApplicationStateService);
-
-      (applicationStateServiceSpy as jasmine.SpyObj<ApplicationStateService>).get.and.callFake(() => {
-        const response: ProjectResponse = new ProjectResponse();
-
-        const mockProjects = MockProjects.mockProjects();
-
-        response.project = mockProjects.body.projects[0];
-
-        return of(response.project as ReadProject);
-      });
-
-      // mock router
-      const routerSpy = TestBed.inject(Router);
-
-      (routerSpy as jasmine.SpyObj<Router>).navigate.and.stub();
-      (routerSpy as jasmine.SpyObj<Router>).navigateByUrl.and.stub();
-
-      // mock lists endpoint
-      const dspConnSpy = TestBed.inject(DspApiConnectionToken);
-
-      (dspConnSpy.admin.listsEndpoint as jasmine.SpyObj<ListsEndpointAdmin>).getListsInProject.and.callFake(() => {
-        const response = new ListsResponse();
-
-        response.lists = new Array<ListNodeInfo>();
-
-        const mockList1 = new ListNodeInfo();
-        mockList1.comments = [];
-        mockList1.id = 'http://rdfh.ch/lists/0001/mockList01';
-        mockList1.isRootNode = true;
-        mockList1.labels = [{ language: 'en', value: 'Mock List 01' }];
-        mockList1.projectIri = 'http://rdfh.ch/projects/myProjectIri';
-
-        const mockList2 = new ListNodeInfo();
-        mockList2.comments = [];
-        mockList2.id = 'http://rdfh.ch/lists/0001/mockList02';
-        mockList2.isRootNode = true;
-        mockList2.labels = [{ language: 'en', value: 'Mock List 02' }];
-        mockList2.projectIri = 'http://rdfh.ch/projects/myProjectIri';
-
-        response.lists.push(mockList1, mockList2);
-
-        return of(
-          ApiResponseData.fromAjaxResponse({
-            response,
-          } as AjaxResponse)
-        );
-      });
-
-      // mock projects endpoint
-      (dspConnSpy.admin.projectsEndpoint as jasmine.SpyObj<ProjectsEndpointAdmin>).getProjectByIri.and.callFake(() => {
-        const response = new ProjectResponse();
-
-        const mockProjects = MockProjects.mockProjects();
-
-        response.project = mockProjects.body.projects[0];
-
-        return of(
-          ApiResponseData.fromAjaxResponse({
-            response,
-          } as AjaxResponse)
-        );
-      });
-
-      testHostFixture = TestBed.createComponent(TestHostComponent);
-      testHostComponent = testHostFixture.componentInstance;
-      testHostFixture.detectChanges();
-
-      overlayContainer = TestBed.inject(OverlayContainer);
-      rootLoader = TestbedHarnessEnvironment.documentRootLoader(testHostFixture);
-
-      expect(testHostComponent.listComponent.session).toBeTruthy();
-      expect(testHostComponent).toBeTruthy();
-    });
-
-    it('should get the project', () => {
-      const mockProject = MockProjects.mockProjects().body.projects[0];
-
-      expect(testHostComponent.listComponent.project).toEqual(mockProject);
-    });
-
-    it('should initialize the list of lists', () => {
-      const listOfLists = new Array<ListNodeInfo>();
-
-      const list1 = new ListNodeInfo();
-      list1.comments = [];
-      list1.id = 'http://rdfh.ch/lists/0001/mockList01';
-      list1.isRootNode = true;
-      list1.labels = [{ language: 'en', value: 'Mock List 01' }];
-      list1.projectIri = 'http://rdfh.ch/projects/myProjectIri';
-
-      const list2 = new ListNodeInfo();
-      list2.comments = [];
-      list2.id = 'http://rdfh.ch/lists/0001/mockList02';
-      list2.isRootNode = true;
-      list2.labels = [{ language: 'en', value: 'Mock List 02' }];
-      list2.projectIri = 'http://rdfh.ch/projects/myProjectIri';
-
-      listOfLists.push(list1, list2);
-
-      expect(testHostComponent.listComponent.lists).toEqual(listOfLists);
-    });
-  });
-});
diff --git a/apps/dsp-app/src/app/project/ontology/ontology.component.ts b/apps/dsp-app/src/app/project/ontology/ontology.component.ts
index fd1ceac5ed..74a8cf2cbd 100644
--- a/apps/dsp-app/src/app/project/ontology/ontology.component.ts
+++ b/apps/dsp-app/src/app/project/ontology/ontology.component.ts
@@ -53,10 +53,10 @@ import {
   UserSelectors,
 } from '@dasch-swiss/vre/shared/app-state';
 import { MultiLanguages } from '@dasch-swiss/vre/shared/app-string-literal';
+import { DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { Actions, ofActionSuccessful, Select, Store } from '@ngxs/store';
 import { combineLatest, Observable, Subject } from 'rxjs';
 import { map, switchMap, take, takeUntil } from 'rxjs/operators';
-import { DialogService } from '../../main/services/dialog.service';
 import { ProjectBase } from '../project-base';
 import {
   CreateResourceClassDialogComponent,
diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts b/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
index 31f5b55d51..c3ec6b6128 100644
--- a/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
+++ b/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.ts
@@ -2,13 +2,12 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { ClassDefinition, PropertyDefinition } from '@dasch-swiss/dsp-js';
 import { getAllEntityDefinitionsAsArray } from '@dasch-swiss/vre/shared/app-api';
-import { CustomRegex } from '@dasch-swiss/vre/shared/app-common';
+import { CustomRegex, atLeastOneStringRequired } from '@dasch-swiss/vre/shared/app-common';
 import { OntologyService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { OntologiesSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { DEFAULT_MULTILANGUAGE_FORM, MultiLanguages } from '@dasch-swiss/vre/shared/app-string-literal';
 import { Store } from '@ngxs/store';
 import { existingNamesValidator } from '../../../main/directive/existing-name/existing-names.validator';
-import { atLeastOneStringRequired } from '../../../main/form-validators/at-least-one-string-required.validator';
 import { ResourceClassForm } from './resource-class-form.type';
 
 @Component({
diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-info-element.component.ts b/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-info-element.component.ts
index b42a1f5ce5..4e2047306f 100644
--- a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-info-element.component.ts
+++ b/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-info-element.component.ts
@@ -14,10 +14,10 @@ import { GuiCardinality } from '@dasch-swiss/vre/shared/app-common-to-move';
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
 import { DefaultClass, DefaultProperty } from '@dasch-swiss/vre/shared/app-helper-services';
 import { OntologiesSelectors, OntologyProperties, PropToDisplay } from '@dasch-swiss/vre/shared/app-state';
+import { DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { Select, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
-import { DialogService } from '../../../main/services/dialog.service';
 
 @Component({
   selector: 'app-resource-class-info-element',
diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.ts b/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.ts
index bab955311e..05eb8b3d88 100644
--- a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.ts
+++ b/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.ts
@@ -27,10 +27,10 @@ import { GuiCardinality } from '@dasch-swiss/vre/shared/app-common-to-move';
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
 import { DefaultClass, DefaultProperty, OntologyService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { ListsSelectors, OntologiesSelectors } from '@dasch-swiss/vre/shared/app-state';
+import { DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { Store } from '@ngxs/store';
 import { Subject } from 'rxjs';
 import { switchMap, takeUntil, tap } from 'rxjs/operators';
-import { DialogService } from '../../../../main/services/dialog.service';
 
 // property data structure
 export class Property {
diff --git a/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts b/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
index d2eac5f236..31b487203b 100644
--- a/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
+++ b/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
@@ -1,10 +1,9 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl, Validators } from '@angular/forms';
+import { arrayLengthGreaterThanZeroValidator, atLeastOneStringRequired } from '@dasch-swiss/vre/shared/app-common';
 import { ProjectsSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { DEFAULT_MULTILANGUAGE_FORM, MultiLanguages } from '@dasch-swiss/vre/shared/app-string-literal';
 import { Store } from '@ngxs/store';
-import { arrayLengthGreaterThanZeroValidator } from '../../main/form-validators/array-length-greater-than-zero-validator';
-import { atLeastOneStringRequired } from '../../main/form-validators/at-least-one-string-required.validator';
 import { ProjectForm } from './project-form.type';
 import { shortcodeExistsValidator } from './shortcode-exists.validator';
 
diff --git a/apps/dsp-app/src/app/system/projects/projects-list/projects-list.component.ts b/apps/dsp-app/src/app/system/projects/projects-list/projects-list.component.ts
index 21c024abbd..8ec4dbeee4 100644
--- a/apps/dsp-app/src/app/system/projects/projects-list/projects-list.component.ts
+++ b/apps/dsp-app/src/app/system/projects/projects-list/projects-list.component.ts
@@ -5,11 +5,11 @@ import { ProjectApiService } from '@dasch-swiss/vre/shared/app-api';
 import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { ProjectService, SortingService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { ProjectsSelectors, UserSelectors } from '@dasch-swiss/vre/shared/app-state';
+import { DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { Select } from '@ngxs/store';
 import { Observable, Subject, combineLatest } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import { SortProp } from '../../../main/action/sort-button/sort-button.component';
-import { DialogService } from '../../../main/services/dialog.service';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/apps/dsp-app/src/app/system/users/users-list/users-list.component.ts b/apps/dsp-app/src/app/system/users/users-list/users-list.component.ts
index 5d7c787463..e0f9e0683f 100644
--- a/apps/dsp-app/src/app/system/users/users-list/users-list.component.ts
+++ b/apps/dsp-app/src/app/system/users/users-list/users-list.component.ts
@@ -16,10 +16,10 @@ import {
   SetUserAction,
   UserSelectors,
 } from '@dasch-swiss/vre/shared/app-state';
+import { DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { Actions, ofActionSuccessful, Select, Store } from '@ngxs/store';
 import { combineLatest, Observable } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';
-import { DialogService } from '../../../main/services/dialog.service';
 import { CreateUserDialogComponent } from '../../../user/create-user-page/create-user-dialog.component';
 import { EditUserPageComponent } from '../../../user/edit-user-page/edit-user-page.component';
 
diff --git a/apps/dsp-app/src/app/user/account/account.component.ts b/apps/dsp-app/src/app/user/account/account.component.ts
index 262e596cf2..c1bb054aa1 100644
--- a/apps/dsp-app/src/app/user/account/account.component.ts
+++ b/apps/dsp-app/src/app/user/account/account.component.ts
@@ -4,10 +4,10 @@ import { ReadUser } from '@dasch-swiss/dsp-js';
 import { UserApiService } from '@dasch-swiss/vre/shared/app-api';
 import { AuthService } from '@dasch-swiss/vre/shared/app-session';
 import { LoadUserAction, UserSelectors } from '@dasch-swiss/vre/shared/app-state';
+import { DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import { DialogService } from '../../main/services/dialog.service';
 import { apiConnectionTokenProvider } from '../../providers/api-connection-token.provider';
 
 @Component({
diff --git a/libs/vre/advanced-search/src/lib/feature/advanced-search/advanced-search.component.ts b/libs/vre/advanced-search/src/lib/feature/advanced-search/advanced-search.component.ts
index c77dc258c4..23e0984081 100644
--- a/libs/vre/advanced-search/src/lib/feature/advanced-search/advanced-search.component.ts
+++ b/libs/vre/advanced-search/src/lib/feature/advanced-search/advanced-search.component.ts
@@ -1,23 +1,23 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute } from '@angular/router';
 import { Constants } from '@dasch-swiss/dsp-js';
+import { DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { take } from 'rxjs/operators';
 import { v4 as uuidv4 } from 'uuid';
 import { ApiData } from '../../data-access/advanced-search-service/advanced-search.service';
 import {
+  AdvancedSearchStateSnapshot,
   AdvancedSearchStoreService,
-  ParentChildPropertyPair,
   OrderByItem,
+  ParentChildPropertyPair,
   PropertyFormItem,
   PropertyFormListOperations,
   SearchItem,
-  AdvancedSearchStateSnapshot,
 } from '../../data-access/advanced-search-store/advanced-search-store.service';
-import { ConfirmationDialogComponent } from '../../ui/dialog/confirmation-dialog/confirmation-dialog.component';
 import { FormActionsComponent } from '../../ui/form-actions/form-actions.component';
 import { OntologyResourceFormComponent } from '../../ui/ontology-resource-form/ontology-resource-form.component';
 import { OrderByComponent } from '../../ui/order-by/order-by.component';
@@ -82,7 +82,10 @@ export class AdvancedSearchComponent implements OnInit {
   constants = Constants;
   previousSearchObject: string | null = null;
 
-  constructor(private _dialog: MatDialog) {}
+  constructor(
+    private _dialog: MatDialog,
+    private _dialogService: DialogService
+  ) {}
 
   ngOnInit(): void {
     this.store.setState({
@@ -191,12 +194,8 @@ export class AdvancedSearchComponent implements OnInit {
   }
 
   handleResetButtonClicked(): void {
-    const dialogRef = this._dialog.open(ConfirmationDialogComponent, {});
-
-    dialogRef.afterClosed().subscribe((result: boolean) => {
-      if (result) {
-        this.store.onReset();
-      }
+    this._dialogService.afterConfirmation('Are you sure you want to reset the form?').subscribe(() => {
+      this.store.onReset();
     });
   }
 
diff --git a/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.html b/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.html
deleted file mode 100644
index 81077a6d8f..0000000000
--- a/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<mat-dialog-content>
-  <p>Are you sure you want to reset the form?</p>
-</mat-dialog-content>
-
-<mat-dialog-actions>
-  <button mat-button mat-dialog-close class="cancel-button" [mat-dialog-close]="false">No</button>
-  <button mat-button class="confirm-button" [mat-dialog-close]="true">Yes</button>
-</mat-dialog-actions>
diff --git a/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.scss b/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.scss
deleted file mode 100644
index 3c6bf85809..0000000000
--- a/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-mat-dialog-actions {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px;
-
-  .cancel-button,
-  .confirm-button {
-    flex: 1;
-    margin: 0;
-    max-width: 100px;
-    border: 1px solid #336790;
-  }
-
-  .cancel-button {
-    background-color: #336790;
-    color: white;
-  }
-
-  .confirm-button {
-    color:#336790;
-  }
-}
diff --git a/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.spec.ts b/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.spec.ts
deleted file mode 100644
index 3ae427e46a..0000000000
--- a/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ConfirmationDialogComponent } from './confirmation-dialog.component';
-
-describe('ConfirmationDialogComponent', () => {
-  let component: ConfirmationDialogComponent;
-  let fixture: ComponentFixture<ConfirmationDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ConfirmationDialogComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ConfirmationDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.ts b/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.ts
deleted file mode 100644
index be37e63512..0000000000
--- a/libs/vre/advanced-search/src/lib/ui/dialog/confirmation-dialog/confirmation-dialog.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-
-@Component({
-  selector: 'dasch-swiss-confirmation-dialog',
-  standalone: true,
-  imports: [CommonModule, MatButtonModule, MatDialogModule],
-  templateUrl: './confirmation-dialog.component.html',
-  styleUrls: ['./confirmation-dialog.component.scss'],
-})
-export class ConfirmationDialogComponent {}
diff --git a/libs/vre/shared/app-common/src/index.ts b/libs/vre/shared/app-common/src/index.ts
index df78f11d76..a42ced0d53 100644
--- a/libs/vre/shared/app-common/src/index.ts
+++ b/libs/vre/shared/app-common/src/index.ts
@@ -4,3 +4,5 @@ export * from './lib/dsp-resource';
 export * from './lib/property-info-values.interface';
 export * from './lib/common';
 export * from './lib/directives/mat-autocomplete-options-scroll.directive';
+export * from './lib/form-validators/at-least-one-string-required.validator';
+export * from './lib/form-validators/array-length-greater-than-zero-validator';
diff --git a/apps/dsp-app/src/app/main/form-validators/array-length-greater-than-zero-validator.ts b/libs/vre/shared/app-common/src/lib/form-validators/array-length-greater-than-zero-validator.ts
similarity index 100%
rename from apps/dsp-app/src/app/main/form-validators/array-length-greater-than-zero-validator.ts
rename to libs/vre/shared/app-common/src/lib/form-validators/array-length-greater-than-zero-validator.ts
diff --git a/apps/dsp-app/src/app/main/form-validators/at-least-one-string-required.validator.ts b/libs/vre/shared/app-common/src/lib/form-validators/at-least-one-string-required.validator.ts
similarity index 100%
rename from apps/dsp-app/src/app/main/form-validators/at-least-one-string-required.validator.ts
rename to libs/vre/shared/app-common/src/lib/form-validators/at-least-one-string-required.validator.ts
diff --git a/libs/vre/shared/app-list/.eslintrc.json b/libs/vre/shared/app-list/.eslintrc.json
new file mode 100644
index 0000000000..6ebf70478b
--- /dev/null
+++ b/libs/vre/shared/app-list/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["../../../../.eslintrc-angular.json"]
+}
diff --git a/libs/vre/shared/app-list/README.md b/libs/vre/shared/app-list/README.md
new file mode 100644
index 0000000000..5a31156aed
--- /dev/null
+++ b/libs/vre/shared/app-list/README.md
@@ -0,0 +1,9 @@
+# vre-shared-app-list
+
+This library was generated with [Nx](https://nx.dev).
+
+
+## Running unit tests
+
+Run `nx test vre-shared-app-list` to execute the unit tests.
+
diff --git a/libs/vre/shared/app-list/jest.config.ts b/libs/vre/shared/app-list/jest.config.ts
new file mode 100644
index 0000000000..c7424f0c3d
--- /dev/null
+++ b/libs/vre/shared/app-list/jest.config.ts
@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'vre-shared-app-list',
+  preset: '../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../../coverage/libs/vre/shared/app-list',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ]
+};
diff --git a/libs/vre/shared/app-list/project.json b/libs/vre/shared/app-list/project.json
new file mode 100644
index 0000000000..7bca5e9bcc
--- /dev/null
+++ b/libs/vre/shared/app-list/project.json
@@ -0,0 +1,38 @@
+{
+  "name": "vre-shared-app-list",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/vre/shared/app-list/src",
+  "prefix": "dasch-swiss",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
+      "options": {
+        "jestConfig": "libs/vre/shared/app-list/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/vre/shared/app-list/**/*.ts",
+          "libs/vre/shared/app-list/**/*.html"
+        ]
+      }
+    }
+  }
+}
diff --git a/libs/vre/shared/app-list/src/index.ts b/libs/vre/shared/app-list/src/index.ts
new file mode 100644
index 0000000000..f2a5ce56a6
--- /dev/null
+++ b/libs/vre/shared/app-list/src/index.ts
@@ -0,0 +1,13 @@
+export * from './list.components';
+export * from './lib/list.component';
+export * from './lib/action-bubble/action-bubble.component';
+export * from './lib/list-item/list-item.component';
+export * from './lib/list-item/list-item.service';
+export * from './lib/list-item-element/list-item-element.component';
+export * from './lib/list-item-form/list-item-form.component';
+export * from './lib/list-item-form/reusable-list-item-form.component';
+export * from './lib/list-item-form/edit-list-item/create-list-item-dialog.component';
+export * from './lib/list-item-form/edit-list-item/edit-list-item-dialog.component';
+export * from './lib/reusable-list-info-form/create-list-info-page.component';
+export * from './lib/reusable-list-info-form/edit-list-info-dialog.component';
+export * from './lib/reusable-list-info-form/reusable-list-info-form.component';
diff --git a/apps/dsp-app/src/app/project/list/action-bubble/action-bubble.component.scss b/libs/vre/shared/app-list/src/lib/action-bubble/action-bubble.component.scss
similarity index 100%
rename from apps/dsp-app/src/app/project/list/action-bubble/action-bubble.component.scss
rename to libs/vre/shared/app-list/src/lib/action-bubble/action-bubble.component.scss
diff --git a/apps/dsp-app/src/app/project/list/action-bubble/action-bubble.component.ts b/libs/vre/shared/app-list/src/lib/action-bubble/action-bubble.component.ts
similarity index 96%
rename from apps/dsp-app/src/app/project/list/action-bubble/action-bubble.component.ts
rename to libs/vre/shared/app-list/src/lib/action-bubble/action-bubble.component.ts
index af8c7959da..ec0191b7e6 100644
--- a/apps/dsp-app/src/app/project/list/action-bubble/action-bubble.component.ts
+++ b/libs/vre/shared/app-list/src/lib/action-bubble/action-bubble.component.ts
@@ -5,9 +5,8 @@ import { ListNode } from '@dasch-swiss/dsp-js';
 import { ListApiService } from '@dasch-swiss/vre/shared/app-api';
 import { DspDialogConfig } from '@dasch-swiss/vre/shared/app-config';
 import { MultiLanguages } from '@dasch-swiss/vre/shared/app-string-literal';
+import { DIALOG_LARGE, DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { filter, switchMap } from 'rxjs/operators';
-import { DIALOG_LARGE } from '../../../main/services/dialog-sizes.constant';
-import { DialogService } from '../../../main/services/dialog.service';
 import { ListItemService } from '../list-item/list-item.service';
 import {
   CreateListItemDialogComponent,
diff --git a/apps/dsp-app/src/app/project/list/list-item-element/list-item-element.component.ts b/libs/vre/shared/app-list/src/lib/list-item-element/list-item-element.component.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/list-item-element/list-item-element.component.ts
rename to libs/vre/shared/app-list/src/lib/list-item-element/list-item-element.component.ts
diff --git a/apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/create-list-item-dialog.component.ts b/libs/vre/shared/app-list/src/lib/list-item-form/edit-list-item/create-list-item-dialog.component.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/create-list-item-dialog.component.ts
rename to libs/vre/shared/app-list/src/lib/list-item-form/edit-list-item/create-list-item-dialog.component.ts
diff --git a/apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/edit-list-item-dialog.component.ts b/libs/vre/shared/app-list/src/lib/list-item-form/edit-list-item/edit-list-item-dialog.component.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/edit-list-item-dialog.component.ts
rename to libs/vre/shared/app-list/src/lib/list-item-form/edit-list-item/edit-list-item-dialog.component.ts
diff --git a/apps/dsp-app/src/app/project/list/list-item-form/list-item-form.component.ts b/libs/vre/shared/app-list/src/lib/list-item-form/list-item-form.component.ts
similarity index 96%
rename from apps/dsp-app/src/app/project/list/list-item-form/list-item-form.component.ts
rename to libs/vre/shared/app-list/src/lib/list-item-form/list-item-form.component.ts
index abbd804d16..0b02218ced 100644
--- a/apps/dsp-app/src/app/project/list/list-item-form/list-item-form.component.ts
+++ b/libs/vre/shared/app-list/src/lib/list-item-form/list-item-form.component.ts
@@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
 import { FormBuilder, Validators } from '@angular/forms';
 import { ListInfoResponse, ListNodeInfoResponse } from '@dasch-swiss/dsp-js';
 import { ListApiService } from '@dasch-swiss/vre/shared/app-api';
+import { atLeastOneStringRequired } from '@dasch-swiss/vre/shared/app-common';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { DEFAULT_MULTILANGUAGE_FORM } from '@dasch-swiss/vre/shared/app-string-literal';
-import { atLeastOneStringRequired } from '../../../main/form-validators/at-least-one-string-required.validator';
 import { ListItemService } from '../list-item/list-item.service';
 
 @Component({
diff --git a/apps/dsp-app/src/app/project/list/list-item-form/list-item-form.type.ts b/libs/vre/shared/app-list/src/lib/list-item-form/list-item-form.type.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/list-item-form/list-item-form.type.ts
rename to libs/vre/shared/app-list/src/lib/list-item-form/list-item-form.type.ts
diff --git a/apps/dsp-app/src/app/project/list/list-item-form/reusable-list-item-form.component.ts b/libs/vre/shared/app-list/src/lib/list-item-form/reusable-list-item-form.component.ts
similarity index 93%
rename from apps/dsp-app/src/app/project/list/list-item-form/reusable-list-item-form.component.ts
rename to libs/vre/shared/app-list/src/lib/list-item-form/reusable-list-item-form.component.ts
index a4c5f77102..7476c5d388 100644
--- a/apps/dsp-app/src/app/project/list/list-item-form/reusable-list-item-form.component.ts
+++ b/libs/vre/shared/app-list/src/lib/list-item-form/reusable-list-item-form.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
+import { atLeastOneStringRequired } from '@dasch-swiss/vre/shared/app-common';
 import { DEFAULT_MULTILANGUAGE_FORM, MultiLanguages } from '@dasch-swiss/vre/shared/app-string-literal';
-import { atLeastOneStringRequired } from '../../../main/form-validators/at-least-one-string-required.validator';
 import { ListItemForm } from './list-item-form.type';
 
 @Component({
diff --git a/apps/dsp-app/src/app/project/list/list-item/list-item.component.ts b/libs/vre/shared/app-list/src/lib/list-item/list-item.component.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/list-item/list-item.component.ts
rename to libs/vre/shared/app-list/src/lib/list-item/list-item.component.ts
diff --git a/apps/dsp-app/src/app/project/list/list-item/list-item.service.ts b/libs/vre/shared/app-list/src/lib/list-item/list-item.service.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/list-item/list-item.service.ts
rename to libs/vre/shared/app-list/src/lib/list-item/list-item.service.ts
diff --git a/apps/dsp-app/src/app/project/list/list.component.html b/libs/vre/shared/app-list/src/lib/list.component.html
similarity index 89%
rename from apps/dsp-app/src/app/project/list/list.component.html
rename to libs/vre/shared/app-list/src/lib/list.component.html
index 8e7c72596d..e36a045a67 100644
--- a/apps/dsp-app/src/app/project/list/list.component.html
+++ b/libs/vre/shared/app-list/src/lib/list.component.html
@@ -26,7 +26,9 @@
               </p>
               <span class="fill-remaining-space"></span>
 
-              <span class="project-actions" *ngIf="(project$ | async)?.status && (isAdmin$ | async)">
+              <span
+                class="project-actions"
+                *ngIf="(projectBaseService.project$ | async)?.status && (projectBaseService.isAdmin$ | async)">
                 <p class="mat-caption space-reducer">Controlled vocabulary configuration</p>
                 <button
                   color="primary"
@@ -52,10 +54,10 @@
           </mat-toolbar>
 
           <app-list-item
-            *ngIf="((isListsLoading$ | async) === false) && (project$ | async) as project"
+            *ngIf="((isListsLoading$ | async) === false) && (projectBaseService.project$ | async) as project"
             [rootNodeIri]="list.id"
             [projectUuid]="project.id"
-            [isAdmin]="isAdmin$ | async">
+            [isAdmin]="projectBaseService.isAdmin$ | async">
           </app-list-item>
         </div>
       </ng-container>
diff --git a/apps/dsp-app/src/app/project/list/list.component.scss b/libs/vre/shared/app-list/src/lib/list.component.scss
similarity index 100%
rename from apps/dsp-app/src/app/project/list/list.component.scss
rename to libs/vre/shared/app-list/src/lib/list.component.scss
diff --git a/apps/dsp-app/src/app/project/list/list.component.ts b/libs/vre/shared/app-list/src/lib/list.component.ts
similarity index 73%
rename from apps/dsp-app/src/app/project/list/list.component.ts
rename to libs/vre/shared/app-list/src/lib/list.component.ts
index 1cadbf3ad0..b27de880b2 100644
--- a/apps/dsp-app/src/app/project/list/list.component.ts
+++ b/libs/vre/shared/app-list/src/lib/list.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, On
 import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ListNodeInfo, StringLiteral } from '@dasch-swiss/dsp-js';
+import { ListNodeInfo } from '@dasch-swiss/dsp-js';
 import { AppConfigService, DspDialogConfig, RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import {
@@ -11,12 +11,11 @@ import {
   LoadListsInProjectAction,
   ProjectsSelectors,
 } from '@dasch-swiss/vre/shared/app-state';
+import { DialogService } from '@dasch-swiss/vre/shared/app-ui';
 import { Actions, ofActionSuccessful, Select, Store } from '@ngxs/store';
 import { combineLatest, Observable, Subject } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';
-import { AppGlobal } from '../../app-global';
-import { DialogService } from '../../main/services/dialog.service';
-import { ProjectBase } from '../project-base';
+import { ProjectBaseService } from './project-base.service';
 import {
   EditListInfoDialogComponent,
   EditListInfoDialogProps,
@@ -27,41 +26,24 @@ import {
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.scss'],
+  providers: [ProjectBaseService],
 })
-export class ListComponent extends ProjectBase implements OnInit, OnDestroy {
+export class ListComponent implements OnInit, OnDestroy {
   private ngUnsubscribe: Subject<void> = new Subject<void>();
 
-  languagesList: StringLiteral[] = AppGlobal.languagesList;
-
-  // current selected language
-  language: string;
-
-  openPanel: number;
-
-  // i18n plural mapping
-  itemPluralMapping = {
-    list: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      '=1': '1 list',
-      other: '# lists',
-    },
-  };
-
-  // disable content on small devices
   disableContent = false;
 
   private readonly routeListIri$ = this._route.paramMap.pipe(map(params => params.get(RouteConstants.listParameter)));
 
   list$ = combineLatest([this._store.select(ListsSelectors.listsInProject), this.routeListIri$]).pipe(
-    map(([lists, listIri]) => lists.find(i => i.id.includes(listIri)))
+    map(([lists, listIri]) => lists.find(i => i.id.includes(listIri!)))
   );
 
-  listIri$: Observable<string> = combineLatest([this._route.params, this.project$]).pipe(
+  listIri$: Observable<string> = combineLatest([this._route.params, this.projectBaseService.project$]).pipe(
     map(([params, project]) => `${this._acs.dspAppConfig.iriBase}/lists/${project.shortcode}/${params['list']}`)
   );
 
-  @Select(ListsSelectors.isListsLoading) isListsLoading$: Observable<boolean>;
-  @Select(ListsSelectors.listsInProject) listsInProject$: Observable<ListNodeInfo[]>;
+  @Select(ListsSelectors.isListsLoading) isListsLoading$!: Observable<boolean>;
 
   constructor(
     private _acs: AppConfigService,
@@ -73,10 +55,9 @@ export class ListComponent extends ProjectBase implements OnInit, OnDestroy {
     protected _projectService: ProjectService,
     protected _store: Store,
     protected _cd: ChangeDetectorRef,
-    protected _actions$: Actions
-  ) {
-    super(_store, _route, _projectService, _titleService, _router, _cd, _actions$);
-  }
+    protected _actions$: Actions,
+    public projectBaseService: ProjectBaseService
+  ) {}
 
   @HostListener('window:resize', ['$event']) onWindowResize() {
     this.disableContent = window.innerWidth <= 768;
@@ -87,26 +68,22 @@ export class ListComponent extends ProjectBase implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    super.ngOnInit();
+    this.projectBaseService.onInit();
     this.disableContent = window.innerWidth <= 768;
     this._setPageTitle();
   }
 
   ngOnDestroy() {
+    this.projectBaseService.onDestroy();
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();
   }
 
-  /**
-   * open dialog in every case of modification:
-   * edit list data, remove list from project etc.
-   *
-   */
   editList(list: ListNodeInfo) {
     this._matDialog.open<EditListInfoDialogComponent, EditListInfoDialogProps, boolean>(
       EditListInfoDialogComponent,
       DspDialogConfig.dialogDrawerConfig({
-        projectIri: this._projectService.uuidToIri(this.projectUuid),
+        projectIri: this._projectService.uuidToIri(this.projectBaseService.projectUuid),
         list,
       })
     );
@@ -121,8 +98,8 @@ export class ListComponent extends ProjectBase implements OnInit, OnDestroy {
       )
       .pipe(switchMap(() => this._actions$.pipe(ofActionSuccessful(DeleteListNodeAction), take(1))))
       .subscribe(() => {
-        this._store.dispatch(new LoadListsInProjectAction(this.projectIri));
-        this._router.navigate([RouteConstants.project, this.projectUuid, RouteConstants.dataModels]);
+        this._store.dispatch(new LoadListsInProjectAction(this.projectBaseService.projectIri));
+        this._router.navigate([RouteConstants.project, this.projectBaseService.projectUuid, RouteConstants.dataModels]);
       });
   }
 
diff --git a/libs/vre/shared/app-list/src/lib/project-base.service.ts b/libs/vre/shared/app-list/src/lib/project-base.service.ts
new file mode 100644
index 0000000000..9bf322a3a3
--- /dev/null
+++ b/libs/vre/shared/app-list/src/lib/project-base.service.ts
@@ -0,0 +1,148 @@
+import { ChangeDetectorRef, Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ReadProject, ReadUser } from '@dasch-swiss/dsp-js';
+import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
+import {
+  IKeyValuePairs,
+  LoadProjectMembershipAction,
+  LoadProjectOntologiesAction,
+  LoadProjectsAction,
+  OntologiesSelectors,
+  ProjectsSelectors,
+  UserSelectors,
+} from '@dasch-swiss/vre/shared/app-state';
+import { Actions, ofActionSuccessful, Select, Store } from '@ngxs/store';
+import { combineLatest, Observable, Subject } from 'rxjs';
+import { filter, map, take, takeUntil, takeWhile } from 'rxjs/operators';
+
+@Injectable()
+export class ProjectBaseService {
+  destroyed: Subject<void> = new Subject<void>();
+
+  projectUuid: string;
+  project?: ReadProject;
+
+  // permissions of logged-in user
+  isAdmin$: Observable<boolean> = combineLatest([
+    this._store.select(UserSelectors.user).pipe(filter(user => user !== null)) as Observable<ReadUser>,
+    this._store.select(UserSelectors.userProjectAdminGroups),
+    this._route.params,
+    this._route.parent.params,
+  ]).pipe(
+    takeUntil(this.destroyed),
+    map(([user, userProjectGroups, params, parentParams]) => {
+      const projectIri = this._projectService.uuidToIri(params.uuid ? params.uuid : parentParams.uuid);
+      return ProjectService.IsProjectAdminOrSysAdmin(user, userProjectGroups, projectIri);
+    })
+  );
+
+  get projectIri() {
+    return this._projectService.uuidToIri(this.projectUuid);
+  }
+
+  @Select(UserSelectors.user) user$!: Observable<ReadUser>;
+  @Select(UserSelectors.userProjectAdminGroups) userProjectAdminGroups$!: Observable<string[]>;
+  @Select(ProjectsSelectors.isCurrentProjectAdminOrSysAdmin) isCurrentProjectAdminOrSysAdmin!: Observable<boolean>;
+  @Select(ProjectsSelectors.isCurrentProjectMember) isProjectMember$!: Observable<boolean>;
+  @Select(ProjectsSelectors.currentProject) project$!: Observable<ReadProject>;
+  @Select(ProjectsSelectors.isProjectsLoading) isProjectsLoading$!: Observable<boolean>;
+  @Select(ProjectsSelectors.isMembershipLoading) isMembershipLoading$!: Observable<boolean>;
+  @Select(ProjectsSelectors.projectMembers) projectMembers$!: Observable<IKeyValuePairs<ReadUser>>;
+
+  constructor(
+    protected _store: Store,
+    protected _route: ActivatedRoute,
+    protected _projectService: ProjectService,
+    protected _titleService: Title,
+    protected _router: Router,
+    protected _cd: ChangeDetectorRef,
+    protected _actions$: Actions
+  ) {
+    this.projectUuid = this._route.snapshot.params.uuid
+      ? this._route.snapshot.params.uuid
+      : this._route.parent.snapshot.params.uuid;
+  }
+
+  onInit(): void {
+    this._loadMembership();
+    this._loadProject();
+  }
+
+  onDestroy(): void {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
+  protected getCurrentProject(projects: ReadProject[]) {
+    if (!this.projectUuid || !projects) {
+      return null;
+    }
+
+    return projects.find(x => x.id.split('/').pop() === this.projectUuid);
+  }
+
+  private _loadProject(): void {
+    this.isProjectsLoading$
+      .pipe(takeWhile(isLoading => isLoading === false && this.projectUuid !== undefined))
+      .pipe(take(1))
+      .subscribe({
+        next: () => {
+          this.project = this._store.selectSnapshot(ProjectsSelectors.currentProject);
+          if (!this.project || this.project.id !== this.projectIri) {
+            // get current project data, project members and project groups
+            // and set the project state here
+            this._actions$
+              .pipe(ofActionSuccessful(LoadProjectsAction))
+              .pipe(take(1))
+              .subscribe(() => this.setProjectData());
+            this._store.dispatch([new LoadProjectsAction()]);
+          } else if (!this.isOntologiesAvailable()) {
+            this._store.dispatch(new LoadProjectOntologiesAction(this.projectUuid));
+          }
+        },
+      });
+  }
+
+  private _loadMembership(): void {
+    this.isMembershipLoading$
+      .pipe(takeWhile(isMembershipLoading => isMembershipLoading === false && this.projectUuid !== undefined))
+      .pipe(take(1))
+      .subscribe({
+        next: () => {
+          const projectMembers = this._store.selectSnapshot(ProjectsSelectors.projectMembers)[this.projectIri];
+          if (!projectMembers) {
+            this._store.dispatch(new LoadProjectMembershipAction(this.projectUuid));
+          }
+        },
+      });
+  }
+
+  private setProjectData(): void {
+    this.project = this._store.selectSnapshot(ProjectsSelectors.currentProject);
+    if (!this.project) {
+      return;
+    }
+
+    this._titleService.setTitle(this.project.shortname);
+    this._store.dispatch(new LoadProjectOntologiesAction(this.project.id));
+  }
+
+  protected static navigationEndFilter(event: Observable<any>) {
+    return event.pipe(
+      filter(e => e instanceof NavigationEnd),
+      filter(e => !(e as NavigationEnd).url.startsWith('api'))
+    );
+  }
+
+  private isOntologiesAvailable(): boolean {
+    const currentProjectOntologies = this._store.selectSnapshot(OntologiesSelectors.currentProjectOntologies);
+    return (
+      currentProjectOntologies &&
+      currentProjectOntologies.length > 0 &&
+      currentProjectOntologies.some(o =>
+        this.project.ontologies.some(ontoName => o.id.split('/').find(x => x === ontoName.split('/').pop()))
+      )
+    );
+  }
+}
diff --git a/apps/dsp-app/src/app/project/list/reusable-list-info-form/create-list-info-page.component.ts b/libs/vre/shared/app-list/src/lib/reusable-list-info-form/create-list-info-page.component.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/reusable-list-info-form/create-list-info-page.component.ts
rename to libs/vre/shared/app-list/src/lib/reusable-list-info-form/create-list-info-page.component.ts
diff --git a/apps/dsp-app/src/app/project/list/reusable-list-info-form/edit-list-info-dialog.component.ts b/libs/vre/shared/app-list/src/lib/reusable-list-info-form/edit-list-info-dialog.component.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/reusable-list-info-form/edit-list-info-dialog.component.ts
rename to libs/vre/shared/app-list/src/lib/reusable-list-info-form/edit-list-info-dialog.component.ts
diff --git a/apps/dsp-app/src/app/project/list/reusable-list-info-form/list-info-form.type.ts b/libs/vre/shared/app-list/src/lib/reusable-list-info-form/list-info-form.type.ts
similarity index 100%
rename from apps/dsp-app/src/app/project/list/reusable-list-info-form/list-info-form.type.ts
rename to libs/vre/shared/app-list/src/lib/reusable-list-info-form/list-info-form.type.ts
diff --git a/apps/dsp-app/src/app/project/list/reusable-list-info-form/reusable-list-info-form.component.ts b/libs/vre/shared/app-list/src/lib/reusable-list-info-form/reusable-list-info-form.component.ts
similarity index 93%
rename from apps/dsp-app/src/app/project/list/reusable-list-info-form/reusable-list-info-form.component.ts
rename to libs/vre/shared/app-list/src/lib/reusable-list-info-form/reusable-list-info-form.component.ts
index 75af867528..5fd9fc0493 100644
--- a/apps/dsp-app/src/app/project/list/reusable-list-info-form/reusable-list-info-form.component.ts
+++ b/libs/vre/shared/app-list/src/lib/reusable-list-info-form/reusable-list-info-form.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
+import { atLeastOneStringRequired } from '@dasch-swiss/vre/shared/app-common';
 import { DEFAULT_MULTILANGUAGE_FORM, MultiLanguages } from '@dasch-swiss/vre/shared/app-string-literal';
-import { atLeastOneStringRequired } from '../../../main/form-validators/at-least-one-string-required.validator';
 import { ListInfoForm } from './list-info-form.type';
 
 @Component({
diff --git a/libs/vre/shared/app-list/src/list.components.ts b/libs/vre/shared/app-list/src/list.components.ts
new file mode 100644
index 0000000000..a9cf859ed6
--- /dev/null
+++ b/libs/vre/shared/app-list/src/list.components.ts
@@ -0,0 +1,25 @@
+import { ActionBubbleComponent } from './lib/action-bubble/action-bubble.component';
+import { ListItemComponent } from './lib/list-item/list-item.component';
+import { ListItemElementComponent } from './lib/list-item-element/list-item-element.component';
+import { CreateListItemDialogComponent } from './lib/list-item-form/edit-list-item/create-list-item-dialog.component';
+import { EditListItemDialogComponent } from './lib/list-item-form/edit-list-item/edit-list-item-dialog.component';
+import { ListItemFormComponent } from './lib/list-item-form/list-item-form.component';
+import { ReusableListItemFormComponent } from './lib/list-item-form/reusable-list-item-form.component';
+import { ListComponent } from './lib/list.component';
+import { CreateListInfoPageComponent } from './lib/reusable-list-info-form/create-list-info-page.component';
+import { EditListInfoDialogComponent } from './lib/reusable-list-info-form/edit-list-info-dialog.component';
+import { ReusableListInfoFormComponent } from './lib/reusable-list-info-form/reusable-list-info-form.component';
+
+export const ListComponents = [
+  ListItemComponent,
+  ListItemElementComponent,
+  ListItemFormComponent,
+  ReusableListItemFormComponent,
+  CreateListItemDialogComponent,
+  EditListItemDialogComponent,
+  CreateListInfoPageComponent,
+  EditListInfoDialogComponent,
+  ReusableListInfoFormComponent,
+  ActionBubbleComponent,
+  ListComponent,
+];
diff --git a/libs/vre/shared/app-list/src/test-setup.ts b/libs/vre/shared/app-list/src/test-setup.ts
new file mode 100644
index 0000000000..ab1eeeb335
--- /dev/null
+++ b/libs/vre/shared/app-list/src/test-setup.ts
@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';
diff --git a/libs/vre/shared/app-list/tsconfig.json b/libs/vre/shared/app-list/tsconfig.json
new file mode 100644
index 0000000000..b9e5be0863
--- /dev/null
+++ b/libs/vre/shared/app-list/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/libs/vre/shared/app-list/tsconfig.lib.json b/libs/vre/shared/app-list/tsconfig.lib.json
new file mode 100644
index 0000000000..5ce7c03a36
--- /dev/null
+++ b/libs/vre/shared/app-list/tsconfig.lib.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ]
+}
diff --git a/libs/vre/shared/app-list/tsconfig.spec.json b/libs/vre/shared/app-list/tsconfig.spec.json
new file mode 100644
index 0000000000..fd496bba52
--- /dev/null
+++ b/libs/vre/shared/app-list/tsconfig.spec.json
@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+]
+}
diff --git a/libs/vre/shared/app-ui/.eslintrc.json b/libs/vre/shared/app-ui/.eslintrc.json
new file mode 100644
index 0000000000..038dddca64
--- /dev/null
+++ b/libs/vre/shared/app-ui/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "../../../../.eslintrc-angular.json"
+  ]
+}
diff --git a/libs/vre/shared/app-ui/README.md b/libs/vre/shared/app-ui/README.md
new file mode 100644
index 0000000000..595890ae72
--- /dev/null
+++ b/libs/vre/shared/app-ui/README.md
@@ -0,0 +1,9 @@
+# vre-shared-app-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+
+## Running unit tests
+
+Run `nx test vre-shared-app-ui` to execute the unit tests.
+
diff --git a/libs/vre/shared/app-ui/jest.config.ts b/libs/vre/shared/app-ui/jest.config.ts
new file mode 100644
index 0000000000..f09c269194
--- /dev/null
+++ b/libs/vre/shared/app-ui/jest.config.ts
@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'vre-shared-app-ui',
+  preset: '../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../../coverage/libs/vre/shared/app-ui',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ]
+};
diff --git a/libs/vre/shared/app-ui/project.json b/libs/vre/shared/app-ui/project.json
new file mode 100644
index 0000000000..a0d061f2b0
--- /dev/null
+++ b/libs/vre/shared/app-ui/project.json
@@ -0,0 +1,38 @@
+{
+  "name": "vre-shared-app-ui",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/vre/shared/app-ui/src",
+  "prefix": "dasch-swiss",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
+      "options": {
+        "jestConfig": "libs/vre/shared/app-ui/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/vre/shared/app-ui/**/*.ts",
+          "libs/vre/shared/app-ui/**/*.html"
+        ]
+      }
+    }
+  }
+}
diff --git a/libs/vre/shared/app-ui/src/index.ts b/libs/vre/shared/app-ui/src/index.ts
new file mode 100644
index 0000000000..daac65fc11
--- /dev/null
+++ b/libs/vre/shared/app-ui/src/index.ts
@@ -0,0 +1,4 @@
+export * from './ui.components';
+export * from './lib/dialog/dialog.service';
+export * from './lib/dialog/dialog-sizes.constant';
+export * from './lib/dialog/confirm-dialog.component';
diff --git a/apps/dsp-app/src/app/main/action/confirm-dialog/confirm-dialog.component.ts b/libs/vre/shared/app-ui/src/lib/dialog/confirm-dialog.component.ts
similarity index 100%
rename from apps/dsp-app/src/app/main/action/confirm-dialog/confirm-dialog.component.ts
rename to libs/vre/shared/app-ui/src/lib/dialog/confirm-dialog.component.ts
diff --git a/apps/dsp-app/src/app/main/services/dialog-sizes.constant.ts b/libs/vre/shared/app-ui/src/lib/dialog/dialog-sizes.constant.ts
similarity index 100%
rename from apps/dsp-app/src/app/main/services/dialog-sizes.constant.ts
rename to libs/vre/shared/app-ui/src/lib/dialog/dialog-sizes.constant.ts
diff --git a/apps/dsp-app/src/app/main/services/dialog.service.ts b/libs/vre/shared/app-ui/src/lib/dialog/dialog.service.ts
similarity index 85%
rename from apps/dsp-app/src/app/main/services/dialog.service.ts
rename to libs/vre/shared/app-ui/src/lib/dialog/dialog.service.ts
index 5764e3ff85..f680a3f4d3 100644
--- a/apps/dsp-app/src/app/main/services/dialog.service.ts
+++ b/libs/vre/shared/app-ui/src/lib/dialog/dialog.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { filter } from 'rxjs/operators';
-import { ConfirmDialogComponent, ConfirmDialogProps } from '../action/confirm-dialog/confirm-dialog.component';
+import { ConfirmDialogComponent, ConfirmDialogProps } from './confirm-dialog.component';
 
 @Injectable({ providedIn: 'root' })
 export class DialogService {
diff --git a/libs/vre/shared/app-ui/src/test-setup.ts b/libs/vre/shared/app-ui/src/test-setup.ts
new file mode 100644
index 0000000000..ab1eeeb335
--- /dev/null
+++ b/libs/vre/shared/app-ui/src/test-setup.ts
@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';
diff --git a/libs/vre/shared/app-ui/src/ui.components.ts b/libs/vre/shared/app-ui/src/ui.components.ts
new file mode 100644
index 0000000000..d874538ec6
--- /dev/null
+++ b/libs/vre/shared/app-ui/src/ui.components.ts
@@ -0,0 +1,3 @@
+import { ConfirmDialogComponent } from './lib/dialog/confirm-dialog.component';
+
+export const UiComponents = [ConfirmDialogComponent];
diff --git a/libs/vre/shared/app-ui/tsconfig.json b/libs/vre/shared/app-ui/tsconfig.json
new file mode 100644
index 0000000000..b9e5be0863
--- /dev/null
+++ b/libs/vre/shared/app-ui/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/libs/vre/shared/app-ui/tsconfig.lib.json b/libs/vre/shared/app-ui/tsconfig.lib.json
new file mode 100644
index 0000000000..5ce7c03a36
--- /dev/null
+++ b/libs/vre/shared/app-ui/tsconfig.lib.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ]
+}
diff --git a/libs/vre/shared/app-ui/tsconfig.spec.json b/libs/vre/shared/app-ui/tsconfig.spec.json
new file mode 100644
index 0000000000..fd496bba52
--- /dev/null
+++ b/libs/vre/shared/app-ui/tsconfig.spec.json
@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+]
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 828c750d67..a18b6fcc35 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -62,6 +62,9 @@
       "@dasch-swiss/vre/shared/app-helper-services": [
         "libs/vre/shared/app-helper-services/src/index.ts"
       ],
+      "@dasch-swiss/vre/shared/app-list": [
+        "libs/vre/shared/app-list/src/index.ts"
+      ],
       "@dasch-swiss/vre/shared/app-logging": [
         "libs/vre/shared/app-logging/src/index.ts"
       ],
@@ -95,6 +98,9 @@
       "@dasch-swiss/vre/shared/app-string-literal": [
         "libs/vre/shared/app-string-literal/src/index.ts"
       ],
+      "@dasch-swiss/vre/shared/app-ui": [
+        "libs/vre/shared/app-ui/src/index.ts"
+      ],
       "@dasch-swiss/vre/shared/assets/status-msg": [
         "libs/vre/shared/assets/status-msg/src/index.ts"
       ],