diff --git a/matsen-tool/src/app/app-routing.module.ts b/matsen-tool/src/app/app-routing.module.ts
index 9dbbfc7..6887fa8 100644
--- a/matsen-tool/src/app/app-routing.module.ts
+++ b/matsen-tool/src/app/app-routing.module.ts
@@ -61,10 +61,17 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         children: [
             {path: '', component: ProductsComponent, data: {dataType: 'product'}},
-            {path: 'detail', component: ProductsDetailComponent, data: {dataType: 'product-detail'}},
+            {path: ':id', component: ProductsDetailComponent, data: {dataType: 'product-detail'}},
+        ]
+    },
+    {
+        path: 'documents',
+        component: TwoColumnComponent,
+        canActivate: [AuthGuard],
+        children: [
+            {path: '', component: DocumentsComponent, data: {dataType: 'document'}},
         ]
     },
-    {path: 'documents', component: DocumentsComponent, canActivate: [AuthGuard]},
 
     // otherwise redirect to home
     {path: '**', redirectTo: ''}
diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts
index 7476173..8fb0adc 100644
--- a/matsen-tool/src/app/app.module.ts
+++ b/matsen-tool/src/app/app.module.ts
@@ -28,6 +28,8 @@ import {ContactsDetailComponent} from './contacts/contacts-detail/contacts-detai
 import {ModalComponent} from './_components/modal/modal.component';
 import {PropertyInterceptor} from "@app/_helpers/property.interceptor";
 import {MatPaginatorModule} from "@angular/material/paginator";
+import {MatSortModule} from "@angular/material/sort";
+import {MatTableModule} from "@angular/material/table";
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -62,16 +64,18 @@ export function HttpLoaderFactory(http: HttpClient) {
         MatCardModule,
         NgOptimizedImage,
         PartnersComponent,
-        MatPaginatorModule
+        ProductsComponent,
+        DocumentsComponent,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTableModule
     ],
     declarations: [
         AppComponent,
         AlertComponent,
         HomeComponent,
         TwoColumnComponent,
-        ProductsComponent,
         ProductsDetailComponent,
-        DocumentsComponent,
         ModalComponent,
         PartnersDetailComponent,
         NewContactComponent,
diff --git a/matsen-tool/src/app/documents/documents.component.html b/matsen-tool/src/app/documents/documents.component.html
index 25f3231..cec23c7 100644
--- a/matsen-tool/src/app/documents/documents.component.html
+++ b/matsen-tool/src/app/documents/documents.component.html
@@ -1 +1,47 @@
-<p>documents works!</p>
+<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+       class="mat-elevation-z8">
+
+    <ng-container matColumnDef="pos">
+        <th mat-header-cell *matHeaderCellDef>
+            Nr.
+        </th>
+        <td mat-cell
+            *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
+        </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Dokument sortieren">
+            Dokument
+        </th>
+        <td mat-cell *matCellDef="let element"><span (click)="navigateToDocumentFile(element)">{{ element.name }}</span></td>
+    </ng-container>
+
+    <ng-container matColumnDef="type">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Typ sortieren">
+            Typ
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.storage }}
+        </td>
+    </ng-container>
+
+    <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Hochgeladen am sortieren">
+            Hochgeladen am
+        </th>
+        <td mat-cell *matCellDef="let element"><a href="{{ element.number }}" target="_blank">{{ element.website }}</a>
+        </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+
+<mat-paginator class="mb-4"
+               [pageSizeOptions]="[10,25,50]"
+               [length]="length"
+               (page)="handlePageEvent($event)"
+               [pageSize]="pageSize"
+               [pageIndex]="pageIndex"
+               showFirstLastButtons>
+</mat-paginator>
diff --git a/matsen-tool/src/app/documents/documents.component.ts b/matsen-tool/src/app/documents/documents.component.ts
index d3197e8..0948c55 100644
--- a/matsen-tool/src/app/documents/documents.component.ts
+++ b/matsen-tool/src/app/documents/documents.component.ts
@@ -1,10 +1,124 @@
-import { Component } from '@angular/core';
+import {ChangeDetectorRef, Component, ViewChild} from '@angular/core';
+import {MatSort, MatSortModule, Sort} from "@angular/material/sort";
+import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
+import {Subscription} from "rxjs";
+import {PartnerJsonld} from "@app/core/api/v1";
+import {Router, RouterLink, RouterLinkActive} from "@angular/router";
+import {MatTableDataSource, MatTableModule} from "@angular/material/table";
+import {OrderFilter} from "@app/_models/orderFilter";
+import {ApiConverter} from "@app/_helpers/api.converter";
+import {NgIf} from "@angular/common";
 
 @Component({
-  selector: 'app-documents',
-  templateUrl: './documents.component.html',
-  styleUrl: './documents.component.scss'
+    selector: 'app-documents',
+    templateUrl: './documents.component.html',
+    styleUrl: './documents.component.scss',
+    standalone: true,
+    imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive, NgIf],
 })
 export class DocumentsComponent {
+    @ViewChild(MatSort) sort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
 
+    protected documentsSub: Subscription;
+    protected documents: Array<PartnerJsonld>;
+    protected dataType!: string;
+
+    protected dataSource;
+    protected displayedColumns: string[];
+
+    protected length: number;
+    protected pageEvent: PageEvent;
+    protected pageSize: number;
+    protected pageIndex: number;
+
+    constructor(
+        private router: Router
+    ) {
+        this.sort = new MatSort();
+        this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+        this.dataSource = new MatTableDataSource; //<DocumentJsonld>(this.documents)
+        this.displayedColumns = ['pos', 'name', 'type', 'date'];
+
+        this.documentsSub = new Subscription();
+        this.documents = [];
+
+        this.length = 0;
+        this.pageEvent = new PageEvent();
+        this.pageSize = 10;
+        this.pageIndex = 0;
+    }
+
+    ngOnInit() {
+        this.getData();
+    }
+
+    ngAfterViewInit() {
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+    }
+
+    getData() {
+        // this.documentsSub = this.documentService.documentsGetCollection(
+        //     this.pageIndex + 1,
+        //     this.pageSize,
+        //     this.dataType,
+        //     undefined,
+        //     this.nameOrderAsc,
+        //     this.storageOrderAsc,
+        //     this.numberOrderAsc
+        // ).subscribe(
+        //     data => {
+        //         this.documents = data["hydra:member"];
+        //         this.dataSource = new MatTableDataSource<DocumentJsonld>(this.documents);
+        //         console.log(data);
+        //         this.length = Number(data["hydra:totalItems"]);
+        //         this.paginator.length = this.length;
+        //     }
+        // );
+    }
+
+    /** Announce the change in sort state for assistive technology. */
+    onSortChange(sortState: Sort) {
+        // Reset page index to first page
+        this.pageIndex = 0;
+
+        let order: OrderFilter;
+        if (sortState.direction === "") {
+            order = OrderFilter.Undefined;
+        } else {
+            order = sortState.direction;
+        }
+
+        // this.nameOrderAsc = OrderFilter.Undefined;
+        // this.cityOrderAsc = OrderFilter.Undefined;
+        // this.websiteOrderAsc = OrderFilter.Undefined;
+        // switch (sortState.active) {
+        //     case "name":
+        //         this.nameOrderAsc = order;
+        //         break;
+        //     case "address":
+        //         this.cityOrderAsc = order;
+        //         break;
+        //     case "website":
+        //         this.websiteOrderAsc = order;
+        //         break;
+        // }
+        this.getData();
+    }
+
+    handlePageEvent(e: PageEvent) {
+        this.pageEvent = e;
+        this.length = e.length;
+        this.pageIndex = e.pageIndex.valueOf();
+        this.pageSize = e.pageSize.valueOf();
+        this.getData();
+    }
+
+    navigateToDocumentFile(element: any) {
+        // const partner: PartnerJsonld = element as PartnerJsonld;
+        // console.log(partner.type);
+        // console.log(ApiConverter.extractId(partner.id));
+        // this.router.navigate(['/documents', ApiConverter.extractId(partner.id)]);
+    }
 }
diff --git a/matsen-tool/src/app/partners/partners.component.ts b/matsen-tool/src/app/partners/partners.component.ts
index 75d76b0..5a9c6e1 100644
--- a/matsen-tool/src/app/partners/partners.component.ts
+++ b/matsen-tool/src/app/partners/partners.component.ts
@@ -69,6 +69,27 @@ export class PartnersComponent implements OnInit, AfterViewInit {
         this.dataSource.paginator = this.paginator;
     }
 
+    getData() {
+        this.partnersSub = this.partnerService.partnersGetCollection(
+            this.pageIndex + 1,
+            this.pageSize,
+            this.dataType,
+            undefined,
+            this.nameOrderAsc,
+            this.cityOrderAsc,
+            this.websiteOrderAsc
+        ).subscribe(
+            data => {
+                this.partners = data["hydra:member"];
+                this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
+                console.log(data);
+                this.length = Number(data["hydra:totalItems"]);
+                this.paginator.length = this.length;
+            }
+        );
+        // switch over this.dataType (customers, etc.)
+    }
+
     /** Announce the change in sort state for assistive technology. */
     onSortChange(sortState: Sort) {
         // Reset page index to first page
@@ -98,27 +119,6 @@ export class PartnersComponent implements OnInit, AfterViewInit {
         this.getData();
     }
 
-    getData() {
-        this.partnersSub = this.partnerService.partnersGetCollection(
-            this.pageIndex + 1,
-            this.pageSize,
-            this.dataType,
-            undefined,
-            this.nameOrderAsc,
-            this.cityOrderAsc,
-            this.websiteOrderAsc
-        ).subscribe(
-            data => {
-                this.partners = data["hydra:member"];
-                this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
-                console.log(data);
-                this.length = Number(data["hydra:totalItems"]);
-                this.paginator.length = this.length;
-            }
-        );
-        // switch over this.dataType (customers, etc.)
-    }
-
     handlePageEvent(e: PageEvent) {
         this.pageEvent = e;
         this.length = e.length;
diff --git a/matsen-tool/src/app/products/products-detail/products-detail.component.html b/matsen-tool/src/app/products/products-detail/products-detail.component.html
index 86d927f..42abaa2 100644
--- a/matsen-tool/src/app/products/products-detail/products-detail.component.html
+++ b/matsen-tool/src/app/products/products-detail/products-detail.component.html
@@ -1 +1,23 @@
-<p>products-detail works!</p>
+<div class="card">
+    <div class="card-body row">
+        <div class="col-8">
+            <h1>Azelainsäure</h1>
+            <dl>
+                <dt>Lagerbestand:</dt>
+                <dd>376512 KG</dd>
+                <dt>Gesperrt:</dt>
+                <dd>Nein</dd>
+                <dt>Einkaufseinheitencode:</dt>
+                <dd>Dose</dd>
+                <dt>Verkaufseinkaufseinheitencode:</dt>
+                <dd>Dose</dd>
+                <dt>Zollposition:</dt>
+                <dd>234856372</dd>
+            </dl>
+        </div>
+        <div class="col-4">
+<!--            <img *ngIf="partner.logoUrl !== null" src="{{environment.basePath}}{{partner.logoUrl}}" width="247" height="94"-->
+<!--                 alt="{{partner.name}}" title="{{partner.name}}" />-->
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/matsen-tool/src/app/products/products-detail/products-detail.component.ts b/matsen-tool/src/app/products/products-detail/products-detail.component.ts
index 02e6f7c..f40405f 100644
--- a/matsen-tool/src/app/products/products-detail/products-detail.component.ts
+++ b/matsen-tool/src/app/products/products-detail/products-detail.component.ts
@@ -1,10 +1,48 @@
-import { Component } from '@angular/core';
+import {AfterViewInit, Component, OnInit} from '@angular/core';
+import {environment} from "@environments/environment";
+import {ActivatedRoute} from "@angular/router";
+import {Subscription} from "rxjs";
+import {PartnerJsonld, PartnerService} from "@app/core/api/v1";
 
 @Component({
-  selector: 'app-products-detail',
-  templateUrl: './products-detail.component.html',
-  styleUrl: './products-detail.component.scss'
+    selector: 'app-products-detail',
+    templateUrl: './products-detail.component.html',
+    styleUrl: './products-detail.component.scss'
 })
-export class ProductsDetailComponent {
+export class ProductsDetailComponent implements OnInit, AfterViewInit {
+    protected readonly environment = environment;
 
+    protected id: string;
+    protected productDetailSub: Subscription;
+    protected product;//: ProductJsonld;
+
+    constructor(
+        private route: ActivatedRoute,
+        // private productService: ProductService,
+    ) {
+        this.id = "";
+        this.productDetailSub = new Subscription();
+        this.product = {}// as ProductJsonld;
+    }
+
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            this.id = params['id'];
+        });
+        this.getProductData();
+    }
+
+    ngAfterViewInit() {
+
+    }
+
+    getProductData() {
+        // this.productDetailSub = this.productService.partnersIdGet(
+        //     this.id
+        // ).subscribe(
+        //     data => {
+        //         this.product = data;
+        //     }
+        // );
+    }
 }
diff --git a/matsen-tool/src/app/products/products.component.html b/matsen-tool/src/app/products/products.component.html
index d786d45..703774d 100644
--- a/matsen-tool/src/app/products/products.component.html
+++ b/matsen-tool/src/app/products/products.component.html
@@ -1 +1,48 @@
-<p>products works!</p>
+<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+       class="mat-elevation-z8">
+
+    <ng-container matColumnDef="pos">
+        <th mat-header-cell *matHeaderCellDef>
+            Nr.
+        </th>
+        <td mat-cell
+            *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
+        </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Produktname sortieren">
+            Produktname
+        </th>
+        <td mat-cell *matCellDef="let element"><span (click)="navigateToProductDetails(element)">{{ element.name }}</span></td>
+    </ng-container>
+
+    <ng-container matColumnDef="storage">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Lagerbestand sortieren">
+            Lagerbestand
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.storage }}
+        </td>
+    </ng-container>
+
+    <ng-container matColumnDef="number">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Nummer sortieren">
+            Nummer
+        </th>
+        <td mat-cell *matCellDef="let element"><a href="{{ element.number }}" target="_blank">{{ element.website }}</a>
+        </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+<!-- Just a quickfix: -->
+<span (click)="navigateToProductDetails('a')">Go to product detail</span>
+<mat-paginator class="mb-4"
+               [pageSizeOptions]="[10,25,50]"
+               [length]="length"
+               (page)="handlePageEvent($event)"
+               [pageSize]="pageSize"
+               [pageIndex]="pageIndex"
+               showFirstLastButtons>
+</mat-paginator>
diff --git a/matsen-tool/src/app/products/products.component.ts b/matsen-tool/src/app/products/products.component.ts
index 9e630af..a403c9f 100644
--- a/matsen-tool/src/app/products/products.component.ts
+++ b/matsen-tool/src/app/products/products.component.ts
@@ -1,10 +1,125 @@
-import { Component } from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
+import {MatSort, MatSortModule, Sort} from "@angular/material/sort";
+import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
+import {MatTableDataSource, MatTableModule} from "@angular/material/table";
+import {PartnerJsonld} from "@app/core/api/v1";
+import {OrderFilter} from "@app/_models/orderFilter";
+import {ApiConverter} from "@app/_helpers/api.converter";
+import {Router, RouterLink, RouterLinkActive} from "@angular/router";
+import {NgIf} from "@angular/common";
+import {Subscription} from "rxjs";
 
 @Component({
-  selector: 'app-products',
-  templateUrl: './products.component.html',
-  styleUrl: './products.component.scss'
+    selector: 'app-products',
+    templateUrl: './products.component.html',
+    styleUrl: './products.component.scss',
+    standalone: true,
+    imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive, NgIf],
 })
-export class ProductsComponent {
+export class ProductsComponent implements OnInit, AfterViewInit {
+    @ViewChild(MatSort) sort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
 
+    protected productsSub: Subscription;
+    protected products: Array<PartnerJsonld>; //TODO: ProductJsonld
+    protected dataType!: string;
+
+    protected dataSource;
+    protected displayedColumns: string[];
+
+    protected length: number;
+    protected pageEvent: PageEvent;
+    protected pageSize: number;
+    protected pageIndex: number;
+
+    constructor(
+        private router: Router
+    ) {
+        this.sort = new MatSort();
+        this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+        this.dataSource = new MatTableDataSource; //<ProductJsonld>(this.products)
+        this.displayedColumns = ['pos', 'name', 'storage', 'number'];
+
+        this.productsSub = new Subscription();
+        this.products = [];
+
+        this.length = 0;
+        this.pageEvent = new PageEvent();
+        this.pageSize = 10;
+        this.pageIndex = 0;
+    }
+
+    ngOnInit() {
+        this.getData();
+    }
+
+    ngAfterViewInit() {
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+    }
+
+    getData() {
+        // this.productsSub = this.productService.productsGetCollection(
+        //     this.pageIndex + 1,
+        //     this.pageSize,
+        //     this.dataType,
+        //     undefined,
+        //     this.nameOrderAsc,
+        //     this.storageOrderAsc,
+        //     this.numberOrderAsc
+        // ).subscribe(
+        //     data => {
+        //         this.products = data["hydra:member"];
+        //         this.dataSource = new MatTableDataSource<ProductJsonld>(this.products);
+        //         console.log(data);
+        //         this.length = Number(data["hydra:totalItems"]);
+        //         this.paginator.length = this.length;
+        //     }
+        // );
+    }
+
+    /** Announce the change in sort state for assistive technology. */
+    onSortChange(sortState: Sort) {
+        // Reset page index to first page
+        this.pageIndex = 0;
+
+        let order: OrderFilter;
+        if (sortState.direction === "") {
+            order = OrderFilter.Undefined;
+        } else {
+            order = sortState.direction;
+        }
+
+        // this.nameOrderAsc = OrderFilter.Undefined;
+        // this.cityOrderAsc = OrderFilter.Undefined;
+        // this.websiteOrderAsc = OrderFilter.Undefined;
+        // switch (sortState.active) {
+        //     case "name":
+        //         this.nameOrderAsc = order;
+        //         break;
+        //     case "address":
+        //         this.cityOrderAsc = order;
+        //         break;
+        //     case "website":
+        //         this.websiteOrderAsc = order;
+        //         break;
+        // }
+        this.getData();
+    }
+
+    handlePageEvent(e: PageEvent) {
+        this.pageEvent = e;
+        this.length = e.length;
+        this.pageIndex = e.pageIndex.valueOf();
+        this.pageSize = e.pageSize.valueOf();
+        this.getData();
+    }
+
+    navigateToProductDetails(element: any) {
+        const product: PartnerJsonld = element as PartnerJsonld; //Todo: ProductJsonld
+        console.log(product.type);
+        console.log(ApiConverter.extractId(product.id));
+        // this.router.navigate(['/products', ApiConverter.extractId(product.id)]);
+        this.router.navigate(['/products', '1']);
+    }
 }