diff --git a/.eslintrc b/.eslintrc
index 3b8e34c4..c62b046f 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -10,7 +10,8 @@
   ],
   "env": {
     "browser": true,
-    "jest": true
+    "jest": true,
+    "node": true,
   },
   "rules": {
     "prefer-const": 1,
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index ca9ca8a1..f95b7d04 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -6,42 +6,28 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.module.css$/,
+        test: /\.module.(sa|sc|c)ss$/,
         use: [
-          {
-            loader: "style-loader"
-          },
+          "style-loader",
           {
             loader: "css-loader",
-            options: {
-              modules: true
-            }
+            options: { modules: true }
           },
           {
             loader: "sass-loader",
-            options: {
-              sourcemap: true
-            }
+            options: { sourcemap: true }
           }
         ]
       },
       {
-        test: /\.scss$/,
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module.(s(a|c)ss)$/,
         use: [
-          {
-            loader: "style-loader"
-          },
-          {
-            loader: "css-loader",
-            options: {
-              sourceMap: true
-            }
-          },
+          "style-loader",
+          "css-loader",
           {
             loader: "sass-loader",
-            options: {
-              sourcemap: true
-            }
+            options: { sourcemap: true }
           }
         ]
       }
diff --git a/demo/app.js b/demo/app.js
index 9ab2f389..2330f850 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -10,7 +10,7 @@ import DEMO_TRANSCRIPT from './sample-data/KateDarling-bbcKaldiTranscriptWithSpe
 const DEMO_MEDIA_URL = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4';
 const DEMO_TITLE = 'TED Talk | Kate Darling - Why we have an emotional connection to robots';
 
-import style from './index.module.css';
+import style from './index.module.scss';
 
 class App extends React.Component {
   constructor(props) {
diff --git a/demo/index.module.css b/demo/index.module.scss
similarity index 100%
rename from demo/index.module.css
rename to demo/index.module.scss
diff --git a/package-lock.json b/package-lock.json
index 386f663c..2b104994 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1850,6 +1850,19 @@
         "regenerator-runtime": "^0.12.1",
         "semver": "^5.6.0",
         "webpack": "^4.29.0"
+      },
+      "dependencies": {
+        "mini-css-extract-plugin": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
+          "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==",
+          "dev": true,
+          "requires": {
+            "loader-utils": "^1.1.0",
+            "schema-utils": "^1.0.0",
+            "webpack-sources": "^1.1.0"
+          }
+        }
       }
     },
     "@storybook/router": {
@@ -10744,12 +10757,13 @@
       }
     },
     "mini-css-extract-plugin": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
-      "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz",
+      "integrity": "sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw==",
       "dev": true,
       "requires": {
         "loader-utils": "^1.1.0",
+        "normalize-url": "1.9.1",
         "schema-utils": "^1.0.0",
         "webpack-sources": "^1.1.0"
       }
diff --git a/package.json b/package.json
index 6d150c41..d844336b 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+      "\\.(css|scss|less)$": "<rootDir>/__mocks__/styleMock.js"
     }
   },
   "dependencies": {
@@ -92,6 +92,7 @@
     "gh-pages": "^2.0.1",
     "husky": "^1.1.3",
     "jest": "^24.7.1",
+    "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "prettier-stylelint": "^0.4.2",
     "react-testing-library": "^5.2.3",
diff --git a/packages/components/media-player/index.js b/packages/components/media-player/index.js
index b8aceea8..0ea7e52e 100644
--- a/packages/components/media-player/index.js
+++ b/packages/components/media-player/index.js
@@ -5,9 +5,9 @@ import { hotkeys } from 'react-keyboard-shortcuts';
 import PlayerControls from './src/PlayerControls';
 import ProgressBar from './src/ProgressBar';
 
-import returnHotKeys from './src/defaultHotKeys';
+import returnHotKeys from './src/config/defaultHotKeys';
 
-import styles from './index.module.css';
+import styles from './index.module.scss';
 
 import {
   secondsToTimecode,
diff --git a/packages/components/media-player/index.module.css b/packages/components/media-player/index.module.scss
similarity index 100%
rename from packages/components/media-player/index.module.css
rename to packages/components/media-player/index.module.scss
diff --git a/packages/components/media-player/src/PlaybackRate.js b/packages/components/media-player/src/PlaybackRate.js
index a45d43cf..169927e8 100644
--- a/packages/components/media-player/src/PlaybackRate.js
+++ b/packages/components/media-player/src/PlaybackRate.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Select from './Select';
 
-import style from './PlayerControls/index.module.css';
+import style from './PlayerControls/index.module.scss';
 
 class PlaybackRate extends React.Component {
 
diff --git a/packages/components/media-player/src/PlayerControls/TimeBox.js b/packages/components/media-player/src/PlayerControls/TimeBox.js
index 6f8278ed..96eb57f1 100644
--- a/packages/components/media-player/src/PlayerControls/TimeBox.js
+++ b/packages/components/media-player/src/PlayerControls/TimeBox.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from './index.module.css';
+import style from './index.module.scss';
 
 class TimeBox extends React.Component {
 
diff --git a/packages/components/media-player/src/PlayerControls/index.js b/packages/components/media-player/src/PlayerControls/index.js
index fd12c5bc..f2e1d9ba 100644
--- a/packages/components/media-player/src/PlayerControls/index.js
+++ b/packages/components/media-player/src/PlayerControls/index.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import style from './index.module.css';
-
 import {
   faSave,
   faTv,
@@ -19,18 +17,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PlaybackRate from '../PlaybackRate';
 import TimeBox from './TimeBox.js';
 
+import style from './index.module.scss';
+
 class PlayerControls extends React.Component {
 
   shouldComponentUpdate = (nextProps) => {
-    if (nextProps !== this.props) return true;
-
-    return false;
+    return nextProps !== this.props;
   }
 
-  // to handle backward and forward mouse pressed on btn
-  // set a 300 ms  interval to repeat the
-  // backward or forward function
-  // on mouseUp the interval is cleared
   setIntervalHelperBackward = () => {
     // this.props.skipBackward();
     this.interval = setInterval(() => {
@@ -115,7 +109,7 @@ class PlayerControls extends React.Component {
           <button
             value="Picture-in-picture"
             title="Picture-in-picture"
-            className={ style.playerButton + ' ' + style.pip }
+            className={ `${ style.playerButton } ${ style.pip }` }
             onClick={ this.props.pictureInPicture }>
             <FontAwesomeIcon icon={ faTv } />
           </button>
diff --git a/packages/components/media-player/src/PlayerControls/index.module.css b/packages/components/media-player/src/PlayerControls/index.module.scss
similarity index 100%
rename from packages/components/media-player/src/PlayerControls/index.module.css
rename to packages/components/media-player/src/PlayerControls/index.module.scss
diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js
index a074545e..33e51d5b 100644
--- a/packages/components/media-player/src/ProgressBar.js
+++ b/packages/components/media-player/src/ProgressBar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import style from './ProgressBar.module.css';
+import style from './ProgressBar.module.scss';
 
 class ProgressBar extends React.Component {
 
diff --git a/packages/components/media-player/src/ProgressBar.module.css b/packages/components/media-player/src/ProgressBar.module.scss
similarity index 100%
rename from packages/components/media-player/src/ProgressBar.module.css
rename to packages/components/media-player/src/ProgressBar.module.scss
diff --git a/packages/components/media-player/src/Select.js b/packages/components/media-player/src/Select.js
index 1825a768..bdccaa0a 100644
--- a/packages/components/media-player/src/Select.js
+++ b/packages/components/media-player/src/Select.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import style from './Select.module.css';
+import style from './Select.module.scss';
 
 class Select extends React.Component {
 
diff --git a/packages/components/media-player/src/Select.module.css b/packages/components/media-player/src/Select.module.scss
similarity index 100%
rename from packages/components/media-player/src/Select.module.css
rename to packages/components/media-player/src/Select.module.scss
diff --git a/packages/components/media-player/src/defaultHotKeys.js b/packages/components/media-player/src/config/defaultHotKeys.js
similarity index 100%
rename from packages/components/media-player/src/defaultHotKeys.js
rename to packages/components/media-player/src/config/defaultHotKeys.js
diff --git a/webpack.config.js b/webpack.config.js
index be2f5452..782fb816 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,9 @@
 // based on https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f
 // and http://jasonwatmore.com/post/2018/04/14/react-npm-how-to-publish-a-react-component-to-npm
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
 
 module.exports = {
   mode: 'production',
@@ -31,26 +34,41 @@ module.exports = {
   optimization: {
     minimize: true
   },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: isDevelopment ? '[name].css' : '[name].[hash].css',
+      chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
+    })
+  ],
   module: {
     rules: [
       {
-        test: /\.module.css$/,
+        test: /\.module.(sa|sc|c)ss$/,
         use: [
+          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
           {
-            loader: 'style-loader'
+            loader: 'css-loader',
+            options: { modules: true, sourcemap: isDevelopment }
           },
+          {
+            loader: 'sass-loader',
+            options: { sourcemap: isDevelopment }
+          }
+        ]
+      },
+      {
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module.(s(a|c)ss)$/,
+        use: [
+          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
-            options: {
-              modules: true
-            }
+            options: { sourcemap: isDevelopment }
           },
           {
             loader: 'sass-loader',
-            options: {
-              modules: true
-            }
-          },
+            options: { sourcemap: isDevelopment }
+          }
         ]
       },
       {