diff --git a/matsen-tool/src/app/app-routing.module.ts b/matsen-tool/src/app/app-routing.module.ts
index 081653b..41725cc 100644
--- a/matsen-tool/src/app/app-routing.module.ts
+++ b/matsen-tool/src/app/app-routing.module.ts
@@ -13,6 +13,7 @@ import {ContactsComponent} from "@app/contacts/contacts.component";
 import {ContactsDetailComponent} from "@app/contacts/contacts-detail/contacts-detail.component";
 import {TasksComponent} from "@app/tasks/tasks.component";
 import {SalesComponent} from "@app/sales/sales.component";
+import {SalesDetailComponent} from "@app/sales/sales-detail/sales-detail.component";
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
 const usersModule = () => import('./users/users.module').then(x => x.UsersModule);
@@ -88,6 +89,7 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         children: [
             {path: '', component: SalesComponent, data: {dataType: 'sales'}},
+            {path: ':id', component: SalesDetailComponent, data: {dataType: 'sales-detail'}},
         ]
     },
 
diff --git a/matsen-tool/src/app/app.component.html b/matsen-tool/src/app/app.component.html
index 2656301..3109f46 100644
--- a/matsen-tool/src/app/app.component.html
+++ b/matsen-tool/src/app/app.component.html
@@ -9,7 +9,6 @@
             </a>
         </div>
         <div class="navbar-nav align-items-center">
-            <button class="btn btn-primary me-4" (click)="copyTokenToClipboard()">Copy Token</button>
             <div role="button" class="pe-2 me-4 position-relative" data-bs-toggle="dropdown">Benachrichtigungen
                 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                     99+
@@ -21,7 +20,8 @@
                     <li><a class="dropdown-item" href="#">Peter Matusik: Christian hat einen Kommentar verfasst</a></li>
                 </ul>
             </div>
-            <button class="btn btn-secondary" (click)="logout()">{{ 'basic.logout' | translate }}</button>
+            <button class="btn btn-secondary me-3" (click)="logout()">{{ 'basic.logout' | translate }}</button>
+            <button class="btn btn-primary" (click)="copyTokenToClipboard()">c</button>
         </div>
     </div>
 </nav>
diff --git a/matsen-tool/src/app/documents/documents.component.html b/matsen-tool/src/app/documents/documents.component.html
index 1340a4e..f52aca4 100644
--- a/matsen-tool/src/app/documents/documents.component.html
+++ b/matsen-tool/src/app/documents/documents.component.html
@@ -49,15 +49,6 @@
             </td>
         </ng-container>
 
-        <ng-container matColumnDef="download">
-            <th mat-header-cell *matHeaderCellDef>
-                {{ 'overview.download' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element"><span class="btn btn-primary btn-sm" role="button"
-                                                         (click)="navigateToDocumentFile(element)">Herunterladen</span>
-            </td>
-        </ng-container>
-
         <ng-container matColumnDef="createdAt">
             <th mat-header-cell *matHeaderCellDef mat-sort-header
                 sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.uploaded' | translate }}">
@@ -76,10 +67,18 @@
             </td>
         </ng-container>
 
+        <ng-container matColumnDef="download">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let element">
+                <span class="btn btn-primary bi bi-download p-2-4"
+                      data-type="user-tool" data-action="edit" (click)="navigateToDocumentFile(element)"></span>
+            </td>
+        </ng-container>
+
         <ng-container matColumnDef="edit">
             <th mat-header-cell *matHeaderCellDef></th>
             <td mat-cell *matCellDef="let element">
-                <span class="bi bi-pencil p-2"
+                <span class="btn btn-primary bi bi-pencil p-2-4"
                       data-type="user-tool" data-action="edit" (click)="openModalEditDocument(element)"></span>
             </td>
         </ng-container>
diff --git a/matsen-tool/src/app/documents/documents.component.ts b/matsen-tool/src/app/documents/documents.component.ts
index f333343..71e1d64 100644
--- a/matsen-tool/src/app/documents/documents.component.ts
+++ b/matsen-tool/src/app/documents/documents.component.ts
@@ -44,7 +44,7 @@ export class DocumentsComponent {
         private documentService: DocumentService
     ) {
         this.sort = new MatSort();
-        this.displayedColumns = ['pos', 'name', 'description', 'download', 'partnerName', 'productName', 'createdAt', 'createdByName', 'edit'];
+        this.displayedColumns = ['pos', 'name', 'description', 'partnerName', 'productName', 'createdAt', 'createdByName', 'download', 'edit'];
 
         this.documentsSub = new Subscription();
         this.documents = [];
diff --git a/matsen-tool/src/app/sales/sales.component.html b/matsen-tool/src/app/sales/sales.component.html
index 8c26d1b..5240d55 100644
--- a/matsen-tool/src/app/sales/sales.component.html
+++ b/matsen-tool/src/app/sales/sales.component.html
@@ -8,14 +8,16 @@
         <p><strong>{{ saleSummary.ownerName }}</strong></p>
         <div class="sales-summary-bar">
             <div>
-                <span class="sales-summary-turnover" [ngStyle]="{ 'width.%': calculateWidthPercentage(Number(saleSummary.turnover), saleSummaryMaxTurnover)}">
+                <span class="sales-summary-turnover"
+                      [ngStyle]="{ 'width.%': calculateWidthPercentage(Number(saleSummary.turnover), saleSummaryMaxTurnover)}">
                     {{ 'sales.turnover' | translate }}: <strong>{{ saleSummary.turnover | currency: 'EUR' }}</strong>
                 </span>
             </div>
         </div>
         <div class="sales-summary-bar">
             <div>
-                <span class="sales-summary-profit" [ngStyle]="{ 'width.%': calculateWidthPercentage(Number(saleSummary.profit), saleSummaryMaxTurnover)}">
+                <span class="sales-summary-profit"
+                      [ngStyle]="{ 'width.%': calculateWidthPercentage(Number(saleSummary.profit), saleSummaryMaxTurnover)}">
                     {{ 'sales.profit' | translate }}: <strong>{{ saleSummary.profit | currency: 'EUR' }}</strong>
                 </span>
             </div>
@@ -41,9 +43,7 @@
                 {{ 'overview.sale-user' | translate }}
             </th>
             <td mat-cell *matCellDef="let element">
-                <span role="button" (click)="navigateToSaleDetails(element)">
-                    {{ element.ownerName }}
-                </span>
+                {{ element.ownerName }}
             </td>
         </ng-container>
 
@@ -53,7 +53,7 @@
                 {{ 'overview.sale-partner' | translate }}
             </th>
             <td mat-cell *matCellDef="let element">
-                {{ element.partnerName }}
+                <a [routerLink]="['/customer', ApiConverter.extractId(element.partner)]">{{ element.partnerName }}</a>
             </td>
         </ng-container>
 
@@ -63,7 +63,7 @@
                 {{ 'overview.productname' | translate }}
             </th>
             <td mat-cell *matCellDef="let element">
-                {{ element.productName }}
+                <a [routerLink]="['/products', ApiConverter.extractId(element.product)]">{{ element.productName }}</a>
             </td>
         </ng-container>
 
@@ -97,6 +97,16 @@
             </td>
         </ng-container>
 
+        <ng-container matColumnDef="details">
+            <th mat-header-cell *matHeaderCellDef>
+                {{ 'overview.details' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let element">
+                <span class="btn btn-primary bi bi-zoom-in p-2-4"
+                      data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
+            </td>
+        </ng-container>
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
diff --git a/matsen-tool/src/app/sales/sales.component.ts b/matsen-tool/src/app/sales/sales.component.ts
index c085eec..fde7b0f 100644
--- a/matsen-tool/src/app/sales/sales.component.ts
+++ b/matsen-tool/src/app/sales/sales.component.ts
@@ -1,5 +1,6 @@
 import {ChangeDetectorRef, Component, LOCALE_ID, OnInit, ViewChild} from '@angular/core';
 import {
+    ContactJsonld,
     ProductJsonld,
     SaleJsonld,
     SaleService,
@@ -64,7 +65,7 @@ export class SalesComponent implements OnInit {
         private router: Router,
     ) {
         this.sort = new MatSort();
-        this.displayedColumns = ['pos', 'user', 'partner', 'product', 'turnover', 'profit', 'date'];
+        this.displayedColumns = ['pos', 'user', 'partner', 'product', 'turnover', 'profit', 'date', 'details'];
         this.salesSub = new Subscription();
         this.sales = [];
         this.salesSummarySub = new Subscription();
@@ -159,8 +160,9 @@ export class SalesComponent implements OnInit {
     }
 
     navigateToSaleDetails(element: any) {
-        // const product: ProductJsonld = element as ProductJsonld;
-        // this.router.navigate(['/products', ApiConverter.extractId(product.id)]);
+        console.log(element);
+        // const sale: SaleJsonld = element as SaleJsonld;
+        // this.router.navigate(['/sales', ApiConverter.extractId(sale.id)]);
     }
 
     openModalNewSale() {
@@ -177,4 +179,5 @@ export class SalesComponent implements OnInit {
     }
 
     protected readonly Number = Number;
+    protected readonly ApiConverter = ApiConverter;
 }
diff --git a/matsen-tool/src/assets/i18n/de.json b/matsen-tool/src/assets/i18n/de.json
index 31aba50..534e0ba 100644
--- a/matsen-tool/src/assets/i18n/de.json
+++ b/matsen-tool/src/assets/i18n/de.json
@@ -75,6 +75,7 @@
     "product": "Produkt",
     "sale-user": "Verkäufer",
     "sale-partner": "Kunde",
+    "details": "Details",
     "turnover": "Umsatz",
     "profit": "Gewinn",
     "createdAt": "erstellt am"
diff --git a/matsen-tool/src/assets/scss/_button.scss b/matsen-tool/src/assets/scss/_button.scss
index f410972..95c8210 100644
--- a/matsen-tool/src/assets/scss/_button.scss
+++ b/matsen-tool/src/assets/scss/_button.scss
@@ -14,7 +14,7 @@
   @include transition();
 
   &:hover {
-    color: $color-matsen;
+    background: $color-matsen;
   }
 }