diff --git a/.gitignore b/.gitignore
index a34cf4ba55e69fba3e3dccf434efeb68a0dc13ac..6a62d7fbef574204d29bed51a8681a9862b088ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,5 +7,3 @@
 npm-debug.log*
 .idea
 .package-lock.json
-```
-/package-lock.json
diff --git a/mirador b/mirador
index 9f36a451d213fffb794e41198bc312e2b9cfa80e..fd236dcb8581ca647b90793e29578fbdd2709bc0 160000
--- a/mirador
+++ b/mirador
@@ -1 +1 @@
-Subproject commit 9f36a451d213fffb794e41198bc312e2b9cfa80e
+Subproject commit fd236dcb8581ca647b90793e29578fbdd2709bc0
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 3d2c604fd333d3f7eca6a1f98abcb3594a9f0760..9c2923c59cbb7e6e045ca1c6124dd6ffb5bdbca4 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -33,7 +33,7 @@ import CursorIcon from './icons/Cursor';
 import HMSInput from './HMSInput';
 import ImageFormField from './ImageFormField';
 import { secondsToHMS } from './utils';
-import RangeSlider from './slider';
+import TextField from '@mui/material/TextField';
 
 /** Extract time information from annotation target */
 function timeFromAnnoTarget(annotarget) {
@@ -107,7 +107,6 @@ class AnnotationCreation extends Component {
       }
     }
 
-
     const toolState = {
       activeTool: 'cursor',
       closedMode: 'closed',
@@ -143,6 +142,7 @@ class AnnotationCreation extends Component {
       ...annoState,
       valuetextTime: '',
       mediaVideo: null,
+      title: '',
     };
 
     this.submitForm = this.submitForm.bind(this);
@@ -166,12 +166,14 @@ class AnnotationCreation extends Component {
     this.handleImgChange = this.handleImgChange.bind(this);
     this.handleChangeTime = this.handleChangeTime.bind(this);
     this.valuetextTime = this.valuetextTime.bind(this);
+    this.updateTitle = this.updateTitle.bind(this);
   }
 
   componentDidMount() {
       const mediaVideo = VideosReferences.get(this.props.windowId);
       this.setState({ mediaVideo }); // Update mediaVideo in state
   }
+
   /** */
   handleImgChange(newUrl, imgRef) {
     const { image } = this.state;
@@ -227,7 +229,10 @@ class AnnotationCreation extends Component {
     this.setState({ tend: value });
   }
 
-  /** seekTo/goto annotation start time */
+  updateTitle(e){
+    const thisTitle = e.target.value;
+    this.setState({title : thisTitle});
+  }
 
   /** seekTo/goto annotation end time */
   seekToTend() {
@@ -308,6 +313,7 @@ class AnnotationCreation extends Component {
       config,
     } = this.props;
     const {
+      title,
       textBody,
       image,
       tags,
@@ -324,6 +330,7 @@ class AnnotationCreation extends Component {
       const storageAdapter = config.annotation.adapter(canvas.id);
 
       const anno = new WebAnnotation({
+        title,
         body,
         canvasId: canvas.id,
         fragsel: {
@@ -351,6 +358,7 @@ class AnnotationCreation extends Component {
     });
 
     this.setState({
+      title: '',
       image: { id: null },
       svg: null,
       tend: 0,
@@ -380,6 +388,7 @@ class AnnotationCreation extends Component {
     this.setState({ textBody });
   }
 
+
   /** */
   updateGeometry({
     svg,
@@ -419,6 +428,7 @@ class AnnotationCreation extends Component {
       image,
       valueTime,
       mediaVideo,
+      title
     } = this.state;
 
     // TODO : Vérifier ce code, c'est étrange de comprarer un typeof à une chaine de caractère.
@@ -430,9 +440,10 @@ class AnnotationCreation extends Component {
 
     const isVideoDataLoaded = mediaVideo && mediaVideo.video && !isNaN(mediaVideo.video.duration) && mediaVideo.video.duration > 0;
 
+
     return (
       <CompanionWindow
-        title={annotation ? 'Edit annotation' : 'New annotation'}
+        title={title ? title : 'New Annotation'}
         windowId={windowId}
         id={id}
       >
@@ -453,18 +464,22 @@ class AnnotationCreation extends Component {
         >
           <div>
             <Grid item xs={12}>
-              <Typography variant="overline">
-                Text Content
-              </Typography>
+              <TextField
+                  id="outlined-basic"
+                  label="Title"
+                  variant="outlined"
+                  onChange={this.updateTitle}
+              />
             </Grid>
-            <Grid item xs={12}>
-              <TextEditor
+          </div>
+          <Grid>
+            <Typography>TODO:METTRE CE CHAMPS TEXTE EN ONGLET</Typography>
+            <TextEditor
                 key={textEditorStateBustingKey}
                 annoHtml={textBody}
                 updateAnnotationBody={this.updateTextBody}
-              />
-            </Grid>
-          </div>
+            />
+          </Grid>
           <div>
 
             {mediaIsVideo && (
@@ -472,42 +487,37 @@ class AnnotationCreation extends Component {
                 <Grid
                   item
                   xs={12}
-                  sx={{
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                  }}
                 >
                   <Typography id="range-slider" variant="overline">
                     Display period
                   </Typography>
                   {isVideoDataLoaded ? (
-                          <div>
-                            <Typography>
-                              {this.state.mediaVideo.video.duration}
-                            </Typography>
-                            <Slider
-                                value={valueTime}
-                                onChange={this.handleChangeTime}
-                                valueLabelDisplay="auto"
-                                aria-labelledby="range-slider"
-                                max={Math.round(this.state.mediaVideo.video.duration)}
-                                color="secondary"
-                                windowId={windowId}
-                                sx={{
-                                  color: 'rgba(1, 0, 0, 0.38)',
-                                }}
-                            />
-                          </div>
+                    <div>
+                      <Typography>
+                        {this.state.mediaVideo.video.duration}
+                      </Typography>
+                      <Slider
+                        value={valueTime}
+                        onChange={this.handleChangeTime}
+                        valueLabelDisplay="auto"
+                        aria-labelledby="range-slider"
+                        max={Math.round(this.state.mediaVideo.video.duration)}
+                        color="secondary"
+                        windowId={windowId}
+                        sx={{
+                          color: 'rgba(1, 0, 0, 0.38)',
+                        }}
+                      />
+                    </div>
                   ) : (
-                      <Typography>Loading video data...</Typography>
+                    <Typography>Loading video data...</Typography>
                   )}
 
-
                 </Grid>
                 <div style={{
                   alignContent: 'center',
                   display: 'flex',
-                  flexDirection: 'wrap',
+                  flexDirection: 'column',
                   gap: '5px',
                   padding: '5px',
                 }}
diff --git a/src/WebAnnotation.js b/src/WebAnnotation.js
index ea9396572e7cf9ff210a05578988177a62b0508c..d9911a9f372ac0aa75a0ec9b8eeb3a1ee5fd53b2 100644
--- a/src/WebAnnotation.js
+++ b/src/WebAnnotation.js
@@ -2,8 +2,9 @@
 export default class WebAnnotation {
   /** */
   constructor({
-    canvasId, id, fragsel, image, body, tags, svg, manifestId,
+    canvasId, id, fragsel, image, body, tags, svg, manifestId, title
   }) {
+    this.title = title;
     this.id = id;
     this.canvasId = canvasId;
     this.fragsel = fragsel;
@@ -17,6 +18,7 @@ export default class WebAnnotation {
   /** */
   toJson() {
     return {
+      title: this.title,
       body: this.createBody(),
       id: this.id,
       motivation: 'commenting',
@@ -45,6 +47,13 @@ export default class WebAnnotation {
       bodies.push(imgBody);
     }
 
+    if(this.title){
+      const title={
+        type: 'AnnotationTitle',
+        value: this.title,
+      }
+    }
+
     if (this.tags) {
       bodies = bodies.concat(this.tags.map((tag) => ({
         purpose: 'tagging',
@@ -80,8 +89,7 @@ export default class WebAnnotation {
           .map((kv) => `${kv[0]}=${kv[1]}`)
           .join('&'),
       });
-    }
-    target.selector = selectors.length === 1 ? selectors[0] : selectors;
+    }target.selector = selectors.length === 1 ? selectors[0] : selectors;
     return target;
   }