diff --git a/back/src/org/kar/karideo/api/UserMediaAdvancementResource.java b/back/src/org/kar/karideo/api/UserMediaAdvancementResource.java
index 49c5669..a7a20a3 100644
--- a/back/src/org/kar/karideo/api/UserMediaAdvancementResource.java
+++ b/back/src/org/kar/karideo/api/UserMediaAdvancementResource.java
@@ -77,7 +77,11 @@ public class UserMediaAdvancementResource {
     	UserMediaAdvancement elem = this.getWithId(sc, id);
     	if (elem == null) {
     		// insert element
-    		return this.post(sc, id, new MediaInformations(data.time(), data.percent(), 0));
+    		if (data.addCount) {
+    			return this.post(sc, id, new MediaInformations(data.time(), data.percent(), 1));
+    		} else {
+    			return this.post(sc, id, new MediaInformations(data.time(), data.percent(), 0));
+    		}
     	}
     	elem.time = data.time;
     	elem.percent = data.percent;
diff --git a/back/src/org/kar/karideo/migration/Migration20230810.java b/back/src/org/kar/karideo/migration/Migration20230810.java
index 482bd25..d67cd7c 100644
--- a/back/src/org/kar/karideo/migration/Migration20230810.java
+++ b/back/src/org/kar/karideo/migration/Migration20230810.java
@@ -16,7 +16,7 @@ public class Migration20230810 extends MigrationSqlStep {
 		addClass(UserMediaAdvancement.class);
 
 		addAction("""
-				ALTER TABLE `userMediaAdvencement` AUTO_INCREMENT = 1000;
+				ALTER TABLE `userMediaAdvancement` AUTO_INCREMENT = 1000;
 				""");
 	}
 
diff --git a/front/src/app/component/element-video/element-video.html b/front/src/app/component/element-video/element-video.html
index 718c465..b9fac47 100644
--- a/front/src/app/component/element-video/element-video.html
+++ b/front/src/app/component/element-video/element-video.html
@@ -1,18 +1,24 @@
 <div>
+	<div class="count-base">
+		<span class="views" *ngIf="advancement">
+			{{advancement.count}}
+		</span>
+	</div>
 	<div class="videoImgContainer">
 		<div *ngIf="covers">
 			<!--<data-image id="{{cover}}"></data-image>-->
-			<img src="{{covers[0]}}"/>
+			<img src="{{covers[0]}}" />
 		</div>
 		<div *ngIf="!covers" class="noImage">
-			
+
 		</div>
 	</div>
+	<div class="view-progess" [ngStyle]="updateAdvancement()"></div>
 	<div class="title-small" *ngIf="data">
 		{{episodeDisplay}} {{name}}
 	</div>
 	<div class="title-small" *ngIf="!data">
-		Error meda: {{element?.id}}
+		Error media: {{element?.id}}
 	</div>
 	<!--
 	<div class="description-small" *ngIf="description">
diff --git a/front/src/app/component/element-video/element-video.less b/front/src/app/component/element-video/element-video.less
index a7023b1..0398186 100644
--- a/front/src/app/component/element-video/element-video.less
+++ b/front/src/app/component/element-video/element-video.less
@@ -1,14 +1,53 @@
+.count-base {
+	height: 0px;
+	width: 100%;
+	left: 0px;
+	z-index: 12;
+	//position:flex;
+	text-align: left;
+
+	.views {
+		height: 30px;
+		//width: 30px;
+		font-size: 17px;
+		line-height: 30px;
+		overflow: hidden;
+		position: relative;
+		z-index: 12;
+		left: 6px;
+		top: 6px;
+		text-align: left;
+		padding: 5px 10px;
+		color: rgba(0, 0, 0, 1.0);
+		background: rgba(256, 256, 256, 0.3);
+		border: 1px solid;
+		border-color: rgba(56, 206, 26, 0.8);
+		border-radius: 15px;
+	}
+}
+
+.view-progess {
+	//position: relative;
+	//display: flex;
+	height: 2px;
+	background-color: #079207;
+	//width: 70%;
+	left: 0px;
+	z-index: 15;
+}
 
 .videoImgContainer {
 	text-align: center;
 	width: 200px;
 	margin: 0 auto;
 	height: 250px;
+
 	img {
 		//width: 100%;
 		max-height: 250px;
 		max-width: 200px;
 	}
+
 	.noImage {
 		height: 243px;
 		width: 193px;
@@ -22,10 +61,10 @@
 	height: 40px;
 	width: 200px;
 	font-size: 17px;
-	overflow:hidden;
-	display:inline-block;
+	overflow: hidden;
+	display: inline-block;
 	text-align: center;
-	padding:auto;
+	padding: auto;
 	background: rgba(256, 256, 256, 0.3);
 	border-radius: 7px;
 }
@@ -33,6 +72,6 @@
 .description-small {
 	height: 30px;
 	font-size: 12px;
-	overflow:hidden;
+	overflow: hidden;
 	vertical-align: middle;
 }
\ No newline at end of file
diff --git a/front/src/app/component/element-video/element-video.ts b/front/src/app/component/element-video/element-video.ts
index 588f65e..9655bff 100644
--- a/front/src/app/component/element-video/element-video.ts
+++ b/front/src/app/component/element-video/element-video.ts
@@ -5,32 +5,36 @@
  */
 import { Injectable, Component, OnInit, Input } from '@angular/core';
 import { isMedia, Media } from 'app/model';
+import { UserMediaAdvancement } from 'app/model/user-media-advancement';
 
-import { DataService } from 'app/service';
+import { AdvancementService, DataService } from 'app/service';
 import { NodeData } from 'common/model';
 import { isNullOrUndefined } from 'common/utils';
 
 @Component({
 	selector: 'app-element-video',
 	templateUrl: './element-video.html',
-	styleUrls: [ './element-video.less' ]
+	styleUrls: ['./element-video.less']
 })
 
 @Injectable()
 export class ElementVideoComponent implements OnInit {
 	// input parameters
-	@Input() element:NodeData;
-	data:Media;
+	@Input() element: NodeData;
+	data: Media;
 
-	name:string = '';
-	description:string = '';
-	episodeDisplay:string = '';
+	name: string = '';
+	description: string = '';
+	episodeDisplay: string = '';
 
-	cover:string = '';
-	covers:string[];
+	cover: string = '';
+	covers: string[];
+
+	advancement: UserMediaAdvancement = undefined;
 
 	constructor(
-		private dataService: DataService) {
+		private dataService: DataService,
+		private advancementService: AdvancementService) {
 		// nothing to do.
 	}
 	ngOnInit() {
@@ -43,11 +47,25 @@ export class ElementVideoComponent implements OnInit {
 		this.data = this.element;
 		this.name = this.element.name;
 		this.description = this.element.description;
-		if(isNullOrUndefined(this.element.episode)) {
+		if (isNullOrUndefined(this.element.episode)) {
 			this.episodeDisplay = '';
 		} else {
-			this.episodeDisplay = `${this.element.episode } - `;
+			this.episodeDisplay = `${this.element.episode} - `;
 		}
 		this.covers = this.dataService.getCoverListThumbnailUrl(this.element.covers);
+
+		this.advancementService.get(this.element.id)
+			.then((response: UserMediaAdvancement) => {
+				console.log(`  ==> get answer sub-series: ${JSON.stringify(response)}`);
+				this.advancement = response;
+			}).catch((response) => {
+				this.advancement = undefined;
+			});
+	}
+	updateAdvancement() {
+		if (isNullOrUndefined(this.advancement)) {
+			return { width: "0%" };
+		}
+		return { width: `${this.advancement.percent * 100}%` };
 	}
 }
diff --git a/front/src/app/scene/season/season.ts b/front/src/app/scene/season/season.ts
index 494fc2e..46a1875 100644
--- a/front/src/app/scene/season/season.ts
+++ b/front/src/app/scene/season/season.ts
@@ -6,12 +6,12 @@
 
 import { Component, OnInit } from '@angular/core';
 
-import { SeasonService, DataService, SeriesService, ArianeService } from 'app/service';
+import { SeasonService, DataService, SeriesService, ArianeService, AdvancementService } from 'app/service';
 
 @Component({
 	selector: 'app-season',
 	templateUrl: './season.html',
-	styleUrls: [ './season.less' ]
+	styleUrls: ['./season.less']
 })
 export class SeasonScene implements OnInit {
 	name: string = '';
@@ -24,10 +24,11 @@ export class SeasonScene implements OnInit {
 	videosError = '';
 	videos = [];
 	constructor(
-	    private seasonService: SeasonService,
-	    private seriesService: SeriesService,
-	    private arianeService: ArianeService,
-	    private dataService: DataService) {
+		private seasonService: SeasonService,
+		private seriesService: SeriesService,
+		private arianeService: ArianeService,
+		private dataService: DataService,
+		private advancementService: AdvancementService) {
 
 	}
 
@@ -36,27 +37,27 @@ export class SeasonScene implements OnInit {
 
 		let self = this;
 		this.seasonService.get(this.idSeason)
-			.then((response:any) => {
+			.then((response: any) => {
 				console.log("Get element ! " + JSON.stringify(response));
 				self.name = response.name;
 				self.seriesId = response.parentId;
 				self.description = response.description;
-				if(response.covers === undefined || response.covers === null || response.covers.length === 0) {
+				if (response.covers === undefined || response.covers === null || response.covers.length === 0) {
 					self.cover = null;
 					self.covers = [];
 				} else {
 					self.cover = self.dataService.getCoverUrl(response.covers[0]);
-					for(let iii = 0; iii < response.covers.length; iii++) {
+					for (let iii = 0; iii < response.covers.length; iii++) {
 						self.covers.push(self.dataService.getCoverUrl(response.covers[iii]));
 					}
 				}
 				self.seriesService.get(self.seriesId)
-					.then((response2:any) => {
+					.then((response2: any) => {
 						self.seriesName = response2.name;
-					}).catch((response2:any) => {
+					}).catch((response2: any) => {
 						self.seriesName = '';
 					});
-			}).catch((response3:any) => {
+			}).catch((response3: any) => {
 				self.description = '';
 				self.name = '???';
 				self.seriesName = '';
@@ -64,18 +65,23 @@ export class SeasonScene implements OnInit {
 				self.cover = null;
 				self.covers = [];
 			});
-		console.log(`get parameter id: ${ this.idSeason}`);
+		console.log(`get parameter id: ${this.idSeason}`);
 		this.seasonService.getVideo(this.idSeason)
-			.then((response4:any) => {
+			.then((response4: any) => {
 				self.videosError = '';
 				self.videos = response4;
-			}).catch((response5:any) => {
+			}).catch((response5: any) => {
 				self.videosError = 'Can not get the List of video without season';
 				self.videos = [];
 			});
 	}
 
-	onSelectVideo(event: any, idSelected: number):void {
-		this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
+	onSelectVideo(event: any, idSelected: number): void {
+		if (event.ctrlKey && event.altKey && event.which === 2) {
+			// special feature ==> add count id...
+			this.advancementService.updateTime(idSelected, 0, 1, true);
+		} else {
+			this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
+		}
 	}
 }
diff --git a/front/src/app/scene/series/series.ts b/front/src/app/scene/series/series.ts
index 508c63a..dd4be09 100644
--- a/front/src/app/scene/series/series.ts
+++ b/front/src/app/scene/series/series.ts
@@ -6,13 +6,13 @@
 
 import { Component, OnInit } from '@angular/core';
 
-import { SeriesService, DataService, ArianeService } from 'app/service';
+import { SeriesService, DataService, ArianeService, AdvancementService } from 'app/service';
 import { NodeData } from 'common/model';
 
 @Component({
 	selector: 'app-series',
 	templateUrl: './series.html',
-	styleUrls: [ './series.less' ]
+	styleUrls: ['./series.less']
 })
 
 export class SeriesScene implements OnInit {
@@ -26,9 +26,10 @@ export class SeriesScene implements OnInit {
 	videosError: string = '';
 	videos: Array<any> = [];
 	constructor(
-	    private seriesService: SeriesService,
-	    private arianeService: ArianeService,
-		private dataService: DataService) {
+		private seriesService: SeriesService,
+		private arianeService: ArianeService,
+		private dataService: DataService,
+		private advancementService: AdvancementService) {
 
 	}
 
@@ -46,12 +47,12 @@ export class SeriesScene implements OnInit {
 			.then((response) => {
 				self.name = response.name;
 				self.description = response.description;
-				if(response.covers === undefined || response.covers === null || response.covers.length === 0) {
+				if (response.covers === undefined || response.covers === null || response.covers.length === 0) {
 					self.cover = null;
 					self.covers = [];
 				} else {
 					self.cover = self.dataService.getCoverUrl(response.covers[0]);
-					for(let iii = 0; iii < response.covers.length; iii++) {
+					for (let iii = 0; iii < response.covers.length; iii++) {
 						self.covers.push(self.dataService.getCoverUrl(response.covers[iii]));
 					}
 				}
@@ -92,24 +93,29 @@ export class SeriesScene implements OnInit {
 				self.checkIfJumpIsNeeded(updateEnded);
 			});
 	}
-	onSelectSeason(event: any, idSelected: number):void {
+	onSelectSeason(event: any, idSelected: number): void {
 		this.arianeService.navigateSeason(idSelected, event.which === 2, event.ctrlKey);
 	}
 
-	onSelectVideo(event: any, idSelected: number):void {
-		this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
+	onSelectVideo(event: any, idSelected: number): void {
+		if (event.ctrlKey && event.altKey && event.which === 2) {
+			// special feature ==> add count id...
+			this.advancementService.updateTime(idSelected, 0, 1, true);
+		} else {
+			this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
+		}
 	}
 	checkIfJumpIsNeeded(updateEnded: { seriesMetadata: boolean; subSaison: boolean; subVideo: boolean; }): void {
 		// all update is ended
-		if(updateEnded.seriesMetadata === false || updateEnded.subSaison === false || updateEnded.subVideo === false) {
+		if (updateEnded.seriesMetadata === false || updateEnded.subSaison === false || updateEnded.subVideo === false) {
 			return;
 		}
 		// no local video
-		if(this.videos.length > 0) {
+		if (this.videos.length > 0) {
 			return;
 		}
 		// only one season:
-		if(this.seasons.length !== 1) {
+		if (this.seasons.length !== 1) {
 			return;
 		}
 		this.arianeService.navigateSeason(this.seasons[0].id, false, false, true);
diff --git a/front/src/app/scene/type/type.ts b/front/src/app/scene/type/type.ts
index c9e4aec..24beef3 100644
--- a/front/src/app/scene/type/type.ts
+++ b/front/src/app/scene/type/type.ts
@@ -7,28 +7,29 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { TypeService, DataService, ArianeService } from 'app/service';
+import { TypeService, DataService, ArianeService, AdvancementService } from 'app/service';
 
 @Component({
 	selector: 'app-type',
 	templateUrl: './type.html',
-	styleUrls: [ './type.less' ]
+	styleUrls: ['./type.less']
 })
 
 export class TypeScene implements OnInit {
 	typeId = -1;
 	name: string = '';
 	description: string = '';
-	cover:string = null;
-	covers:string[] = [];
+	cover: string = null;
+	covers: string[] = [];
 	seriessError = '';
 	series = [];
 	videosError = '';
 	videos = [];
 	constructor(
-	    private typeService: TypeService,
-	    private arianeService: ArianeService,
-	    private dateService: DataService) {
+		private typeService: TypeService,
+		private arianeService: ArianeService,
+		private dateService: DataService,
+		private advancementService: AdvancementService) {
 
 		/*
 		this.route.params.subscribe(params => {
@@ -43,18 +44,18 @@ export class TypeScene implements OnInit {
 	ngOnInit() {
 		this.typeId = this.arianeService.getTypeId();
 		let self = this;
-		console.log(`get type global id: ${ this.typeId}`);
+		console.log(`get type global id: ${this.typeId}`);
 		this.typeService.get(this.typeId)
 			.then((response) => {
 				self.name = response.name;
 				self.description = response.description;
 				console.log(`  ==> get answer type detail: ${JSON.stringify(response)}`);
-				if(response.covers === undefined || response.covers === null || response.covers.length === 0) {
+				if (response.covers === undefined || response.covers === null || response.covers.length === 0) {
 					self.cover = null;
 					self.covers = [];
 				} else {
 					self.cover = self.dateService.getCoverUrl(response.covers[0]);
-					for(let iii = 0; iii < response.covers.length; iii++) {
+					for (let iii = 0; iii < response.covers.length; iii++) {
 						self.covers.push(self.dateService.getCoverUrl(response.covers[iii]));
 					}
 				}
@@ -85,11 +86,17 @@ export class TypeScene implements OnInit {
 				self.videos = [];
 			});
 	}
-	onSelectSeries(event: any, idSelected: number):void {
+	onSelectSeries(event: any, idSelected: number): void {
 		this.arianeService.navigateSeries(idSelected, event.which === 2, event.ctrlKey);
 	}
 
-	onSelectVideo(event: any, idSelected: number):void {
-		this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
+	onSelectVideo(event: any, idSelected: number): void {
+		console.log(` type of event: ${typeof event}`);
+		if (event.ctrlKey && event.altKey && event.which === 2) {
+			// special feature ==> add count id...
+			this.advancementService.updateTime(idSelected, 0, 1, true);
+		} else {
+			this.arianeService.navigateVideo(idSelected, event.which === 2, event.ctrlKey);
+		}
 	}
 }
diff --git a/front/src/app/scene/video/video.html b/front/src/app/scene/video/video.html
index efd1afe..3f50066 100644
--- a/front/src/app/scene/video/video.html
+++ b/front/src/app/scene/video/video.html
@@ -53,9 +53,9 @@
 		<div class="episode">
 			<b>generatedName:</b> {{generatedName}}
 		</div>
-		<div class="description">
-			count= {{userMetaData?.count}} view percent={{userMetaData?.percent}}
-			percent={{convertIndisplayTime(userMetaData?.time)}}
+		<div class="episode" *ngIf="userMetaData">
+			<b>Number of view:</b> {{userMetaData.count}}<br />
+			<b>Position:</b> {{userMetaData.percentDisplay}} % ==> {{convertIndisplayTime(userMetaData.time)}}
 		</div>
 		<div class="description">
 			{{description}}
diff --git a/front/src/app/scene/video/video.ts b/front/src/app/scene/video/video.ts
index 1aee9b4..48285ff 100644
--- a/front/src/app/scene/video/video.ts
+++ b/front/src/app/scene/video/video.ts
@@ -74,7 +74,7 @@ export class VideoScene implements OnInit {
 	timeLeft: number = 10;
 	interval = null;
 
-	userMetaData: UserMediaAdvancement = undefined
+	userMetaData: UserMediaAdvancement & { percentDisplay: number } = undefined
 
 	previousTime: number = 0;
 	startPlayingTime: number = undefined;
@@ -299,7 +299,7 @@ export class VideoScene implements OnInit {
 			});
 		this.advancementService.get(this.idVideo)
 			.then((response: UserMediaAdvancement) => {
-				this.userMetaData = response
+				this.userMetaData = { ...response, percentDisplay: Math.floor(response.percent * 100) }
 				this.startPlayingTime = response.time
 			})
 	}