diff --git a/front/app/src/app/views/contracts/contracts-routing.module.ts b/front/app/src/app/views/contracts/contracts-routing.module.ts
index 4214b29e..d543b1cf 100644
--- a/front/app/src/app/views/contracts/contracts-routing.module.ts
+++ b/front/app/src/app/views/contracts/contracts-routing.module.ts
@@ -1,44 +1,82 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { DraftCardComponent, DraftListComponent, DraftNewComponent } from "./drafts.component";
+import { DraftsCardComponent, DraftsListComponent, DraftsNewComponent } from "./drafts.component";
+import { ContractsCardComponent, ContractsListComponent, ContractsNewComponent, ContractsSignatureComponent} from "./contracts.component";
 
 
 const routes: Routes = [
-  {
-    path: '',
-    data: {
-      title: 'Entities',
-    },
-    children: [
-        { path: '', redirectTo: 'list', pathMatch: 'full' },
-      {
-        path: 'list',
-        component: DraftListComponent,
+    {
+        path: '',
         data: {
-          title: 'List',
+            title: 'Contracts',
         },
-      },
-      {
-        path: 'new',
-        component: DraftNewComponent,
-        data: {
-          title: 'New',
-        },
-      },
-      {
-        path: ':id',
-        component: DraftCardComponent,
-        data: {
-          title: 'Card',
-        },
-      },
-    ],
-  },
+        children: [
+            { path: '', redirectTo: 'list', pathMatch: 'full' },
+            {
+                path: 'list',
+                component: ContractsListComponent,
+                data: {
+                    title: 'List',
+                },
+            },
+            {
+                path: 'new',
+                component: ContractsNewComponent,
+                data: {
+                    title: 'New',
+                },
+            },
+            {
+                path: 'signature/:id',
+                component: ContractsSignatureComponent,
+                data: {
+                    title: 'New',
+                },
+            },
+            {
+                path: 'drafts',
+                data: {
+                    title: 'Drafts',
+                },
+                children: [
+                    { path: '', redirectTo: 'list', pathMatch: 'full' },
+                    {
+                        path: 'list',
+                        component: DraftsListComponent,
+                        data: {
+                            title: 'List',
+                        },
+                    },
+                    {
+                        path: 'new',
+                        component: DraftsNewComponent,
+                        data: {
+                            title: 'New',
+                        },
+                    },
+                    {
+                        path: ':id',
+                        component: DraftsCardComponent,
+                        data: {
+                            title: 'Card',
+                        },
+                    },
+                ],
+            },
+            {
+                path: ':id',
+                component: ContractsCardComponent,
+                data: {
+                    title: 'Card',
+                },
+            }
+        ]
+    }
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
 })
 export class ContractsRoutingModule {}
diff --git a/front/app/src/app/views/contracts/contracts.component.ts b/front/app/src/app/views/contracts/contracts.component.ts
new file mode 100644
index 00000000..9fa4d705
--- /dev/null
+++ b/front/app/src/app/views/contracts/contracts.component.ts
@@ -0,0 +1,55 @@
+import { Component, Input } from '@angular/core';
+import { NgbAccordionModule } from "@ng-bootstrap/ng-bootstrap";
+
+
+export class BaseContractsComponent {
+    protected resource: string = "contract/draft";
+    protected schema: string = "ContractDraft";
+}
+
+@Component({
+    templateUrl: '../base-view/templates/list.template.html'
+})
+export class ContractsListComponent extends BaseContractsComponent {
+    columns = [];
+}
+
+@Component({
+  templateUrl: '../base-view/templates/new.template.html'
+})
+export class ContractsNewComponent extends BaseContractsComponent {
+    @Input() value: {} = {};
+}
+
+@Component({
+    templateUrl: '../base-view/templates/card.template.html'
+})
+export class ContractsCardComponent extends BaseContractsComponent{
+}
+
+@Component({
+    template: `
+        <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
+            <ngb-panel>
+                <ng-template ngbPanelTitle>
+                    <span>Preview</span>
+                </ng-template>
+                <ng-template ngbPanelContent class="overflow-hidden">
+                    <iframe width="100%" 
+                            src="/api/v1/contract/print/" 
+                            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>
+            <ngb-panel>
+                <ng-template ngbPanelTitle>
+                    <span>Signature</span>
+                </ng-template>
+                <ng-template ngbPanelContent>
+                    
+                </ng-template>
+            </ngb-panel>
+        </ngb-accordion>
+    `
+})
+export class ContractsSignatureComponent {
+}
\ No newline at end of file
diff --git a/front/app/src/app/views/contracts/contracts.module.ts b/front/app/src/app/views/contracts/contracts.module.ts
index d65fc7a6..0d48b5cf 100644
--- a/front/app/src/app/views/contracts/contracts.module.ts
+++ b/front/app/src/app/views/contracts/contracts.module.ts
@@ -3,18 +3,22 @@ import { NgModule } from '@angular/core';
 
 import { BaseViewModule } from "../base-view/base-view.module";
 import { ContractsRoutingModule } from './contracts-routing.module';
-import { DraftCardComponent, DraftListComponent, DraftNewComponent, DraftNewFormComponent } from "./drafts.component";
+import { DraftsCardComponent, DraftsListComponent, DraftsNewComponent, DraftsNewFormComponent } from "./drafts.component";
 import { FormlyModule } from "@ngx-formly/core";
 import { FormlyBootstrapModule } from "@ngx-formly/bootstrap";
 import { ForeignkeyTypeComponent } from "@common/crud/types/foreignkey.type";
 import { CrudService } from "@common/crud/crud.service";
 
+import { ContractsCardComponent, ContractsListComponent, ContractsNewComponent, ContractsSignatureComponent } from "../contracts/contracts.component";
+import {NgbAccordionModule} from "@ng-bootstrap/ng-bootstrap";
+
 
 @NgModule({
   imports: [
     CommonModule,
     BaseViewModule,
     ContractsRoutingModule,
+    NgbAccordionModule,
     FormlyModule.forRoot({
       types: [
         { name: 'foreign-key', component: ForeignkeyTypeComponent }
@@ -23,10 +27,14 @@ import { CrudService } from "@common/crud/crud.service";
     FormlyBootstrapModule,
   ],
   declarations: [
-    DraftListComponent,
-    DraftNewComponent,
-    DraftCardComponent,
-    DraftNewFormComponent
+    DraftsListComponent,
+    DraftsNewComponent,
+    DraftsCardComponent,
+    DraftsNewFormComponent,
+    ContractsListComponent,
+    ContractsNewComponent,
+    ContractsCardComponent,
+      ContractsSignatureComponent
   ],
   providers: [CrudService]
 })
diff --git a/front/app/src/app/views/contracts/drafts.component.ts b/front/app/src/app/views/contracts/drafts.component.ts
index 460e5e22..f48380a0 100644
--- a/front/app/src/app/views/contracts/drafts.component.ts
+++ b/front/app/src/app/views/contracts/drafts.component.ts
@@ -5,7 +5,7 @@ import { CrudFormlyJsonschemaService } from "@common/crud/crud-formly-jsonschema
 import { CrudService } from "@common/crud/crud.service";
 
 
-export class BaseEntitiesComponent {
+export class BaseDraftsComponent {
     protected resource: string = "contract/draft";
     protected schema: string = "ContractDraft";
 }
@@ -13,7 +13,7 @@ export class BaseEntitiesComponent {
 @Component({
     templateUrl: '../base-view/templates/list.template.html'
 })
-export class DraftListComponent extends BaseEntitiesComponent {
+export class DraftsListComponent extends BaseDraftsComponent {
     columns = [];
 }
 
@@ -21,7 +21,7 @@ export class DraftListComponent extends BaseEntitiesComponent {
     selector: 'draft-new-form',
     template: `<base-new [resource]="this.resource" [schema]="this.schema" [model]="this.value"></base-new>`
 })
-export class DraftNewFormComponent extends BaseEntitiesComponent {
+export class DraftsNewFormComponent extends BaseDraftsComponent {
     @Input() value: {} = {};
 }
 
@@ -32,7 +32,7 @@ export class DraftNewFormComponent extends BaseEntitiesComponent {
         <draft-new-form [value]="this.templateModel"></draft-new-form>
     `
 })
-export class DraftNewComponent extends BaseEntitiesComponent implements OnInit {
+export class DraftsNewComponent extends BaseDraftsComponent implements OnInit {
     templateModel: {} = {};
     temaplateFormfields: FormlyFieldConfig[] = [];
     temaplateForm: FormGroup = new FormGroup({});
@@ -88,5 +88,5 @@ export class DraftNewComponent extends BaseEntitiesComponent implements OnInit {
 @Component({
     templateUrl: '../base-view/templates/card.template.html'
 })
-export class DraftCardComponent extends BaseEntitiesComponent{
+export class DraftsCardComponent extends BaseDraftsComponent {
 }
diff --git a/front/app/src/app/views/entities/entities.module.ts b/front/app/src/app/views/entities/entities.module.ts
index 4c503723..ed3ddfad 100644
--- a/front/app/src/app/views/entities/entities.module.ts
+++ b/front/app/src/app/views/entities/entities.module.ts
@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { EntitiesRoutingModule } from './entities-routing.module';
-import { EntityCardComponent, EntityListComponent, EntityNewComponent} from "./entities.component";
 import { BaseViewModule } from "../base-view/base-view.module";
+import { EntityCardComponent, EntityListComponent, EntityNewComponent} from "./entities.component";