diff --git a/src/app/shared/components/model-list/model-list.component.html b/src/app/shared/components/model-list/model-list.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..eef478631311207b321b3461685f65441b12d808
--- /dev/null
+++ b/src/app/shared/components/model-list/model-list.component.html
@@ -0,0 +1,89 @@
+<div style="display: flex; flex-direction: column">
+ <div
+ style="display: flex; flex-direction: row; gap: 10px; align-items: center"
+ >
+ <div>
+ <gp-headline [headlineTitle]="headlineTitle"></gp-headline>
+ </div>
+ <div style="flex: 1">
+ <div style="margin: 24px; font-size: 14px; font-weight: normal">
+ <span style="color: #2e2f2f"
+ >Showing -
+ <span style="color: #8f8f8f">
+ {{ calculateStartIndex }} to
+ {{ calculateEndIndex }}
+ of {{ totalItems }} Models</span
+ ></span
+ >
+ </div>
+ </div>
+
+ <div *ngIf="showEntirePage" style="align-self: flex-end; margin-left: auto">
+ <button
+ style="cursor: pointer"
+ aria-label="Example icon button with a menu icon"
+ (click)="onClickSeeBackEvent()"
+ >
+ <div style="display: flex; align-items: center">
+ <mat-icon>arrow_back_ios</mat-icon>
+ <span style="font-size: 16px">Back</span>
+ </div>
+ </button>
+ </div>
+ </div>
+ <ng-container *ngIf="solutions; else isLoading">
+ <ng-container *ngIf="solutions.length > 0; else noCatalogs">
+ <div *ngIf="!viewTile; else gridView">
+ <!-- Horizontal list view content -->
+ <div class="grid-list">
+ <gp-list-item
+ [isPublishedSolution]="false"
+ [item]="item"
+ [items]="solutions"
+ [isMarketPlacePage]="true"
+ *ngFor="let item of solutions"
+ ></gp-list-item>
+ </div>
+ </div>
+ <ng-template #gridView>
+ <div class="grid-list">
+ <mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px">
+ <mat-grid-tile *ngFor="let item of solutions">
+ <div class="cards-container">
+ <gp-card-item
+ [isPublishedSolution]="false"
+ [item]="item"
+ [items]="solutions"
+ [isMarketPlacePage]="true"
+ [isFavoriteSolution]="favoriteSolutionsMap[item.solutionId]"
+ (favoriteClicked)="onUpdateFavoriteEvent(item.solutionId)"
+ ></gp-card-item>
+ </div>
+ </mat-grid-tile>
+ </mat-grid-list>
+ </div>
+ </ng-template>
+ </ng-container>
+ <ng-template #noCatalogs>
+ <div class="loading-data">
+ <p>No result found...</p>
+ </div>
+ </ng-template>
+ </ng-container>
+ <ng-template #isLoading>
+ <div class="loading-data">
+ <p>Loading {{ modelType }} models ...</p>
+ </div>
+ </ng-template>
+ @if (showEntirePage) {
+ <mat-paginator
+ [length]="totalItems"
+ [pageSize]="pageSize"
+ [pageSizeOptions]="pageSizeOptions"
+ (page)="onPageEvent($event)"
+ aria-label="Select page"
+ aria-label="Select page"
+ >
+ </mat-paginator>
+ }
+</div>
diff --git a/src/app/shared/components/model-list/model-list.component.scss b/src/app/shared/components/model-list/model-list.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8971caaa57e6010c406da75b241990d0413eb37e
--- /dev/null
+++ b/src/app/shared/components/model-list/model-list.component.scss
@@ -0,0 +1,3 @@
+.material-icons {
+ font-size: 20px;
+}
diff --git a/src/app/shared/components/model-list/model-list.component.spec.ts b/src/app/shared/components/model-list/model-list.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7de60c368e21538a4fdb78d5283e398674959adc
--- /dev/null
+++ b/src/app/shared/components/model-list/model-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModelListComponent } from './model-list.component';
+
+describe('ModelListComponent', () => {
+ let component: ModelListComponent;
+ let fixture: ComponentFixture<ModelListComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ModelListComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ModelListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/model-list/model-list.component.ts b/src/app/shared/components/model-list/model-list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cbb585f03d33665ec247404eb42f9ea304896cc8
--- /dev/null
+++ b/src/app/shared/components/model-list/model-list.component.ts
@@ -0,0 +1,61 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PublicSolution } from '../../models';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { CardItemComponent } from '../card-item/card-item.component';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { ListItemComponent } from '../list-item/list-item.component';
+import { MatButtonModule } from '@angular/material/button';
+import { HeadlineComponent } from '../headline/headline.component';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+ selector: 'gp-model-list',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CardItemComponent,
+ MatPaginatorModule,
+ MatGridListModule,
+ ListItemComponent,
+ MatButtonModule,
+ HeadlineComponent,
+ MatIconModule,
+ ],
+ templateUrl: './model-list.component.html',
+ styleUrl: './model-list.component.scss',
+})
+export class ModelListComponent implements OnInit {
+ @Input() solutions: PublicSolution[] = [];
+ @Input() totalItems: number = 0;
+ @Input() isLoading: boolean = false;
+ @Input() showEntirePage!: boolean;
+ @Input() headlineTitle!: string;
+ @Input() viewTile: boolean = true;
+ @Input() calculateStartIndex!: number;
+ @Input() calculateEndIndex!: number;
+ @Input() pageSize!: number;
+ @Input() pageIndex!: number;
+ @Input() pageSizeOptions!: number[];
+ @Input() modelType!: 'published' | 'unpublished' | 'both';
+ @Input() favoriteSolutionsMap: { [key: string]: boolean } = {};
+
+ @Output() pageChange = new EventEmitter<PageEvent>();
+ @Output() updateFavorite = new EventEmitter<string>();
+ @Output() backEvent = new EventEmitter();
+
+ constructor() {}
+ ngOnInit(): void {}
+
+ onPageEvent(event: PageEvent): void {
+ this.pageChange.emit(event);
+ }
+
+ onUpdateFavoriteEvent(solutionId: string) {
+ this.updateFavorite.emit(solutionId);
+ }
+
+ onClickSeeBackEvent() {
+ this.backEvent.emit();
+ }
+}