diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts
index 02511c4..cca012b 100644
--- a/src/app/football-field/football-field.component.ts
+++ b/src/app/football-field/football-field.component.ts
@@ -1,80 +1,10 @@
 import { Component, ViewChild, Renderer2, ElementRef, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { TimelineStep, Rectangle, Circle2, Piquet, Plot, Ball, Player } from '../models/canvas.model';
 import { C } from '@angular/cdk/keycodes';
 import { CdkPortal } from '@angular/cdk/portal';
 
-interface TimelineStep {
-	startTime: number; // Le temps de début en millisecondes
-	endTime: number; // Le temps de fin en millisecondes
-	startX: number; // Position de départ de l'élément sur l'axe X
-	startY: number; // Position de départ de l'élément sur l'axe Y
-	endX: number; // Position de fin de l'élément sur l'axe X
-	endY: number; // Position de fin de l'élément sur l'axe Y
-	duration: number; // Temps d'animation (en secondes ou ticks)
-}
-
-interface Rectangle {
-	x: number; // Position X du centre du rectangle de l'élément
-	y: number; // Position Y du centre du rectangle de l'élément
-	width: number; // longueur de l'élément
-	height: number; // largeur de l'élément
-}
-
-interface Circle {
-	id: number; // Identifiant unique de l'élément
-	x: number; // Position X du centre du cercle de l'élément
-	y: number; // Position Y du centre du cercle de l'élément
-	radius: number; // Rayon du cercle de l'élément
-	isDragging: boolean;
-	isMoving: boolean;
-	progress: number; // Paramètre de progression sur la courbe
-	startX: number;
-	startY: number;
-	timeline: TimelineStep[];  // Stockage des étapes d'animation
-	currentStepIndex: number;  // Suivre l'étape actuelle dans la timeline
-}
-
-interface Circle2 {
-	x: number; // Position X du centre du cercle de l'élément
-	y: number; // Position Y du centre du cercle de l'élément
-	radius: number; // Rayon du cercle de l'élément
-}
-
-interface Piquet {
-	id: number; // Identifiant unique de l'élément
-	design: Rectangle; // Design du piquet
-	isDragging: boolean;  // Flag de déplacement du piquet
-}
-
-interface Plot {
-	id: number; // Identifiant unique de l'élément
-	design: Circle2; // Design du plot
-	isDragging: boolean;  // Flag de déplacement du plot
-}
-
-interface Ball {
-	id: number; // Identifiant unique de l'élément
-	design: Circle2; // Design du ballon
-	isDragging: boolean; // Flag de déplacement du ballon
-	isMoving: boolean; // Flag d'animation du ballon
-	progress: number; // Paramètre de progression sur la courbe
-	steps: TimelineStep[];  // Stockage des étapes d'animation
-	currentStepIndex: number;  // Suivre l'étape actuelle dans la timeline
-	attachedToPlayer: Player | null; // Le joueur auquel le ballon est attaché
-}
-
-interface Player {
-	id: number; // Identifiant unique de l'élément
-	design: Circle2; // Design du Joueur
-	isDragging: boolean; // Flag de déplacement du joueur
-	isMoving: boolean; // Flag d'animation du joueur
-	progress: number; // Paramètre de progression sur la courbe
-	hasBall: boolean;  // Indique si le joueur a le ballon
-	steps: TimelineStep[];  // Stockage des étapes d'animation
-	currentStepIndex: number;  // Suivre l'étape actuelle dans la timeline
-}
-
 @Component({
   selector: 'app-football-field',
   standalone: true,
diff --git a/src/app/models/canvas.model.ts b/src/app/models/canvas.model.ts
new file mode 100644
index 0000000..2d2803c
--- /dev/null
+++ b/src/app/models/canvas.model.ts
@@ -0,0 +1,70 @@
+export interface TimelineStep {
+	startTime: number; // Le temps de début en millisecondes
+	endTime: number; // Le temps de fin en millisecondes
+	startX: number; // Position de départ de l'élément sur l'axe X
+	startY: number; // Position de départ de l'élément sur l'axe Y
+	endX: number; // Position de fin de l'élément sur l'axe X
+	endY: number; // Position de fin de l'élément sur l'axe Y
+	duration: number; // Temps d'animation (en secondes ou ticks)
+}
+
+export interface Rectangle {
+	x: number; // Position X du centre du rectangle de l'élément
+	y: number; // Position Y du centre du rectangle de l'élément
+	width: number; // longueur de l'élément
+	height: number; // largeur de l'élément
+}
+
+export interface Circle {
+	id: number; // Identifiant unique de l'élément
+	x: number; // Position X du centre du cercle de l'élément
+	y: number; // Position Y du centre du cercle de l'élément
+	radius: number; // Rayon du cercle de l'élément
+	isDragging: boolean;
+	isMoving: boolean;
+	progress: number; // Paramètre de progression sur la courbe
+	startX: number;
+	startY: number;
+	timeline: TimelineStep[];  // Stockage des étapes d'animation
+	currentStepIndex: number;  // Suivre l'étape actuelle dans la timeline
+}
+
+export interface Circle2 {
+	x: number; // Position X du centre du cercle de l'élément
+	y: number; // Position Y du centre du cercle de l'élément
+	radius: number; // Rayon du cercle de l'élément
+}
+
+export interface Piquet {
+	id: number; // Identifiant unique de l'élément
+	design: Rectangle; // Design du piquet
+	isDragging: boolean;  // Flag de déplacement du piquet
+}
+
+export interface Plot {
+	id: number; // Identifiant unique de l'élément
+	design: Circle2; // Design du plot
+	isDragging: boolean;  // Flag de déplacement du plot
+}
+
+export interface Ball {
+	id: number; // Identifiant unique de l'élément
+	design: Circle2; // Design du ballon
+	isDragging: boolean; // Flag de déplacement du ballon
+	isMoving: boolean; // Flag d'animation du ballon
+	progress: number; // Paramètre de progression sur la courbe
+	steps: TimelineStep[];  // Stockage des étapes d'animation
+	currentStepIndex: number;  // Suivre l'étape actuelle dans la timeline
+	attachedToPlayer: Player | null; // Le joueur auquel le ballon est attaché
+}
+
+export interface Player {
+	id: number; // Identifiant unique de l'élément
+	design: Circle2; // Design du Joueur
+	isDragging: boolean; // Flag de déplacement du joueur
+	isMoving: boolean; // Flag d'animation du joueur
+	progress: number; // Paramètre de progression sur la courbe
+	hasBall: boolean;  // Indique si le joueur a le ballon
+	steps: TimelineStep[];  // Stockage des étapes d'animation
+	currentStepIndex: number;  // Suivre l'étape actuelle dans la timeline
+}
\ No newline at end of file
diff --git a/src/app/services/process.service.spec.ts b/src/app/services/process.service.spec.ts
new file mode 100644
index 0000000..c347d43
--- /dev/null
+++ b/src/app/services/process.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProcessService } from './process.service';
+
+describe('ProcessService', () => {
+  let service: ProcessService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProcessService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/process.service.ts b/src/app/services/process.service.ts
new file mode 100644
index 0000000..70d4a49
--- /dev/null
+++ b/src/app/services/process.service.ts
@@ -0,0 +1,226 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from '../../environments/environment';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class ProcessService {
+	constructor(private http:HttpClient) {}
+
+	loginUser(val:any):Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+				'Authorization' : 'Basic ' + btoa(val['login'] + ':' + val['password']),
+			}),
+			withCredentials: true
+		};
+
+		return this.http.post<any>(host+"/api/signature/login", {}, options);
+	}
+
+	isConnected():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/signature/userConnected", options);
+	}
+
+	isAdmin():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/signature/isAdmin", options);
+	}
+
+	isYubikeyUser():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/signature/isYubikeyUser", options);
+	}
+
+	logoutUser():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.post<any>(host+"/api/signature/logout", {}, options);
+	}
+
+/*
+	getCurrentUser():Observable<Utilisateur> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<Utilisateur>(host+"/api/signature/current", options);
+	}
+*/
+
+	resetProcess():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/signature/resetProcess", options);
+	}
+
+	uploadBinary(val:FormData, p12passwd:string):Observable<any> {
+		let host=environment.host;
+		if ( p12passwd && p12passwd.length > 0 ) {
+			const options = {
+				headers: new HttpHeaders({
+					'p12password' : p12passwd,
+				}),
+				withCredentials: true
+			};
+			return this.http.post<any>(host+"/api/signature/uploadBinary", val, options);
+		}
+		return this.http.post<any>(host+"/api/signature/uploadBinary", val, { withCredentials: true });
+	}
+
+	sign():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/signature/sign", options);
+	}
+
+	getSignProgress():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/signature/progress", options);
+	}
+
+/*
+	getSignedFiles():Observable<SignedFile[]> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<SignedFile[]>(host+"/api/signature/list-signed", options);
+	}
+*/
+
+	downloadSignedFiles(filename:string):Observable<Blob> {
+		let host=environment.host;
+		return this.http.get(host+"/api/signature/downloadBinary", {
+				params: new HttpParams().set('filename', filename), withCredentials: true, responseType: 'blob'
+		});
+	}
+
+	uploadBinaryCMS(val:FormData, p12passwd:string):Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'p12password' : p12passwd,
+			}),
+			withCredentials: true
+		};
+		return this.http.post<any>(host+"/api/signature/uploadBinaryCMS", val, options);
+	}
+
+	signCMS():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/signature/signCMS", options);
+	}
+
+	getSignCMSProgress():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/signature/progressCMS", options);
+	}
+
+/*
+	getCMSFiles():Observable<SignedFile[]> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<SignedFile[]>(host+"/api/signature/list-signedCMS", options);
+	}
+*/
+
+	downloadCMSFiles(filename:string):Observable<Blob> {
+		let host=environment.host;
+		return this.http.get(host+"/api/signature/downloadBinaryCMS", {
+				params: new HttpParams().set('filename', filename), withCredentials: true, responseType: 'blob'
+		});
+	}
+
+/*
+	getLogs():Observable<Log[]> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<Log[]>(host+"/api/signature/logs", options);
+	}
+*/
+/*
+	getStatus():Observable<Device> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<Device>(host+"/api/signature/" + environment.device_endpoint, options);
+	}
+*/
+}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..e8ffc14
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,5 @@
+export const environment = {
+	production: true,
+	//host: "http://testsigntool:8080",
+	host: ""
+};
\ No newline at end of file
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..4a03586
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,17 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+	production: false,
+	host: "http://localhost:5000"
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.