diff --git a/ui/src/components/App/app.css b/ui/src/components/App/app.module.css
similarity index 100%
rename from ui/src/components/App/app.css
rename to ui/src/components/App/app.module.css
diff --git a/ui/src/components/App/index.js b/ui/src/components/App/index.js
index fc24dd7e..3e2e1ee0 100755
--- a/ui/src/components/App/index.js
+++ b/ui/src/components/App/index.js
@@ -1,4 +1,4 @@
-import styles from './app.css';
+import styles from './app.module.css';
 import Sidebar from '../Sidebar';
 import HelpButton from '../Help/HelpButton';
 import Help from '../Help';
diff --git a/ui/src/components/CheckboxLegend/CheckboxLegend.js b/ui/src/components/CheckboxLegend/CheckboxLegend.js
index 84cf6e79..43b5e670 100644
--- a/ui/src/components/CheckboxLegend/CheckboxLegend.js
+++ b/ui/src/components/CheckboxLegend/CheckboxLegend.js
@@ -4,7 +4,7 @@ import _ from 'lodash';
 import React from 'react';
 import chroma from 'chroma-js';
 
-import styles from './checkboxLegend.scss';
+import styles from './checkboxLegend.module.scss';
 import LegendCompact from '../LegendCompact';
 
 const ICON_WIDTH = 15;
diff --git a/ui/src/components/CheckboxLegend/checkboxLegend.scss b/ui/src/components/CheckboxLegend/checkboxLegend.module.scss
similarity index 100%
rename from ui/src/components/CheckboxLegend/checkboxLegend.scss
rename to ui/src/components/CheckboxLegend/checkboxLegend.module.scss
diff --git a/ui/src/components/ConfigButton/ConfigButton.js b/ui/src/components/ConfigButton/ConfigButton.js
index 6b8cca46..f99a05ad 100755
--- a/ui/src/components/ConfigButton/ConfigButton.js
+++ b/ui/src/components/ConfigButton/ConfigButton.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 import Icon from '../icon';
-import styles from './config-button.scss';
+import styles from './config-button.module.scss';
 
 const ConfigButton = (props) => (
   <div className={cx('box', styles.configButton)}>
diff --git a/ui/src/components/ConfigButton/config-button.scss b/ui/src/components/ConfigButton/config-button.module.scss
similarity index 100%
rename from ui/src/components/ConfigButton/config-button.scss
rename to ui/src/components/ConfigButton/config-button.module.scss
diff --git a/ui/src/components/DataRiverChart/data-river-chart.component.js b/ui/src/components/DataRiverChart/data-river-chart.component.js
index af19bbb6..b5801a73 100644
--- a/ui/src/components/DataRiverChart/data-river-chart.component.js
+++ b/ui/src/components/DataRiverChart/data-river-chart.component.js
@@ -6,7 +6,7 @@ import React from 'react';
 import * as d3 from 'd3';
 import chroma from 'chroma-js';
 import { BuildStat, RiverData } from './RiverData';
-import styles from './data-river-chart.component.scss';
+import styles from './data-river-chart.component.module.scss';
 import ScalableBaseChartComponent from '../ScalableBaseChart';
 import _ from 'lodash';
 import { RiverDataContainer } from './RiverDataContainer';
diff --git a/ui/src/components/DataRiverChart/data-river-chart.component.scss b/ui/src/components/DataRiverChart/data-river-chart.component.module.scss
similarity index 100%
rename from ui/src/components/DataRiverChart/data-river-chart.component.scss
rename to ui/src/components/DataRiverChart/data-river-chart.component.module.scss
diff --git a/ui/src/components/DataRiverChart/river-tooltip.js b/ui/src/components/DataRiverChart/river-tooltip.js
index 6be188d0..48f495d7 100644
--- a/ui/src/components/DataRiverChart/river-tooltip.js
+++ b/ui/src/components/DataRiverChart/river-tooltip.js
@@ -1,4 +1,4 @@
-import styles from './data-river-chart.component.scss';
+import styles from './data-river-chart.component.module.scss';
 import { BuildStat } from './RiverData';
 
 import React from 'react';
diff --git a/ui/src/components/DateRangeFilter/dateRangeFilter.scss b/ui/src/components/DateRangeFilter/dateRangeFilter.module.scss
similarity index 100%
rename from ui/src/components/DateRangeFilter/dateRangeFilter.scss
rename to ui/src/components/DateRangeFilter/dateRangeFilter.module.scss
diff --git a/ui/src/components/DateRangeFilter/dateRangeFilter.tsx b/ui/src/components/DateRangeFilter/dateRangeFilter.tsx
index ec348e6c..ec24c746 100644
--- a/ui/src/components/DateRangeFilter/dateRangeFilter.tsx
+++ b/ui/src/components/DateRangeFilter/dateRangeFilter.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from './dateRangeFilter.scss';
+import styles from './dateRangeFilter.module.scss';
 import { DateRange } from '../../types/globalTypes';
 
 interface Props {
diff --git a/ui/src/components/DragAndDropList/dragAndDropList.js b/ui/src/components/DragAndDropList/dragAndDropList.js
index 2534d795..2800dc19 100644
--- a/ui/src/components/DragAndDropList/dragAndDropList.js
+++ b/ui/src/components/DragAndDropList/dragAndDropList.js
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef } from 'react';
 import _ from 'lodash';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 /**
  * This component renders a list where the order can be changed by dragging the elements.
diff --git a/ui/src/components/DragAndDropList/styles.scss b/ui/src/components/DragAndDropList/styles.module.scss
similarity index 100%
rename from ui/src/components/DragAndDropList/styles.scss
rename to ui/src/components/DragAndDropList/styles.module.scss
diff --git a/ui/src/components/Filepicker/ModuleLine.js b/ui/src/components/Filepicker/ModuleLine.js
index 964bf198..ffc85051 100644
--- a/ui/src/components/Filepicker/ModuleLine.js
+++ b/ui/src/components/Filepicker/ModuleLine.js
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useLayoutEffect } from 'react';
 import * as d3 from 'd3';
 import _ from 'lodash';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const ModuleLine = ({
   moduleName,
diff --git a/ui/src/components/Filepicker/index.js b/ui/src/components/Filepicker/index.js
index d9f39d9b..caae8f1a 100644
--- a/ui/src/components/Filepicker/index.js
+++ b/ui/src/components/Filepicker/index.js
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import { Tooltip } from 'react-tippy';
 import ModuleLine from './ModuleLine';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import _ from 'lodash';
 
 /**
diff --git a/ui/src/components/Filepicker/styles.scss b/ui/src/components/Filepicker/styles.module.scss
similarity index 100%
rename from ui/src/components/Filepicker/styles.scss
rename to ui/src/components/Filepicker/styles.module.scss
diff --git a/ui/src/components/FilterBox/index.js b/ui/src/components/FilterBox/index.js
index d097879e..139120ed 100755
--- a/ui/src/components/FilterBox/index.js
+++ b/ui/src/components/FilterBox/index.js
@@ -5,7 +5,7 @@ import _ from 'lodash';
 import cx from 'classnames';
 import fuzzy from 'fuzzy';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default class FilterBox extends React.Component {
   constructor(props) {
diff --git a/ui/src/components/FilterBox/styles.scss b/ui/src/components/FilterBox/styles.module.scss
similarity index 100%
rename from ui/src/components/FilterBox/styles.scss
rename to ui/src/components/FilterBox/styles.module.scss
diff --git a/ui/src/components/Help/HelpButton/HelpButton.js b/ui/src/components/Help/HelpButton/HelpButton.js
index 557fdcba..bb276473 100755
--- a/ui/src/components/Help/HelpButton/HelpButton.js
+++ b/ui/src/components/Help/HelpButton/HelpButton.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 import Icon from '../../icon';
-import styles from './help-button.scss';
+import styles from './help-button.module.scss';
 
 const HelpButton = (props) => (
   <div className={cx(styles.helpButton)}>
diff --git a/ui/src/components/Help/HelpButton/help-button.scss b/ui/src/components/Help/HelpButton/help-button.module.scss
similarity index 100%
rename from ui/src/components/Help/HelpButton/help-button.scss
rename to ui/src/components/Help/HelpButton/help-button.module.scss
diff --git a/ui/src/components/Help/index.js b/ui/src/components/Help/index.js
index 744c99fd..139f79fc 100755
--- a/ui/src/components/Help/index.js
+++ b/ui/src/components/Help/index.js
@@ -6,7 +6,7 @@ import Measure from 'react-measure';
 
 import { callSafe } from '../../utils';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   return {
diff --git a/ui/src/components/Help/styles.scss b/ui/src/components/Help/styles.module.scss
similarity index 100%
rename from ui/src/components/Help/styles.scss
rename to ui/src/components/Help/styles.module.scss
diff --git a/ui/src/components/InlineLoadingIndicator/inlineLoadingIndicator.js b/ui/src/components/InlineLoadingIndicator/inlineLoadingIndicator.js
index 1740e7b3..5bcebb32 100644
--- a/ui/src/components/InlineLoadingIndicator/inlineLoadingIndicator.js
+++ b/ui/src/components/InlineLoadingIndicator/inlineLoadingIndicator.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import styles from './inlineLoadingIndicator.scss';
+import styles from './inlineLoadingIndicator.module.scss';
 
 export default (props) => {
   return (
diff --git a/ui/src/components/InlineLoadingIndicator/inlineLoadingIndicator.scss b/ui/src/components/InlineLoadingIndicator/inlineLoadingIndicator.module.scss
similarity index 100%
rename from ui/src/components/InlineLoadingIndicator/inlineLoadingIndicator.scss
rename to ui/src/components/InlineLoadingIndicator/inlineLoadingIndicator.module.scss
diff --git a/ui/src/components/Legend/Legend.js b/ui/src/components/Legend/Legend.js
index 71d4cff7..ddeba343 100755
--- a/ui/src/components/Legend/Legend.js
+++ b/ui/src/components/Legend/Legend.js
@@ -4,7 +4,7 @@ import _ from 'lodash';
 import React from 'react';
 import Measure from 'react-measure';
 
-import styles from './legend.scss';
+import styles from './legend.module.scss';
 
 const ICON_WIDTH = 15;
 const ICON_HEIGHT = 15;
diff --git a/ui/src/components/Legend/legend.scss b/ui/src/components/Legend/legend.module.scss
similarity index 100%
rename from ui/src/components/Legend/legend.scss
rename to ui/src/components/Legend/legend.module.scss
diff --git a/ui/src/components/LegendCompact/LegendCompact.js b/ui/src/components/LegendCompact/LegendCompact.js
index 9bb140d9..5e3437bc 100644
--- a/ui/src/components/LegendCompact/LegendCompact.js
+++ b/ui/src/components/LegendCompact/LegendCompact.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import styles from './legendCompact.scss';
+import styles from './legendCompact.module.scss';
 
 const ICON_WIDTH = 15;
 const ICON_HEIGHT = 15;
diff --git a/ui/src/components/LegendCompact/legendCompact.scss b/ui/src/components/LegendCompact/legendCompact.module.scss
similarity index 100%
rename from ui/src/components/LegendCompact/legendCompact.scss
rename to ui/src/components/LegendCompact/legendCompact.module.scss
diff --git a/ui/src/components/ProgressBar/ProgressBar.js b/ui/src/components/ProgressBar/ProgressBar.js
index 868bb005..f393f005 100755
--- a/ui/src/components/ProgressBar/ProgressBar.js
+++ b/ui/src/components/ProgressBar/ProgressBar.js
@@ -2,7 +2,7 @@
 
 import cx from 'classnames';
 
-import styles from './progress-bar.scss';
+import styles from './progress-bar.module.scss';
 import React from 'react';
 
 export default class ProgressBar extends React.PureComponent {
diff --git a/ui/src/components/ProgressBar/progress-bar.scss b/ui/src/components/ProgressBar/progress-bar.module.scss
similarity index 100%
rename from ui/src/components/ProgressBar/progress-bar.scss
rename to ui/src/components/ProgressBar/progress-bar.module.scss
diff --git a/ui/src/components/ScalableBaseChart/index.tsx b/ui/src/components/ScalableBaseChart/index.tsx
index eb0516a5..687a842d 100644
--- a/ui/src/components/ScalableBaseChart/index.tsx
+++ b/ui/src/components/ScalableBaseChart/index.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import * as d3 from 'd3';
-import * as baseStyles from './scalable-base-chart.component.scss';
+import * as baseStyles from './scalable-base-chart.module.scss';
 import { NoImplementationException } from '../../utils/exception/NoImplementationException';
 import { hash } from '../../utils/crypto-utils';
 import { Palette } from '../../types/authorTypes';
diff --git a/ui/src/components/ScalableBaseChart/scalable-base-chart.component.scss b/ui/src/components/ScalableBaseChart/scalable-base-chart.module.scss
similarity index 100%
rename from ui/src/components/ScalableBaseChart/scalable-base-chart.component.scss
rename to ui/src/components/ScalableBaseChart/scalable-base-chart.module.scss
diff --git a/ui/src/components/SearchBox/index.js b/ui/src/components/SearchBox/index.js
index 86ab7c54..a3251fef 100755
--- a/ui/src/components/SearchBox/index.js
+++ b/ui/src/components/SearchBox/index.js
@@ -5,7 +5,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default class SearchBox extends React.Component {
   constructor(props) {
diff --git a/ui/src/components/SearchBox/index.old.js b/ui/src/components/SearchBox/index.old.js
index 2da401e3..babbd039 100755
--- a/ui/src/components/SearchBox/index.old.js
+++ b/ui/src/components/SearchBox/index.old.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import fuzzy from 'fuzzy';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default class SearchBox extends React.Component {
   constructor(props) {
diff --git a/ui/src/components/SearchBox/styles.scss b/ui/src/components/SearchBox/styles.module.scss
similarity index 100%
rename from ui/src/components/SearchBox/styles.scss
rename to ui/src/components/SearchBox/styles.module.scss
diff --git a/ui/src/components/Sidebar/Link.js b/ui/src/components/Sidebar/Link.js
index 06b3911d..fdafd885 100755
--- a/ui/src/components/Sidebar/Link.js
+++ b/ui/src/components/Sidebar/Link.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './sidebar.scss';
+import styles from './sidebar.module.scss';
 import cx from 'classnames';
 import returnIcon from './assets/return.svg';
 
diff --git a/ui/src/components/Sidebar/LinkList.js b/ui/src/components/Sidebar/LinkList.js
index f7cb3828..771f9d81 100644
--- a/ui/src/components/Sidebar/LinkList.js
+++ b/ui/src/components/Sidebar/LinkList.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import _ from 'lodash';
-import styles from './sidebar.scss';
+import styles from './sidebar.module.scss';
 import PanelLink from './PanelLink';
 import menu from './assets/menu.svg';
 import close from './assets/close.svg';
diff --git a/ui/src/components/Sidebar/Sidebar.js b/ui/src/components/Sidebar/Sidebar.js
index 511b334f..90ffb504 100755
--- a/ui/src/components/Sidebar/Sidebar.js
+++ b/ui/src/components/Sidebar/Sidebar.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import styles from './sidebar.scss';
+import styles from './sidebar.module.scss';
 import menu from './assets/menu.svg';
 import menuWhite from './assets/menuWhite.svg';
 import hideSidebar from './assets/hideSidebar.svg';
diff --git a/ui/src/components/Sidebar/sidebar.scss b/ui/src/components/Sidebar/sidebar.module.scss
similarity index 100%
rename from ui/src/components/Sidebar/sidebar.scss
rename to ui/src/components/Sidebar/sidebar.module.scss
diff --git a/ui/src/components/StackedAreaChart/index.tsx b/ui/src/components/StackedAreaChart/index.tsx
index 0cd5eda8..e0fb59ac 100644
--- a/ui/src/components/StackedAreaChart/index.tsx
+++ b/ui/src/components/StackedAreaChart/index.tsx
@@ -1,6 +1,6 @@
 'use strict';
 
-import styles from './stackedAreaChart.scss';
+import styles from './stackedAreaChart.module.scss';
 import ScalableBaseChartComponent from '../ScalableBaseChart';
 import * as d3 from 'd3';
 import * as _ from 'lodash';
diff --git a/ui/src/components/StackedAreaChart/stackedAreaChart.scss b/ui/src/components/StackedAreaChart/stackedAreaChart.module.scss
similarity index 100%
rename from ui/src/components/StackedAreaChart/stackedAreaChart.scss
rename to ui/src/components/StackedAreaChart/stackedAreaChart.module.scss
diff --git a/ui/src/components/TabCombo/index.tsx b/ui/src/components/TabCombo/index.tsx
index fb2ceee4..c28f45ca 100755
--- a/ui/src/components/TabCombo/index.tsx
+++ b/ui/src/components/TabCombo/index.tsx
@@ -1,7 +1,7 @@
 'use strict';
 
 import * as React from 'react';
-import styles from './tabCombo.scss';
+import styles from './tabCombo.module.scss';
 
 interface Props {
   options: Option[];
diff --git a/ui/src/components/TabCombo/tabCombo.scss b/ui/src/components/TabCombo/tabCombo.module.scss
similarity index 100%
rename from ui/src/components/TabCombo/tabCombo.scss
rename to ui/src/components/TabCombo/tabCombo.module.scss
diff --git a/ui/src/components/UniversalSettings/authorList/authorList.scss b/ui/src/components/UniversalSettings/authorList/authorList.module.scss
similarity index 100%
rename from ui/src/components/UniversalSettings/authorList/authorList.scss
rename to ui/src/components/UniversalSettings/authorList/authorList.module.scss
diff --git a/ui/src/components/UniversalSettings/authorList/authorList.tsx b/ui/src/components/UniversalSettings/authorList/authorList.tsx
index 10fa368f..cc08a82b 100644
--- a/ui/src/components/UniversalSettings/authorList/authorList.tsx
+++ b/ui/src/components/UniversalSettings/authorList/authorList.tsx
@@ -1,8 +1,8 @@
 'use strict';
 
 import * as React from 'react';
-import styles from './authorList.scss';
-import loadingAnimation from './loadingAnimaiton.scss';
+import styles from './authorList.module.scss';
+import loadingAnimation from './loadingAnimaiton.module.scss';
 import { Author, Committer, Palette } from '../../../types/authorTypes';
 
 interface Props {
diff --git a/ui/src/components/UniversalSettings/authorList/loadingAnimaiton.scss b/ui/src/components/UniversalSettings/authorList/loadingAnimaiton.module.scss
similarity index 100%
rename from ui/src/components/UniversalSettings/authorList/loadingAnimaiton.scss
rename to ui/src/components/UniversalSettings/authorList/loadingAnimaiton.module.scss
diff --git a/ui/src/components/UniversalSettings/authorMerger/authorMerger.scss b/ui/src/components/UniversalSettings/authorMerger/authorMerger.module.scss
similarity index 100%
rename from ui/src/components/UniversalSettings/authorMerger/authorMerger.scss
rename to ui/src/components/UniversalSettings/authorMerger/authorMerger.module.scss
diff --git a/ui/src/components/UniversalSettings/authorMerger/authorMerger.tsx b/ui/src/components/UniversalSettings/authorMerger/authorMerger.tsx
index 340e0389..550da49a 100644
--- a/ui/src/components/UniversalSettings/authorMerger/authorMerger.tsx
+++ b/ui/src/components/UniversalSettings/authorMerger/authorMerger.tsx
@@ -1,7 +1,7 @@
 'use strict';
 
 import * as React from 'react';
-import styles from './authorMerger.scss';
+import styles from './authorMerger.module.scss';
 import { Author, Committer, Palette } from '../../../types/authorTypes';
 
 interface Props {
diff --git a/ui/src/components/UniversalSettings/sprintManager/milestoneList/milestoneList.scss b/ui/src/components/UniversalSettings/sprintManager/milestoneList/milestoneList.module.scss
similarity index 100%
rename from ui/src/components/UniversalSettings/sprintManager/milestoneList/milestoneList.scss
rename to ui/src/components/UniversalSettings/sprintManager/milestoneList/milestoneList.module.scss
diff --git a/ui/src/components/UniversalSettings/sprintManager/milestoneList/milestoneList.tsx b/ui/src/components/UniversalSettings/sprintManager/milestoneList/milestoneList.tsx
index 495565aa..52b10c58 100644
--- a/ui/src/components/UniversalSettings/sprintManager/milestoneList/milestoneList.tsx
+++ b/ui/src/components/UniversalSettings/sprintManager/milestoneList/milestoneList.tsx
@@ -1,7 +1,7 @@
 'use strict';
 
 import * as React from 'react';
-import styles from './milestoneList.scss';
+import styles from './milestoneList.module.scss';
 import moment from 'moment';
 import 'moment/locale/de';
 import { Milestone } from '../../../../types/milestoneTypes';
diff --git a/ui/src/components/UniversalSettings/sprintManager/sprintDisplay/sprintDisplay.scss b/ui/src/components/UniversalSettings/sprintManager/sprintDisplay/sprintDisplay.module.scss
similarity index 100%
rename from ui/src/components/UniversalSettings/sprintManager/sprintDisplay/sprintDisplay.scss
rename to ui/src/components/UniversalSettings/sprintManager/sprintDisplay/sprintDisplay.module.scss
diff --git a/ui/src/components/UniversalSettings/sprintManager/sprintDisplay/sprintDisplay.tsx b/ui/src/components/UniversalSettings/sprintManager/sprintDisplay/sprintDisplay.tsx
index fcf4a111..7099f463 100644
--- a/ui/src/components/UniversalSettings/sprintManager/sprintDisplay/sprintDisplay.tsx
+++ b/ui/src/components/UniversalSettings/sprintManager/sprintDisplay/sprintDisplay.tsx
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import styles from './sprintDisplay.scss';
+import styles from './sprintDisplay.module.scss';
 import moment from 'moment';
 import 'moment/locale/de';
 import { Sprint } from '../../../../types/sprintTypes';
diff --git a/ui/src/components/UniversalSettings/sprintManager/sprintManager.scss b/ui/src/components/UniversalSettings/sprintManager/sprintManager.module.scss
similarity index 100%
rename from ui/src/components/UniversalSettings/sprintManager/sprintManager.scss
rename to ui/src/components/UniversalSettings/sprintManager/sprintManager.module.scss
diff --git a/ui/src/components/UniversalSettings/sprintManager/sprintManager.tsx b/ui/src/components/UniversalSettings/sprintManager/sprintManager.tsx
index 75d06ecd..c98a7522 100644
--- a/ui/src/components/UniversalSettings/sprintManager/sprintManager.tsx
+++ b/ui/src/components/UniversalSettings/sprintManager/sprintManager.tsx
@@ -1,7 +1,7 @@
 'use strict';
 
 import * as React from 'react';
-import styles from './sprintManager.scss';
+import styles from './sprintManager.module.scss';
 import DateRangeFilter from '../../DateRangeFilter/dateRangeFilter';
 import SprintDisplay from './sprintDisplay/sprintDisplay';
 import moment from 'moment';
diff --git a/ui/src/components/UniversalSettings/styles.scss b/ui/src/components/UniversalSettings/styles.module.scss
similarity index 100%
rename from ui/src/components/UniversalSettings/styles.scss
rename to ui/src/components/UniversalSettings/styles.module.scss
diff --git a/ui/src/components/UniversalSettings/universalSettings.tsx b/ui/src/components/UniversalSettings/universalSettings.tsx
index d78c3e07..f0aad491 100644
--- a/ui/src/components/UniversalSettings/universalSettings.tsx
+++ b/ui/src/components/UniversalSettings/universalSettings.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import {
   setResolution,
   setTimeSpan,
diff --git a/ui/src/components/icon/icon.css b/ui/src/components/icon/icon.module.css
similarity index 100%
rename from ui/src/components/icon/icon.css
rename to ui/src/components/icon/icon.module.css
diff --git a/ui/src/components/icon/index.js b/ui/src/components/icon/index.js
index f808f28c..57b85586 100755
--- a/ui/src/components/icon/index.js
+++ b/ui/src/components/icon/index.js
@@ -1,4 +1,4 @@
-import styles from './icon.css';
+import styles from './icon.module.css';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 
diff --git a/ui/src/components/message/message.css b/ui/src/components/message/message.module.css
similarity index 100%
rename from ui/src/components/message/message.css
rename to ui/src/components/message/message.module.css
diff --git a/ui/src/components/monospaced/index.js b/ui/src/components/monospaced/index.js
index eedc6073..e1a72905 100755
--- a/ui/src/components/monospaced/index.js
+++ b/ui/src/components/monospaced/index.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import styles from './monospaced.scss';
+import styles from './monospaced.module.scss';
 
 export default class Monospaced extends React.Component {
   render() {
diff --git a/ui/src/components/monospaced/monospaced.scss b/ui/src/components/monospaced/monospaced.module.scss
similarity index 100%
rename from ui/src/components/monospaced/monospaced.scss
rename to ui/src/components/monospaced/monospaced.module.scss
diff --git a/ui/src/components/notifications/Notification.js b/ui/src/components/notifications/Notification.js
index 4de1514d..d594fb64 100755
--- a/ui/src/components/notifications/Notification.js
+++ b/ui/src/components/notifications/Notification.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-import styles from './notification.scss';
+import styles from './notification.module.scss';
 
 export default class Notification extends React.Component {
   render() {
diff --git a/ui/src/components/notifications/Notifications.js b/ui/src/components/notifications/Notifications.js
index abaa2f1b..3c1fe931 100755
--- a/ui/src/components/notifications/Notifications.js
+++ b/ui/src/components/notifications/Notifications.js
@@ -5,8 +5,8 @@ import TransitionGroup from 'react-transition-group/TransitionGroup';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import _ from 'lodash';
 
-import Notification from './Notification.js';
-import styles from './notifications.scss';
+import Notification from './Notification';
+import styles from './notifications.module.scss';
 
 export default class Notifications extends React.Component {
   render() {
diff --git a/ui/src/components/notifications/notification.scss b/ui/src/components/notifications/notification.module.scss
similarity index 100%
rename from ui/src/components/notifications/notification.scss
rename to ui/src/components/notifications/notification.module.scss
diff --git a/ui/src/components/notifications/notifications.scss b/ui/src/components/notifications/notifications.module.scss
similarity index 100%
rename from ui/src/components/notifications/notifications.scss
rename to ui/src/components/notifications/notifications.module.scss
diff --git a/ui/src/styles/styles.scss b/ui/src/styles/styles.module.scss
similarity index 100%
rename from ui/src/styles/styles.scss
rename to ui/src/styles/styles.module.scss
diff --git a/ui/src/visualizations/VisualizationComponents/Additions_Deletions/chart/chart.js b/ui/src/visualizations/VisualizationComponents/Additions_Deletions/chart/chart.js
index 6761ad97..92c6149c 100644
--- a/ui/src/visualizations/VisualizationComponents/Additions_Deletions/chart/chart.js
+++ b/ui/src/visualizations/VisualizationComponents/Additions_Deletions/chart/chart.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import data from './data';
 import * as d3 from 'd3';
 
diff --git a/ui/src/visualizations/VisualizationComponents/Additions_Deletions/styles.scss b/ui/src/visualizations/VisualizationComponents/Additions_Deletions/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/VisualizationComponents/Additions_Deletions/styles.scss
rename to ui/src/visualizations/VisualizationComponents/Additions_Deletions/styles.module.scss
diff --git a/ui/src/visualizations/VisualizationComponents/Empty/chart/chart.js b/ui/src/visualizations/VisualizationComponents/Empty/chart/chart.js
index 513c2e4d..85b2549e 100644
--- a/ui/src/visualizations/VisualizationComponents/Empty/chart/chart.js
+++ b/ui/src/visualizations/VisualizationComponents/Empty/chart/chart.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 
 export default class Dashboard extends React.Component {
   constructor(props) {
diff --git a/ui/src/visualizations/VisualizationComponents/Empty/styles.scss b/ui/src/visualizations/VisualizationComponents/Empty/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/VisualizationComponents/Empty/styles.scss
rename to ui/src/visualizations/VisualizationComponents/Empty/styles.module.scss
diff --git a/ui/src/visualizations/VisualizationComponents/changes/chart/chart.tsx b/ui/src/visualizations/VisualizationComponents/changes/chart/chart.tsx
index b7a0bc65..8e5d4d04 100644
--- a/ui/src/visualizations/VisualizationComponents/changes/chart/chart.tsx
+++ b/ui/src/visualizations/VisualizationComponents/changes/chart/chart.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as d3 from 'd3';
 
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import _ from 'lodash';
 
 import StackedAreaChart from '../../../../components/StackedAreaChart';
diff --git a/ui/src/visualizations/VisualizationComponents/changes/config.tsx b/ui/src/visualizations/VisualizationComponents/changes/config.tsx
index af21c212..8b9ec84f 100644
--- a/ui/src/visualizations/VisualizationComponents/changes/config.tsx
+++ b/ui/src/visualizations/VisualizationComponents/changes/config.tsx
@@ -3,7 +3,7 @@
 import { connect } from 'react-redux';
 import { setDisplayMetric, setSelectedAuthors } from './sagas';
 import TabCombo from '../../../components/TabCombo';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { GlobalState } from '../../../types/globalTypes';
 import * as React from 'react';
 import { Palette } from '../../../types/authorTypes';
diff --git a/ui/src/visualizations/VisualizationComponents/changes/help.tsx b/ui/src/visualizations/VisualizationComponents/changes/help.tsx
index 11e8cbc6..1081177c 100644
--- a/ui/src/visualizations/VisualizationComponents/changes/help.tsx
+++ b/ui/src/visualizations/VisualizationComponents/changes/help.tsx
@@ -2,7 +2,7 @@
 
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import React from 'react';
 
 export default () => <div className={cx('box', styles.help)}></div>;
diff --git a/ui/src/visualizations/VisualizationComponents/changes/styles.scss b/ui/src/visualizations/VisualizationComponents/changes/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/VisualizationComponents/changes/styles.scss
rename to ui/src/visualizations/VisualizationComponents/changes/styles.module.scss
diff --git a/ui/src/visualizations/VisualizationComponents/ciBuilds/chart/chart.js b/ui/src/visualizations/VisualizationComponents/ciBuilds/chart/chart.js
index 8dc02310..65dc7b66 100644
--- a/ui/src/visualizations/VisualizationComponents/ciBuilds/chart/chart.js
+++ b/ui/src/visualizations/VisualizationComponents/ciBuilds/chart/chart.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import * as d3 from 'd3';
 
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import _ from 'lodash';
 
 import StackedAreaChart from '../../../../components/StackedAreaChart';
diff --git a/ui/src/visualizations/VisualizationComponents/ciBuilds/config.js b/ui/src/visualizations/VisualizationComponents/ciBuilds/config.js
index fc9ae2ce..c30abded 100644
--- a/ui/src/visualizations/VisualizationComponents/ciBuilds/config.js
+++ b/ui/src/visualizations/VisualizationComponents/ciBuilds/config.js
@@ -2,7 +2,7 @@
 
 import { connect } from 'react-redux';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import LegendCompact from '../../../components/LegendCompact';
 
diff --git a/ui/src/visualizations/VisualizationComponents/ciBuilds/help.js b/ui/src/visualizations/VisualizationComponents/ciBuilds/help.js
index 8bea6c35..d96b5ef6 100644
--- a/ui/src/visualizations/VisualizationComponents/ciBuilds/help.js
+++ b/ui/src/visualizations/VisualizationComponents/ciBuilds/help.js
@@ -2,6 +2,6 @@
 
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default () => <div className={cx('box', styles.help)}></div>;
diff --git a/ui/src/visualizations/VisualizationComponents/ciBuilds/styles.scss b/ui/src/visualizations/VisualizationComponents/ciBuilds/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/VisualizationComponents/ciBuilds/styles.scss
rename to ui/src/visualizations/VisualizationComponents/ciBuilds/styles.module.scss
diff --git a/ui/src/visualizations/VisualizationComponents/issueBreakdown/chart/chart.js b/ui/src/visualizations/VisualizationComponents/issueBreakdown/chart/chart.js
index 97978358..07a8408e 100644
--- a/ui/src/visualizations/VisualizationComponents/issueBreakdown/chart/chart.js
+++ b/ui/src/visualizations/VisualizationComponents/issueBreakdown/chart/chart.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import * as d3 from 'd3';
 
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import _ from 'lodash';
 
 import StackedAreaChart from '../../../../components/StackedAreaChart';
diff --git a/ui/src/visualizations/VisualizationComponents/issueBreakdown/config.js b/ui/src/visualizations/VisualizationComponents/issueBreakdown/config.js
index 2a5d9a52..fa2d0e26 100644
--- a/ui/src/visualizations/VisualizationComponents/issueBreakdown/config.js
+++ b/ui/src/visualizations/VisualizationComponents/issueBreakdown/config.js
@@ -2,7 +2,7 @@
 
 import { connect } from 'react-redux';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   return {};
diff --git a/ui/src/visualizations/VisualizationComponents/issueBreakdown/help.js b/ui/src/visualizations/VisualizationComponents/issueBreakdown/help.js
index 8bea6c35..d96b5ef6 100644
--- a/ui/src/visualizations/VisualizationComponents/issueBreakdown/help.js
+++ b/ui/src/visualizations/VisualizationComponents/issueBreakdown/help.js
@@ -2,6 +2,6 @@
 
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default () => <div className={cx('box', styles.help)}></div>;
diff --git a/ui/src/visualizations/VisualizationComponents/issueBreakdown/styles.scss b/ui/src/visualizations/VisualizationComponents/issueBreakdown/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/VisualizationComponents/issueBreakdown/styles.scss
rename to ui/src/visualizations/VisualizationComponents/issueBreakdown/styles.module.scss
diff --git a/ui/src/visualizations/VisualizationComponents/issues/chart/chart.js b/ui/src/visualizations/VisualizationComponents/issues/chart/chart.js
index 68b3df4f..48c571da 100644
--- a/ui/src/visualizations/VisualizationComponents/issues/chart/chart.js
+++ b/ui/src/visualizations/VisualizationComponents/issues/chart/chart.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import * as d3 from 'd3';
 
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import _ from 'lodash';
 
 import StackedAreaChart from '../../../../components/StackedAreaChart';
diff --git a/ui/src/visualizations/VisualizationComponents/issues/config.js b/ui/src/visualizations/VisualizationComponents/issues/config.js
index dd47ba59..4135e4ab 100644
--- a/ui/src/visualizations/VisualizationComponents/issues/config.js
+++ b/ui/src/visualizations/VisualizationComponents/issues/config.js
@@ -2,7 +2,7 @@
 
 import { connect } from 'react-redux';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import TabCombo from '../../../components/TabCombo';
 import { setShowIssues } from './sagas';
diff --git a/ui/src/visualizations/VisualizationComponents/issues/help.js b/ui/src/visualizations/VisualizationComponents/issues/help.js
index 8bea6c35..d96b5ef6 100644
--- a/ui/src/visualizations/VisualizationComponents/issues/help.js
+++ b/ui/src/visualizations/VisualizationComponents/issues/help.js
@@ -2,6 +2,6 @@
 
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default () => <div className={cx('box', styles.help)}></div>;
diff --git a/ui/src/visualizations/VisualizationComponents/issues/styles.scss b/ui/src/visualizations/VisualizationComponents/issues/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/VisualizationComponents/issues/styles.scss
rename to ui/src/visualizations/VisualizationComponents/issues/styles.module.scss
diff --git a/ui/src/visualizations/VisualizationComponents/sprints/chart/chart.js b/ui/src/visualizations/VisualizationComponents/sprints/chart/chart.js
index 2c7c3b77..21f7b7df 100644
--- a/ui/src/visualizations/VisualizationComponents/sprints/chart/chart.js
+++ b/ui/src/visualizations/VisualizationComponents/sprints/chart/chart.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import SprintChart from './sprintChart';
 
 export default (props) => {
diff --git a/ui/src/visualizations/VisualizationComponents/sprints/chart/sprintChart.js b/ui/src/visualizations/VisualizationComponents/sprints/chart/sprintChart.js
index ca9ebab0..e9007d3a 100644
--- a/ui/src/visualizations/VisualizationComponents/sprints/chart/sprintChart.js
+++ b/ui/src/visualizations/VisualizationComponents/sprints/chart/sprintChart.js
@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import ReactDOMServer from 'react-dom/server';
 
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import * as d3 from 'd3';
 import moment from 'moment';
 import { aggregateTimeTrackingData, convertToTimeString, extractTimeTrackingDataFromNotes } from '../../../../utils/timeTracking';
diff --git a/ui/src/visualizations/VisualizationComponents/sprints/config.js b/ui/src/visualizations/VisualizationComponents/sprints/config.js
index fd95cf73..395827bd 100644
--- a/ui/src/visualizations/VisualizationComponents/sprints/config.js
+++ b/ui/src/visualizations/VisualizationComponents/sprints/config.js
@@ -2,7 +2,7 @@
 
 import { connect } from 'react-redux';
 import { setColorIssuesMergeRequests } from './sagas';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import React from 'react';
 import TabCombo from '../../../components/TabCombo';
 
diff --git a/ui/src/visualizations/VisualizationComponents/sprints/help.js b/ui/src/visualizations/VisualizationComponents/sprints/help.js
index 8bea6c35..d96b5ef6 100644
--- a/ui/src/visualizations/VisualizationComponents/sprints/help.js
+++ b/ui/src/visualizations/VisualizationComponents/sprints/help.js
@@ -2,6 +2,6 @@
 
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default () => <div className={cx('box', styles.help)}></div>;
diff --git a/ui/src/visualizations/VisualizationComponents/sprints/styles.scss b/ui/src/visualizations/VisualizationComponents/sprints/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/VisualizationComponents/sprints/styles.scss
rename to ui/src/visualizations/VisualizationComponents/sprints/styles.module.scss
diff --git a/ui/src/visualizations/VisualizationComponents/timeSpent/chart/chart.js b/ui/src/visualizations/VisualizationComponents/timeSpent/chart/chart.js
index e97cf8d8..849d08a0 100644
--- a/ui/src/visualizations/VisualizationComponents/timeSpent/chart/chart.js
+++ b/ui/src/visualizations/VisualizationComponents/timeSpent/chart/chart.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import * as d3 from 'd3';
 
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 
 import StackedAreaChart from '../../../../components/StackedAreaChart';
 import moment from 'moment';
diff --git a/ui/src/visualizations/VisualizationComponents/timeSpent/config.js b/ui/src/visualizations/VisualizationComponents/timeSpent/config.js
index a38a56e6..7e1d70a7 100644
--- a/ui/src/visualizations/VisualizationComponents/timeSpent/config.js
+++ b/ui/src/visualizations/VisualizationComponents/timeSpent/config.js
@@ -2,7 +2,7 @@
 
 import { connect } from 'react-redux';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import React from 'react';
 import { setAggregateTime } from './sagas';
 
diff --git a/ui/src/visualizations/VisualizationComponents/timeSpent/help.js b/ui/src/visualizations/VisualizationComponents/timeSpent/help.js
index 8bea6c35..d96b5ef6 100644
--- a/ui/src/visualizations/VisualizationComponents/timeSpent/help.js
+++ b/ui/src/visualizations/VisualizationComponents/timeSpent/help.js
@@ -2,6 +2,6 @@
 
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default () => <div className={cx('box', styles.help)}></div>;
diff --git a/ui/src/visualizations/VisualizationComponents/timeSpent/styles.scss b/ui/src/visualizations/VisualizationComponents/timeSpent/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/VisualizationComponents/timeSpent/styles.scss
rename to ui/src/visualizations/VisualizationComponents/timeSpent/styles.module.scss
diff --git a/ui/src/visualizations/code-expertise/chart/chart.js b/ui/src/visualizations/code-expertise/chart/chart.js
index f628bb56..c1678035 100644
--- a/ui/src/visualizations/code-expertise/chart/chart.js
+++ b/ui/src/visualizations/code-expertise/chart/chart.js
@@ -10,7 +10,7 @@ import LegendCompact from '../../../components/LegendCompact/LegendCompact';
 import { getChartColors } from '../../../utils';
 import * as zoomUtils from '../../../utils/zoom';
 import * as d3 from 'd3';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import chroma from 'chroma-js';
 import DotsPattern from '../../../components/svg/patterns/dots';
 import HatchPattern from '../../../components/svg/patterns/hatch';
diff --git a/ui/src/visualizations/code-expertise/chart/details/CommitDetails.js b/ui/src/visualizations/code-expertise/chart/details/CommitDetails.js
index 34d957bb..be754062 100644
--- a/ui/src/visualizations/code-expertise/chart/details/CommitDetails.js
+++ b/ui/src/visualizations/code-expertise/chart/details/CommitDetails.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styles from '../../styles.scss';
+import styles from '../../styles.module.scss';
 
 const CommitDetails = ({ commit }) => {
   const [isExpanded, setExpanded] = useState(false);
diff --git a/ui/src/visualizations/code-expertise/chart/details/CommitDetailsList.js b/ui/src/visualizations/code-expertise/chart/details/CommitDetailsList.js
index 1d98c2f9..d8325baa 100644
--- a/ui/src/visualizations/code-expertise/chart/details/CommitDetailsList.js
+++ b/ui/src/visualizations/code-expertise/chart/details/CommitDetailsList.js
@@ -1,4 +1,4 @@
-import styles from '../../styles.scss';
+import styles from '../../styles.module.scss';
 import CommitDetails from './CommitDetails';
 import _ from 'lodash';
 
diff --git a/ui/src/visualizations/code-expertise/chart/details/index.js b/ui/src/visualizations/code-expertise/chart/details/index.js
index f74f1522..2f52eda7 100644
--- a/ui/src/visualizations/code-expertise/chart/details/index.js
+++ b/ui/src/visualizations/code-expertise/chart/details/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import _ from 'lodash';
-import styles from '../../styles.scss';
+import styles from '../../styles.module.scss';
 import { setDetails } from '../../sagas';
 import TabCombo from '../../../../components/TabCombo';
 import CommitsDetailsList from './CommitDetailsList';
diff --git a/ui/src/visualizations/code-expertise/chart/full-screen-message.js b/ui/src/visualizations/code-expertise/chart/full-screen-message.js
index 3e74cde1..a3a7e5c7 100644
--- a/ui/src/visualizations/code-expertise/chart/full-screen-message.js
+++ b/ui/src/visualizations/code-expertise/chart/full-screen-message.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 
 const FullScreenMessage = ({ message }) => {
   return (
diff --git a/ui/src/visualizations/code-expertise/chart/index.js b/ui/src/visualizations/code-expertise/chart/index.js
index 36b90536..94629151 100644
--- a/ui/src/visualizations/code-expertise/chart/index.js
+++ b/ui/src/visualizations/code-expertise/chart/index.js
@@ -1,9 +1,9 @@
 import Chart from './chart';
 import Details from './details';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import FullScreenMessage from './full-screen-message.js';
+import FullScreenMessage from './full-screen-message';
 import _ from 'lodash';
 import {
   addBuildData,
diff --git a/ui/src/visualizations/code-expertise/config/index.js b/ui/src/visualizations/code-expertise/config/index.js
index 1dfe78b4..8e6fb4e4 100644
--- a/ui/src/visualizations/code-expertise/config/index.js
+++ b/ui/src/visualizations/code-expertise/config/index.js
@@ -4,12 +4,12 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import _ from 'lodash';
 
-import Filepicker from '../../../components/Filepicker/index.js';
+import Filepicker from '../../../components/Filepicker/index';
 import TabCombo from '../../../components/TabCombo';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import { setActiveIssue, setMode, setCurrentBranch, setActiveFiles, setFilterMergeCommits, setOnlyDisplayOwnership } from '../sagas';
-import { getBranches, getFilenamesForBranch, getIssues } from '../sagas/helper.js';
-import { ownershipDataForMergedAuthors } from '../../../components/Filepicker/utils.js';
+import { getBranches, getFilenamesForBranch, getIssues } from '../sagas/helper';
+import { ownershipDataForMergedAuthors } from '../../../components/Filepicker/utils';
 
 export default () => {
   //global state from redux store
diff --git a/ui/src/visualizations/code-expertise/help.js b/ui/src/visualizations/code-expertise/help.js
index f595ff8d..7668af7b 100644
--- a/ui/src/visualizations/code-expertise/help.js
+++ b/ui/src/visualizations/code-expertise/help.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default () => (
   <div className={'box' + ' ' + styles.help}>
diff --git a/ui/src/visualizations/code-expertise/styles.scss b/ui/src/visualizations/code-expertise/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/code-expertise/styles.scss
rename to ui/src/visualizations/code-expertise/styles.module.scss
diff --git a/ui/src/visualizations/code-ownership/chart/index.js b/ui/src/visualizations/code-ownership/chart/index.js
index fc35b38f..2840487a 100644
--- a/ui/src/visualizations/code-ownership/chart/index.js
+++ b/ui/src/visualizations/code-ownership/chart/index.js
@@ -2,7 +2,7 @@
 
 import { useSelector } from 'react-redux';
 import StackedAreaChart from '../../../components/StackedAreaChart';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import * as d3 from 'd3';
 import { useState, useEffect } from 'react';
 import _ from 'lodash';
diff --git a/ui/src/visualizations/code-ownership/config/index.js b/ui/src/visualizations/code-ownership/config/index.js
index 4445a8eb..103b2d1d 100644
--- a/ui/src/visualizations/code-ownership/config/index.js
+++ b/ui/src/visualizations/code-ownership/config/index.js
@@ -4,11 +4,11 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import TabCombo from '../../../components/TabCombo';
-import Filepicker from '../../../components/Filepicker/index.js';
-import styles from '../styles.scss';
+import Filepicker from '../../../components/Filepicker/index';
+import styles from '../styles.module.scss';
 import { setMode, setCurrentBranch, setActiveFiles } from '../sagas';
-import { getBranches, getFilenamesForBranch } from '../sagas/helper.js';
-import { ownershipDataForMergedAuthors } from '../../../components/Filepicker/utils.js';
+import { getBranches, getFilenamesForBranch } from '../sagas/helper';
+import { ownershipDataForMergedAuthors } from '../../../components/Filepicker/utils';
 
 export default () => {
   //global state from redux store
diff --git a/ui/src/visualizations/code-ownership/help.js b/ui/src/visualizations/code-ownership/help.js
index e996e407..a57451b8 100644
--- a/ui/src/visualizations/code-ownership/help.js
+++ b/ui/src/visualizations/code-ownership/help.js
@@ -2,7 +2,7 @@
 
 import cx from 'classnames';
 
-import styles from '../../styles/styles.scss';
+import styles from '../../styles/styles.module.scss';
 
 export default () => (
   <div className={cx('box', styles.help)}>
diff --git a/ui/src/visualizations/code-ownership/styles.scss b/ui/src/visualizations/code-ownership/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/code-ownership/styles.scss
rename to ui/src/visualizations/code-ownership/styles.module.scss
diff --git a/ui/src/visualizations/dashboard/components/visualizationSelector/visualizationSelector.js b/ui/src/visualizations/dashboard/components/visualizationSelector/visualizationSelector.js
index 75c5b776..6f991455 100644
--- a/ui/src/visualizations/dashboard/components/visualizationSelector/visualizationSelector.js
+++ b/ui/src/visualizations/dashboard/components/visualizationSelector/visualizationSelector.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import styles from './visualizationSelector.scss';
+import styles from './visualizationSelector.module.scss';
 
 export default (props) => {
   return (
diff --git a/ui/src/visualizations/dashboard/components/visualizationSelector/visualizationSelector.scss b/ui/src/visualizations/dashboard/components/visualizationSelector/visualizationSelector.module.scss
similarity index 100%
rename from ui/src/visualizations/dashboard/components/visualizationSelector/visualizationSelector.scss
rename to ui/src/visualizations/dashboard/components/visualizationSelector/visualizationSelector.module.scss
diff --git a/ui/src/visualizations/dashboard/config.js b/ui/src/visualizations/dashboard/config.js
index 0fc50235..9c324073 100644
--- a/ui/src/visualizations/dashboard/config.js
+++ b/ui/src/visualizations/dashboard/config.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { useSelector } from 'react-redux';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import visualizationRegistry from './visualizationRegistry';
 
 export default () => {
diff --git a/ui/src/visualizations/dashboard/dashboard/index.js b/ui/src/visualizations/dashboard/dashboard/index.js
index aa3ed788..2921d036 100644
--- a/ui/src/visualizations/dashboard/dashboard/index.js
+++ b/ui/src/visualizations/dashboard/dashboard/index.js
@@ -11,8 +11,8 @@ const DEFAULT_DASHBOARD = {
 };
 
 import React, { useEffect, useState } from 'react';
-import styles from '../styles.scss';
-import dashboardStyles from '../styles/dashboard.scss';
+import styles from '../styles.module.scss';
+import dashboardStyles from '../styles/dashboard.module.scss';
 import VisualizationSelector from '../components/visualizationSelector/visualizationSelector';
 import visualizationRegistry from '../visualizationRegistry';
 
diff --git a/ui/src/visualizations/dashboard/help.js b/ui/src/visualizations/dashboard/help.js
index 0db6309f..e02f3d93 100644
--- a/ui/src/visualizations/dashboard/help.js
+++ b/ui/src/visualizations/dashboard/help.js
@@ -2,8 +2,8 @@
 
 import cx from 'classnames';
 
-import styles from '../../styles/styles.scss';
-import helpStyles from './styles/help.scss';
+import styles from '../../styles/styles.module.scss';
+import helpStyles from './styles/help.module.scss';
 import settingsIcon from './assets/settings.svg';
 import filterIcon from './assets/filter.svg';
 import React from 'react';
diff --git a/ui/src/visualizations/dashboard/styles.scss b/ui/src/visualizations/dashboard/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/dashboard/styles.scss
rename to ui/src/visualizations/dashboard/styles.module.scss
diff --git a/ui/src/visualizations/dashboard/styles/dashboard.scss b/ui/src/visualizations/dashboard/styles/dashboard.module.scss
similarity index 100%
rename from ui/src/visualizations/dashboard/styles/dashboard.scss
rename to ui/src/visualizations/dashboard/styles/dashboard.module.scss
diff --git a/ui/src/visualizations/dashboard/styles/help.scss b/ui/src/visualizations/dashboard/styles/help.module.scss
similarity index 100%
rename from ui/src/visualizations/dashboard/styles/help.scss
rename to ui/src/visualizations/dashboard/styles/help.module.scss
diff --git a/ui/src/visualizations/dataExport/config.js b/ui/src/visualizations/dataExport/config.js
index a7dc3fd7..1f140244 100644
--- a/ui/src/visualizations/dataExport/config.js
+++ b/ui/src/visualizations/dataExport/config.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   const dashboardState = state.visualizations.export.state;
diff --git a/ui/src/visualizations/dataExport/dataExport/dataExport.js b/ui/src/visualizations/dataExport/dataExport/dataExport.js
index 6e512491..a28c472d 100644
--- a/ui/src/visualizations/dataExport/dataExport/dataExport.js
+++ b/ui/src/visualizations/dataExport/dataExport/dataExport.js
@@ -1,8 +1,8 @@
 'use strict';
 
 import React from 'react';
-import styles from '../styles.scss';
-import dataExportStyles from '../styles/dataExport.scss';
+import styles from '../styles.module.scss';
+import dataExportStyles from '../styles/dataExport.module.scss';
 import GetData from './helper/getData';
 import viewIcon from '../assets/viewIcon.svg';
 import downloadIcon from '../assets/downloadIcon.svg';
diff --git a/ui/src/visualizations/dataExport/help.js b/ui/src/visualizations/dataExport/help.js
index 8bea6c35..d96b5ef6 100644
--- a/ui/src/visualizations/dataExport/help.js
+++ b/ui/src/visualizations/dataExport/help.js
@@ -2,6 +2,6 @@
 
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 export default () => <div className={cx('box', styles.help)}></div>;
diff --git a/ui/src/visualizations/dataExport/styles.scss b/ui/src/visualizations/dataExport/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/dataExport/styles.scss
rename to ui/src/visualizations/dataExport/styles.module.scss
diff --git a/ui/src/visualizations/dataExport/styles/dataExport.scss b/ui/src/visualizations/dataExport/styles/dataExport.module.scss
similarity index 100%
rename from ui/src/visualizations/dataExport/styles/dataExport.scss
rename to ui/src/visualizations/dataExport/styles/dataExport.module.scss
diff --git a/ui/src/visualizations/distribution-dials/chart/chart.js b/ui/src/visualizations/distribution-dials/chart/chart.js
index 2601051e..9c74f65d 100644
--- a/ui/src/visualizations/distribution-dials/chart/chart.js
+++ b/ui/src/visualizations/distribution-dials/chart/chart.js
@@ -8,7 +8,7 @@ import OffsetGroup from '../../../components/svg/OffsetGroup.js';
 import ChartContainer from '../../../components/svg/ChartContainer.js';
 import * as zoomUtils from '../../../utils/zoom.js';
 import * as d3 from 'd3';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import StackedDial from './stackedDial.js';
 import {
   getAngle,
diff --git a/ui/src/visualizations/distribution-dials/chart/index.js b/ui/src/visualizations/distribution-dials/chart/index.js
index 1b1799ab..b71b636a 100644
--- a/ui/src/visualizations/distribution-dials/chart/index.js
+++ b/ui/src/visualizations/distribution-dials/chart/index.js
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import _ from 'lodash';
 import Chart from './chart';
 
diff --git a/ui/src/visualizations/distribution-dials/config/index.js b/ui/src/visualizations/distribution-dials/config/index.js
index d013f7ac..4440dca9 100644
--- a/ui/src/visualizations/distribution-dials/config/index.js
+++ b/ui/src/visualizations/distribution-dials/config/index.js
@@ -9,7 +9,7 @@ import {
   setSelectLayers,
   setSplitLayers,
 } from '../sagas';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import DragAndDropList from '../../../components/DragAndDropList/dragAndDropList';
 
 export default () => {
diff --git a/ui/src/visualizations/distribution-dials/styles.scss b/ui/src/visualizations/distribution-dials/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/distribution-dials/styles.scss
rename to ui/src/visualizations/distribution-dials/styles.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/chart/chart.js b/ui/src/visualizations/legacy/code-hotspots/chart/chart.js
index 76dd5e0b..48f1bbdd 100644
--- a/ui/src/visualizations/legacy/code-hotspots/chart/chart.js
+++ b/ui/src/visualizations/legacy/code-hotspots/chart/chart.js
@@ -5,9 +5,9 @@ import CodeMirror from '@uiw/react-codemirror';
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { lineNumbers } from '@codemirror/view';
 import { Compartment } from '@codemirror/state';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 
-import '../css/codeMirror.css';
+import '../css/codeMirror.module.css';
 import vcsData from './helper/vcsData';
 import chartUpdater from './charts/chartUpdater';
 import Loading from './helper/loading';
@@ -17,7 +17,7 @@ import BackgroundRefreshIndicator from '../components/backgroundRefreshIndicator
 import VisualizationSelector from '../components/visualizationSelector/visualizationSelector';
 import SearchBar from '../components/searchBar/searchBar';
 import searchAlgorithm from '../components/searchBar/searchAlgorithm';
-import chartStyles from './chart.scss';
+import chartStyles from './chart.module.scss';
 import Database from '../../../../database/database';
 import SourceCodeRequest from './helper/sourceCodeRequest';
 import GitLabConfig from '../../../../../config/gitlab.json';
diff --git a/ui/src/visualizations/legacy/code-hotspots/chart/chart.scss b/ui/src/visualizations/legacy/code-hotspots/chart/chart.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/chart/chart.scss
rename to ui/src/visualizations/legacy/code-hotspots/chart/chart.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/chart/charts/subCharts/heatmapChartGeneration.js b/ui/src/visualizations/legacy/code-hotspots/chart/charts/subCharts/heatmapChartGeneration.js
index 9b431fb3..ec3da594 100644
--- a/ui/src/visualizations/legacy/code-hotspots/chart/charts/subCharts/heatmapChartGeneration.js
+++ b/ui/src/visualizations/legacy/code-hotspots/chart/charts/subCharts/heatmapChartGeneration.js
@@ -2,7 +2,7 @@ import * as d3 from 'd3';
 import * as d3Collection from 'd3-collection';
 import ColorMixer from '../../helper/colorMixer';
 import Loading from '../../helper/loading';
-import styles from '../../../styles.scss';
+import styles from '../../../styles.module.scss';
 
 const HEATMAP_LOW_COLOR = '#ABEBC6';
 const HEATMAP_HIGH_COLOR = '#E6B0AA';
diff --git a/ui/src/visualizations/legacy/code-hotspots/chart/helper/loading.js b/ui/src/visualizations/legacy/code-hotspots/chart/helper/loading.js
index 4119b8b4..d8f246a9 100644
--- a/ui/src/visualizations/legacy/code-hotspots/chart/helper/loading.js
+++ b/ui/src/visualizations/legacy/code-hotspots/chart/helper/loading.js
@@ -1,5 +1,5 @@
 import * as d3 from 'd3';
-import loadingStyles from '../../css/loading.scss';
+import loadingStyles from '../../css/loading.module.scss';
 
 export default class Loading {
   static insert() {
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/apiKeyEntry/apiKeyEntry.js b/ui/src/visualizations/legacy/code-hotspots/components/apiKeyEntry/apiKeyEntry.js
index 824f50db..e73d9ab0 100644
--- a/ui/src/visualizations/legacy/code-hotspots/components/apiKeyEntry/apiKeyEntry.js
+++ b/ui/src/visualizations/legacy/code-hotspots/components/apiKeyEntry/apiKeyEntry.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import styles from '../../styles.scss';
-import apiKeyEntryStyles from './apiKeyEntry.scss';
+import styles from '../../styles.module.scss';
+import apiKeyEntryStyles from './apiKeyEntry.module.scss';
 
 export default class ApiKeyEntry extends React.PureComponent {
   constructor(props) {
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/apiKeyEntry/apiKeyEntry.scss b/ui/src/visualizations/legacy/code-hotspots/components/apiKeyEntry/apiKeyEntry.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/components/apiKeyEntry/apiKeyEntry.scss
rename to ui/src/visualizations/legacy/code-hotspots/components/apiKeyEntry/apiKeyEntry.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/backgroundRefreshIndicator/backgroundRefreshIndicator.js b/ui/src/visualizations/legacy/code-hotspots/components/backgroundRefreshIndicator/backgroundRefreshIndicator.js
index d46f0f08..5807c286 100644
--- a/ui/src/visualizations/legacy/code-hotspots/components/backgroundRefreshIndicator/backgroundRefreshIndicator.js
+++ b/ui/src/visualizations/legacy/code-hotspots/components/backgroundRefreshIndicator/backgroundRefreshIndicator.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import loadingStyles from '../../css/loading.scss';
+import loadingStyles from '../../css/loading.module.scss';
 import 'bulma-switch';
 
 export default class BackgroundRefreshIndicator extends React.PureComponent {
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.js b/ui/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.js
index d220f571..b38a54c6 100644
--- a/ui/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.js
+++ b/ui/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './fileBrowser.scss';
+import styles from './fileBrowser.module.scss';
 import { folder_white, folder_open_white } from '../../images/icons';
 import SearchBar from '../searchBar/searchBar';
 
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.scss b/ui/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.scss
rename to ui/src/visualizations/legacy/code-hotspots/components/fileBrowser/fileBrowser.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/searchBar/searchBar.js b/ui/src/visualizations/legacy/code-hotspots/components/searchBar/searchBar.js
index 954fe2e9..a7a8686b 100644
--- a/ui/src/visualizations/legacy/code-hotspots/components/searchBar/searchBar.js
+++ b/ui/src/visualizations/legacy/code-hotspots/components/searchBar/searchBar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './searchBar.scss';
+import styles from './searchBar.module.scss';
 import SearchAlgorithm from './searchAlgorithm';
 import SearchTextHighlighting from './searchTextHighlighting';
 
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/searchBar/searchBar.scss b/ui/src/visualizations/legacy/code-hotspots/components/searchBar/searchBar.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/components/searchBar/searchBar.scss
rename to ui/src/visualizations/legacy/code-hotspots/components/searchBar/searchBar.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/settings/settings.js b/ui/src/visualizations/legacy/code-hotspots/components/settings/settings.js
index 5f330fe4..6da20791 100644
--- a/ui/src/visualizations/legacy/code-hotspots/components/settings/settings.js
+++ b/ui/src/visualizations/legacy/code-hotspots/components/settings/settings.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import settingsStyles from './settings.scss';
-import styles from '../../styles.scss';
+import settingsStyles from './settings.module.scss';
+import styles from '../../styles.module.scss';
 import { settings_black, settings_white } from '../../images/icons';
 import DateRangeFilter from '../../../../../components/DateRangeFilter/dateRangeFilter';
 import 'bulma-switch';
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/settings/settings.scss b/ui/src/visualizations/legacy/code-hotspots/components/settings/settings.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/components/settings/settings.scss
rename to ui/src/visualizations/legacy/code-hotspots/components/settings/settings.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/visualizationSelector/visualizationSelector.js b/ui/src/visualizations/legacy/code-hotspots/components/visualizationSelector/visualizationSelector.js
index de99126f..feeb7200 100644
--- a/ui/src/visualizations/legacy/code-hotspots/components/visualizationSelector/visualizationSelector.js
+++ b/ui/src/visualizations/legacy/code-hotspots/components/visualizationSelector/visualizationSelector.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import styles from '../../styles.scss';
-import visualizationSelectorStyles from './visualizationSelector.scss';
+import styles from '../../styles.module.scss';
+import visualizationSelectorStyles from './visualizationSelector.module.scss';
 
 export default class VisualizationSelector extends React.PureComponent {
   constructor(props) {
diff --git a/ui/src/visualizations/legacy/code-hotspots/components/visualizationSelector/visualizationSelector.scss b/ui/src/visualizations/legacy/code-hotspots/components/visualizationSelector/visualizationSelector.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/components/visualizationSelector/visualizationSelector.scss
rename to ui/src/visualizations/legacy/code-hotspots/components/visualizationSelector/visualizationSelector.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/config/config.js b/ui/src/visualizations/legacy/code-hotspots/config/config.js
index 91b9ef7a..e6f8b552 100644
--- a/ui/src/visualizations/legacy/code-hotspots/config/config.js
+++ b/ui/src/visualizations/legacy/code-hotspots/config/config.js
@@ -3,7 +3,7 @@
 import { connect } from 'react-redux';
 
 import { setActiveFile, setActivePath, setActiveBranch } from '../sagas';
-import styles from '../styles.scss';
+import styles from '../styles.module.scss';
 import FileBrowser from '../components/fileBrowser/fileBrowser';
 
 const mapStateToProps = (state /*, ownProps*/) => {
diff --git a/ui/src/visualizations/legacy/code-hotspots/css/codeMirror.css b/ui/src/visualizations/legacy/code-hotspots/css/codeMirror.module.css
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/css/codeMirror.css
rename to ui/src/visualizations/legacy/code-hotspots/css/codeMirror.module.css
diff --git a/ui/src/visualizations/legacy/code-hotspots/css/help.scss b/ui/src/visualizations/legacy/code-hotspots/css/help.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/css/help.scss
rename to ui/src/visualizations/legacy/code-hotspots/css/help.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/css/loading.scss b/ui/src/visualizations/legacy/code-hotspots/css/loading.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/css/loading.scss
rename to ui/src/visualizations/legacy/code-hotspots/css/loading.module.scss
diff --git a/ui/src/visualizations/legacy/code-hotspots/help.js b/ui/src/visualizations/legacy/code-hotspots/help.js
index 6dbea205..b69e9e3f 100644
--- a/ui/src/visualizations/legacy/code-hotspots/help.js
+++ b/ui/src/visualizations/legacy/code-hotspots/help.js
@@ -2,8 +2,8 @@
 
 import cx from 'classnames';
 
-import styles from '../../../styles/styles.scss';
-import helpStyles from './css/help.scss';
+import styles from '../../../styles/styles.module.scss';
+import helpStyles from './css/help.module.scss';
 
 function highlightElementByID(id, highlimit = true) {
   try {
diff --git a/ui/src/visualizations/legacy/code-hotspots/styles.scss b/ui/src/visualizations/legacy/code-hotspots/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/code-hotspots/styles.scss
rename to ui/src/visualizations/legacy/code-hotspots/styles.module.scss
diff --git a/ui/src/visualizations/legacy/issue-impact/CommitMarker.js b/ui/src/visualizations/legacy/issue-impact/CommitMarker.js
index 56f890f3..648c4a30 100644
--- a/ui/src/visualizations/legacy/issue-impact/CommitMarker.js
+++ b/ui/src/visualizations/legacy/issue-impact/CommitMarker.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import styles from './CommitMarker.scss';
+import styles from './CommitMarker.module.scss';
 
 export default class CommitMarker extends React.Component {
   constructor(props) {
diff --git a/ui/src/visualizations/legacy/issue-impact/CommitMarker.scss b/ui/src/visualizations/legacy/issue-impact/CommitMarker.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/issue-impact/CommitMarker.scss
rename to ui/src/visualizations/legacy/issue-impact/CommitMarker.module.scss
diff --git a/ui/src/visualizations/legacy/issue-impact/chart.js b/ui/src/visualizations/legacy/issue-impact/chart.js
index cd4199f5..8e74ccc0 100755
--- a/ui/src/visualizations/legacy/issue-impact/chart.js
+++ b/ui/src/visualizations/legacy/issue-impact/chart.js
@@ -12,7 +12,7 @@ import GlobalZoomableSvg from '../../../components/svg/GlobalZoomableSvg.js';
 import OffsetGroup from '../../../components/svg/OffsetGroup.js';
 import Axis from './Axis.js';
 import CommitMarker from './CommitMarker.js';
-import hunkTransitions from './hunkTransitions.scss';
+import hunkTransitions from './hunkTransitions.module.scss';
 import Asterisk from '../../../components/svg/Asterisk.js';
 import X from '../../../components/svg/X.js';
 import ChartContainer from '../../../components/svg/ChartContainer.js';
@@ -20,7 +20,7 @@ import * as zoomUtils from '../../../utils/zoom.js';
 import SemiCircleScale from './SemiCircleScale.js';
 
 import { getChartColors, parseTime, shortenPath } from '../../../utils';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const CHART_FILL_RATIO = 0.45;
 const MINIMUM_VACANT_SEMICIRCLE_SHARE = 0.2;
diff --git a/ui/src/visualizations/legacy/issue-impact/config.js b/ui/src/visualizations/legacy/issue-impact/config.js
index 2481646d..4acdbfac 100755
--- a/ui/src/visualizations/legacy/issue-impact/config.js
+++ b/ui/src/visualizations/legacy/issue-impact/config.js
@@ -7,7 +7,7 @@ import { inflect } from 'inflection';
 import { setActiveIssue, setFilteredCommits, setFilteredFiles } from './sagas';
 import SearchBox from '../../../components/SearchBox';
 import FilterBox from '../../../components/FilterBox';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import Database from '../../../database/database';
 
diff --git a/ui/src/visualizations/legacy/issue-impact/help.js b/ui/src/visualizations/legacy/issue-impact/help.js
index 9590ea7b..8a5e0646 100755
--- a/ui/src/visualizations/legacy/issue-impact/help.js
+++ b/ui/src/visualizations/legacy/issue-impact/help.js
@@ -2,7 +2,7 @@
 
 import cx from 'classnames';
 
-import styles from '../../../styles/styles.scss';
+import styles from '../../../styles/styles.module.scss';
 
 export default () => (
   <div className={cx('box', styles.help)}>
diff --git a/ui/src/visualizations/legacy/issue-impact/hunkTransitions.scss b/ui/src/visualizations/legacy/issue-impact/hunkTransitions.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/issue-impact/hunkTransitions.scss
rename to ui/src/visualizations/legacy/issue-impact/hunkTransitions.module.scss
diff --git a/ui/src/visualizations/legacy/issue-impact/styles.scss b/ui/src/visualizations/legacy/issue-impact/styles.module.scss
similarity index 100%
rename from ui/src/visualizations/legacy/issue-impact/styles.scss
rename to ui/src/visualizations/legacy/issue-impact/styles.module.scss