diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 7ed93cf21cd693078d5fbd63ab1ff40b6afe0263..a8a7ebbed027190ce64c1e44327f229633cf586e 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -28,7 +28,19 @@ const MANIFEST_LINK_VIEW = 'link';
 
 /** Component for creating annotations.
  * Display in companion window when a manifest is open and an annoation created or edited */
-function AnnotationCreation(props) {
+function AnnotationCreation({
+  annotation,
+  canvases,
+  closeCompanionWindow,
+  config,
+  currentTime,
+  id,
+  mediaVideo,
+  receiveAnnotation,
+  setCurrentTime,
+  setSeekTo,
+  windowId,
+}) {
   const [toolState, setToolState] = useState(defaultToolState);
 
   const [drawingState, setDrawingState] = useState({
@@ -42,12 +54,12 @@ function AnnotationCreation(props) {
     let tstart;
     let tend;
     const annoState = {};
-    if (props.annotation) {
-      console.log('props.annotation', props.annotation);
+    if (annotation) {
+      console.log('annotation', annotation);
       // annotation body
-      if (Array.isArray(props.annotation.body)) {
+      if (Array.isArray(annotation.body)) {
         annoState.tags = [];
-        props.annotation.body.forEach((body) => {
+        annotation.body.forEach((body) => {
           if (body.purpose === 'tagging' && body.type === 'TextualBody') {
             annoState.tags.push(body.value);
           } else if (body.type === 'TextualBody') {
@@ -59,17 +71,16 @@ function AnnotationCreation(props) {
             annoState.title = body;
           }
         });
-      } else if (props.annotation.body.type === 'TextualBody') {
-        annoState.textBody = props.annotation.body.value;
-      } else if (props.annotation.body.type === 'Image') {
-        annoState.textBody = props.annotation.body.value; // why text body here ???
-        annoState.image = props.annotation.body;
+      } else if (annotation.body.type === 'TextualBody') {
+        annoState.textBody = annotation.body.value;
+      } else if (annotation.body.type === 'Image') {
+        annoState.textBody = annotation.body.value; // why text body here ???
+        annoState.image = annotation.body;
       }
-      //
       // drawing position
-      if (props.annotation.target.selector) {
-        if (Array.isArray(props.annotation.target.selector)) {
-          props.annotation.target.selector.forEach((selector) => {
+      if (annotation.target.selector) {
+        if (Array.isArray(annotation.target.selector)) {
+          annotation.target.selector.forEach((selector) => {
             if (selector.type === 'SvgSelector') {
               annoState.svg = selector.value;
             } else if (selector.type === 'FragmentSelector') {
@@ -79,55 +90,44 @@ function AnnotationCreation(props) {
             }
           });
         } else {
-          annoState.svg = props.annotation.target.selector.value;
+          annoState.svg = annotation.target.selector.value;
           // TODO does this happen ? when ? where are fragments selectors ?
         }
-      } else if (typeof props.annotation.target === 'string') {
-        annoState.xywh = geomFromAnnoTarget(props.annotation.target);
-        [tstart, tend] = timeFromAnnoTarget(props.annotation.target);
+      } else if (typeof annotation.target === 'string') {
+        annoState.xywh = geomFromAnnoTarget(annotation.target);
+        [tstart, tend] = timeFromAnnoTarget(annotation.target);
       }
 
-      if (props.annotation.drawingState) {
-        setDrawingState(JSON.parse(props.annotation.drawingState));
+      if (annotation.drawingState) {
+        setDrawingState(JSON.parse(annotation.drawingState));
       }
-      if (props.annotation.manifestNetwork) {
-        annoState.manifestNetwork = props.annotation.manifestNetwork;
+      if (annotation.manifestNetwork) {
+        annoState.manifestNetwork = annotation.manifestNetwork;
+      }
+    } else {
+      const video = true;
+      if (video) {
+        // Time target
+        annoState.tstart = currentTime ? Math.floor(currentTime) : 0;
+        annoState.tend = mediaVideo ? mediaVideo.props.canvas.__jsonld.duration : 0;
+
+        // Geometry target
+        const targetHeigth = mediaVideo ? mediaVideo.props.canvas.__jsonld.height : 1000;
+        const targetWidth = mediaVideo ? mediaVideo.props.canvas.__jsonld.width : 500;
+        annoState.xywh = `0,0,${targetWidth},${targetHeigth}`;
+      } else {
+        // TODO image and audio case
       }
-    }
-    // TODO add a case where no annotation
-
-    // TODO improve this code
-    if (!annoState?.xywh) {
-      const targetHeigth = props.mediaVideo ? props.mediaVideo.props.canvas.__jsonld.height : 1000;
-      const targetWidth = props.mediaVideo ? props.mediaVideo.props.canvas.__jsonld.width : 500;
-      annoState.xywh = `0,0,${targetWidth},${targetHeigth}`;
-    }
-
-    if (!annoState?.textBody) {
       annoState.textBody = '';
-    }
-
-    if (!annoState?.manifestNetwork) {
       annoState.manifestNetwork = '';
     }
 
-    // If we don't have tstart setted, we are creating a new annotation.
-    // If we don't have tend setted, we set it at the end of the video.
-    // So Tstart is current time and Tend the end of the video
-    if (!tstart) {
-      tstart = props.currentTime ? Math.floor(props.currentTime) : 0;
-      tend = props.mediaVideo ? props.mediaVideo.props.canvas.__jsonld.duration : 0;
-    }
-
     return {
       ...toolState,
-      mediaVideo: props.mediaVideo,
+      mediaVideo,
       ...annoState,
-      tend,
       textEditorStateBustingKey: 0,
-      tstart,
       valueTime: [0, 1],
-      valuetextTime: '',
     };
   });
 
@@ -135,7 +135,19 @@ function AnnotationCreation(props) {
   const [scale, setScale] = useState(1);
 
   const [viewTool, setViewTool] = useState(TARGET_VIEW);
-  const { height, width } = props.mediaVideo ? props.mediaVideo : 0;
+
+  const getHeightAndWidth = () => {
+    if (mediaVideo) {
+      return mediaVideo;
+    }
+    // Todo get size from manifest image
+    return {
+      height: 1000,
+      width: 500,
+    };
+  };
+
+  const { height, width } = getHeightAndWidth();
 
   // TODO Check the effect to keep and remove the other
   // Add a state to trigger redraw
@@ -167,78 +179,9 @@ function AnnotationCreation(props) {
   useLayoutEffect(() => {
   }, [{ height, width }]);
 
-  /** set annotation start time to current time */
-  const setTstartNow = () => {
-    setState((prevState) => ({
-      ...prevState,
-      tstart: Math.floor(props.currentTime),
-    }));
-  };
-
-  /** set annotation end time to current time */
-  const setTendNow = () => {
-    setState((prevState) => ({
-      ...prevState,
-      tend: Math.floor(props.currentTime),
-    }));
-  };
-
-  /**
-     * @param {number} newValueTime
-     */
-  const setValueTime = (newValueTime) => {
-    setState((prevState) => ({
-      ...prevState,
-      valueTime: newValueTime,
-    }));
-  };
   const tabHandler = (event, TabIndex) => {
     setViewTool(TabIndex);
   };
-  /**
-   * Change from slider
-   * @param {Event} event
-   * @param {number} newValueTime
-   */
-  const handleChangeTime = (event, newValueTime) => {
-    const timeStart = newValueTime[0];
-    const timeEnd = newValueTime[1];
-    updateTstart(timeStart);
-    updateTend(timeEnd);
-    seekToTstart();
-    setValueTime(newValueTime);
-  };
-
-  /** Change from Tstart HMS Input */
-  const updateTstart = (value) => {
-    if (value > state.tend) {
-      return;
-    }
-    setState((prevState) => ({
-      ...prevState,
-      tstart: value,
-      ...props.setSeekTo(value),
-      ...props.setCurrentTime(value),
-
-    }));
-  };
-
-  /** update annotation end time */
-  const updateTend = (value) => {
-    setState((prevState) => ({
-      ...prevState,
-      tend: value,
-    }));
-  };
-
-  // eslint-disable-next-line require-jsdoc
-  const seekToTstart = () => {
-    setState((prevState) => ({
-      ...prevState,
-      ...props.setSeekTo(prevState.tstart),
-      ...props.setCurrentTime(prevState.tstart),
-    }));
-  };
 
   /** */
   const updateGeometry = ({ svg, xywh }) => {
@@ -307,7 +250,7 @@ function AnnotationCreation(props) {
 
   const closeFormCompanionWindow = () => {
     closeCompanionWindow('annotationCreation', {
-      id: props.id,
+      id,
       position: 'right',
     });
   };
@@ -325,14 +268,6 @@ function AnnotationCreation(props) {
     });
   };
 
-  /** */
-  const {
-    annotation,
-    closeCompanionWindow,
-    id,
-    windowId,
-  } = props;
-
   const {
     manifestNetwork,
     textBody,
@@ -351,13 +286,13 @@ function AnnotationCreation(props) {
     imageEvent,
   } = toolState;
 
-  const mediaIsVideo = props.mediaVideo !== 'undefined';
+  const mediaIsVideo = mediaVideo !== 'undefined';
   if (mediaIsVideo && valueTime) {
     valueTime[0] = tstart;
     valueTime[1] = tend;
   }
 
-  const videoDuration = props.mediaVideo ? props.mediaVideo.props.canvas.__jsonld.duration : 0;
+  const videoDuration = mediaVideo ? mediaVideo.props.canvas.__jsonld.duration : 0;
   // TODO: L'erreur de "Ref" sur l'ouverture d'une image vient d'ici et plus particulièrement
   //  du useEffect qui prend en dépedance [overlay.containerWidth, overlay.canvasWidth]
   const videoref = VideosReferences.get(windowId);
@@ -395,7 +330,7 @@ function AnnotationCreation(props) {
         closed={closedMode === 'closed'}
         updateGeometry={updateGeometry}
         windowId={windowId}
-        player={mediaIsVideo ? props.mediaVideo : OSDReferences.get(windowId)}
+        player={mediaIsVideo ? mediaVideo : OSDReferences.get(windowId)}
         // we need to pass the width and height of the image to the annotation drawing component
         width={overlay ? overlay.containerWidth : 1920}
         height={overlay ? overlay.containerHeight : 1080}
@@ -407,7 +342,7 @@ function AnnotationCreation(props) {
         setColorToolFromCurrentShape={setColorToolFromCurrentShape}
         drawingState={drawingState}
         isMouseOverSave={isMouseOverSave}
-        mediaVideo={props.mediaVideo}
+        mediaVideo={mediaVideo}
         setDrawingState={setDrawingState}
       />
       <StyledForm>
@@ -445,14 +380,13 @@ function AnnotationCreation(props) {
               mediaIsVideo={mediaIsVideo}
               videoDuration={videoDuration}
               value={valueTime}
-              handleChangeTime={handleChangeTime}
               windowid={windowId}
-              setTstartNow={setTstartNow}
               tstart={tstart}
-              updateTstart={updateTstart}
-              setTendNow={setTendNow}
               tend={tend}
-              updateTend={updateTend}
+              currentTime={currentTime}
+              setState={setState}
+              setCurrentTime={setCurrentTime}
+              setSeekTo={setSeekTo}
             />
           </StyledTabPanel>
           <StyledTabPanel
@@ -486,11 +420,11 @@ function AnnotationCreation(props) {
         </TabContext>
         <AnnotationFormFooter
           annotation={annotation}
-          canvases={props.canvases}
+          canvases={canvases}
           closeFormCompanionWindow={closeFormCompanionWindow}
-          config={props.config}
+          config={config}
           drawingState={drawingState}
-          receiveAnnotation={props.receiveAnnotation}
+          receiveAnnotation={receiveAnnotation}
           resetStateAfterSave={resetStateAfterSave}
           state={state}
           windowId={windowId}
@@ -564,7 +498,6 @@ AnnotationCreation.defaultProps = {
   closeCompanionWindow: () => {
   },
   currentTime: null,
-  paused: true,
   setCurrentTime: () => {
   },
   setSeekTo: () => {
diff --git a/src/AnnotationCreationUtils.js b/src/AnnotationCreationUtils.js
index 57a8bc64fc1b58fdf9164ef4034cad9e8427cf85..703448c877b0249bfaf924e66796d530ecd268eb 100644
--- a/src/AnnotationCreationUtils.js
+++ b/src/AnnotationCreationUtils.js
@@ -1,6 +1,5 @@
 /** Extract time information from annotation target */
 export function timeFromAnnoTarget(annotarget) {
-  console.info('TODO proper time extraction from: ', annotarget);
   // TODO w3c media fragments: t=,10 t=5,
   const r = /t=([0-9.]+),([0-9.]+)/.exec(annotarget);
   if (!r || r.length !== 3) {
@@ -11,7 +10,6 @@ export function timeFromAnnoTarget(annotarget) {
 
 /** Extract xywh from annotation target */
 export function geomFromAnnoTarget(annotarget) {
-  console.info('TODO proper xywh extraction from: ', annotarget);
   const r = /xywh=((-?[0-9]+,?)+)/.exec(annotarget);
   if (!r || r.length !== 3) {
     return '';
diff --git a/src/EditTool.js b/src/EditTool.js
index 9e076f78ba2484af5a149ae3cdd82432bc1396ab..58f6987788ad6a9832487fb1ee83fe99eaf37d74 100644
--- a/src/EditTool.js
+++ b/src/EditTool.js
@@ -132,9 +132,6 @@ class EditTool extends Component {
 
   /** */
   render() {
-
-    console.log('rendering edit tool');
-
     return (
       <Tool
         onMouseDown={this.onMouseDown}
diff --git a/src/WebAnnotation.js b/src/WebAnnotation.js
index cfe8dacce9732796f24f052b7b96ebc7fe463161..d9c3031bb3ad978c0a1b118c54426b7f4b144e04 100644
--- a/src/WebAnnotation.js
+++ b/src/WebAnnotation.js
@@ -10,8 +10,6 @@ export default class WebAnnotation {
     this.body = body;
     this.drawingState = drawingStateSerialized;
     this.target = target;
-
-    console.log('WebAnnotation constructor', this);
   }
 
   /** */
@@ -27,7 +25,6 @@ export default class WebAnnotation {
 
     const result = this;
 
-    console.log('WebAnnotation toJson', result);
     return result;
   }
 
diff --git a/src/annotationForm/AnnotationDrawing.js b/src/annotationForm/AnnotationDrawing.js
index d4506dbf77fdcbf72f177cff0f9306ec879ba794..295cd982fa781e52467dac9f391a7bf001ac4c15 100644
--- a/src/annotationForm/AnnotationDrawing.js
+++ b/src/annotationForm/AnnotationDrawing.js
@@ -110,7 +110,6 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
   const onTransform = (evt) => {
     const modifiedshape = evt.target.attrs;
 
-    console.log('modifiedshape', modifiedshape);
     const shape = drawingState.shapes.find((s) => s.id === modifiedshape.id);
 
     Object.assign(shape, modifiedshape);
diff --git a/src/annotationForm/AnnotationFormFooter.js b/src/annotationForm/AnnotationFormFooter.js
index f7beb0e2fb1713bb8a77806435b3d4c2d2fd21ab..b7dbb888ee97a47b6599580a3498fbce2f2cec39 100644
--- a/src/annotationForm/AnnotationFormFooter.js
+++ b/src/annotationForm/AnnotationFormFooter.js
@@ -32,7 +32,6 @@ function AnnotationFormFooter({
    * Validate form and save annotation
    */
   const submitAnnotationForm = async (e) => {
-    console.log('submitForm');
     e.preventDefault();
     // TODO Possibly problem of syncing
     // TODO Improve this code
@@ -82,9 +81,6 @@ function AnnotationFormFooter({
       type: 'Annotation', // Will be updated in saveAnnotationInEachCanvas
     };
 
-    console.log('Annotation to save:', annotationToSaved);
-    console.log('target:', target);
-
     const isNewAnnotation = !annotation;
 
     // Save jpg image of the drawing in a data url
diff --git a/src/annotationForm/AnnotationFormTarget.js b/src/annotationForm/AnnotationFormTarget.js
index 72f080784861fed27d0005a075da55428bf5abb3..f411d06ebc2ea454c37d468997b89f4c370db16c 100644
--- a/src/annotationForm/AnnotationFormTarget.js
+++ b/src/annotationForm/AnnotationFormTarget.js
@@ -60,8 +60,89 @@ const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
 
 /** Form part with time mangement, dual slider + double input. Mange Tstart and Tend value */
 function AnnotationFormTarget({
-  videoDuration, value, handleChangeTime, windowid, setTstartNow, tstart, updateTstart, setTendNow, tend, updateTend, mediaIsVideo,
+  videoDuration,
+  value,
+  windowid,
+  tstart,
+  tend,
+  mediaIsVideo,
+  setState,
+  currentTime,
+  setSeekTo,
+  setCurrentTime,
 }) {
+
+  /** set annotation start time to current time */
+  const setTstartNow = () => {
+    setState((prevState) => ({
+      ...prevState,
+      tstart: Math.floor(currentTime),
+    }));
+  };
+
+  /** set annotation end time to current time */
+  const setTendNow = () => {
+    setState((prevState) => ({
+      ...prevState,
+      tend: Math.floor(currentTime),
+    }));
+  };
+
+  /**
+   * @param {number} newValueTime
+   */
+  const setValueTime = (newValueTime) => {
+    setState((prevState) => ({
+      ...prevState,
+      valueTime: newValueTime,
+    }));
+  };
+
+  /**
+   * Change from slider
+   * @param {Event} event
+   * @param {number} newValueTime
+   */
+  const handleChangeTime = (event, newValueTime) => {
+    const timeStart = newValueTime[0];
+    const timeEnd = newValueTime[1];
+    updateTstart(timeStart);
+    updateTend(timeEnd);
+    seekToTstart();
+    setValueTime(newValueTime);
+  };
+
+  /** Change from Tstart HMS Input */
+  const updateTstart = (value) => {
+    if (value > tend) {
+      return;
+    }
+    setState((prevState) => ({
+      ...prevState,
+      tstart: value,
+      ...setSeekTo(value),
+      ...setCurrentTime(value),
+
+    }));
+  };
+
+  /** update annotation end time */
+  const updateTend = (value) => {
+    setState((prevState) => ({
+      ...prevState,
+      tend: value,
+    }));
+  };
+
+  // eslint-disable-next-line require-jsdoc
+  const seekToTstart = () => {
+    setState((prevState) => ({
+      ...prevState,
+      ...setSeekTo(prevState.tstart),
+      ...setCurrentTime(prevState.tstart),
+    }));
+  };
+
   return (
     <>
       { mediaIsVideo && (
@@ -132,17 +213,16 @@ function AnnotationFormTarget({
 }
 
 AnnotationFormTarget.propTypes = {
-  handleChangeTime: PropTypes.func.isRequired,
   mediaIsVideo: PropTypes.bool.isRequired,
-  setTendNow: PropTypes.func.isRequired,
-  setTstartNow: PropTypes.func.isRequired,
   tend: PropTypes.any.isRequired,
   tstart: PropTypes.number.isRequired,
-  updateTend: PropTypes.func.isRequired,
-  updateTstart: PropTypes.func.isRequired,
   value: PropTypes.arrayOf(PropTypes.number).isRequired,
   videoDuration: PropTypes.any.isRequired,
   windowid: PropTypes.any.isRequired,
+  currentTime: PropTypes.any.isRequired,
+  setSeekTo: PropTypes.func.isRequired,
+  setState: PropTypes.func.isRequired,
+  setCurrentTime: PropTypes.func.isRequired,
 };
 
 export default AnnotationFormTarget;