diff --git a/package.json b/package.json
index 07dc95cbd42f41279947188878e3676dd0be01e0..ebd3fdb1963cf06a1da6596ec118e5b1d80f2cee 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
     "@researchgate/react-intersection-observer": "^1.0.0",
     "classnames": "^2.2.6",
     "clsx": "^1.0.4",
-    "css-ns": "^1.2.2",
     "deepmerge": "^3.3.0",
     "dompurify": "^1.0.11",
     "downshift": "^3.2.10",
diff --git a/src/components/App.js b/src/components/App.js
index 1a125a4c1be1bcfea60ca7c6a21601e7e59a9f63..2f7c67313d48887c9d4db01dce0dd8be40e9f153 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,7 +1,7 @@
 import React, { Component, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import {
-  ThemeProvider, StylesProvider, createMuiTheme, jssPreset,
+  ThemeProvider, StylesProvider, createMuiTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
 import Fullscreen from 'react-full-screen';
 import { create } from 'jss';
@@ -52,9 +52,13 @@ export class App extends Component {
    */
   render() {
     const {
-      isFullscreenEnabled, setWorkspaceFullscreen, theme, translations,
+      classPrefix, isFullscreenEnabled, setWorkspaceFullscreen, theme, translations,
     } = this.props;
 
+    const generateClassName = createGenerateClassName({
+      productionPrefix: classPrefix,
+    });
+
     Object.keys(translations).forEach((lng) => {
       this.i18n.addResourceBundle(lng, 'translation', translations[lng], true, true);
     });
@@ -69,7 +73,10 @@ export class App extends Component {
             <ThemeProvider
               theme={createMuiTheme(theme)}
             >
-              <StylesProvider jss={create({ plugins: [...jssPreset().plugins, rtl()] })}>
+              <StylesProvider
+                jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
+                generateClassName={generateClassName}
+              >
                 <AuthenticationSender />
                 <AccessTokenSender />
                 <Suspense
@@ -87,6 +94,7 @@ export class App extends Component {
 }
 
 App.propTypes = {
+  classPrefix: PropTypes.string,
   isFullscreenEnabled: PropTypes.bool,
   language: PropTypes.string.isRequired,
   setWorkspaceFullscreen: PropTypes.func.isRequired,
@@ -96,5 +104,6 @@ App.propTypes = {
 };
 
 App.defaultProps = {
+  classPrefix: '',
   isFullscreenEnabled: false,
 };
diff --git a/src/config/css-ns.js b/src/config/css-ns.js
index 77ad4b4c914bd35951b7f64799d611f67694d6be..5e551b7cef049107d7c0fdddecb8d383f3912ea6 100644
--- a/src/config/css-ns.js
+++ b/src/config/css-ns.js
@@ -1,10 +1,10 @@
-import { createCssNs } from 'css-ns';
-
+import settings from './settings'
+import flatten from 'lodash/flatten';
 /**
  * export ns - sets up css namespacing for everything to be `mirador-`
  */
-const ns = className => createCssNs({
-  namespace: 'mirador',
-})(className);
+const ns = classNames => flatten([classNames]).map(
+  className => [settings.classPrefix, className].join('-')
+).join(' ');
 
 export default ns;
diff --git a/src/config/settings.js b/src/config/settings.js
index 814b2c4ef0b69def9f0bfb3639ff30eaf7893b31..13f64480cde1d680c9962d6081b846641fc380bf 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -214,6 +214,7 @@ export default {
   annotations: {
     filteredMotivations: ['oa:commenting', 'sc:painting', 'commenting'],
   },
+  classPrefix: 'mirador',
   displayAllAnnotations: false, // Configure if annotations to be displayed on the canvas by default when fetched
   resourceHeaders: {}, // Headers to send with IIIF Presentation API resource requests
   translations: { // Translations can be added to inject new languages or override existing labels
diff --git a/src/containers/App.js b/src/containers/App.js
index 8c11f4b23177bd890de4f35e416d918d568db1cd..855b83c2122f48ec65c879cb7f9771735a47c782 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -13,6 +13,7 @@ import { App } from '../components/App';
  */
 const mapStateToProps = state => (
   {
+    classPrefix: state.config.classPrefix,
     isFullscreenEnabled: state.workspace.isFullscreenEnabled,
     language: state.config.language,
     theme: getTheme(state),