diff --git a/src/components/AnnotationManifestsAccordion.js b/src/components/AnnotationManifestsAccordion.js
index 3d663ebc9586dd1b764dd76dc1db4e5003ad33b9..c1281eb239c57a82e233c64ab166c81023796316 100644
--- a/src/components/AnnotationManifestsAccordion.js
+++ b/src/components/AnnotationManifestsAccordion.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -10,83 +10,55 @@ import AnnotationManifestsItem from '../containers/AnnotationManifestsItem';
 /**
  * AnnotationManifestsAccordion
  */
-export class AnnotationManifestsAccordion extends Component {
-  /**
-   * constructor
-   */
-  constructor(props) {
-    super(props);
-    this.handleOpenAccordion = this.handleOpenAccordion.bind(this);
-
-    /** Search if the annotation is a manifest. URL must be resolvable for the annotation. So the manifest url is added at the end of the id */
-    function searchManifestInID(id) {
-      const match = id.match(
-        /((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)#((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)/gi,
-      );
-      return match ? match[0].split('#').slice(-1) : null;
-    }
-
-    const { annotation } = this.props;
-
-    annotation.manifestsOpen = false;
-    annotation.manifests = searchManifestInID(annotation.id);
-    if (annotation.manifests) {
-      annotation.manifests = annotation.manifests.map(id => ({ id }));
-    } else {
-      annotation.manifests = [];
-    }
+export default function AnnotationManifestsAccordion({ annotation, classes, ...props }) {
+  /** Search if the annotation is a manifest. URL must be resolvable for the annotation. So the manifest url is added at the end of the id */
+  function searchManifestInID(id) {
+    const match = id.match(
+      /((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)#((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)/gi,
+    );
+    return match ? match[0].split('#').slice(-1) : null;
+  }
 
-    this.state = { annotation };
+  const [annotationDisplayed, setAnnotationDisplayed] = useState(annotation);
+  annotationDisplayed.manifestsOpen = false;
+  annotationDisplayed.manifests = searchManifestInID(annotationDisplayed.id);
+  if (annotationDisplayed.manifests) {
+    annotationDisplayed.manifests = annotationDisplayed.manifests.map(id => ({ id }));
+  } else {
+    annotationDisplayed.manifests = [];
   }
 
   /** */
-  // eslint-disable-next-line class-methods-use-this,require-jsdoc
-  handleOpenAccordion(e) {
-    const { annotation } = this.state;
-    annotation.manifestsOpen = true;
+  function handleOpenAccordion(e) {
+    annotationDisplayed.manifestsOpen = true;
+    setAnnotationDisplayed(annotationDisplayed);
     e.stopPropagation();
-    this.state = { annotation };
   }
 
-  /** */
-  render() {
-    const {
-      classes, t, i18n,
-    } = this.props;
-
-    const { annotation } = this.state;
-
-    if (annotation.manifests === null || annotation.manifests.length === 0) {
-      return null;
-    }
-
-    return (
-      <div>
-        <Accordion>
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            onClick={(e) => this.handleOpenAccordion(e)}
-          >
-            <Typography className={classes.heading}>{t('manifestFound')}</Typography>
-          </AccordionSummary>
-          {
-            annotation.manifestsOpen && (
-            <AccordionDetails className={classes.manifestContainer}>
-              {annotation.manifests.map(manifest => (
+  return (
+    <div>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          onClick={(e) => handleOpenAccordion(e)}
+        >
+          <Typography>manifestFound</Typography>
+        </AccordionSummary>
+        {
+            annotationDisplayed.manifestsOpen && (
+            <AccordionDetails>
+              {annotationDisplayed.manifests.map(manifest => (
                 <AnnotationManifestsItem
                   manifestId={manifest.id}
-                  language={i18n.language}
                   key={manifest}
-                  t={t}
                 />
               ))}
             </AccordionDetails>
             )
           }
-        </Accordion>
-      </div>
-    );
-  }
+      </Accordion>
+    </div>
+  );
 }
 
 AnnotationManifestsAccordion.propsTypes = {
diff --git a/src/containers/AnnotationManifestsAccordion.js b/src/containers/AnnotationManifestsAccordion.js
index 38809a66e75903c3c87928521856d4fd51dbd2b0..c3aa45ac3901e533211abe4fb7ad366962610702 100644
--- a/src/containers/AnnotationManifestsAccordion.js
+++ b/src/containers/AnnotationManifestsAccordion.js
@@ -1,9 +1,8 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@mui/styles';
 import { withPlugins } from '../extend/withPlugins';
-import { AnnotationManifestsAccordion } from '../components/AnnotationManifestsAccordion';
+import AnnotationManifestsAccordion from '../components/AnnotationManifestsAccordion';
 import { getConfig } from '../state/selectors';
 
 /** For connect */
@@ -20,7 +19,7 @@ const mapDispatchToProps = {
 
 };
 
-/** For withStyles */
+/** For TODO withStyles */
 const styles = theme => ({
   manifestContainer: {
     display: 'flex',
@@ -32,7 +31,6 @@ const styles = theme => ({
 
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('AnnotationManifestsAccordion'),
 );
diff --git a/src/containers/ViewerNavigationVideo.js b/src/containers/ViewerNavigationVideo.js
index e1944d7937e0eae799ba0c0482af62700d92a56e..21c43afdef27de87ddbd2c57b8be1c7dec88ff92 100755
--- a/src/containers/ViewerNavigationVideo.js
+++ b/src/containers/ViewerNavigationVideo.js
@@ -1,7 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@mui/styles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { ViewerNavigationVideo } from '../components/ViewerNavigationVideo';
@@ -39,6 +38,7 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
   ),
 });
 
+// TODO withStyles
 const styles = {
   divider: {
     borderRight: '1px solid #808080',
@@ -69,7 +69,6 @@ const styles = {
 };
 
 const enhance = compose(
-  withStyles(styles),
   withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('ViewerNavigationVideo'),
diff --git a/src/containers/WindowCanvasNavigationControlsVideo.js b/src/containers/WindowCanvasNavigationControlsVideo.js
index d7ee6b8244ca3f6ed93e6c561d980d4041f20e0d..a5701ce6eadab6e910c17f77d0d7a22925a7a09a 100755
--- a/src/containers/WindowCanvasNavigationControlsVideo.js
+++ b/src/containers/WindowCanvasNavigationControlsVideo.js
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withSize } from 'react-sizeme';
-import { styled } from '@mui/styles';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControlsVideo } from '../components/WindowCanvasNavigationControlsVideo';