diff --git a/packages/app/app/App.js b/packages/app/app/App.js
index a46f75d732..d494a0d119 100644
--- a/packages/app/app/App.js
+++ b/packages/app/app/App.js
@@ -22,8 +22,8 @@ import * as NuclearConfigActions from './actions/nuclear/configuration';
 import * as DownloadActions from './actions/downloads';
 
 import './app.global.scss';
-import styles from './styles.scss';
-import compact from './compact.scss';
+import * as styles from './styles.scss';
+import * as compact from './compact.scss';
 
 import Navbar from './components/Navbar';
 import VerticalPanel from './components/VerticalPanel';
diff --git a/packages/app/app/components/AlbumCover/AlbumInfo/index.tsx b/packages/app/app/components/AlbumCover/AlbumInfo/index.tsx
index 7a6c31a7bc..6c1103dc80 100644
--- a/packages/app/app/components/AlbumCover/AlbumInfo/index.tsx
+++ b/packages/app/app/components/AlbumCover/AlbumInfo/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type AlbumInfoProps = {
   nameOnly: boolean;
diff --git a/packages/app/app/components/AlbumCover/AlbumOverlay/index.tsx b/packages/app/app/components/AlbumCover/AlbumOverlay/index.tsx
index 610e8532a5..28976054d3 100644
--- a/packages/app/app/components/AlbumCover/AlbumOverlay/index.tsx
+++ b/packages/app/app/components/AlbumCover/AlbumOverlay/index.tsx
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome';
 
 import Spacer from '../../Spacer';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type AlbumOverlayProps = {
   handlePlay: React.MouseEventHandler;
diff --git a/packages/app/app/components/AlbumCover/index.tsx b/packages/app/app/components/AlbumCover/index.tsx
index 82b97eb848..5701718b9c 100644
--- a/packages/app/app/components/AlbumCover/index.tsx
+++ b/packages/app/app/components/AlbumCover/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 import AlbumInfo from './AlbumInfo';
 import AlbumOverlay from './AlbumOverlay';
diff --git a/packages/app/app/components/AlbumView/index.tsx b/packages/app/app/components/AlbumView/index.tsx
index 0a22cb6319..e317364133 100644
--- a/packages/app/app/components/AlbumView/index.tsx
+++ b/packages/app/app/components/AlbumView/index.tsx
@@ -4,7 +4,7 @@ import _ from 'lodash';
 import { Dimmer, Icon, Loader, Dropdown } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { Loader as NuclearLoader, ContextPopup, PopupButton, PopupDropdown, InputDialog } from '@nuclear/ui';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import TrackTableContainer from '../../containers/TrackTableContainer';
 import { AlbumDetailsState } from '../../reducers/search';
diff --git a/packages/app/app/components/ArtistView/ArtistHeader/index.tsx b/packages/app/app/components/ArtistView/ArtistHeader/index.tsx
index db341a0845..7646415937 100644
--- a/packages/app/app/components/ArtistView/ArtistHeader/index.tsx
+++ b/packages/app/app/components/ArtistView/ArtistHeader/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import ArtistTags from '../ArtistTags';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 import { ArtistDetailsState } from '../../../reducers/search';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import { Icon } from 'semantic-ui-react';
diff --git a/packages/app/app/components/ArtistView/ArtistTags/index.tsx b/packages/app/app/components/ArtistView/ArtistTags/index.tsx
index 740fedbbf8..05bce29820 100644
--- a/packages/app/app/components/ArtistView/ArtistTags/index.tsx
+++ b/packages/app/app/components/ArtistView/ArtistTags/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type ArtistTagsProps = {
   tags: string[];
diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.tsx b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
index f7fda12676..8ba652007c 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/index.tsx
+++ b/packages/app/app/components/ArtistView/PopularTracks/index.tsx
@@ -12,7 +12,7 @@ import { Track } from '@nuclear/ui/lib/types';
 
 import trackRowStyles from '../../TrackRow/styles.scss';
 import TrackTableContainer from '../../../containers/TrackTableContainer';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type AddAllButtonProps = {
   handleAddAll: React.MouseEventHandler;
diff --git a/packages/app/app/components/ArtistView/SimilarArtists/index.tsx b/packages/app/app/components/ArtistView/SimilarArtists/index.tsx
index 2196b41c5e..d28972cc24 100644
--- a/packages/app/app/components/ArtistView/SimilarArtists/index.tsx
+++ b/packages/app/app/components/ArtistView/SimilarArtists/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 
 type SimilarArtistsProps = {
diff --git a/packages/app/app/components/ArtistView/index.tsx b/packages/app/app/components/ArtistView/index.tsx
index 4a8e9159b0..43a3da2238 100644
--- a/packages/app/app/components/ArtistView/index.tsx
+++ b/packages/app/app/components/ArtistView/index.tsx
@@ -8,7 +8,7 @@ import { useHistory } from 'react-router';
 import SimilarArtists from './SimilarArtists';
 import PopularTracks from './PopularTracks';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { ArtistDetailsState } from '../../reducers/search';
 import { SearchResultsAlbum } from '@nuclear/core/src/plugins/plugins.types';
diff --git a/packages/app/app/components/CommandPaletteReminder/index.tsx b/packages/app/app/components/CommandPaletteReminder/index.tsx
index 984032836b..9768974344 100644
--- a/packages/app/app/components/CommandPaletteReminder/index.tsx
+++ b/packages/app/app/components/CommandPaletteReminder/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { isMac } from '../../hooks/usePlatform';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const CommandPaletteReminder = () => {
   const { t } = useTranslation('command-palette');
diff --git a/packages/app/app/components/Dashboard/ChartsTab/index.tsx b/packages/app/app/components/Dashboard/ChartsTab/index.tsx
index 1eaacd5dd6..ba9cfeaf4e 100644
--- a/packages/app/app/components/Dashboard/ChartsTab/index.tsx
+++ b/packages/app/app/components/Dashboard/ChartsTab/index.tsx
@@ -3,7 +3,7 @@ import { Tab } from 'semantic-ui-react';
 import { Track } from '@nuclear/ui/lib/types';
 
 import TrackTableContainer from '../../../containers/TrackTableContainer';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { useTranslation } from 'react-i18next';
 import { InternalTopTrack } from '../../../reducers/dashboard';
 
diff --git a/packages/app/app/components/Dashboard/EditorialsTab/index.tsx b/packages/app/app/components/Dashboard/EditorialsTab/index.tsx
index 4c8f1ecae8..3f1c2f0074 100644
--- a/packages/app/app/components/Dashboard/EditorialsTab/index.tsx
+++ b/packages/app/app/components/Dashboard/EditorialsTab/index.tsx
@@ -5,7 +5,7 @@ import { Tab } from 'semantic-ui-react';
 import { CardsRow } from '@nuclear/ui';
 import { DeezerEditorialCharts } from '@nuclear/core/src/rest/Deezer';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { PromotedArtistsContainer } from '../../../containers/PromotedArtistsContainer';
 
 type EditorialsTabProps = { 
diff --git a/packages/app/app/components/Dashboard/GenresTab/index.tsx b/packages/app/app/components/Dashboard/GenresTab/index.tsx
index 1c27774c87..6b4d726ac5 100644
--- a/packages/app/app/components/Dashboard/GenresTab/index.tsx
+++ b/packages/app/app/components/Dashboard/GenresTab/index.tsx
@@ -4,7 +4,7 @@ import { Tab } from 'semantic-ui-react';
 import _ from 'lodash';
 
 import genreToIcon from './mapGenres';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { LastfmTopTag } from '@nuclear/core/src/rest/Lastfm.types';
 import { useHistory } from 'react-router-dom';
 
diff --git a/packages/app/app/components/Dashboard/index.tsx b/packages/app/app/components/Dashboard/index.tsx
index c521271c1b..884bda71ba 100644
--- a/packages/app/app/components/Dashboard/index.tsx
+++ b/packages/app/app/components/Dashboard/index.tsx
@@ -6,7 +6,7 @@ import { Redirect, useHistory } from 'react-router-dom';
 import ChartsTab from './ChartsTab';
 import GenresTab from './GenresTab';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { DashboardReducerState } from '../../reducers/dashboard';
 import EditorialsTab from './EditorialsTab';
 
diff --git a/packages/app/app/components/Downloads/DownloadsHeader/index.tsx b/packages/app/app/components/Downloads/DownloadsHeader/index.tsx
index ac01d4e45f..e24d24f250 100644
--- a/packages/app/app/components/Downloads/DownloadsHeader/index.tsx
+++ b/packages/app/app/components/Downloads/DownloadsHeader/index.tsx
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next';
 
 import { setStringOption } from '../../../actions/settings';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { app, dialog } from 'electron';
 
 type DownloadsHeaderProps = {
diff --git a/packages/app/app/components/Downloads/DownloadsItem/index.tsx b/packages/app/app/components/Downloads/DownloadsItem/index.tsx
index 39625dffe9..c3db28fffd 100644
--- a/packages/app/app/components/Downloads/DownloadsItem/index.tsx
+++ b/packages/app/app/components/Downloads/DownloadsItem/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Icon, SemanticICONS, Table } from 'semantic-ui-react';
 import _ from 'lodash';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { Download } from '@nuclear/ui/lib/types';
 
 type DownloadsItemProps = {
diff --git a/packages/app/app/components/Downloads/DownloadsList/index.tsx b/packages/app/app/components/Downloads/DownloadsList/index.tsx
index e1cc23bd26..980048df27 100644
--- a/packages/app/app/components/Downloads/DownloadsList/index.tsx
+++ b/packages/app/app/components/Downloads/DownloadsList/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Icon, Segment, Table } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import DownloadsItem from '../DownloadsItem';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { Download } from '@nuclear/ui/lib/types';
 
 type DownloadsListProps = {
diff --git a/packages/app/app/components/Downloads/index.tsx b/packages/app/app/components/Downloads/index.tsx
index 64722661e5..6f02f86b6e 100644
--- a/packages/app/app/components/Downloads/index.tsx
+++ b/packages/app/app/components/Downloads/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Header from '../Header';
 import DownloadsList from './DownloadsList';
 import DownloadsHeader from './DownloadsHeader';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { setStringOption } from '../../actions/settings';
 import { Download } from '@nuclear/ui/lib/types';
 
diff --git a/packages/app/app/components/Equalizer/PreAmp/index.tsx b/packages/app/app/components/Equalizer/PreAmp/index.tsx
index 8ab5993c78..ffc8d0f918 100644
--- a/packages/app/app/components/Equalizer/PreAmp/index.tsx
+++ b/packages/app/app/components/Equalizer/PreAmp/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './index.scss';
+import * as styles from './index.scss';
 
 type PreAmpProps = {
   value: number;
diff --git a/packages/app/app/components/Equalizer/index.tsx b/packages/app/app/components/Equalizer/index.tsx
index fe648d2eb3..7969a8f15e 100644
--- a/packages/app/app/components/Equalizer/index.tsx
+++ b/packages/app/app/components/Equalizer/index.tsx
@@ -9,7 +9,7 @@ import { Radio, RadioProps  } from 'semantic-ui-react';
 import PreAmp from './PreAmp';
 import { createChart} from './chart';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const mapGraphValueToData = (value: number) => value - 10;
 const mapDataValueToGraph = (value: number) => value + 10;
diff --git a/packages/app/app/components/EqualizerPresetList/index.tsx b/packages/app/app/components/EqualizerPresetList/index.tsx
index 68473965e7..8ecb4486ed 100644
--- a/packages/app/app/components/EqualizerPresetList/index.tsx
+++ b/packages/app/app/components/EqualizerPresetList/index.tsx
@@ -3,7 +3,7 @@ import { List, Icon } from 'semantic-ui-react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type EqualizerPresetListProps ={
   presets: Array<Preset>;
diff --git a/packages/app/app/components/FavoriteAlbumsView/index.tsx b/packages/app/app/components/FavoriteAlbumsView/index.tsx
index d67d91782b..e17f78393b 100644
--- a/packages/app/app/components/FavoriteAlbumsView/index.tsx
+++ b/packages/app/app/components/FavoriteAlbumsView/index.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import AlbumList from '../AlbumList';
 import Header from '../Header';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type Tracklist = { 
   uuid:string;
diff --git a/packages/app/app/components/FavoriteArtistsView/index.tsx b/packages/app/app/components/FavoriteArtistsView/index.tsx
index 2bea672046..0e9e1424b5 100644
--- a/packages/app/app/components/FavoriteArtistsView/index.tsx
+++ b/packages/app/app/components/FavoriteArtistsView/index.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import ArtistList from '../ArtistList';
 import Header from '../Header';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const EmptyState = () => {
   const { t } = useTranslation('favorite-artists');
diff --git a/packages/app/app/components/FavoriteTracksView/index.tsx b/packages/app/app/components/FavoriteTracksView/index.tsx
index b1370066a0..2bea151eb3 100644
--- a/packages/app/app/components/FavoriteTracksView/index.tsx
+++ b/packages/app/app/components/FavoriteTracksView/index.tsx
@@ -7,7 +7,7 @@ import { Track } from '@nuclear/core';
 
 import TrackTableContainer from '../../containers/TrackTableContainer';
 import Header from '../Header';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { Button, Tooltip } from '@nuclear/ui';
 
 export const EmptyState = () => {
diff --git a/packages/app/app/components/Header/index.tsx b/packages/app/app/components/Header/index.tsx
index 37d90d8d85..32acee087b 100644
--- a/packages/app/app/components/Header/index.tsx
+++ b/packages/app/app/components/Header/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type HeaderProps={
   children: React.ReactNode;
diff --git a/packages/app/app/components/HelpButton/index.tsx b/packages/app/app/components/HelpButton/index.tsx
index 56545417aa..b45c01c813 100644
--- a/packages/app/app/components/HelpButton/index.tsx
+++ b/packages/app/app/components/HelpButton/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type HelpButtonProps = {
   onClick: () => void;
diff --git a/packages/app/app/components/HelpModal/Contributors/index.tsx b/packages/app/app/components/HelpModal/Contributors/index.tsx
index cb530a32ba..5de1a515f5 100644
--- a/packages/app/app/components/HelpModal/Contributors/index.tsx
+++ b/packages/app/app/components/HelpModal/Contributors/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Loader, Card, Image } from 'semantic-ui-react';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type GithubContributorData = {
   total: number;
@@ -60,7 +60,7 @@ const Contributors: React.FC<ContributorProps> = ({
               src={contributor.author?.avatar_url}
             />
             <Card.Header>{contributor.author?.login}</Card.Header>
-            <Card.Meta className={styles.meta_text}>
+            <Card.Meta>
               {contributor.author?.html_url}
             </Card.Meta>
             <Card.Description>
diff --git a/packages/app/app/components/HelpModal/index.tsx b/packages/app/app/components/HelpModal/index.tsx
index 3ef410450e..24823e1a51 100644
--- a/packages/app/app/components/HelpModal/index.tsx
+++ b/packages/app/app/components/HelpModal/index.tsx
@@ -10,7 +10,7 @@ import { agplDisclaimer } from './const';
 
 import logoImg from '../../../resources/media/logo_full_light.png';
 import mastodonImg from '../../../resources/media/mastodon.svg';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type HelpModalProps = {
   githubContrib: ContributorState;
@@ -88,7 +88,7 @@ const HelpModal: React.FC<HelpModalProps> = ({
           />
           <div
             data-testid='mastodon-link'
-            className={cx(styles.mastodon, styles.icon)}
+            className={styles.mastodon}
             onClick={handleMastodonClick}
             dangerouslySetInnerHTML={{ __html: mastodonImg }}
           />
diff --git a/packages/app/app/components/LibraryView/EmptyState/index.js b/packages/app/app/components/LibraryView/EmptyState/index.js
index de595d2c6c..23d119d0d7 100644
--- a/packages/app/app/components/LibraryView/EmptyState/index.js
+++ b/packages/app/app/components/LibraryView/EmptyState/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export default () => {
   const { t } = useTranslation('library');
diff --git a/packages/app/app/components/LibraryView/LibraryFolders/index.js b/packages/app/app/components/LibraryView/LibraryFolders/index.js
index dfb34b2f72..ba84018fca 100644
--- a/packages/app/app/components/LibraryView/LibraryFolders/index.js
+++ b/packages/app/app/components/LibraryView/LibraryFolders/index.js
@@ -12,7 +12,7 @@ import {
 import { withTranslation } from 'react-i18next';
 import { compose, withHandlers } from 'recompose';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const LibraryFolders = ({
   openLocalFolderPicker,
@@ -30,7 +30,6 @@ const LibraryFolders = ({
         icon
         inverted
         labelPosition='left'
-        className={styles.add_folder}
         onClick={openLocalFolderPicker}
       >
         <Icon name='folder open' />
@@ -60,7 +59,7 @@ const LibraryFolders = ({
         <List
           divided
           verticalAlign='middle'
-          className={styles.equalizer_list}>
+          className={styles.list}>
           {localFolders.map((folder, idx) => (
             <List.Item key={idx}>
               <List.Content floated='right'>
diff --git a/packages/app/app/components/LibraryView/LibraryFolders/styles.scss b/packages/app/app/components/LibraryView/LibraryFolders/styles.scss
index fe03816cef..48bf409434 100644
--- a/packages/app/app/components/LibraryView/LibraryFolders/styles.scss
+++ b/packages/app/app/components/LibraryView/LibraryFolders/styles.scss
@@ -4,9 +4,6 @@
   padding: 0;
   flex: 0 0 auto;
 
-  .add_folder {
-  }
-
   .control_bar {
     margin: 0;
     padding: 0;
diff --git a/packages/app/app/components/LibraryView/LibraryHeader/index.js b/packages/app/app/components/LibraryView/LibraryHeader/index.js
index 735d5d0d18..cb6a83e9f9 100644
--- a/packages/app/app/components/LibraryView/LibraryHeader/index.js
+++ b/packages/app/app/components/LibraryView/LibraryHeader/index.js
@@ -8,7 +8,7 @@ import { withHandlers, withState, compose } from 'recompose';
 import Header from '../../Header';
 import LibraryFolders from '../LibraryFolders';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const LibraryHeader = ({
   t,
diff --git a/packages/app/app/components/LibraryView/NoSearchResults/index.js b/packages/app/app/components/LibraryView/NoSearchResults/index.js
index 6817dbd546..45cc5b4b6f 100644
--- a/packages/app/app/components/LibraryView/NoSearchResults/index.js
+++ b/packages/app/app/components/LibraryView/NoSearchResults/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export default () => {
   const { t } = useTranslation('library');
diff --git a/packages/app/app/components/LibraryView/index.js b/packages/app/app/components/LibraryView/index.js
index 3d1c87e796..f3cdf45725 100644
--- a/packages/app/app/components/LibraryView/index.js
+++ b/packages/app/app/components/LibraryView/index.js
@@ -7,7 +7,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import EmptyState from './EmptyState';
 import trackRowStyles from '../TrackRow/styles.scss';
-import styles from './index.scss';
+import * as styles from './index.scss';
 import NoSearchResults from './NoSearchResults';
 import LibrarySimpleList from './LibrarySimpleList';
 import LibraryFolderTree from './LibraryFolderTree';
diff --git a/packages/app/app/components/ListeningHistoryView/ListeningHistorySection.tsx b/packages/app/app/components/ListeningHistoryView/ListeningHistorySection.tsx
index 11c47acffe..2f580a09b0 100644
--- a/packages/app/app/components/ListeningHistoryView/ListeningHistorySection.tsx
+++ b/packages/app/app/components/ListeningHistoryView/ListeningHistorySection.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { HistoryTableDate } from '@nuclear/ui';
 import { HistoryTableTrack } from '@nuclear/ui/lib/components/TrackTable/HistoryTable';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import TrackTableContainer from '../../containers/TrackTableContainer';
 import { HistoryTable } from '@nuclear/ui';
 
diff --git a/packages/app/app/components/ListeningHistoryView/index.tsx b/packages/app/app/components/ListeningHistoryView/index.tsx
index 2699a5d648..c9bbf933f9 100644
--- a/packages/app/app/components/ListeningHistoryView/index.tsx
+++ b/packages/app/app/components/ListeningHistoryView/index.tsx
@@ -4,7 +4,7 @@ import { groupBy, map } from 'lodash';
 import { HistoryTableTrack } from '@nuclear/ui/lib/components/TrackTable/HistoryTable';
 
 import { ListeningHistorySection } from './ListeningHistorySection';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import Header from '../Header';
 import { useTranslation } from 'react-i18next';
 import { Button, ConfirmationModal } from '@nuclear/ui';
diff --git a/packages/app/app/components/LyricsView/LyricsHeader/index.tsx b/packages/app/app/components/LyricsView/LyricsHeader/index.tsx
index f71230f56d..6337b12854 100644
--- a/packages/app/app/components/LyricsView/LyricsHeader/index.tsx
+++ b/packages/app/app/components/LyricsView/LyricsHeader/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type LyricsHeaderProps ={
   name : string;
diff --git a/packages/app/app/components/LyricsView/index.tsx b/packages/app/app/components/LyricsView/index.tsx
index 87d248faf7..9e1415bcf7 100644
--- a/packages/app/app/components/LyricsView/index.tsx
+++ b/packages/app/app/components/LyricsView/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import LyricsHeader from './LyricsHeader';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { QueueItem } from '../../reducers/queue';
 import { getTrackArtist } from '@nuclear/ui';
 
diff --git a/packages/app/app/components/MainLayout/index.js b/packages/app/app/components/MainLayout/index.js
index e4106ef2bd..1ae2243c14 100644
--- a/packages/app/app/components/MainLayout/index.js
+++ b/packages/app/app/components/MainLayout/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const MainLayout = ({ className, children }) => (
   <div className={cx(styles.main_layout_container, className)}>
diff --git a/packages/app/app/components/NavButtons/index.tsx b/packages/app/app/components/NavButtons/index.tsx
index a8b973e81a..500d41fe1b 100644
--- a/packages/app/app/components/NavButtons/index.tsx
+++ b/packages/app/app/components/NavButtons/index.tsx
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome';
 import { useHistory } from 'react-router';
 import { History } from 'history';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 
 const NavButtons: React.FC = () => {
diff --git a/packages/app/app/components/Navbar/index.tsx b/packages/app/app/components/Navbar/index.tsx
index e132aa22ec..4409cfc3b3 100644
--- a/packages/app/app/components/Navbar/index.tsx
+++ b/packages/app/app/components/Navbar/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const Navbar: React.FC = ({ children }) => <div className={styles.navbar}>{children}</div>;
 
diff --git a/packages/app/app/components/PlayOptionsControls/index.js b/packages/app/app/components/PlayOptionsControls/index.js
index 27e507d4ea..4f59ec3eaa 100644
--- a/packages/app/app/components/PlayOptionsControls/index.js
+++ b/packages/app/app/components/PlayOptionsControls/index.js
@@ -4,7 +4,7 @@ import FontAwesome from 'react-fontawesome';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import settingsConst from '../../constants/settings';
 
 function renderOptionControl(props, settingName, fontAwesomeName, title) {
diff --git a/packages/app/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.tsx b/packages/app/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.tsx
index db05722566..121f090627 100644
--- a/packages/app/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.tsx
+++ b/packages/app/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.tsx
@@ -6,7 +6,7 @@ import { isArtistObject, Playlist, PlaylistHelper } from '@nuclear/core';
 import { getTrackArtist } from '@nuclear/ui';
 import { Track } from '@nuclear/ui/lib/types';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { normalizeTrack } from '../../../../utils';
 
 export const addTrackToPlaylist = (
@@ -105,7 +105,7 @@ export const QueueMenuMore: React.FC<QueueMenuMoreProps> = ({
         {savePlaylistDialog}
         <Dropdown.Item>
           <Dropdown text={t('playlist-add-queue')} className='left'>
-            <Dropdown.Menu className={cx('left', styles.playlists_menu)}>
+            <Dropdown.Menu className='left'>
               {playlists?.map((playlist, i) => (
                 <Dropdown.Item
                   key={i}
@@ -125,7 +125,7 @@ export const QueueMenuMore: React.FC<QueueMenuMoreProps> = ({
         <Dropdown.Header>{t('header-track')}</Dropdown.Header>
         <Dropdown.Item>
           <Dropdown text={t('playlist-add')} className='left'>
-            <Dropdown.Menu className={cx('left', styles.playlists_menu)}>
+            <Dropdown.Menu className='left'>
               {playlists?.map((playlist, i) => (
                 <Dropdown.Item
                   key={i}
diff --git a/packages/app/app/components/PlayQueue/QueueMenu/index.tsx b/packages/app/app/components/PlayQueue/QueueMenu/index.tsx
index f939d231e9..1d04dc0ae3 100644
--- a/packages/app/app/components/PlayQueue/QueueMenu/index.tsx
+++ b/packages/app/app/components/PlayQueue/QueueMenu/index.tsx
@@ -9,7 +9,7 @@ import settingsConst from '../../../constants/settings';
 import { PlayQueueActions } from '../../../containers/PlayQueueContainer';
 import { QueueItem } from '../../../reducers/queue';
 import { SettingsState } from '../../../reducers/settings';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type QueueMenuProps = {
   addPlaylist: PlayQueueActions['addPlaylist'];
diff --git a/packages/app/app/components/PlayQueue/QueuePopup/index.tsx b/packages/app/app/components/PlayQueue/QueuePopup/index.tsx
index f07569c2f6..a7286f645b 100644
--- a/packages/app/app/components/PlayQueue/QueuePopup/index.tsx
+++ b/packages/app/app/components/PlayQueue/QueuePopup/index.tsx
@@ -9,7 +9,7 @@ import { StreamInfo } from '@nuclear/ui';
 import QueuePopupButtons from '../../../containers/QueuePopupButtons';
 import { QueueItem } from '../../../reducers/queue';
 import * as QueueActions from '../../../actions/queue';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { PluginsState } from '../../../reducers/plugins';
 
 export type QueuePopupProps = {
diff --git a/packages/app/app/components/PlayQueue/index.tsx b/packages/app/app/components/PlayQueue/index.tsx
index acd5e90195..f6a0c9e7ab 100644
--- a/packages/app/app/components/PlayQueue/index.tsx
+++ b/packages/app/app/components/PlayQueue/index.tsx
@@ -20,7 +20,7 @@ import { PlayQueueActions } from '../../containers/PlayQueueContainer';
 import QueuePopupContainer from '../../containers/QueuePopupContainer';
 import { StreamVerificationContainer } from '../../containers/StreamVerificationContainer';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { QueueItemClone } from './QueueItemClone';
 
 type PlayQueueProps = {
@@ -222,7 +222,7 @@ const PlayQueue: React.FC<PlayQueueProps> = ({
         >
           {(droppableProvided, snapshot) => (
             <div
-              className={classnames(styles.play_queue_items, styles.fade_in, {
+              className={classnames(styles.play_queue_items, {
                 [styles.file_dragged_over]: isFileHovered,
                 [styles.track_dragged_over]: snapshot.isDraggingOver
               })}
diff --git a/packages/app/app/components/PlaylistView/index.tsx b/packages/app/app/components/PlaylistView/index.tsx
index a9d783692d..ab6a08a21d 100644
--- a/packages/app/app/components/PlaylistView/index.tsx
+++ b/packages/app/app/components/PlaylistView/index.tsx
@@ -10,7 +10,8 @@ import { Track } from '@nuclear/ui/lib/types';
 
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
+import * as playlistItemStyles from '../Playlists/PlaylistItem/styles.scss';
 import TrackTableContainer from '../../containers/TrackTableContainer';
 
 export type PlaylistViewProps = {
@@ -102,7 +103,7 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
         <div className={styles.playlist_view_info}>
           <div>
             <img
-              className={styles.playlist_thumbnail}
+              className={playlistItemStyles.playlist_thumbnail}
               src={playlist?.tracks?.[0]?.thumbnail ?? artPlaceholder as unknown as string}
             />
           </div>
diff --git a/packages/app/app/components/Playlists/PlaylistItem/index.tsx b/packages/app/app/components/Playlists/PlaylistItem/index.tsx
index 253ce23b8e..f5b390367a 100644
--- a/packages/app/app/components/Playlists/PlaylistItem/index.tsx
+++ b/packages/app/app/components/Playlists/PlaylistItem/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useHistory } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import { Playlist } from '@nuclear/core/src/helpers/playlist/types';
 
diff --git a/packages/app/app/components/Playlists/PlaylistsHeader/index.tsx b/packages/app/app/components/Playlists/PlaylistsHeader/index.tsx
index 0671f781f2..ba6bf5af8a 100644
--- a/packages/app/app/components/Playlists/PlaylistsHeader/index.tsx
+++ b/packages/app/app/components/Playlists/PlaylistsHeader/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, InputDialog, PopupButton } from '@nuclear/ui';
 
 import Header from '../../Header';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { Icon, Popup } from 'semantic-ui-react';
 
 import SpotifyPlaylistImporter from '../../../containers/SpotifyPlaylistImporter/SpotifyPlaylistImporter';
diff --git a/packages/app/app/components/Playlists/index.tsx b/packages/app/app/components/Playlists/index.tsx
index 1dbeac8a18..3cd3945a45 100644
--- a/packages/app/app/components/Playlists/index.tsx
+++ b/packages/app/app/components/Playlists/index.tsx
@@ -10,7 +10,7 @@ import { Playlists as PlaylistsTable } from '@nuclear/ui';
 
 import PlaylistsHeader from './PlaylistsHeader';
 import { reorderPlaylists } from '../../actions/playlists';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const EmptyState = () => {
   const { t } = useTranslation('playlists');
diff --git a/packages/app/app/components/PlaylistsSubMenu/index.js b/packages/app/app/components/PlaylistsSubMenu/index.js
index c185fb24ea..d130090280 100644
--- a/packages/app/app/components/PlaylistsSubMenu/index.js
+++ b/packages/app/app/components/PlaylistsSubMenu/index.js
@@ -5,7 +5,7 @@ import { NavLink } from 'react-router-dom';
 import _ from 'lodash';
 
 import appStyles from '../../styles.scss';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const PlaylistsSubMenu = props => {
   return (
diff --git a/packages/app/app/components/PluginsView/UserPluginsSection/Warning/index.js b/packages/app/app/components/PluginsView/UserPluginsSection/Warning/index.js
index 6712081f1a..79c1adc78d 100644
--- a/packages/app/app/components/PluginsView/UserPluginsSection/Warning/index.js
+++ b/packages/app/app/components/PluginsView/UserPluginsSection/Warning/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon, Message } from 'semantic-ui-react';
 import { withTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const Warning = ({t}) => {
   return (
diff --git a/packages/app/app/components/PluginsView/UserPluginsSection/index.tsx b/packages/app/app/components/PluginsView/UserPluginsSection/index.tsx
index 1c7e0d259e..08c0549f73 100644
--- a/packages/app/app/components/PluginsView/UserPluginsSection/index.tsx
+++ b/packages/app/app/components/PluginsView/UserPluginsSection/index.tsx
@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next';
 import { UserPluginsItem } from '@nuclear/ui';
 
 import Warning from './Warning';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type UserPlugin = {
   path: string;
diff --git a/packages/app/app/components/PluginsView/index.tsx b/packages/app/app/components/PluginsView/index.tsx
index 7073912014..216e2d7214 100644
--- a/packages/app/app/components/PluginsView/index.tsx
+++ b/packages/app/app/components/PluginsView/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import Header from '../Header';
 import UserPluginsSection from './UserPluginsSection';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { useDropdownOptions } from '../../hooks/useDropdownOptions';
 import { PluginsState } from '../../reducers/plugins';
 import { useDispatch } from 'react-redux';
diff --git a/packages/app/app/components/SearchResults/AllResults/index.js b/packages/app/app/components/SearchResults/AllResults/index.js
index 0e7e303966..da94c51403 100644
--- a/packages/app/app/components/SearchResults/AllResults/index.js
+++ b/packages/app/app/components/SearchResults/AllResults/index.js
@@ -7,7 +7,7 @@ import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import PlaylistResults from '../PlaylistResults';
 import TracksResults from '../TracksResults';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { withTranslation } from 'react-i18next';
 
 @withTranslation('search')
diff --git a/packages/app/app/components/SearchResults/PlaylistResults/index.js b/packages/app/app/components/SearchResults/PlaylistResults/index.js
index 8b6a16e66f..40bdff15dd 100644
--- a/packages/app/app/components/SearchResults/PlaylistResults/index.js
+++ b/packages/app/app/components/SearchResults/PlaylistResults/index.js
@@ -6,8 +6,6 @@ import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import _ from 'lodash';
 import { withTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
-
 @withTranslation('search')
 class PlaylistResults extends React.Component {
   constructor(props) {
@@ -33,7 +31,6 @@ class PlaylistResults extends React.Component {
             this.addTrack(track);
           });
       }}
-      className={styles.add_button}
       aria-label={this.props.t('queue-add')}
     >
       <FontAwesome name='plus' /> Add all
diff --git a/packages/app/app/components/SearchResults/PlaylistResults/styles.scss b/packages/app/app/components/SearchResults/PlaylistResults/styles.scss
deleted file mode 100644
index 40f092eaf1..0000000000
--- a/packages/app/app/components/SearchResults/PlaylistResults/styles.scss
+++ /dev/null
@@ -1 +0,0 @@
-.add_button{}
diff --git a/packages/app/app/components/SearchResults/index.js b/packages/app/app/components/SearchResults/index.js
index 6fe51b74bf..26b40fef80 100644
--- a/packages/app/app/components/SearchResults/index.js
+++ b/packages/app/app/components/SearchResults/index.js
@@ -8,7 +8,7 @@ import AllResults from './AllResults';
 import TracksResults from './TracksResults';
 import PlaylistResults from './PlaylistResults';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 @withTranslation('search')
 class SearchResults extends React.Component {
@@ -16,7 +16,7 @@ class SearchResults extends React.Component {
     return (
       <Tab.Pane loading={this.props.unifiedSearchStarted} attached={false}>
         <div className={styles.pane_container}>
-          <div className={styles.row}>
+          <div className='row'>
             <AllResults
               {...this.props}
               albumInfoSearch={this.albumInfoSearch.bind(this)}
diff --git a/packages/app/app/components/Seekbar/index.tsx b/packages/app/app/components/Seekbar/index.tsx
index a058d2038a..3758c741af 100644
--- a/packages/app/app/components/Seekbar/index.tsx
+++ b/packages/app/app/components/Seekbar/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const Seekbar = ({ seek, queue, fill, children }) => {
   const handleClick = useCallback(event => {
diff --git a/packages/app/app/components/Settings/Integrations/LastFmSocialIntegration.tsx b/packages/app/app/components/Settings/Integrations/LastFmSocialIntegration.tsx
index f20b753ac2..0d64ed582c 100644
--- a/packages/app/app/components/Settings/Integrations/LastFmSocialIntegration.tsx
+++ b/packages/app/app/components/Settings/Integrations/LastFmSocialIntegration.tsx
@@ -8,7 +8,7 @@ import ScrobblingReducer from '../../../reducers/scrobbling';
 import Spacer from '../../Spacer';
 import SocialIntegration from '../SocialIntegration';
 
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 type LastFmSocialIntegrationProps = {
   actions: {
diff --git a/packages/app/app/components/Settings/Integrations/MastodonSocialIntegration.tsx b/packages/app/app/components/Settings/Integrations/MastodonSocialIntegration.tsx
index 295ff7b8ef..a7823ada76 100644
--- a/packages/app/app/components/Settings/Integrations/MastodonSocialIntegration.tsx
+++ b/packages/app/app/components/Settings/Integrations/MastodonSocialIntegration.tsx
@@ -6,7 +6,7 @@ import { Button } from '@nuclear/ui';
 import SocialIntegration from '../SocialIntegration';
 import { RootState } from '../../../reducers';
 import MastodonLogo from '../../../../resources/media/mastodon_logo_full.svg';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 import Spacer from '../../Spacer';
 import { useCallback } from 'react';
 
diff --git a/packages/app/app/components/Settings/SocialIntegration/index.tsx b/packages/app/app/components/Settings/SocialIntegration/index.tsx
index 69f5e8213b..7c08e1fa41 100644
--- a/packages/app/app/components/Settings/SocialIntegration/index.tsx
+++ b/packages/app/app/components/Settings/SocialIntegration/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type SocialIntegrationProps = {
   logo: React.ReactElement;
diff --git a/packages/app/app/components/Settings/index.tsx b/packages/app/app/components/Settings/index.tsx
index 71358e05b3..cfc4066c29 100644
--- a/packages/app/app/components/Settings/index.tsx
+++ b/packages/app/app/components/Settings/index.tsx
@@ -11,7 +11,7 @@ import i18n from '@nuclear/i18n';
 import Header from '../Header';
 import Spacer from '../Spacer';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { LastFmSocialIntegration } from './Integrations/LastFmSocialIntegration';
 import { MastodonSocialIntegration } from './Integrations/MastodonSocialIntegration';
 import { RootState } from '../../reducers';
@@ -95,7 +95,6 @@ const Settings: React.FC<SettingsProps> = ({
     <Dropdown
       search
       selection
-      className={styles.list_option}
       placeholder={t(placeholder)}
       value={i18n.language}
       options={options}
diff --git a/packages/app/app/components/SidebarBrand/index.tsx b/packages/app/app/components/SidebarBrand/index.tsx
index 40252a04dd..199ba0ffac 100644
--- a/packages/app/app/components/SidebarBrand/index.tsx
+++ b/packages/app/app/components/SidebarBrand/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 import logoIcon from '../../../resources/media/512x512.png';
 import { Tooltip } from '@nuclear/ui';
diff --git a/packages/app/app/components/SidebarMenu/SidebarMenuCategoryHeader/index.tsx b/packages/app/app/components/SidebarMenu/SidebarMenuCategoryHeader/index.tsx
index 38859a27a1..24a663dd17 100644
--- a/packages/app/app/components/SidebarMenu/SidebarMenuCategoryHeader/index.tsx
+++ b/packages/app/app/components/SidebarMenu/SidebarMenuCategoryHeader/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type SidebarMenuCategoryHeaderProps = {
   headerText: string;
diff --git a/packages/app/app/components/SidebarMenu/SidebarMenuItem/index.tsx b/packages/app/app/components/SidebarMenu/SidebarMenuItem/index.tsx
index e2408dcb18..3057ad4009 100644
--- a/packages/app/app/components/SidebarMenu/SidebarMenuItem/index.tsx
+++ b/packages/app/app/components/SidebarMenu/SidebarMenuItem/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip } from '@nuclear/ui';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type SidebarMenuItemProps = {
   name: string;
diff --git a/packages/app/app/components/SidebarMenu/index.tsx b/packages/app/app/components/SidebarMenu/index.tsx
index e3b9c24cbb..2bf8bd3e9c 100644
--- a/packages/app/app/components/SidebarMenu/index.tsx
+++ b/packages/app/app/components/SidebarMenu/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const SidebarMenu: React.FC = ({ children }) => (
   <div
diff --git a/packages/app/app/components/Spacer/index.tsx b/packages/app/app/components/Spacer/index.tsx
index 70388b74ae..dc0216a349 100644
--- a/packages/app/app/components/Spacer/index.tsx
+++ b/packages/app/app/components/Spacer/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type SpacerProps = {
   className?: string;
diff --git a/packages/app/app/components/TagView/TagDescription/index.js b/packages/app/app/components/TagView/TagDescription/index.js
index 57aa723b7a..a7a5d979fc 100644
--- a/packages/app/app/components/TagView/TagDescription/index.js
+++ b/packages/app/app/components/TagView/TagDescription/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const TagDescription = ({ tagInfo }) => (
   <div className={styles.tag_description}>
diff --git a/packages/app/app/components/TagView/TagHeader/index.js b/packages/app/app/components/TagView/TagHeader/index.js
index 3e01260d94..483268ca16 100644
--- a/packages/app/app/components/TagView/TagHeader/index.js
+++ b/packages/app/app/components/TagView/TagHeader/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const TagHeader = ({ tag, topArtists }) => (
   <div className={styles.tag_header_container}>
diff --git a/packages/app/app/components/TagView/TagTopList/index.js b/packages/app/app/components/TagView/TagTopList/index.js
index 02ce887694..00c62cfe1f 100644
--- a/packages/app/app/components/TagView/TagTopList/index.js
+++ b/packages/app/app/components/TagView/TagTopList/index.js
@@ -3,7 +3,7 @@ import { SmoothImage } from '@nuclear/ui';
 import classnames from 'classnames';
 import _ from 'lodash';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const TagTopList = ({ topList, onClick, header }) => (
   <div className={styles.tag_top_list}>
diff --git a/packages/app/app/components/TagView/TagTopTracks/index.tsx b/packages/app/app/components/TagView/TagTopTracks/index.tsx
index f325437633..4e6a2671e9 100644
--- a/packages/app/app/components/TagView/TagTopTracks/index.tsx
+++ b/packages/app/app/components/TagView/TagTopTracks/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Button, TrackTable } from '@nuclear/ui';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import TrackRow from '../../TrackRow';
 import TrackTableContainer from '../../../containers/TrackTableContainer';
 
diff --git a/packages/app/app/components/TagView/index.js b/packages/app/app/components/TagView/index.js
index 3e1e23653c..dffe9d5332 100644
--- a/packages/app/app/components/TagView/index.js
+++ b/packages/app/app/components/TagView/index.js
@@ -6,7 +6,7 @@ import TagDescription from './TagDescription';
 import TagHeader from './TagHeader';
 import TagTopList from './TagTopList';
 import TagTopTracks from './TagTopTracks';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 @withTranslation('tags')
 class TagView extends React.Component {
diff --git a/packages/app/app/components/TrackRow/index.js b/packages/app/app/components/TrackRow/index.js
index da236623fa..9374081a36 100644
--- a/packages/app/app/components/TrackRow/index.js
+++ b/packages/app/app/components/TrackRow/index.js
@@ -14,7 +14,7 @@ import * as QueueActions from '../../actions/queue';
 import TrackPopupContainer from '../../containers/TrackPopupContainer';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 class TrackRow extends React.Component {
   // this function should be moved onto interface for 'track'
diff --git a/packages/app/app/components/TrackRowHeading/index.tsx b/packages/app/app/components/TrackRowHeading/index.tsx
index 051d06503b..9a86009e37 100644
--- a/packages/app/app/components/TrackRowHeading/index.tsx
+++ b/packages/app/app/components/TrackRowHeading/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type TrackRowHeadingPops = {
   title: string;
diff --git a/packages/app/app/components/WindowControls/WindowButton/index.tsx b/packages/app/app/components/WindowControls/WindowButton/index.tsx
index 6f778f359a..ea557729cb 100644
--- a/packages/app/app/components/WindowControls/WindowButton/index.tsx
+++ b/packages/app/app/components/WindowControls/WindowButton/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon, SemanticICONS } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type WindowButtonControls = {
   color?: string;
diff --git a/packages/app/app/components/WindowControls/index.tsx b/packages/app/app/components/WindowControls/index.tsx
index 05e116d7f2..3815554eeb 100644
--- a/packages/app/app/components/WindowControls/index.tsx
+++ b/packages/app/app/components/WindowControls/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 import WindowButton from './WindowButton';
 
diff --git a/packages/app/app/containers/EqualizerViewContainer/index.tsx b/packages/app/app/containers/EqualizerViewContainer/index.tsx
index 67e22eb41c..d8c8632686 100644
--- a/packages/app/app/containers/EqualizerViewContainer/index.tsx
+++ b/packages/app/app/containers/EqualizerViewContainer/index.tsx
@@ -7,7 +7,7 @@ import Equalizer from '../../components/Equalizer';
 import EqualizerPresetList from '../../components/EqualizerPresetList';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { RootState } from '../../reducers';
 import Header from '../../components/Header';
 
diff --git a/packages/app/app/containers/HttpApiUrl/index.js b/packages/app/app/containers/HttpApiUrl/index.js
index 0b349334d3..6926b38b69 100644
--- a/packages/app/app/containers/HttpApiUrl/index.js
+++ b/packages/app/app/containers/HttpApiUrl/index.js
@@ -4,7 +4,7 @@ import { shell } from 'electron';
 import { connect } from 'react-redux';
 import { Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const handleClick = settings => {
   const apiUrl = `http://localhost:${settings['api.port']}/nuclear/docs` ;
diff --git a/packages/app/app/containers/PromotedArtistsContainer/index.tsx b/packages/app/app/containers/PromotedArtistsContainer/index.tsx
index b89ba66f55..37e801e152 100644
--- a/packages/app/app/containers/PromotedArtistsContainer/index.tsx
+++ b/packages/app/app/containers/PromotedArtistsContainer/index.tsx
@@ -11,7 +11,7 @@ import { PromotedArtist as PromotedArtistType } from '@nuclear/core/src/rest/Nuc
 
 import { isConfigFlagEnabled, nuclearSelectors, paramValue } from '../../selectors/nuclear';
 import { dashboardSelector } from '../../selectors/dashboard';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { selectMetaProvider } from '../../actions/plugins';
 import { unifiedSearch } from '../../actions/search';
 
diff --git a/packages/app/app/containers/SidebarMenuContainer/index.tsx b/packages/app/app/containers/SidebarMenuContainer/index.tsx
index 8e422fb665..3058b10616 100644
--- a/packages/app/app/containers/SidebarMenuContainer/index.tsx
+++ b/packages/app/app/containers/SidebarMenuContainer/index.tsx
@@ -13,7 +13,7 @@ import { settingsSelector } from '../../selectors/settings';
 import { setBooleanOption } from '../../actions/settings';
 import { useResizablePanel } from './hooks';
 import categories from './categories';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 // import { UserPanelContainer } from '../UserPanelContainer';
 
 const SidebarMenuContainer: React.FC = () => {
diff --git a/packages/app/app/containers/VisualizerContainer/VisualizerNode/index.tsx b/packages/app/app/containers/VisualizerContainer/VisualizerNode/index.tsx
index 1affd70b2e..7d573d8a8c 100644
--- a/packages/app/app/containers/VisualizerContainer/VisualizerNode/index.tsx
+++ b/packages/app/app/containers/VisualizerContainer/VisualizerNode/index.tsx
@@ -4,7 +4,7 @@ import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { VisualizerOverlay } from '@nuclear/ui';
 import { useTranslation } from 'react-i18next';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { useVisualizerOverlayProps, useVisualizerProps, useVisualizerShuffleProps, useVisualizerOverlayShuffleProps} from '../hooks';
 
 const VisualizerNode: React.FC = () => {
diff --git a/packages/app/webpack.config.ts b/packages/app/webpack.config.ts
index b77b37f5f6..a21d5c6c75 100644
--- a/packages/app/webpack.config.ts
+++ b/packages/app/webpack.config.ts
@@ -165,7 +165,6 @@ module.exports = (env) => {
       fallback: {
         fs: false,
         http: false,
-        timers: false,
         zlib: false,
         stream: false,
         net: false,
@@ -191,16 +190,17 @@ module.exports = (env) => {
       rules: [
         jsxRule,
         {
-          test: /.scss$/,
+          test: /\.scss$/,
           use: [
             'style-loader',
             {
               loader: 'css-loader',
               options: {
-                importLoaders: 1,
                 modules: {
-                  localIdentName: '[local]'
-                }
+                  localIdentName: '[local]',
+                  exportLocalsConvention: 'as-is'
+                },
+                importLoaders: 1
               }
             },
             'sass-loader'
diff --git a/packages/main/src/services/window/index.ts b/packages/main/src/services/window/index.ts
index a463473aa5..8a95392d61 100644
--- a/packages/main/src/services/window/index.ts
+++ b/packages/main/src/services/window/index.ts
@@ -61,7 +61,7 @@ class Window {
       show: false,
       webPreferences: {
         nodeIntegration: true,
-        webSecurity: true,
+        webSecurity: false,
         webviewTag: true,
         contextIsolation: false,
         additionalArguments: [
@@ -70,6 +70,9 @@ class Window {
       }
     });
 
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('@electron/remote/main').enable(this.browserWindow.webContents);
+
     if (platform.isMac()) {
       app.dock.setIcon(icon);
     }
diff --git a/packages/ui/lib/components/AlbumGrid/index.tsx b/packages/ui/lib/components/AlbumGrid/index.tsx
index d425baee2b..a615e6d9c4 100644
--- a/packages/ui/lib/components/AlbumGrid/index.tsx
+++ b/packages/ui/lib/components/AlbumGrid/index.tsx
@@ -5,8 +5,8 @@ import { Dimmer, Loader } from 'semantic-ui-react';
 
 import AlbumPreview from '../AlbumPreview';
 import Card from '../Card';
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 import { getThumbnail, getTrackItem } from '../..';
 import { SearchResultsAlbum } from '@nuclear/core/src/plugins/plugins.types';
 import { Album, Track } from '@nuclear/core';
diff --git a/packages/ui/lib/components/AlbumPreview/index.tsx b/packages/ui/lib/components/AlbumPreview/index.tsx
index 2e7c580347..a97342dfc8 100644
--- a/packages/ui/lib/components/AlbumPreview/index.tsx
+++ b/packages/ui/lib/components/AlbumPreview/index.tsx
@@ -8,7 +8,7 @@ import { getThumbnail } from '../..';
 import ContextPopup from '../ContextPopup';
 import TrackRow from '../TrackRow';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 
 type AlbumPreviewProps = {
diff --git a/packages/ui/lib/components/ArtistAlbums/index.tsx b/packages/ui/lib/components/ArtistAlbums/index.tsx
index bdb672b0d2..a543469562 100644
--- a/packages/ui/lib/components/ArtistAlbums/index.tsx
+++ b/packages/ui/lib/components/ArtistAlbums/index.tsx
@@ -1,7 +1,7 @@
 import { SearchResultsAlbum } from '@nuclear/core/src/plugins/plugins.types';
 import React, { useMemo, useState } from 'react';
 import { AlbumGrid, Button, Dropdown, FormInput } from '../..';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type ArtistAlbumsStrings = {
   header: string;
diff --git a/packages/ui/lib/components/ArtistGrid/index.tsx b/packages/ui/lib/components/ArtistGrid/index.tsx
index f92ce6c5d9..4ce0e47b29 100644
--- a/packages/ui/lib/components/ArtistGrid/index.tsx
+++ b/packages/ui/lib/components/ArtistGrid/index.tsx
@@ -5,8 +5,8 @@ import { Dimmer, Loader } from 'semantic-ui-react';
 
 import { getThumbnail } from '../../utils';
 import Card from '../Card';
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 type ArtistGridProps = {
   artists: {
diff --git a/packages/ui/lib/components/Box/index.tsx b/packages/ui/lib/components/Box/index.tsx
index 4415303862..81fa01da79 100644
--- a/packages/ui/lib/components/Box/index.tsx
+++ b/packages/ui/lib/components/Box/index.tsx
@@ -1,8 +1,8 @@
 import React, { forwardRef, PropsWithChildren } from 'react';
 import cx from 'classnames';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 export type BoxProps = PropsWithChildren<{
   className?: string;
diff --git a/packages/ui/lib/components/Button/index.tsx b/packages/ui/lib/components/Button/index.tsx
index 48b9ce7d77..925014e48e 100644
--- a/packages/ui/lib/components/Button/index.tsx
+++ b/packages/ui/lib/components/Button/index.tsx
@@ -5,8 +5,8 @@ import {
   ButtonProps as SUIButtonProps
 } from 'semantic-ui-react';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 export type ButtonProps = SUIButtonProps & {
   borderless?: boolean;
diff --git a/packages/ui/lib/components/Card/index.tsx b/packages/ui/lib/components/Card/index.tsx
index 1f19eeebf4..747789d9b6 100644
--- a/packages/ui/lib/components/Card/index.tsx
+++ b/packages/ui/lib/components/Card/index.tsx
@@ -4,8 +4,8 @@ import _ from 'lodash';
 import { Dropdown, DropdownItemProps, DropdownHeaderProps, DropdownDividerProps } from 'semantic-ui-react';
 
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 export type CardMenuEntry = {
   type: 'header' | 'item' | 'divider';
diff --git a/packages/ui/lib/components/CardsRow/index.tsx b/packages/ui/lib/components/CardsRow/index.tsx
index b710a85b37..1ae4599227 100644
--- a/packages/ui/lib/components/CardsRow/index.tsx
+++ b/packages/ui/lib/components/CardsRow/index.tsx
@@ -3,7 +3,7 @@ import { Icon, Input } from 'semantic-ui-react';
 
 import Button from '../Button';
 import Card from '../Card';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type CardWithId = ComponentProps<typeof Card> & {
   id: string;
diff --git a/packages/ui/lib/components/Checkbox/index.tsx b/packages/ui/lib/components/Checkbox/index.tsx
index ef16ec9cf4..249a068499 100644
--- a/packages/ui/lib/components/Checkbox/index.tsx
+++ b/packages/ui/lib/components/Checkbox/index.tsx
@@ -5,8 +5,8 @@ import {
   CheckboxProps as SUICheckboxProps
 } from 'semantic-ui-react';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 export type CheckboxProps = SUICheckboxProps;
 const Checkbox: React.FC<CheckboxProps> = ({
diff --git a/packages/ui/lib/components/CommandPalette/CommandPaletteAction/index.tsx b/packages/ui/lib/components/CommandPalette/CommandPaletteAction/index.tsx
index c9cb860984..2fff353a35 100644
--- a/packages/ui/lib/components/CommandPalette/CommandPaletteAction/index.tsx
+++ b/packages/ui/lib/components/CommandPalette/CommandPaletteAction/index.tsx
@@ -4,8 +4,8 @@ import cx from 'classnames';
 
 import { CommandPaletteAction as CommandPaletteActionType } from '..';
 
-import common from '../../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../../common.scss';
+import * as styles from './styles.scss';
 
 type CommandPaletteActionProps = CommandPaletteActionType & {
     onSelect: () => void;
diff --git a/packages/ui/lib/components/CommandPalette/CommandPaletteEmptyState/index.tsx b/packages/ui/lib/components/CommandPalette/CommandPaletteEmptyState/index.tsx
index 2d1b3275d1..9becc6bb9e 100644
--- a/packages/ui/lib/components/CommandPalette/CommandPaletteEmptyState/index.tsx
+++ b/packages/ui/lib/components/CommandPalette/CommandPaletteEmptyState/index.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import { Icon } from 'semantic-ui-react';
 
-import common from '../../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../../common.scss';
+import * as styles from './styles.scss';
 
 type CommandPaletteEmptyStateProps = {
   emptyStateText: string;
diff --git a/packages/ui/lib/components/CommandPalette/CommandPaletteFooter/index.tsx b/packages/ui/lib/components/CommandPalette/CommandPaletteFooter/index.tsx
index 3c842d9cc2..fa180da547 100644
--- a/packages/ui/lib/components/CommandPalette/CommandPaletteFooter/index.tsx
+++ b/packages/ui/lib/components/CommandPalette/CommandPaletteFooter/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type CommandPaletteFooterProps = {
     protipText?: string;
diff --git a/packages/ui/lib/components/CommandPalette/index.tsx b/packages/ui/lib/components/CommandPalette/index.tsx
index ea8a6f351c..a887c1adb9 100644
--- a/packages/ui/lib/components/CommandPalette/index.tsx
+++ b/packages/ui/lib/components/CommandPalette/index.tsx
@@ -7,8 +7,8 @@ import useOutsideClick from 'react-cool-onclickoutside';
 import { CommandPaletteFooter } from './CommandPaletteFooter';
 import { CommandPaletteAction } from './CommandPaletteAction';
 import { CommandPaletteEmptyState } from './CommandPaletteEmptyState';
-import styles from './styles.scss';
-import common from '../../common.scss';
+import * as styles from './styles.scss';
+import * as common from '../../common.scss';
 
 export type CommandPaletteAction = {
     id: string;
diff --git a/packages/ui/lib/components/ContextPopup/index.tsx b/packages/ui/lib/components/ContextPopup/index.tsx
index dc86ffaaa8..f0d151b69d 100644
--- a/packages/ui/lib/components/ContextPopup/index.tsx
+++ b/packages/ui/lib/components/ContextPopup/index.tsx
@@ -3,7 +3,7 @@ import { Popup, PopupProps } from 'semantic-ui-react';
 import Img from 'react-image';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type ContextPopupProps = {
   trigger: PopupProps['trigger'];
@@ -43,7 +43,7 @@ const ContextPopup: React.FC<ContextPopupProps> = ({
           <Img 
             src={thumb}
             unloader={<img src={artPlaceholder}/>}
-            />
+          />
         </div>}
         <div className={styles.popup_info}>
           <div className={styles.popup_title}>
diff --git a/packages/ui/lib/components/Cover/index.tsx b/packages/ui/lib/components/Cover/index.tsx
index ac383485f8..c6f8d40af6 100644
--- a/packages/ui/lib/components/Cover/index.tsx
+++ b/packages/ui/lib/components/Cover/index.tsx
@@ -4,8 +4,8 @@ import cx from 'classnames';
 
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 type CoverProps = {
   cover?: string;
@@ -19,7 +19,7 @@ const Cover: React.FC<CoverProps> = ({ cover = String(artPlaceholder) }) => (
     <Img 
       src={cover || String(artPlaceholder)}
       unloader={<img src={String(artPlaceholder)}/>} 
-     />
+    />
   </div>
 );
 
diff --git a/packages/ui/lib/components/Dropdown/index.tsx b/packages/ui/lib/components/Dropdown/index.tsx
index b694689c6e..66bb40d4bc 100644
--- a/packages/ui/lib/components/Dropdown/index.tsx
+++ b/packages/ui/lib/components/Dropdown/index.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import { Dropdown as SemanticDropdown, DropdownProps as SUIDropdownProps } from 'semantic-ui-react';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 export type DropdownProps = SUIDropdownProps & {
   noCaret?: boolean;
diff --git a/packages/ui/lib/components/FormInput/index.tsx b/packages/ui/lib/components/FormInput/index.tsx
index d226a809a1..7effe8a6a3 100644
--- a/packages/ui/lib/components/FormInput/index.tsx
+++ b/packages/ui/lib/components/FormInput/index.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import { FormInput as SUIInput, InputProps as SUIInputProps } from 'semantic-ui-react';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 import { FieldsPropsType } from '../../hooks/types';
 
 export type FormInputProps = Omit<SUIInputProps, 'error'> & Partial<FieldsPropsType[keyof FieldsPropsType]>;
diff --git a/packages/ui/lib/components/FullscreenForm/index.tsx b/packages/ui/lib/components/FullscreenForm/index.tsx
index b79ef66e69..77748f85d5 100644
--- a/packages/ui/lib/components/FullscreenForm/index.tsx
+++ b/packages/ui/lib/components/FullscreenForm/index.tsx
@@ -7,8 +7,8 @@ import { Box } from '../..';
 import FullscreenLayer, { FullscreenLayerProps } from '../FullscreenLayer';
 import { UseFormProps } from '../../hooks/useForm';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 export type FullscreenFormProps = FullscreenLayerProps & {
   onSubmit?: UseFormProps['onSubmit'];
diff --git a/packages/ui/lib/components/FullscreenLayer/index.tsx b/packages/ui/lib/components/FullscreenLayer/index.tsx
index 27b5aec62a..f89a345dad 100644
--- a/packages/ui/lib/components/FullscreenLayer/index.tsx
+++ b/packages/ui/lib/components/FullscreenLayer/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Transition } from 'semantic-ui-react';
 import useKeyPress from '../../hooks/useKeyPress';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type FullscreenLayerProps = {
     isOpen?: boolean;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx
index afc01ad097..c50fc09c09 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CellProps } from 'react-table';
 import cx from 'classnames';
 
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 import { Track } from '../../../types';
 import { TrackTableExtraProps } from '../../TrackTable/types';
 import Button from '../../Button';
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx
index 4d4f3ebd71..18e0eed583 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx
@@ -5,7 +5,7 @@ import cx from 'classnames';
 import { TrackTableExtraProps } from '../../TrackTable/types';
 import { Track } from '../../../types';
 import Button from '../../Button';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 export const FavoriteCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
   cell,
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
index 00aca6f452..5a4c2a8e80 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
@@ -5,7 +5,7 @@ import cx from 'classnames';
 import Button from '../../Button';
 import { TrackTableExtraProps } from '../../TrackTable/types';
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 export const PositionCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
   cell,
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
index ddfb35968e..bd64484fea 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx
@@ -3,7 +3,7 @@ import { Cell, CellProps, UseRowSelectRowProps } from 'react-table';
 
 import { Track } from '../../../types';
 import Checkbox, { CheckboxProps } from '../../Checkbox';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 import { TrackTableRow } from '..';
 
 type SelectionCellProps<T extends Track> = {
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
index a3b62e5426..9f9a9a6172 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
@@ -5,7 +5,7 @@ import cx from 'classnames';
 
 import { Track } from '@nuclear/core';
 
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 
 export const TextCell: React.FC<CellProps<Track>> = ({
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
index 128f0fac92..06748ba7dc 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
@@ -3,7 +3,7 @@ import { CellProps } from 'react-table';
 import cx from 'classnames';
 
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 import Img from 'react-image';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 
@@ -18,5 +18,5 @@ export const ThumbnailCell: React.FC<CellProps<Track>> = ({
     className={styles.thumbnail_cell_thumbnail} 
     src={value}
     unloader={<img className={styles.thumbnail_cell_thumbnail} src={artPlaceholder}/>}
-    />
+  />
 </div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
index c4542573ef..e1540ccfbb 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
@@ -7,7 +7,7 @@ import { Track } from '../../../types';
 import Button from '../../Button';
 import TrackPopup from '../../TrackPopup';
 import Tooltip from '../../Tooltip';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 export const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
   cell, 
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
index d1879cb808..74fde9846e 100644
--- a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
@@ -5,7 +5,7 @@ import cx from 'classnames';
 
 import { TrackTableExtraProps } from '../TrackTable/types';
 import { Track } from '../../types';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type GridTrackTableRowProps<T extends Track> = {
     data: {
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
index 306aab2086..500dc4cd5d 100644
--- a/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { DraggableChildrenFn } from 'react-beautiful-dnd';
 
 import cx from 'classnames';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { Row } from 'react-table';
 import { Track } from '../../types';
 import { TrackTableExtraProps } from '../TrackTable/types';
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/SelectionHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/SelectionHeader.tsx
index 18f13aded1..7402715a23 100644
--- a/packages/ui/lib/components/GridTrackTable/Headers/SelectionHeader.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Headers/SelectionHeader.tsx
@@ -2,7 +2,7 @@ import { Track } from '@nuclear/core';
 import { HeaderProps, UseRowSelectInstanceProps } from 'react-table';
 
 import { TrackTableExtraProps, TrackTableStrings } from '../../TrackTable/types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 import React from 'react';
 import Checkbox, { CheckboxProps } from '../../Checkbox';
 import Button from '../../Button';
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
index cb30148c40..a3e7153b69 100644
--- a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
@@ -4,7 +4,7 @@ import { Icon } from 'semantic-ui-react';
 import cx from 'classnames';
 
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 export type TextHeaderProps<T extends Track> = {
   className?: string;
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index ebd600bb02..2aa8fca2c5 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -10,7 +10,7 @@ import { TextCell } from './Cells/TextCell';
 import { Track } from '../../types';
 import { getTrackThumbnail } from '../TrackRow';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { ThumbnailCell } from './Cells/ThumbnailCell';
 import { GridTrackTableRow } from './GridTrackTableRow';
diff --git a/packages/ui/lib/components/LibraryListTypeToggle/index.js b/packages/ui/lib/components/LibraryListTypeToggle/index.js
index 1487997c1c..8123e1f227 100644
--- a/packages/ui/lib/components/LibraryListTypeToggle/index.js
+++ b/packages/ui/lib/components/LibraryListTypeToggle/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export const LIST_TYPE = Object.freeze({
   SIMPLE_LIST: 'simple-list',
diff --git a/packages/ui/lib/components/Loader/index.tsx b/packages/ui/lib/components/Loader/index.tsx
index f4a0d0f35b..22975a0593 100644
--- a/packages/ui/lib/components/Loader/index.tsx
+++ b/packages/ui/lib/components/Loader/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import cx from 'classnames';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 type LoaderProps = {
   type: 'default' | 'circle' | 'small';
diff --git a/packages/ui/lib/components/MiniPlayer/MiniPlayOptions/index.tsx b/packages/ui/lib/components/MiniPlayer/MiniPlayOptions/index.tsx
index bb16e6f284..97cb4cd6a4 100644
--- a/packages/ui/lib/components/MiniPlayer/MiniPlayOptions/index.tsx
+++ b/packages/ui/lib/components/MiniPlayer/MiniPlayOptions/index.tsx
@@ -7,7 +7,7 @@ import NeumorphicBox from '../../NeumorphicBox';
 import { VolumeControlsProps } from '../../VolumeControls';
 import { PlayOptionControlProps } from '../../VolumeControls/PlayOptions';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 
 export type MiniPlayOptionsProps = Pick<VolumeControlsProps, 'playOptions'> & {
@@ -60,7 +60,10 @@ const MiniPlayOptions: React.FC<MiniPlayOptionsProps> = ({
         />
       </button>
       {
-        isExpanded && playOptions.slice(1).map(playOption => <MiniPlayOptionControl {...playOption} />)
+        isExpanded && playOptions.slice(1).map(playOption => <MiniPlayOptionControl 
+          key={playOption.name}
+          {...playOption} 
+        />)
       }
     </NeumorphicBox>
   </div>;
diff --git a/packages/ui/lib/components/MiniPlayer/MiniPlayerControls/index.tsx b/packages/ui/lib/components/MiniPlayer/MiniPlayerControls/index.tsx
index 08790e5694..6bc249bd5a 100644
--- a/packages/ui/lib/components/MiniPlayer/MiniPlayerControls/index.tsx
+++ b/packages/ui/lib/components/MiniPlayer/MiniPlayerControls/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 import { PlayerControlsProps } from '../../PlayerControls';
 import NeumorphicBox from '../../NeumorphicBox';
@@ -16,41 +16,41 @@ const MiniPlayerControls: React.FC<PlayerControlsProps> = ({
   isPlaying = false,
   isLoading = false
 }) => <div className={styles.mini_player_controls}>
-    <NeumorphicBox small borderRadius='5px'>
-      <PlayerButton
-        size='large'
-        icon='step backward'
-        onClick={goBack}
-        disabled={goBackDisabled}
-      />
-    </NeumorphicBox>
-    <NeumorphicBox
-      small
-      pressed={isPlaying}
-      borderRadius='5px'
-    >
-      <PlayerButton
-        size='large'
-        loading={isLoading}
-        icon={
-          isLoading
-            ? 'circle notch'
-            : isPlaying
-              ? 'pause'
-              : 'play'
-        }
-        onClick={togglePlay}
-        disabled={playDisabled}
-      />
-    </NeumorphicBox>
-    <NeumorphicBox small borderRadius='5px'>
-      <PlayerButton
-        size='large'
-        icon='step forward'
-        onClick={goForward}
-        disabled={goForwardDisabled}
-      />
-    </NeumorphicBox>
-  </div>;
+  <NeumorphicBox small borderRadius='5px'>
+    <PlayerButton
+      size='large'
+      icon='step backward'
+      onClick={goBack}
+      disabled={goBackDisabled}
+    />
+  </NeumorphicBox>
+  <NeumorphicBox
+    small
+    pressed={isPlaying}
+    borderRadius='5px'
+  >
+    <PlayerButton
+      size='large'
+      loading={isLoading}
+      icon={
+        isLoading
+          ? 'circle notch'
+          : isPlaying
+            ? 'pause'
+            : 'play'
+      }
+      onClick={togglePlay}
+      disabled={playDisabled}
+    />
+  </NeumorphicBox>
+  <NeumorphicBox small borderRadius='5px'>
+    <PlayerButton
+      size='large'
+      icon='step forward'
+      onClick={goForward}
+      disabled={goForwardDisabled}
+    />
+  </NeumorphicBox>
+</div>;
 
-export default MiniPlayerControls;
\ No newline at end of file
+export default MiniPlayerControls;
diff --git a/packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx b/packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx
index 788a622da7..fa7b2bd5be 100644
--- a/packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx
+++ b/packages/ui/lib/components/MiniPlayer/MiniTrackInfo/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import Img from 'react-image';
 
@@ -18,15 +18,15 @@ const MiniTrackInfo: React.FC<MiniTrackInfoProps> = ({
   isFavorite = false,
   hasTracks = false
 }) => (
-    <div className={styles.mini_track_info}>
-      <div className={styles.mini_cover}>
+  <div className={styles.mini_track_info}>
+    <div className={styles.mini_cover}>
       <Img
         src={cover}
         unloader={<img src={artPlaceholder} />}
-        />
-      </div>
-      {
-        hasTracks &&
+      />
+    </div>
+    {
+      hasTracks &&
         <div className={styles.mini_track_info_text}>
           <div className={styles.left}>
             <div className={styles.mini_track}>{track}</div>
@@ -46,8 +46,8 @@ const MiniTrackInfo: React.FC<MiniTrackInfoProps> = ({
             />
           </div>
         </div>
-      }
-    </div>
-  );
+    }
+  </div>
+);
 
-export default MiniTrackInfo;
\ No newline at end of file
+export default MiniTrackInfo;
diff --git a/packages/ui/lib/components/MiniPlayer/index.tsx b/packages/ui/lib/components/MiniPlayer/index.tsx
index a06dbaa8e0..b5ae663d3c 100644
--- a/packages/ui/lib/components/MiniPlayer/index.tsx
+++ b/packages/ui/lib/components/MiniPlayer/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import Seekbar, { SeekbarProps } from '../Seekbar';
 import MiniTrackInfo, { MiniTrackInfoProps } from './MiniTrackInfo';
 import MiniPlayerControls from './MiniPlayerControls';
diff --git a/packages/ui/lib/components/NeumorphicBox/index.tsx b/packages/ui/lib/components/NeumorphicBox/index.tsx
index 7a61b65aa8..3435708e1d 100644
--- a/packages/ui/lib/components/NeumorphicBox/index.tsx
+++ b/packages/ui/lib/components/NeumorphicBox/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type NeumorphicBoxProps = {
   borderRadius?: string;
diff --git a/packages/ui/lib/components/PlayerBar/VolumePopUp.tsx b/packages/ui/lib/components/PlayerBar/VolumePopUp.tsx
index fb6077d579..58b20a203d 100644
--- a/packages/ui/lib/components/PlayerBar/VolumePopUp.tsx
+++ b/packages/ui/lib/components/PlayerBar/VolumePopUp.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Popup } from 'semantic-ui-react';
 
 import VolumeControls, { VolumeControlsProps } from '../VolumeControls';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type VolumePopUpProps = VolumeControlsProps;
 
diff --git a/packages/ui/lib/components/PlayerBar/index.tsx b/packages/ui/lib/components/PlayerBar/index.tsx
index 6f215488cb..66d3f55b66 100644
--- a/packages/ui/lib/components/PlayerBar/index.tsx
+++ b/packages/ui/lib/components/PlayerBar/index.tsx
@@ -6,8 +6,8 @@ import PlayerControls, { PlayerControlsProps } from '../PlayerControls';
 import TrackInfo, { TrackInfoProps } from '../TrackInfo';
 import VolumeControls, { VolumeControlsProps } from '../VolumeControls';
 import VolumePopUp, { VolumePopUpProps } from './VolumePopUp';
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 import { formatDuration } from '../../utils';
 import useWindowSize from '../../hooks/useWindowSize';
 
diff --git a/packages/ui/lib/components/PlayerButton/index.tsx b/packages/ui/lib/components/PlayerButton/index.tsx
index 6dd5b17ff0..cbe66e038c 100644
--- a/packages/ui/lib/components/PlayerButton/index.tsx
+++ b/packages/ui/lib/components/PlayerButton/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Icon, SemanticICONS, SemanticSIZES } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type PlayerButtonProps = {
   'data-testid'?: string;
diff --git a/packages/ui/lib/components/PlayerControls/index.tsx b/packages/ui/lib/components/PlayerControls/index.tsx
index 31d877f572..2fe128c36e 100644
--- a/packages/ui/lib/components/PlayerControls/index.tsx
+++ b/packages/ui/lib/components/PlayerControls/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import PlayerButton from '../PlayerButton';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type PlayerControlsProps = {
   goForward?: () => void;
diff --git a/packages/ui/lib/components/Playlists/Cells/ModificationDateCell.tsx b/packages/ui/lib/components/Playlists/Cells/ModificationDateCell.tsx
index da2a6d26c4..8c3aa981b6 100644
--- a/packages/ui/lib/components/Playlists/Cells/ModificationDateCell.tsx
+++ b/packages/ui/lib/components/Playlists/Cells/ModificationDateCell.tsx
@@ -3,7 +3,7 @@ import { CellProps } from 'react-table';
 
 import { Playlist } from '@nuclear/core';
 
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 import { PlaylistsCallbacks, PlaylistsStrings } from '..';
 import { timestampToDateString } from '../../../utils';
 
diff --git a/packages/ui/lib/components/Playlists/Cells/SyncCell.tsx b/packages/ui/lib/components/Playlists/Cells/SyncCell.tsx
index d80937e341..15c384a7b8 100644
--- a/packages/ui/lib/components/Playlists/Cells/SyncCell.tsx
+++ b/packages/ui/lib/components/Playlists/Cells/SyncCell.tsx
@@ -6,7 +6,7 @@ import { PlaylistsCallbacks, PlaylistsStrings, PlaylistWithLoadingState } from '
 import Button from '../../Button';
 import Tooltip from '../../Tooltip';
 import Loader from '../../Loader';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 const SyncCell: React.FC<CellProps<PlaylistWithLoadingState> & PlaylistsStrings & PlaylistsCallbacks> = ({
   cell,
diff --git a/packages/ui/lib/components/Playlists/Cells/TitleCell.tsx b/packages/ui/lib/components/Playlists/Cells/TitleCell.tsx
index fd7d704d7a..1ec9412674 100644
--- a/packages/ui/lib/components/Playlists/Cells/TitleCell.tsx
+++ b/packages/ui/lib/components/Playlists/Cells/TitleCell.tsx
@@ -3,7 +3,7 @@ import { CellProps } from 'react-table';
 
 import { Playlist } from '@nuclear/core';
 
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 const TitleCell: React.FC<CellProps<Playlist>> =({
   cell,
diff --git a/packages/ui/lib/components/Playlists/index.tsx b/packages/ui/lib/components/Playlists/index.tsx
index bf2ffd8142..c8d444f118 100644
--- a/packages/ui/lib/components/Playlists/index.tsx
+++ b/packages/ui/lib/components/Playlists/index.tsx
@@ -12,7 +12,7 @@ import TracksCell from './Cells/TracksCell';
 import ModificationDateCell from './Cells/ModificationDateCell';
 import SyncCell from './Cells/SyncCell';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import { TableHTMLAttributes } from 'react';
 
 export type PlaylistsStrings = {
diff --git a/packages/ui/lib/components/PopupButton/index.tsx b/packages/ui/lib/components/PopupButton/index.tsx
index 3439be3cf3..e72897fe80 100644
--- a/packages/ui/lib/components/PopupButton/index.tsx
+++ b/packages/ui/lib/components/PopupButton/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon, IconProps } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type PopupButtonProps = {
   onClick?: React.MouseEventHandler;
diff --git a/packages/ui/lib/components/PromotedArtist/index.tsx b/packages/ui/lib/components/PromotedArtist/index.tsx
index a65cd194be..053bb245f1 100644
--- a/packages/ui/lib/components/PromotedArtist/index.tsx
+++ b/packages/ui/lib/components/PromotedArtist/index.tsx
@@ -5,7 +5,7 @@ import Button from '../Button';
 
 import blobMask from '../../../resources/media/blob_mask.png';
 import blobMaskShadow from '../../../resources/media/blob_mask_shadow.png';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type PromotedArtistProps = {
     name: string;
diff --git a/packages/ui/lib/components/QueueItem/index.tsx b/packages/ui/lib/components/QueueItem/index.tsx
index af82b9b20d..0b93462f71 100644
--- a/packages/ui/lib/components/QueueItem/index.tsx
+++ b/packages/ui/lib/components/QueueItem/index.tsx
@@ -4,8 +4,8 @@ import { Icon } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
 
 import Loader from '../Loader';
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { getThumbnail, getTrackArtist, getTrackTitle } from '../../utils';
diff --git a/packages/ui/lib/components/Range/index.tsx b/packages/ui/lib/components/Range/index.tsx
index 849291d2dd..66dda5da75 100644
--- a/packages/ui/lib/components/Range/index.tsx
+++ b/packages/ui/lib/components/Range/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
-import styles from './index.scss';
+import * as styles from './index.scss';
 
 export const toRgbaString = rgbaObject => `rgba(${rgbaObject.r}, ${rgbaObject.g}, ${rgbaObject.b}, ${rgbaObject.a})`;
 
diff --git a/packages/ui/lib/components/ResizablePanel/index.tsx b/packages/ui/lib/components/ResizablePanel/index.tsx
index 3f062db9c9..a8ee459706 100644
--- a/packages/ui/lib/components/ResizablePanel/index.tsx
+++ b/packages/ui/lib/components/ResizablePanel/index.tsx
@@ -4,7 +4,7 @@ import { Resizable } from 'react-resizable';
 
 import ResizeHandle from '../ResizeHandle';
 import { ResizablePanelProps } from './types';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const ResizablePanel: React.FC<ResizablePanelProps> = ({
   children,
diff --git a/packages/ui/lib/components/ResizeHandle/index.tsx b/packages/ui/lib/components/ResizeHandle/index.tsx
index 6ade870d82..33f0f05baf 100644
--- a/packages/ui/lib/components/ResizeHandle/index.tsx
+++ b/packages/ui/lib/components/ResizeHandle/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type ResizeHandleClasses = {
   root: string;
diff --git a/packages/ui/lib/components/SearchBox/index.tsx b/packages/ui/lib/components/SearchBox/index.tsx
index 214f3c10c6..96b8914562 100644
--- a/packages/ui/lib/components/SearchBox/index.tsx
+++ b/packages/ui/lib/components/SearchBox/index.tsx
@@ -3,8 +3,8 @@ import cx from 'classnames';
 import _, { isEmpty } from 'lodash';
 import { Dropdown, Icon } from 'semantic-ui-react';
 import SearchBoxDropdown from '../SearchBoxDropbown';
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 import { SearchProviderOption } from '../../types';
 import Loader from '../Loader';
 import Button from '../Button';
diff --git a/packages/ui/lib/components/SearchBoxDropbown/index.tsx b/packages/ui/lib/components/SearchBoxDropbown/index.tsx
index 9019158638..e779149ba3 100644
--- a/packages/ui/lib/components/SearchBoxDropbown/index.tsx
+++ b/packages/ui/lib/components/SearchBoxDropbown/index.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 
-import styles from './styles.scss';
-import { Icon } from 'semantic-ui-react';
-import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic';
+import * as styles from './styles.scss';
+import { Icon, SemanticICONS } from 'semantic-ui-react';
 
 export type SearchBoxDropdownProps = {
   display?: boolean;
diff --git a/packages/ui/lib/components/Seekbar/index.tsx b/packages/ui/lib/components/Seekbar/index.tsx
index 9e15276342..e75844bb0a 100644
--- a/packages/ui/lib/components/Seekbar/index.tsx
+++ b/packages/ui/lib/components/Seekbar/index.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import cx from 'classnames';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 import { Popup } from 'semantic-ui-react';
 
 type QueueItem = {
diff --git a/packages/ui/lib/components/SmoothImage/index.tsx b/packages/ui/lib/components/SmoothImage/index.tsx
index 067315a123..31bb722186 100644
--- a/packages/ui/lib/components/SmoothImage/index.tsx
+++ b/packages/ui/lib/components/SmoothImage/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type SmoothImageProps = {
   src: string;
diff --git a/packages/ui/lib/components/StreamInfo/StreamOption.tsx b/packages/ui/lib/components/StreamInfo/StreamOption.tsx
index 53d437a8b2..0b6959c00c 100644
--- a/packages/ui/lib/components/StreamInfo/StreamOption.tsx
+++ b/packages/ui/lib/components/StreamInfo/StreamOption.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { StreamData } from '@nuclear/core/src/plugins/plugins.types';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export const StreamOption: React.FC<StreamData> = ({ title, author, thumbnail }) => (
   <div className={styles.stream_option}>
diff --git a/packages/ui/lib/components/StreamInfo/index.tsx b/packages/ui/lib/components/StreamInfo/index.tsx
index 0b3c628223..cd69eeb9e1 100644
--- a/packages/ui/lib/components/StreamInfo/index.tsx
+++ b/packages/ui/lib/components/StreamInfo/index.tsx
@@ -8,7 +8,7 @@ import { StreamOption } from './StreamOption';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import Tooltip from '../Tooltip';
 import Button from '../Button';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type Handlers = {
   onImageLoaded: React.ReactEventHandler<HTMLImageElement>;
diff --git a/packages/ui/lib/components/StreamVerification/index.tsx b/packages/ui/lib/components/StreamVerification/index.tsx
index 146740dcdd..e47400d337 100644
--- a/packages/ui/lib/components/StreamVerification/index.tsx
+++ b/packages/ui/lib/components/StreamVerification/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 
 import Button from '../Button';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import Tooltip from '../Tooltip';
 import { Icon } from 'semantic-ui-react';
 
diff --git a/packages/ui/lib/components/ToastContainer/Toast/index.tsx b/packages/ui/lib/components/ToastContainer/Toast/index.tsx
index 89ae4a9a58..f9fb3f232c 100644
--- a/packages/ui/lib/components/ToastContainer/Toast/index.tsx
+++ b/packages/ui/lib/components/ToastContainer/Toast/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import cx from 'classnames';
 import { Notification } from '../../../types';
-import common from '../../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../../common.scss';
+import * as styles from './styles.scss';
 
 
 type ToastProps = Notification
diff --git a/packages/ui/lib/components/ToastContainer/index.tsx b/packages/ui/lib/components/ToastContainer/index.tsx
index ae5a441721..17bcb7f22c 100644
--- a/packages/ui/lib/components/ToastContainer/index.tsx
+++ b/packages/ui/lib/components/ToastContainer/index.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import Toast from './Toast';
 import { Notification }  from '../../types';
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 type ToastContainerProps = {
   toasts: Notification[]
diff --git a/packages/ui/lib/components/Tooltip/index.tsx b/packages/ui/lib/components/Tooltip/index.tsx
index fdffcd3c7d..23b02081b8 100644
--- a/packages/ui/lib/components/Tooltip/index.tsx
+++ b/packages/ui/lib/components/Tooltip/index.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import { Popup, PopupProps } from 'semantic-ui-react';
 
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 export type TooltipProps = PopupProps & {
 
diff --git a/packages/ui/lib/components/TrackInfo/index.tsx b/packages/ui/lib/components/TrackInfo/index.tsx
index ef2c92c63a..db98828259 100644
--- a/packages/ui/lib/components/TrackInfo/index.tsx
+++ b/packages/ui/lib/components/TrackInfo/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon } from 'semantic-ui-react';
 
 import Cover from '../Cover';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type TrackInfoProps = {
   cover?: string;
diff --git a/packages/ui/lib/components/TrackPopup/PlaylistsDropdown.tsx b/packages/ui/lib/components/TrackPopup/PlaylistsDropdown.tsx
index 92b5df7bf8..949272bfe5 100644
--- a/packages/ui/lib/components/TrackPopup/PlaylistsDropdown.tsx
+++ b/packages/ui/lib/components/TrackPopup/PlaylistsDropdown.tsx
@@ -4,7 +4,7 @@ import { Dropdown, Icon } from 'semantic-ui-react';
 import { TrackPopupProps, TrackPopupStrings } from '.';
 import PopupDropdown from '../PopupDropdown';
 import FormInput from '../FormInput';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type PlaylistsDropdownStrings = Pick<TrackPopupStrings, 'textAddToPlaylist' | 'textCreatePlaylist'>;
 
diff --git a/packages/ui/lib/components/TrackRow/index.tsx b/packages/ui/lib/components/TrackRow/index.tsx
index cdccb80cc7..1e051652e1 100644
--- a/packages/ui/lib/components/TrackRow/index.tsx
+++ b/packages/ui/lib/components/TrackRow/index.tsx
@@ -8,7 +8,7 @@ import artPlaceholder from '../../../resources/media/art_placeholder.png';
 // eslint-disable-next-line node/no-missing-import
 import { formatDuration } from '../../utils';
 import { Track } from '../../types';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export const getTrackThumbnail = track => {
   return track.thumbnail ?? track.image?.[0]?.['#text'] ?? track.thumb;
diff --git a/packages/ui/lib/components/TrackTable/Cells/DateCell.tsx b/packages/ui/lib/components/TrackTable/Cells/DateCell.tsx
index 737c40c4fb..278326d17d 100644
--- a/packages/ui/lib/components/TrackTable/Cells/DateCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/DateCell.tsx
@@ -2,7 +2,7 @@ import React, {TdHTMLAttributes} from 'react';
 import { CellProps } from 'react-table';
 
 import { HistoryTableTrack } from '../HistoryTable';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 const DateCell: React.FC<CellProps<HistoryTableTrack>> = ({ cell, value }) => {
   return <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>}
diff --git a/packages/ui/lib/components/TrackTable/Cells/DeleteCell.tsx b/packages/ui/lib/components/TrackTable/Cells/DeleteCell.tsx
index 05c4d198a4..2f66d31c6f 100644
--- a/packages/ui/lib/components/TrackTable/Cells/DeleteCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/DeleteCell.tsx
@@ -5,7 +5,7 @@ import { CellProps } from 'react-table';
 import { TrackTableExtraProps } from '../types';
 import { Button } from '../../..';
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 const DeleteCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
   cell,
diff --git a/packages/ui/lib/components/TrackTable/Cells/FavoriteCell.tsx b/packages/ui/lib/components/TrackTable/Cells/FavoriteCell.tsx
index 2f246902e8..b699f27248 100644
--- a/packages/ui/lib/components/TrackTable/Cells/FavoriteCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/FavoriteCell.tsx
@@ -5,7 +5,7 @@ import { CellProps } from 'react-table';
 import { TrackTableExtraProps } from '../types';
 import { Button } from '../../..';
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 const FavoriteCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
   cell,
diff --git a/packages/ui/lib/components/TrackTable/Cells/PositionCell.tsx b/packages/ui/lib/components/TrackTable/Cells/PositionCell.tsx
index e2048d929d..365d327f48 100644
--- a/packages/ui/lib/components/TrackTable/Cells/PositionCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/PositionCell.tsx
@@ -5,7 +5,7 @@ import { CellProps } from 'react-table';
 import { TrackTableExtraProps } from '../types';
 import { Button } from '../../..';
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 const PositionCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
   cell,
diff --git a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
index 1d0091d50b..9c31b3f384 100644
--- a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
@@ -5,7 +5,7 @@ import { Cell, Row, TableToggleRowsSelectedProps, UseRowSelectRowProps } from 'r
 
 import { Checkbox } from '../../..';
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 type SelectionCellProps<T extends Track> = {
   cell: Cell<T>;
diff --git a/packages/ui/lib/components/TrackTable/Cells/ThumbnailCell.tsx b/packages/ui/lib/components/TrackTable/Cells/ThumbnailCell.tsx
index 3868725e1f..3edc79f336 100644
--- a/packages/ui/lib/components/TrackTable/Cells/ThumbnailCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/ThumbnailCell.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { CellProps } from 'react-table';
 
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 export type ThumbnailCellClassnames = {
   thumbnail_cell?: string;
diff --git a/packages/ui/lib/components/TrackTable/Cells/TitleCell.tsx b/packages/ui/lib/components/TrackTable/Cells/TitleCell.tsx
index a37d0da02c..bfd1be8ac9 100644
--- a/packages/ui/lib/components/TrackTable/Cells/TitleCell.tsx
+++ b/packages/ui/lib/components/TrackTable/Cells/TitleCell.tsx
@@ -4,7 +4,7 @@ import { CellProps } from 'react-table';
 import { Button, TrackPopup } from '../../..';
 import { TrackTableColumn, TrackTableExtraProps } from '../types';
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
   cell,
diff --git a/packages/ui/lib/components/TrackTable/Headers/ColumnHeader.tsx b/packages/ui/lib/components/TrackTable/Headers/ColumnHeader.tsx
index f26cfeec93..99039fa03e 100644
--- a/packages/ui/lib/components/TrackTable/Headers/ColumnHeader.tsx
+++ b/packages/ui/lib/components/TrackTable/Headers/ColumnHeader.tsx
@@ -4,7 +4,7 @@ import { Icon } from 'semantic-ui-react';
 
 import { Track } from '../../../types';
 
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 type ColumnHeaderProps = {
   column: ColumnInstance<Track> & UseSortByColumnProps<Track>;
diff --git a/packages/ui/lib/components/TrackTable/Headers/SelectionHeader.tsx b/packages/ui/lib/components/TrackTable/Headers/SelectionHeader.tsx
index 241fe9221a..3c79ae3b65 100644
--- a/packages/ui/lib/components/TrackTable/Headers/SelectionHeader.tsx
+++ b/packages/ui/lib/components/TrackTable/Headers/SelectionHeader.tsx
@@ -5,7 +5,7 @@ import { HeaderProps, UseRowSelectInstanceProps } from 'react-table';
 import { TrackTableExtraProps, TrackTableStrings } from '../types';
 import { Button, Checkbox, ContextPopup, PopupButton } from '../../..';
 import { Track } from '../../../types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 const SelectionHeader: React.FC<
   HeaderProps<Track> &
diff --git a/packages/ui/lib/components/TrackTable/HistoryTable.tsx b/packages/ui/lib/components/TrackTable/HistoryTable.tsx
index af4a30d618..20594759a9 100644
--- a/packages/ui/lib/components/TrackTable/HistoryTable.tsx
+++ b/packages/ui/lib/components/TrackTable/HistoryTable.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import TrackTable, { TrackTableProps } from '.';
 import { Track } from '../../types';
 import DateCell from './Cells/DateCell';
diff --git a/packages/ui/lib/components/TrackTable/HistoryTableDate.tsx b/packages/ui/lib/components/TrackTable/HistoryTableDate.tsx
index fb3a938c84..38f19c728d 100644
--- a/packages/ui/lib/components/TrackTable/HistoryTableDate.tsx
+++ b/packages/ui/lib/components/TrackTable/HistoryTableDate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 const HistoryTableDate: React.FC = ({children}) => {
   return <h2 className={styles.history_table_date}>{children}</h2>;
diff --git a/packages/ui/lib/components/TrackTable/TrackTableRow.tsx b/packages/ui/lib/components/TrackTable/TrackTableRow.tsx
index 5174201ff8..020f4c72a5 100644
--- a/packages/ui/lib/components/TrackTable/TrackTableRow.tsx
+++ b/packages/ui/lib/components/TrackTable/TrackTableRow.tsx
@@ -6,7 +6,7 @@ import cx from 'classnames';
 
 import { TrackTableColumn, TrackTableExtraProps } from './types';
 import { Track } from '../../types';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 type TrackTableRowProps<T extends Track> = {
     data: {
diff --git a/packages/ui/lib/components/TrackTable/index.tsx b/packages/ui/lib/components/TrackTable/index.tsx
index 5eae104881..8f01df9ed9 100644
--- a/packages/ui/lib/components/TrackTable/index.tsx
+++ b/packages/ui/lib/components/TrackTable/index.tsx
@@ -17,7 +17,7 @@ import SelectionHeader from './Headers/SelectionHeader';
 import ColumnHeader from './Headers/ColumnHeader';
 import { getTrackThumbnail } from '../TrackRow';
 import { TrackTableColumn, TrackTableExtraProps, TrackTableHeaders, TrackTableSettings, TrackTableStrings } from './types';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { Track } from '../../types';
 import { Button, formatDuration } from '../..';
diff --git a/packages/ui/lib/components/UserPanel/UserPanelButton/index.tsx b/packages/ui/lib/components/UserPanel/UserPanelButton/index.tsx
index fb0f7b4b3e..2ad4cfcc5d 100644
--- a/packages/ui/lib/components/UserPanel/UserPanelButton/index.tsx
+++ b/packages/ui/lib/components/UserPanel/UserPanelButton/index.tsx
@@ -6,8 +6,8 @@ import {
 } from 'semantic-ui-react';
 
 import Tooltip, { TooltipProps } from '../../Tooltip';
-import common from '../../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../../common.scss';
+import * as styles from './styles.scss';
 
 export type UserPanelButtonProps = SUIButtonProps & {
     icon: SUIButtonProps['icon'];
diff --git a/packages/ui/lib/components/UserPanel/UserPanelSignedIn/index.tsx b/packages/ui/lib/components/UserPanel/UserPanelSignedIn/index.tsx
index 3e1fee98a4..b7afd37be0 100644
--- a/packages/ui/lib/components/UserPanel/UserPanelSignedIn/index.tsx
+++ b/packages/ui/lib/components/UserPanel/UserPanelSignedIn/index.tsx
@@ -6,8 +6,8 @@ import UsernameContainer from '../UsernameContainer';
 import { UserPanelProps } from '..';
 import { Dropdown } from '../../..';
 
-import styles from '../styles.scss';
-import common from '../../../common.scss';
+import * as styles from '../styles.scss';
+import * as common from '../../../common.scss';
 import { DropdownProps } from '../../Dropdown';
 
 type User = {
diff --git a/packages/ui/lib/components/UserPanel/UserPanelSignedOut/index.tsx b/packages/ui/lib/components/UserPanel/UserPanelSignedOut/index.tsx
index 58518179ed..753535f8ae 100644
--- a/packages/ui/lib/components/UserPanel/UserPanelSignedOut/index.tsx
+++ b/packages/ui/lib/components/UserPanel/UserPanelSignedOut/index.tsx
@@ -3,8 +3,8 @@ import cx from 'classnames';
 
 import Button from '../../Button';
 
-import styles from '../styles.scss';
-import common from '../../../common.scss';
+import * as styles from '../styles.scss';
+import * as common from '../../../common.scss';
 
 export type UserPanelSignedOutProps = {
     signUpButtonLabel: string;
diff --git a/packages/ui/lib/components/UserPanel/UsernameContainer/index.tsx b/packages/ui/lib/components/UserPanel/UsernameContainer/index.tsx
index e96ea2f1f2..e3bb97c733 100644
--- a/packages/ui/lib/components/UserPanel/UsernameContainer/index.tsx
+++ b/packages/ui/lib/components/UserPanel/UsernameContainer/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type UsernameContainerProps = {
     username?: string;
diff --git a/packages/ui/lib/components/UserPluginsItem/index.js b/packages/ui/lib/components/UserPluginsItem/index.js
index 5b87e0d394..d0349b0a0b 100644
--- a/packages/ui/lib/components/UserPluginsItem/index.js
+++ b/packages/ui/lib/components/UserPluginsItem/index.js
@@ -4,8 +4,8 @@ import cx from 'classnames';
 import { Button, Icon } from 'semantic-ui-react';
 
 import Loader from '../Loader';
-import common from '../../common.scss';
-import styles from './styles.scss';
+import * as common from '../../common.scss';
+import * as styles from './styles.scss';
 
 const UserPluginsItem = ({
   path,
diff --git a/packages/ui/lib/components/Visualizer/index.tsx b/packages/ui/lib/components/Visualizer/index.tsx
index 8ea9cecd00..d76c917e72 100644
--- a/packages/ui/lib/components/Visualizer/index.tsx
+++ b/packages/ui/lib/components/Visualizer/index.tsx
@@ -6,7 +6,7 @@ import butterchurnPresets from 'butterchurn-presets';
 import Measure from 'react-measure';
 import _ from 'lodash';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type VisualizerProps = {
   audioContext?: AudioContext;
diff --git a/packages/ui/lib/components/VisualizerOverlay/index.tsx b/packages/ui/lib/components/VisualizerOverlay/index.tsx
index b23687e995..8de56459b9 100644
--- a/packages/ui/lib/components/VisualizerOverlay/index.tsx
+++ b/packages/ui/lib/components/VisualizerOverlay/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, SyntheticEvent } from 'react';
 import { Button, Dropdown } from '../..';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import cx from 'classnames';
 
 export type VisualizerOverlayProps = {
diff --git a/packages/ui/lib/components/VolumeControls/PlayOptions/index.tsx b/packages/ui/lib/components/VolumeControls/PlayOptions/index.tsx
index 2b7f24d6f0..f85fed596b 100644
--- a/packages/ui/lib/components/VolumeControls/PlayOptions/index.tsx
+++ b/packages/ui/lib/components/VolumeControls/PlayOptions/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Icon, SemanticICONS } from 'semantic-ui-react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 import Tooltip from '../../Tooltip';
 
 export type PlayOptionControlProps = {
diff --git a/packages/ui/lib/components/VolumeControls/PlaybackRateSlider/index.tsx b/packages/ui/lib/components/VolumeControls/PlaybackRateSlider/index.tsx
index cf37b58da9..584b39e0de 100644
--- a/packages/ui/lib/components/VolumeControls/PlaybackRateSlider/index.tsx
+++ b/packages/ui/lib/components/VolumeControls/PlaybackRateSlider/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Range from '../../Range';
 import NeumorphicBox from '../../NeumorphicBox';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type PlaybackRateSliderProps = {
   playbackRate: number,
diff --git a/packages/ui/lib/components/VolumeControls/VolumeSlider/index.tsx b/packages/ui/lib/components/VolumeControls/VolumeSlider/index.tsx
index c59f429689..d83ee80b94 100644
--- a/packages/ui/lib/components/VolumeControls/VolumeSlider/index.tsx
+++ b/packages/ui/lib/components/VolumeControls/VolumeSlider/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Range from '../../Range';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type VolumeSliderProps = {
   volume: number;
diff --git a/packages/ui/lib/components/VolumeControls/index.tsx b/packages/ui/lib/components/VolumeControls/index.tsx
index 7ad3cf9a89..333708ab67 100644
--- a/packages/ui/lib/components/VolumeControls/index.tsx
+++ b/packages/ui/lib/components/VolumeControls/index.tsx
@@ -4,7 +4,7 @@ import { Icon } from 'semantic-ui-react';
 import VolumeSlider, { VolumeSliderProps } from './VolumeSlider';
 import PlaybackRateSlider, { PlaybackRateSliderProps } from './PlaybackRateSlider';
 import PlayOptions, { PlayOptionsProps } from './PlayOptions';
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type VolumeControlsProps = VolumeSliderProps & PlayOptionsProps & PlaybackRateSliderProps;
 
diff --git a/packages/ui/lib/forms/FormSideContent/index.tsx b/packages/ui/lib/forms/FormSideContent/index.tsx
index 4b837e78df..fbbb1a0f58 100644
--- a/packages/ui/lib/forms/FormSideContent/index.tsx
+++ b/packages/ui/lib/forms/FormSideContent/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export type FormSideContentProps = {
 
diff --git a/packages/ui/lib/forms/NuclearSignInForm/index.tsx b/packages/ui/lib/forms/NuclearSignInForm/index.tsx
index ad413ad9e6..5ec372892b 100644
--- a/packages/ui/lib/forms/NuclearSignInForm/index.tsx
+++ b/packages/ui/lib/forms/NuclearSignInForm/index.tsx
@@ -5,7 +5,7 @@ import Button from '../../components/Button';
 import { FormInput, FullscreenForm } from '../..';
 import { FullscreenFormProps } from '../../components/FullscreenForm';
 import { FieldsPropsType } from '../../hooks/types';
-import styles from '../styles.scss';
+import * as styles from '../styles.scss';
 
 type NuclearSignInFormContentProps = {
   header: string;
diff --git a/packages/ui/lib/forms/NuclearSignUpForm/index.tsx b/packages/ui/lib/forms/NuclearSignUpForm/index.tsx
index 18e4edc1e9..98e7468fe9 100644
--- a/packages/ui/lib/forms/NuclearSignUpForm/index.tsx
+++ b/packages/ui/lib/forms/NuclearSignUpForm/index.tsx
@@ -6,8 +6,8 @@ import { FormSideContent } from '../FormSideContent';
 import { FieldsPropsType } from '../../hooks/types';
 import { Button, FormInput } from '../..';
 import nuclearLogo from '../../../resources/media/logo_full_light.png';
-import styles from '../styles.scss';
-import common from '../../common.scss';
+import * as styles from '../styles.scss';
+import * as common from '../../common.scss';
 
 type NuclearSignUpFormContentProps = {
   fieldsProps: FieldsPropsType;
diff --git a/packages/ui/stories/components/resizablePanel.stories.tsx b/packages/ui/stories/components/resizablePanel.stories.tsx
index 0c3230cb2a..322d5a4ecd 100644
--- a/packages/ui/stories/components/resizablePanel.stories.tsx
+++ b/packages/ui/stories/components/resizablePanel.stories.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 
 import { ResizablePanel } from '../..';
 
-import styles from './resizablePanel.styles.scss';
+import * as styles from './resizablePanel.styles.scss';
 
 export default {
   title: 'Components/ResizablePanel'
diff --git a/packages/ui/stories/components/userPanel.stories.tsx b/packages/ui/stories/components/userPanel.stories.tsx
index 78d673a207..69265676b9 100644
--- a/packages/ui/stories/components/userPanel.stories.tsx
+++ b/packages/ui/stories/components/userPanel.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { UserPanel } from '../..';
 
-import styles from './styles.scss';
+import * as styles from './styles.scss';
 
 export default {
   title: 'Components/User panel',