diff --git a/capsule-prototype/css/flatten_timeline.css b/capsule-prototype/css/flatten_timeline.css
index b92769b3d1a05f30111b1e048fcd336354a53669..175b8c9e1b57e12cdfc9957b3d907cea1ab4e921 100644
--- a/capsule-prototype/css/flatten_timeline.css
+++ b/capsule-prototype/css/flatten_timeline.css
@@ -5,6 +5,7 @@
 	overflow-x: hidden;	
 	overflow-y: auto;	
 	min-width: 150px;
+  max-height: 100vh;
 }
 
 #flattentimeline.drag  {
diff --git a/capsule-prototype/css/left_menu.css b/capsule-prototype/css/left_menu.css
index 41803b28561ef85f54d8081bb4ed1cb88c101cd4..1a7aed2b7ef8b5209b341e5fbbe0f48a3b23f780 100644
--- a/capsule-prototype/css/left_menu.css
+++ b/capsule-prototype/css/left_menu.css
@@ -1,31 +1,79 @@
 
-#left_menu, #left_menu.div {
-	width: 80px;
+.left_menu * {
+	padding: 2px;
+	margin: 2px;
+}
+
+#left_menu {
+  width: 80px;
+	min-width: 80px;
 	justify-content: space-between;
 	background: var(--rk-light-blue);
-	padding-top: 10px;
-	padding-bottom: 10px;
+  overflow-x: auto;
 }
 
+#left_menu i {
+  font-size: 20px;
+}
 
 .left_menu_item {
-	color: rgba(255,255,255,.5);
 	cursor: pointer;
+	text-align: center;
+	vertical-align: center;
+}
+
+.left_menu_item:hover,  .dropdown_control:checked ~ label { background: rgba(0,0,0,.1); }
+
+.dropdown_content {
 	display: flex;
+	visibility: hidden;
+}
+
+.dropdown_control {
+  display: none;
+}
+
+.dropdown_control:checked ~ .dropdown_content {
+	visibility: visible;
+}
+
+#playback_speed_form {
+  padding: 0;
+}
+
+#playback_speed_form input {
+	display: none;
+}
+
+#playback_speed_form label {
+	background-color: rgba(0, 0, 0, .5);
+	padding: 4px;
+	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+}
+
+#playback_speed_form input:checked+label {
+	background-color: rgba(255, 255, 255, .5);
+	color: black;
+}
+
+#playback_speed_form input:checked+label::before {
+	content: "\2713 ";
+	color: black;
+}
+
+.btns_add_annotation li {
 	flex-direction: column;
-	align-items: center;
-	text-align: center;
-	/*
-	font-size: 10px;
-	width: 70px;
-	margin: 0 5px;
-	height: 60px;
-	border-radius: 2px;
-	padding: 5px 0;
-	text-align: center;
-	display: inline-block;
-	 */
 }
+	
+#btn_add_note::before { content: url('images/icn-menu-addnote.png'); }
+#btn_add_link::before { content: url('images/icn-menu-addlink.png'); }
+#btn_add_file::before { content: url('images/icn-menu-addfile.png'); }
+#btn_add_paste::before { content: ' '; background: url('images/icn-image.png') no-repeat center/45%; height: 40px; }
+
+#left_menu_item_preview::before { content: url('images/icn-menu-preview.png'); }
+#left_menu_item_settings::before { content: url('images/icn-menu-settings.png'); }
+
+/*
 
 .left_menu_item:hover { background: rgba(0,0,0,.1); }
 
@@ -59,12 +107,6 @@
 
 #left_menu_item_icn_settings { background:url("images/icn-menu-settings.png"); }
 
-#left_menu_item_icn_addfile { background:url("images/icn-menu-addfile.png"); }
-
-#left_menu_item_icn_addnote { background:url("images/icn-menu-addnote.png"); }
-
-#left_menu_item_icn_addlink { background:url("images/icn-menu-addlink.png"); }
-
 .left_menu_item_title {
 	height:20px;
 	line-height:20px;
@@ -81,3 +123,5 @@
 	opacity: 0;
 	cursor: pointer !important;
 }
+
+*/
diff --git a/capsule-prototype/css/mosaic.css b/capsule-prototype/css/mosaic.css
index 8ad8ce8598febfd58a700e69b9d0e024ad9e78e5..02f0b81c9f65033da7cd8ad3165e683bb8b46ff2 100644
--- a/capsule-prototype/css/mosaic.css
+++ b/capsule-prototype/css/mosaic.css
@@ -16,6 +16,7 @@
 #mosaic_tab {
 	display: flex;
 	flex-direction: column;
+  overflow: auto;
 }
 
 .mosaic_filter, .mosaic_category > div {
diff --git a/capsule-prototype/css/old_flatten_timeline.css b/capsule-prototype/css/old_flatten_timeline.css
deleted file mode 100644
index 9d021add4923af01017fb2891f675e8435b7c1a0..0000000000000000000000000000000000000000
--- a/capsule-prototype/css/old_flatten_timeline.css
+++ /dev/null
@@ -1,350 +0,0 @@
-
-#flattentimeline {
-	flex: 1;
-	color: white;
-	overflow-x: hidden;	
-	overflow-y: auto;	
-}
-
-#flattentimeline.drag  {
-	/*background: rgba(2,212,255,.5);*/
-	box-shadow: 0 0 20px 20px rgba(63,223,255,.45) inset;
-}
-
-.flattentimeline_item.draggable  {
-	background: rgba(63,223,255,.25);
-}
-
-#flattentimeline_highlight {
-	margin-bottom: 0px;
-}
-
-
-#flattentimeline_main_title {
-	font-weight: 200;
-	/*height: 40px;*/
-	line-height: 20px;
-	padding: 10px 0;
-	text-align: center;
-	/*background: #2C3032;*/
-	/*background: #2C3033;*/
-	/*background: #57A5AF;*/
-	background: #EC8960;
-	/*background-image: -webkit-linear-gradient(left, #EC8960 0%, #57A5AF 100%);*/
-	/*background-image: -webkit-linear-gradient(left, #94CA6F 0%, #B495CC 100%);*/
-	text-transform: uppercase;
-	color: rgba(255,255,255,1);
-	font-size: 18px;
-	border-bottom: 2px solid #1B1D1E;
-}
-
-#flattentimeline_settings {
-	font-weight: 200;
-	height: 240px;
-	line-height: 40px;
-	text-align: center;
-	background: #26292B;
-	text-transform: uppercase;
-	color: #FFF;
-	font-size: 18px;
-	margin-top: 4px;
-	display: none;
-}
-
-#flattentimeline_items {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	overflow-y: auto;
-	background-color: rgba(255,255,255,.05);
-}
-
-.flattentimeline_item {
-	position: relative;
-	height: 40px;
-	color: white;
-	margin: 0px 0px;
-	cursor: pointer;
-	width: 100%;
-	display: none;
-	/*border-radius: 2px;*/
-}
-
-
-.flattentimeline_highlightitem {
-	position: relative;
-	/*height: 150px;*/
-	height: auto;
-	color: white;
-	margin: 3px 0px 0px 0px;
-	cursor: pointer;
-	/*background: rgba(255,255,255,.15);  */
-	width: 100%;
-	text-align: center;
-	padding: 2px 0 3px 0;
-	border-radius: 1px;
-
-	background-position: center center;
-	background-repeat: no-repeat;
-	-webkit-background-size:cover;
-	-moz-background-size: cover;
-	-o-background-size: cover;
-	background-size: cover;
-
-	/*display:block;*/
-}
-
-
-.flattentimeline_item:hover, .flattentimeline_highlightitem:hover {
-	background-color: rgba(255,255,255,.15);
-	opacity: 1;
-}
-
-.flattentimeline_opacifiant, .flattentimeline_bar {
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	background-position: center center;
-	background-repeat: no-repeat;
-	-webkit-background-size:cover;
-	-moz-background-size: cover;
-	-o-background-size: cover;
-	background-size: cover;
-	text-align: left;
-	overflow: hidden;
-
-	/*border-radius: 3px;
-	/*mix-blend-mode: overlay;*/
-}
-
-.flattentimeline_title, .flattentimeline_subtitle, .flattentimeline_counter {
-	top: 0px;
-	left: 0px;
-	/*position: absolute; */
-	background-position: center center;
-	background-repeat: no-repeat;
-	text-align: left;
-	overflow: hidden;
-	line-height: 20px;
-}
-
-
-.flattentimeline_item .flattentimeline_image {
-	height: 30px;
-	width: 30px;
-	margin: 4px 7px 4px 0px;
-	border-radius: 1px;
-	background-color: rgba(255,255,255,.25);
-	float: left;
-	background-position: center center;
-	background-repeat: no-repeat;
-	-webkit-background-size:cover;
-	-moz-background-size: cover;
-	-o-background-size: cover;
-	background-size: cover;
-}
-
-
-.flattentimeline_highlightitem .flattentimeline_image {
-	height: 100%;
-	width: 100%;
-	margin: 0;
-	border-radius: 1px;
-	position: absolute;
-	background-position: center center;
-	background-repeat: no-repeat;
-	-webkit-background-size:cover;
-	-moz-background-size: cover;
-	-o-background-size: cover;
-	background-size: cover;
-	background-blend-mode: normal;
-	opacity: .5;
-}
-
-/*.flattentimeline_highlightitem .flattentimeline_image {
-width: 170px;
-height: 60px;
-margin: 15px 15px 5px 15px;
-border-radius: 2px;
-background-color: #fff;
-display: inline-block;
-float: left;
-background-position: center center;
-}  */
-
-/*.flattentimeline_color {
-top: 0px;
-height: 100%;
-}*/
-.flattentimeline_opacifiant, .flattentimeline_bar {
-	background-color: rgba(0, 0, 0, 0.75);
-	height: 3px;
-	top: 37px;
-
-	/* box-shadow: 0px 0px 1px 1px rgba(20,46,51,.25);
-	/*	mix-blend-mode: luminosity;  */
-
-	/*  mix-blend-mode: multiply;
-	/*  height: 40px;
-	top: 0px;
-	opacity: .25;  */
-}
-
-.flattentimeline_highlightitem .flattentimeline_bar, .flattentimeline_highlightitem  .flattentimeline_opacifiant  {
-	top: auto;
-	display: block;
-}
-
-.flattentimeline_title {
-	font-weight: 400;
-	font-size: 10px;
-	line-height: 39px;
-	/* color: rgba(255,255,255,.5); */
-
-	/*width: 55%; */
-	max-width: 132px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-
-	display: inline-block;
-	/*color: #0C2D33; */
-	/*mix-blend-mode: screen;      */
-}
-
-.flattentimeline_highlightitem .flattentimeline_title {
-	line-height: 1.2em;
-	width: 170px;
-	font-size: 12px;
-	text-transform: uppercase;
-	padding: 20px 0 20px 0;
-	color: #FFF;/*rgba(255,255,255,1);*/
-	font-weight: 600;
-}
-
-.flattentimeline_highlightitem .flattentimeline_description {
-	font-weight: 400;
-	font-size: 11px;
-	line-height: 1.4em;
-	color: rgba(255,255,255,.9);
-	margin: -15px 15px 20px 15px;
-
-	width: 170px;
-	text-align: left;
-
-	display: inline-block;
-}
-
-.flattentimeline_highlightitem .flattentimeline_typeTxt, .flattentimeline_highlightitem .flattentimeline_author {
-	font-weight: 400;
-	font-size: 9px;
-	line-height: 1.2em;
-	margin: -13px 15px 20px 15px;
-
-	width: 170px;
-	text-align: left;
-	color: rgba(255,255,255,.75);
-
-	display: flex;
-	font-style: italic;
-	/*text-transform: uppercase; */
-}
-
-.flattentimeline_highlightitem .flattentimeline_author {
-	font-style: normal;
-}
-
-.flattentimeline_subtitle {
-	font-family: "OpenSans";
-	font-weight: 200;
-	top: 25px;
-	font-size: 10px;
-	left: 40px;
-	line-height: 20px;
-	height: 20px;
-	display: none;
-}
-/*.flattentimeline_type {
-top: 14px;
-left: 6px;
-width: 26px;
-height: 26px;
-background-position: center center;
-background-repeat: no-repeat;
-opacity: .5;
-}*/
-/*.flattentimeline_type {
-width:10px; height:10px;
-border-radius:10px;
-float:right;
-margin:20px 15px 20px 0;
-}*/
-.flattentimeline_type {
-	width: 20px;
-	height: 20px;
-	/*border-radius: 20px; */
-	float: right;
-	background-position: center center;
-	background-repeat: no-repeat;
-	margin: 9px 5px;
-	opacity: 0.75;
-	display: none;
-}
-
-.flattentimeline_highlightitem .flattentimeline_type {
-	width: 40px;
-	height: 40px;
-	position: absolute;
-	border-radius: 30px;
-	background-color: rgba(0,0,0,.5);
-	margin: 25px 0 0 80px;
-}
-
-.flattentimeline_color {
-	width: 6px;
-	height: 6px;
-	border-radius: 10px;
-	float: right;
-	margin: 22px 5px;
-}
-
-.flattentimeline_counter {
-	font-weight: 600;
-	top: 5px;
-	left: 5px;
-	width: 40px;
-	height: 40px;
-	line-height: 38px;
-	border-radius: 2px;
-
-	background-color: #000;
-
-	font-size: 18px;
-	text-align: center;
-	display: none;
-}
-
-.flattentimeline_bar {
-	/*width: 0%;*/
-	background-color: #26292B;	/*#2DCAE1;*/
-	opacity: 1;
-}
-
-.docLive, .docTocome, .docFaraway {
-	display: flex;
-	flex: 0;
-}
-
-.docLive {
-	opacity: 1;
-}
-
-.docTocome, .docFaraway {
-	opacity: 0.1;
-}
-
-.docFaraway {
-	opacity: 0.1;
-}
diff --git a/capsule-prototype/css/old_mosaic.css b/capsule-prototype/css/old_mosaic.css
deleted file mode 100644
index 5900022308f739c1c07792322b2e069ea9e9433f..0000000000000000000000000000000000000000
--- a/capsule-prototype/css/old_mosaic.css
+++ /dev/null
@@ -1,82 +0,0 @@
-
-#mosaic_tab {
-	background: #243538;
-	overflow: scroll;
-	padding: 20px;
-	display: none;
-}
-
-.mosaic_category {
-	padding: 1.0em 1vw;
-	margin: 2vh 0 1.5vh 0;
-	border-radius: 3px;
-	background: rgba(0,0,0,.15);
-}
-
-.mosaic_category_grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-	grid-auto-rows: 150px;
-}
-
-.mosaic_filter {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-}
-
-.mosaic_filter_item {
-	padding: 1.0em 1vw;
-	margin: 2vh 0.5vw 1.5vh 0.5vw;
-	border-radius: 3px;
-	cursor:pointer;
-}
-
-.mosaic_filter_disabled {
-	opacity: 0.5;
-}
-
-.mosaic_filter_disabled>h2:after {
-	background-image: url('images/icn-menu-filter.png');
-}
-
-.mosaic_filter_item > h2, .mosaic_category h2 {
-	text-transform: capitalize;
-}
-
-.mosaic_filter_item:not(.mosaic_filter_disabled) > h2:after{
-	background-image: url('images/icn-menu-preview.png');
-}
-
-.mosaic_filter_item > h2:after{
-	display:inline-block;
-	height:20px;
-	width:20px;
-	content: " ";
-	background-size: 20px 20px;
-	margin-left: 5px;
-	padding-top: 3px;
-	background-repeat: no-repeat;
-}
-
-.mosaic_filter_item_all > h2:after {
-	background-image: url('images/icn-reload.png') !important;
-}
-
-.mosaic_item img {
-	/* To correctly align image, regardless of content height: */
-	vertical-align: top;
-	display: inline-block;
-	/* To horizontally center images and caption */
-	text-align: center;
-	/* The width of the container also implies margin around the images. */
-	width: 100px;
-	margin: 2vh 0 1.5vh 0;
-	cursor:pointer;
-}
-
-.mosaic_item .caption {
-	/*
-	display:block;
-	*/
-}
-
diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index 92a45e4a3fcd897159632416b79330a65a7ebd43..0f10b64d40019da656376fc950e840cd649347fe 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/capsule-prototype/css/online-theme.css
@@ -1,4 +1,4 @@
-@import url("font/stylesheet.css");
+@import 'font/stylesheet.css';
 @import 'left_menu.css';
 @import 'popup.css';
 @import 'mosaic.css';
@@ -61,10 +61,6 @@ html, body {
 	background-color: rgba(255, 255, 255, .25);
 }
 
-#tabs {
-	overflow: auto;
-}
-
 #container {
 	width: 100%;
 	height: 100%;
@@ -93,7 +89,7 @@ html, body {
 
 #video {
 	width: 80vw;
-	height: 100%;
+	height: calc(100vh - 40px);
 }
 
 .vjs-big-play-button {
diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html
index 970c40a6e842dba94ffe84bbd4762822f6586152..fbe9317f4b4c7947720fa010b85c513144165f6c 100644
--- a/capsule-prototype/index.html
+++ b/capsule-prototype/index.html
@@ -202,6 +202,47 @@
 		</div>
 	</div>
 
+  <div id='left_menu' class='flex-col editmode left_menu'>
+    <a id='btn_home' class='left_menu_item flex-col' href='javascript:window.app.rekall.Rekall('openUrl', 'home')'><i class='fas fa-home fa-3x left_menu_item_icn'></i>Go back to my capsules</a>
+    <div class='flex-col'>
+      <ul class='btns_add_annotation flex-col'>
+        <input type='checkbox' id='inp_add_annotation_dropdown' class='dropdown_control' />
+        <li class='dropdown_content left_menu_item' id='btn_add_note'>note</li>
+        <li class='dropdown_content left_menu_item' id='btn_add_link'>link</li>
+        <li class='dropdown_content left_menu_item' id='btn_add_paste'>clipboard</li>
+        <li class='dropdown_content left_menu_item' id='btn_add_file'>file</li>
+        <label for='inp_add_annotation_dropdown' class='left_menu_item' title='add annotation'><i class='fas fa-plus'></i></label>
+      </ul>
+      <div class='flex-col'>
+        <input type='checkbox' id='inp_playback_rate_dropdown' class='dropdown_control' />
+        <label for ='inp_playback_rate_dropdown' class='left_menu_item' title='change playback rate'><i class='fas fa-play'></i></label>
+        <form id='playback_speed_form' class='dropdown_content flex-col'>
+          <input type='radio' id='playback_speed_025' value='0.25' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_025'>0.25</label>
+          <input type='radio' id='playback_speed_05' value='0.5' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_05'>0.5</label>
+          <input type='radio' id='playback_speed_075' value='0.75' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_075'>0.75</label>
+          <input type='radio' id='playback_speed_1' value='1' name='playback_rate' checked />
+          <label class='left_menu_item' for='playback_speed_1'>normal</label>
+          <input type='radio' id='playback_speed_125' value='1.25' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_125'>1.25</label>
+          <input type='radio' id='playback_speed_15' value='1.5' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_15'>1.5</label>
+          <input type='radio' id='playback_speed_175' value='1.75' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_175'>1.75</label>
+          <input type='radio' id='playback_speed_2' value='2' name='playback_rate' />
+          <label class='left_menu_item' for='playback_speed_2'>2</label>
+        </form>
+      </div>
+    </div>
+    <div class='flex-col'>
+      <div id='left_menu_item_preview' class='left_menu_item flex-col'>preview</div>
+      <div id='left_menu_item_settings' class='left_menu_item flex-col'>settings</div>
+    </div>
+  </div>
+
+	<!--
 	<div id='left_menu' class='flex-col editmode'>
 		<div class='top'>
 			<a class="left_menu_item dropable" href="javascript:window.app.rekall.Rekall('openUrl', 'home')">
@@ -236,6 +277,7 @@
 			</div>
 		</div>
 	</div>
+	-->
 
 	<div id='tabs' class='flex flex-col'>
 
diff --git a/capsule-prototype/js/online-rekall/RekallApplication.js b/capsule-prototype/js/online-rekall/RekallApplication.js
index 135f3733138a2d544be99be304c398d5e55a09a7..ce1cd2a023cf94b817e15b767810012cc8a6bd34 100644
--- a/capsule-prototype/js/online-rekall/RekallApplication.js
+++ b/capsule-prototype/js/online-rekall/RekallApplication.js
@@ -37,7 +37,7 @@
                 return localOptions.PubSub;
             },
             rekall: function () {
-            return localOptions.Rekall;
+              return localOptions.Rekall;
             },
             setPlaybackRate: function () {
                 if (arguments.length > 0 && 'number' === typeof arguments[0] && 0 < arguments[0] && arguments[0] < 10) {
@@ -68,4 +68,4 @@
         }
     }
     app.rekall = new RekallApplication();
-})(window.app = window.app || {})
\ No newline at end of file
+})(window.app = window.app || {})
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index 8f53cf8fa0bc0660838410e9cefe4471bdcc590f..cf840c2f874b019e0445f1c964d5ae7481856245 100644
--- a/capsule-prototype/js/online-script.js
+++ b/capsule-prototype/js/online-script.js
@@ -319,13 +319,13 @@ function setEditionControls() {
 		openAlert("Do you really want to delete this project ?", "yesnodeleteproject");
 	});
 
-	$("#left_menu_item_addnote").click(function(event){
+	$("#btn_add_note").click(function(event){
 		event.stopPropagation();
 		rekall.timeline.pause();
 		uploadFiles(["New note"]);
 	});
 
-	$("#left_menu_item_addfile").mousedown(function(event) {
+	$("#btn_add_file").mousedown(function(event) {
 		rekall.timeline.pause();
 		$("#left_menu_item_btn_addfile").click();
 	});
@@ -334,7 +334,7 @@ function setEditionControls() {
 		uploadFiles($("#left_menu_item_btn_addfile").get(0).files);
 	});
 
-	$("#left_menu_item_pastefile").click(function(event) { pubSub.publish('open_paste_modal'); });
+	$("#btn_add_paste").click(function(event) { pubSub.publish('open_paste_modal'); });
 	$("#paste_modal button.cancel").click(function(event) { pubSub.publish('close_paste_modal'); });
 
 	$("#paste_modal_content").on("paste", function(event) {
@@ -352,13 +352,13 @@ function setEditionControls() {
 		var n = b64data.length;
 		var uar = new Uint8Array(n);
 		while (n--) uar[n] = bin_str.charCodeAt(n);
-		var file = new File([uar], 'pasted_' + Math.floor(random()*100000) + '.' + subtype, {type: type+'/'+subtype});
+		var file = new File([uar], 'pasted_' + Math.floor(Math.random()*100000) + '.' + subtype, {type: type+'/'+subtype});
 		$('#left_menu_item_btn_addfile').files += file;
 		uploadFiles([file]);
 		pubSub.publish('close_paste_modal');
 	});
 
-	$("#left_menu_item_addlink").click(function(event){
+	$("#btn_add_link").click(function(event){
 		event.stopPropagation();
 		rekall.timeline.pause();
 		$("#popupAddLinkSpace").show();
@@ -561,6 +561,11 @@ function setEditionControls() {
 	$("#popupEditSupprimer").click(function(){
 		openAlert("Do you really want to delete this file from the project ?", "yesnodelete");
 	});
+
+  $("#playback_speed_form").change(function(event) {
+    console.debug("set playback rate to " + event.target.value);
+    window.app.rekall.Rekall().videoPlayer.playbackRate(Number(event.target.value));
+  });
 }
 
 /*var rubanTimeout = 0;