diff --git a/__tests__/integration/mirador/sequences.html b/__tests__/integration/mirador/sequences.html
index 156912fa64ce40aff882228cfed33876360c5735..7cd3a7352d8f6bf51673dcd977d9dfbc00b2bede 100644
--- a/__tests__/integration/mirador/sequences.html
+++ b/__tests__/integration/mirador/sequences.html
@@ -14,8 +14,7 @@
      var miradorInstance = Mirador.viewer({
        id: 'mirador',
        windows: [{
-         manifestId: 'https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json',
-         sequenceId: 'https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/sequence/Sequence-1741.json',
+         manifestId: 'https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json'
        }],
      });
     </script>
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index b70358bc2db465f932a70461518c6f561bf4e651..39cce4c94e9cfbcef95db642963353d6433d5c17 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -13,23 +13,44 @@ import SidebarIndexTableOfContents from '../containers/SidebarIndexTableOfConten
  * a panel showing the canvases for a given manifest
  */
 export class WindowSideBarCanvasPanel extends Component {
+  /** */
+  static getUseableLabel(resource, index) {
+    return (resource
+      && resource.getLabel
+      && resource.getLabel().length > 0)
+      ? resource.getLabel().map(label => label.value)[0]
+      : String(index + 1);
+  }
+
   /** */
   constructor(props) {
     super(props);
+    this.handleSequenceChange = this.handleSequenceChange.bind(this);
     this.handleVariantChange = this.handleVariantChange.bind(this);
 
     this.state = {
+      sequenceSelectionOpened: false,
       variantSelectionOpened: false,
     };
 
     this.containerRef = React.createRef();
   }
 
+  /** @private */
+  handleSequenceChange(event) {
+    const { updateSequence } = this.props;
+
+    updateSequence(event.target.value);
+
+    this.setState({ sequenceSelectionOpened: false });
+  }
+
   /** @private */
   handleVariantChange(event) {
     const { updateVariant } = this.props;
 
     updateVariant(event.target.value);
+
     this.setState({ variantSelectionOpened: false });
   }
 
@@ -40,13 +61,15 @@ export class WindowSideBarCanvasPanel extends Component {
     const {
       classes,
       id,
+      sequenceId,
+      sequences,
       t,
       toggleDraggingEnabled,
       variant,
       windowId,
     } = this.props;
 
-    const { variantSelectionOpened } = this.state;
+    const { sequenceSelectionOpened, variantSelectionOpened } = this.state;
     let listComponent;
     if (variant === 'tableOfContents') {
       listComponent = (
@@ -72,36 +95,70 @@ export class WindowSideBarCanvasPanel extends Component {
           id={id}
           windowId={windowId}
           titleControls={(
-            <FormControl>
-              <Select
-                MenuProps={{
-                  anchorOrigin: {
-                    horizontal: 'left',
-                    vertical: 'bottom',
-                  },
-                  getContentAnchorEl: null,
-                }}
-                displayEmpty
-                value={variant}
-                onChange={this.handleVariantChange}
-                name="variant"
-                open={variantSelectionOpened}
-                onOpen={(e) => {
-                  toggleDraggingEnabled();
-                  this.setState({ variantSelectionOpened: true });
-                }}
-                onClose={(e) => {
-                  toggleDraggingEnabled();
-                  this.setState({ variantSelectionOpened: false });
-                }}
-                classes={{ select: classes.select }}
-                className={classes.selectEmpty}
-              >
-                <MenuItem value="tableOfContents"><Typography variant="body2">{ t('tableOfContentsList') }</Typography></MenuItem>
-                <MenuItem value="item"><Typography variant="body2">{ t('itemList') }</Typography></MenuItem>
-                <MenuItem value="thumbnail"><Typography variant="body2">{ t('thumbnailList') }</Typography></MenuItem>
-              </Select>
-            </FormControl>
+            <>
+              {
+                sequences && sequences.length > 1 && (
+                  <FormControl>
+                    <Select
+                      MenuProps={{
+                        anchorOrigin: {
+                          horizontal: 'left',
+                          vertical: 'bottom',
+                        },
+                        getContentAnchorEl: null,
+                      }}
+                      displayEmpty
+                      value={sequenceId}
+                      onChange={this.handleSequenceChange}
+                      name="sequenceId"
+                      open={sequenceSelectionOpened}
+                      onOpen={(e) => {
+                        toggleDraggingEnabled();
+                        this.setState({ sequenceSelectionOpened: true });
+                      }}
+                      onClose={(e) => {
+                        toggleDraggingEnabled();
+                        this.setState({ sequenceSelectionOpened: false });
+                      }}
+                      classes={{ select: classes.select }}
+                      className={classes.selectEmpty}
+                    >
+                      { sequences.map((s, i) => <MenuItem value={s.id} key={s.id}><Typography variant="body2">{ WindowSideBarCanvasPanel.getUseableLabel(s, i) }</Typography></MenuItem>) }
+                    </Select>
+                  </FormControl>
+                )}
+              <div className={classes.break} />
+              <FormControl>
+                <Select
+                  MenuProps={{
+                    anchorOrigin: {
+                      horizontal: 'left',
+                      vertical: 'bottom',
+                    },
+                    getContentAnchorEl: null,
+                  }}
+                  displayEmpty
+                  value={variant}
+                  onChange={this.handleVariantChange}
+                  name="variant"
+                  open={variantSelectionOpened}
+                  onOpen={(e) => {
+                    toggleDraggingEnabled();
+                    this.setState({ variantSelectionOpened: true });
+                  }}
+                  onClose={(e) => {
+                    toggleDraggingEnabled();
+                    this.setState({ variantSelectionOpened: false });
+                  }}
+                  classes={{ select: classes.select }}
+                  className={classes.selectEmpty}
+                >
+                  <MenuItem value="tableOfContents"><Typography variant="body2">{ t('tableOfContentsList') }</Typography></MenuItem>
+                  <MenuItem value="item"><Typography variant="body2">{ t('itemList') }</Typography></MenuItem>
+                  <MenuItem value="thumbnail"><Typography variant="body2">{ t('thumbnailList') }</Typography></MenuItem>
+                </Select>
+              </FormControl>
+            </>
           )}
         >
           {listComponent}
@@ -114,9 +171,17 @@ export class WindowSideBarCanvasPanel extends Component {
 WindowSideBarCanvasPanel.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
   id: PropTypes.string.isRequired,
+  sequenceId: PropTypes.string,
+  sequences: PropTypes.arrayOf(PropTypes.object),
   t: PropTypes.func.isRequired,
   toggleDraggingEnabled: PropTypes.func.isRequired,
+  updateSequence: PropTypes.func.isRequired,
   updateVariant: PropTypes.func.isRequired,
   variant: PropTypes.oneOf(['item', 'thumbnail', 'tableOfContents']).isRequired,
   windowId: PropTypes.string.isRequired,
 };
+
+WindowSideBarCanvasPanel.defaultProps = {
+  sequenceId: null,
+  sequences: [],
+};
diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js
index 9f4379548311fef1136fb204601a94abf1bae199..d94c1926df8bb9117bee50f2bf5218fe945fe0ec 100644
--- a/src/containers/WindowSideBarCanvasPanel.js
+++ b/src/containers/WindowSideBarCanvasPanel.js
@@ -9,6 +9,8 @@ import {
   getCompanionWindow,
   getDefaultSidebarVariant,
   getManifestCanvases,
+  getSequence,
+  getSequences,
   getVisibleCanvases,
 } from '../state/selectors';
 
@@ -22,6 +24,8 @@ const mapStateToProps = (state, { id, windowId }) => {
     canvases,
     config,
     selectedCanvases: getVisibleCanvases(state, { windowId }),
+    sequenceId: getSequence(state, { windowId }).id,
+    sequences: getSequences(state, { windowId }),
     variant: getCompanionWindow(state, { companionWindowId: id, windowId }).variant
       || getDefaultSidebarVariant(state, { windowId }),
   };
@@ -35,6 +39,9 @@ const mapStateToProps = (state, { id, windowId }) => {
 const mapDispatchToProps = (dispatch, { id, windowId }) => ({
   setCanvas: (...args) => dispatch(actions.setCanvas(...args)),
   toggleDraggingEnabled: () => dispatch(actions.toggleDraggingEnabled()),
+  updateSequence: sequenceId => dispatch(
+    actions.updateWindow(windowId, { sequenceId }),
+  ),
   updateVariant: variant => dispatch(
     actions.updateCompanionWindow(windowId, id, { variant }),
   ),
@@ -45,6 +52,10 @@ const mapDispatchToProps = (dispatch, { id, windowId }) => ({
  * @param theme
  */
 const styles = theme => ({
+  break: {
+    flexBasis: '100%',
+    height: 0,
+  },
   label: {
     paddingLeft: theme.spacing(1),
   },