diff --git a/README.md b/README.md
index dde444de27f89a0564d0b10abf9368ed4cab5c73..577585362ac1d65f3c1ec208b8ef285c4a5af804 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,22 @@
 # mirador-annotations
 
+## Install
+
+```
+nvm use
+git clone gitlab@gitlab.tetras-libre.fr:iiif/mirador/mirador-annotations.git
+cd mirador-annotations/
+git checkout mui5/React17
+git clone gitlab@gitlab.tetras-libre.fr:iiif/mirador/mirador-video.git
+rm -r mirador
+mv mirador-video/ mirador
+cd mirador/
+git checkout 3def696e
+npm install
+cd ..
+npm install
+```
+
 [![Travis][build-badge]][build]
 [![npm package][npm-badge]][npm]
 [![Coveralls][coveralls-badge]][coveralls]
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 3df86ab00fc0a27a568cf845627b0b4fec2455e8..a76463e59fecd085848380a6573ffae33557e377 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -137,7 +137,7 @@ class AnnotationCreation extends Component {
       textEditorStateBustingKey: 0,
       // eslint-disable-next-line sort-keys,max-len
       // TO DO : The state must be updated with the video's timing information when the component is mounted
-      valueTime: [0, 13],
+      valueTime: [0, 1],
       xywh: null,
       ...annoState,
       valuetextTime: '',
@@ -376,6 +376,8 @@ class AnnotationCreation extends Component {
     const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
     if (mediaIsVideo) {
       mediaVideo = VideosReferences.get(windowId);
+      valueTime[0] = tstart;
+      valueTime[1] = tend;
     }
 
     return (
@@ -419,12 +421,15 @@ class AnnotationCreation extends Component {
                 <Typography id="range-slider" variant="overline">
                   Display period
                 </Typography>
+               {/*  <Typography>
+                  {mediaIsVideo ? mediaVideo?.video.duration : null}
+                </Typography> */}
                 <Slider
                   value={valueTime}
                   onChange={this.handleChangeTime}
                   valueLabelDisplay="auto"
                   aria-labelledby="range-slider"
-                  getAriaValueText={this.valuetextTime}
+                  getAriaValueText={secondsToHMS}
                   max={mediaVideo ? mediaVideo.video.duration : null}
                   color="secondary"
                   windowId={windowId}
@@ -696,6 +701,7 @@ const styles = (theme) => ({
   textTimeButton: {
     fontSize: '15px',
     margin: 0,
+    minWidth: '40px',
   },
   timecontrolsbutton: {
     border: 'none',
@@ -703,7 +709,6 @@ const styles = (theme) => ({
     margin: 'auto',
     marginLeft: '0',
     marginRight: '5px',
-    width: '30px',
   },
 });
 
diff --git a/src/HMSInput.js b/src/HMSInput.js
index 1803c235fe816b2d1d5ac06ecdc3b17abff181c4..eb599d7394e73049718260a3072dbfffb0d81cf9 100644
--- a/src/HMSInput.js
+++ b/src/HMSInput.js
@@ -56,10 +56,13 @@ class HMSInput extends Component {
             name="hours"
             value={hours}
             onChange={this.someChange}
-            inputProps={{ style: {textAlign: 'center'} }}
+            inputProps={{ style: { textAlign: 'center' } }}
           />
-          <Input className={classes.input} type="number" min="0" max="59" name="minutes" value={minutes} onChange={this.someChange} inputProps={{ style: {textAlign: 'center'} }}/>
-          <Input className={classes.input} type="number" min="0" max="59" name="seconds" value={seconds} onChange={this.someChange} inputProps={{ style: {textAlign: 'center'} }}/>
+          <span className={classes.hmsLabel}>h</span>
+          <Input className={classes.input} type="number" min="0" max="59" name="minutes" value={minutes} onChange={this.someChange} inputProps={{ style: { textAlign: 'center' } }} />
+          <span className={classes.hmsLabel}>m</span>
+          <Input className={classes.input} type="number" min="0" max="59" name="seconds" value={seconds} onChange={this.someChange} inputProps={{ style: { textAlign: 'center' } }} />
+          <span className={classes.hmsLabel}>s</span>
         </div>
       </div>
     );
@@ -78,6 +81,9 @@ const styles = (theme) => ({
     flexDirection: 'column',
     justifyContent: 'center',
   },
+  hmsLabel: {
+    color: 'grey',
+  },
   // eslint-disable-next-line sort-keys
   input: {
     height: 'fit-content',