diff --git a/front/app/src/app/layout/sidenav/sidenav.component.ts b/front/app/src/app/layout/sidenav/sidenav.component.ts
index 2d4b4b0a..5b6251af 100644
--- a/front/app/src/app/layout/sidenav/sidenav.component.ts
+++ b/front/app/src/app/layout/sidenav/sidenav.component.ts
@@ -34,6 +34,11 @@ export class SidenavComponent {
             link: "/contracts/drafts",
             icon: IconNamesEnum.PencilSquare
         },
+        {
+            title: "Contracts",
+            link: "/contracts",
+            icon: IconNamesEnum.FileEarmarkTextFill
+        },
     ]
 
     constructor(private router: Router) {}
diff --git a/front/app/src/app/views/contracts/contracts.component.ts b/front/app/src/app/views/contracts/contracts.component.ts
index 23581ae0..d352418b 100644
--- a/front/app/src/app/views/contracts/contracts.component.ts
+++ b/front/app/src/app/views/contracts/contracts.component.ts
@@ -1,10 +1,12 @@
-import { Component, Input } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import { fabric } from 'fabric';
+import {ActivatedRoute, ParamMap} from "@angular/router";
+import {DomSanitizer} from "@angular/platform-browser";
 
 
 export class BaseContractsComponent {
-    protected resource: string = "contract/draft";
-    protected schema: string = "ContractDraft";
+    protected resource: string = "contract";
+    protected schema: string = "Contract";
 }
 
 @Component({
@@ -36,7 +38,7 @@ export class ContractsCardComponent extends BaseContractsComponent{
                 </ng-template>
                 <ng-template ngbPanelContent>
                     <iframe width="100%" 
-                            src="/api/v1/contract/print/" 
+                            [src]="getPreview()" 
                             onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";o.style.width=o.contentWindow.document.body.scrollWidth+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
                 </ng-template>
             </ngb-panel>
@@ -51,5 +53,20 @@ export class ContractsCardComponent extends BaseContractsComponent{
         </ngb-accordion>
     `
 })
-export class ContractsSignatureComponent {
+export class ContractsSignatureComponent implements OnInit {
+    signature_id: string | null = null;
+
+    constructor(
+      private route: ActivatedRoute,
+      private sanitizer: DomSanitizer
+    ) {}
+
+    ngOnInit() {this.route.paramMap.subscribe((params: ParamMap) => {
+        this.signature_id = params.get('id')
+      })
+    }
+
+    getPreview() {
+        return this.sanitizer.bypassSecurityTrustResourceUrl("/api/v1/contract/print/preview/" + this.signature_id);
+    }
 }