diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx
index ff12c5f4..0c106036 100644
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -27,6 +27,9 @@ export default class Modals extends React.PureComponent {
         welcomeModal: true
       });
     }
+
+    // hide refresh reminder once the user has refreshed the page
+    localStorage.setItem('showReminder', false);
   }
 
   closeWelcome() {
diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx
index 6c6e86ee..f326ef30 100644
--- a/src/components/modals/main/Main.jsx
+++ b/src/components/modals/main/Main.jsx
@@ -8,10 +8,18 @@ const Settings = React.lazy(() => import('./tabs/Settings'));
 const Addons = React.lazy(() => import('./tabs/Addons'));
 const Marketplace = React.lazy(() => import('./tabs/Marketplace'));
 
-const renderLoader = () => (<Tabs>
-  <div label=''>{window.language.modals.main.loading}</div>
-  <div label=''>{window.language.modals.main.loading}</div>
-</Tabs>);
+const renderLoader = () => (
+  <Tabs>
+    <div label={window.language.modals.main.loading}>
+      <div className='emptyitems'>
+        <div className='emptyMessage'>
+          <h1>{window.language.modals.main.loading}</h1>
+        </div>
+      </div>
+    </div>
+    <div label='' style={{ 'display': 'none' }}></div>
+  </Tabs>
+);
 
 export default function MainModal(props) {
   const language = window.language.modals.main.navbar;
diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index 3e48f8be..a66d480c 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -6,8 +6,6 @@
 @import 'settings/dropdown';
 @import 'settings/daypicker';
 
-@import 'settings/react-color-picker-gradient-picker-custom-styles.scss';
-
 @import 'marketplace/main';
 
 .Modal {
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index 001f815b..0f5cb941 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -184,4 +184,4 @@ p.description {
   h1 {
     margin-top: -20px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index e83a950e..c0481a5e 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -129,12 +129,11 @@ input[type=color]::-moz-color-swatch {
   position: absolute;
   bottom: 20px;
   right: 20px;
-  padding: 20px;
-  color: #000;
-  background: #f0f0f0;
+  padding: 15px;
+  color: var(--modal-text);
+  background: var(--sidebar);
   max-width: 300px;
   border-radius: 0.7em;
-  display: none;
 
   h1 {
     font-size: 1em;
diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx
index 3f491e70..07086a0d 100644
--- a/src/components/modals/main/settings/Checkbox.jsx
+++ b/src/components/modals/main/settings/Checkbox.jsx
@@ -21,6 +21,13 @@ export default class Checkbox extends React.PureComponent {
       checked: (this.state.checked === true) ? false : true
     });
 
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
     EventBus.dispatch('refresh', this.props.category);
   }
 
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx
index 0fa10115..f626b5c4 100644
--- a/src/components/modals/main/settings/Dropdown.jsx
+++ b/src/components/modals/main/settings/Dropdown.jsx
@@ -29,6 +29,13 @@ export default class Dropdown extends React.PureComponent {
       this.props.onChange(value);
     }
 
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
     EventBus.dispatch('refresh', this.props.category);
   }
 
diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx
index 5d79aa39..3030b9e0 100644
--- a/src/components/modals/main/settings/Radio.jsx
+++ b/src/components/modals/main/settings/Radio.jsx
@@ -25,6 +25,13 @@ export default class Radio extends React.PureComponent {
       value: value
     });
 
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
     EventBus.dispatch('refresh', this.props.category);
   }
   
diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx
index 5c13c97f..290c41c5 100644
--- a/src/components/modals/main/settings/Switch.jsx
+++ b/src/components/modals/main/settings/Switch.jsx
@@ -21,6 +21,13 @@ export default class Switch extends React.PureComponent {
       checked: (this.state.checked === true) ? false : true
     });
 
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
     EventBus.dispatch('refresh', this.props.category);
   }
 
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index 7140922a..2566bd5b 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@@ -26,6 +26,13 @@ export default class Text extends React.PureComponent {
       value: value
     });
 
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
     EventBus.dispatch('refresh', this.props.category);
   }
 
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index f0dd42fa..0c865eef 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -44,13 +44,13 @@ export default class AdvancedSettings extends React.PureComponent {
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)}/>
 
         <h3>{advanced.customisation}</h3>
-        <Text title={advanced.custom_js} name='customjs' textarea={true}/>
-        <Text title={advanced.custom_css} name='customcss' textarea={true}/>
+        <Text title={advanced.custom_js} name='customjs' textarea={true} element='.other'/>
+        <Text title={advanced.custom_css} name='customcss' textarea={true} element='.other'/>
         <Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>
 
         <h3>{this.language.sections.experimental.title}</h3>
         <p>{advanced.experimental_warning}</p>
-        <Checkbox name='experimental' text={this.language.enabled}/>
+        <Checkbox name='experimental' text={this.language.enabled} element='.other'/>
 
         <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay resetoverlay'} ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index f131b546..ea701f26 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -32,14 +32,14 @@ export default function AppearanceSettings() {
       <Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
 
       <h3>{appearance.navbar.title}</h3>
-      <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
-      <Checkbox name='refresh' text={appearance.navbar.refresh} />
+      <Checkbox name='notesEnabled' text={appearance.navbar.notes} element='.other' />
+      <Checkbox name='refresh' text={appearance.navbar.refresh} element='.other' />
 
       <h3>{appearance.font.title}</h3>
-      <Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
+      <Text title={appearance.font.custom} name='font' upperCaseFirst={true} element='.other' />
       <br/>
-      <Checkbox name='fontGoogle' text={appearance.font.google} />
-      <Dropdown label={appearance.font.weight.title} name='fontweight'>
+      <Checkbox name='fontGoogle' text={appearance.font.google} element='.other' />
+      <Dropdown label={appearance.font.weight.title} name='fontweight' element='.other'>
         {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
         <option value='100'>{appearance.font.weight.thin}</option>
         <option value='200'>{appearance.font.weight.extra_light}</option>
@@ -51,7 +51,7 @@ export default function AppearanceSettings() {
         <option value='800'>{appearance.font.weight.extra_bold}</option>
       </Dropdown>
       <br/><br/>
-      <Dropdown label={appearance.font.style.title} name='fontstyle'>
+      <Dropdown label={appearance.font.style.title} name='fontstyle' element='.other'>
         <option value='normal'>{appearance.font.style.normal}</option>
         <option value='italic'>{appearance.font.style.italic}</option>
         <option value='oblique'>{appearance.font.style.oblique}</option>
diff --git a/src/components/modals/main/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx
index 819b0093..87bb8fc1 100644
--- a/src/components/modals/main/settings/sections/Experimental.jsx
+++ b/src/components/modals/main/settings/sections/Experimental.jsx
@@ -11,10 +11,10 @@ export default function ExperimentalSettings() {
     <>
       <h2>{experimental.title}</h2>
       <p>{experimental.warning}</p>
-      <Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations}/>
+      <Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations} element='.other'/>
       <h3>{experimental.developer}</h3>
-      <Checkbox name='debug' text='Debug hotkey (Ctrl + #)'/>
-      <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' />
+      <Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
+      <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />
       {/* <Checkbox name='beta' text='Beta Mode Override'/>
       <Text name='api_override' title='Version Override (format example: 5.0)'/>
       <Text name='api_override' title='API URL Override'/>
diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index 96117263..2f46abca 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import EventBus from '../../../../../modules/helpers/eventbus';
-
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
@@ -25,7 +23,8 @@ export default class GreetingSettings extends React.PureComponent {
       birthday: data
     });
 
-    EventBus.dispatch('refresh', 'greeting');
+    document.querySelector('.reminder-info').style.display = 'block';
+    localStorage.setItem('showReminder', true);
   }
 
   render() {
@@ -34,14 +33,14 @@ export default class GreetingSettings extends React.PureComponent {
     return (
       <>
         <h2>{greeting.title}</h2>
-        <Switch name='greeting' text={this.language.enabled} category='greeting'/>
-        <Checkbox name='events' text={greeting.events} category='greeting'/>
-        <Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting'/>
-        <Text title={greeting.name} name='greetingName' category='greeting'/>
+        <Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
+        <Checkbox name='events' text={greeting.events} category='greeting' element='.other'/>
+        <Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.other'/>
+        <Text title={greeting.name} name='greetingName' category='greeting' element='.other'/>
 
         <h3>{greeting.birthday}</h3>
-        <Switch name='birthdayenabled' text={this.language.enabled} category='greeting'/>
-        <Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting'/>
+        <Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.other'/>
+        <Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.other'/>
         <p>{greeting.birthday_date}</p>
         <DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
       </>
diff --git a/src/components/modals/main/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx
index 3eb208f7..470702b1 100644
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/src/components/modals/main/settings/sections/Language.jsx
@@ -11,7 +11,7 @@ export default function LanguageSettings() {
   return (
     <>
       <h2>{language.title}</h2>
-      <Radio name='language' options={languages} />
+      <Radio name='language' options={languages} element='.language' />
       <h3>{language.quote}</h3>
       <Radio name='quotelanguage' options={quote_languages} category='quote' />
     </>
diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx
index 5bf4fd29..3850ed46 100644
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/src/components/modals/main/settings/sections/QuickLinks.jsx
@@ -9,7 +9,7 @@ export default function QuickLinks() {
   return (
     <>
       <h2>{language.title}</h2>
-      <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' />
+      <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container' />
       <Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks' />
       <Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks' />
     </>
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index 937edd7d..e2ea53aa 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -10,10 +10,10 @@ export default function QuoteSettings() {
   return (
     <>
       <h2>{quote.title}</h2>
-      <Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' />
-      <Checkbox name='authorLink' text={quote.author_link} category='quote' />
-      <Text title={quote.custom} name='customQuote' category='quote' />
-      <Text title={quote.custom_author} name='customQuoteAuthor' category='quote'/>
+      <Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' element='.quotediv' />
+      <Checkbox name='authorLink' text={quote.author_link} element='.other' />
+      <Text title={quote.custom} name='customQuote' element='.other' />
+      <Text title={quote.custom_author} name='customQuoteAuthor' element='.other'/>
 
       <h3>{quote.buttons.title}</h3>
       <Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index f813207e..578b57b4 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -94,7 +94,7 @@ export default class TimeSettings extends React.PureComponent {
     return (
       <>
         <h2>{time.title}</h2>
-        <Switch name='time' text={this.language.enabled} category='clock' />
+        <Switch name='time' text={this.language.enabled} category='clock' element='.clock' />
         <Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
           <option value='digital'>{time.digital.title}</option>
           <option value='analogue'>{time.analogue.title}</option>
diff --git a/src/components/modals/main/settings/sections/background/Colour.jsx b/src/components/modals/main/settings/sections/background/Colour.jsx
index ebcbd7a0..46acfb1b 100644
--- a/src/components/modals/main/settings/sections/background/Colour.jsx
+++ b/src/components/modals/main/settings/sections/background/Colour.jsx
@@ -8,6 +8,7 @@ import rgbToHex from '../../../../../../modules/helpers/background/rgbToHex';
 import { toast } from 'react-toastify';
 
 import 'react-color-gradient-picker/dist/index.css';
+import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
 
 export default class ColourSettings extends React.PureComponent {
   DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': '#ffb032', 'stop': 0 }], 'type': 'linear' };
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index a1eb0bf3..d108e9ed 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -18,29 +18,35 @@ import Weather from '../settings/sections/Weather';
 import Tabs from './backend/Tabs';
 
 export default function Settings() {
-  const settings = window.language.modals.main.settings.sections;
+  const { reminder, sections } = window.language.modals.main.settings;
+
+  let display = 'none';
+  if (localStorage.getItem('showReminder') === 'true') {
+    display = 'block';
+  }
 
   return (
     <>
       <Tabs>
-        <div label={settings.time.title}><Time/></div>
-        <div label={settings.quote.title}><Quote/></div>
-        <div label={settings.greeting.title}><Greeting/></div>
-        <div label={settings.background.title}><Background/></div>
-        <div label={settings.search.title}><Search/></div>
-        <div label={settings.quicklinks.title}><QuickLinks/></div>
-        <div label={settings.weather.title}><Weather/></div>
-        <div label={settings.appearance.title}><Appearance/></div>
-        <div label={settings.order.title}><Order/></div>
-        <div label={settings.language.title}><Language/></div>
-        <div label={settings.advanced.title}><Advanced/></div>
-        <div label={settings.experimental.title}><Experimental/></div>
-        <div label={settings.changelog}><Changelog/></div>
-        <div label={settings.about.title}><About/></div>
+        <div label={sections.time.title}><Time/></div>
+        <div label={sections.quote.title}><Quote/></div>
+        <div label={sections.greeting.title}><Greeting/></div>
+        <div label={sections.background.title}><Background/></div>
+        <div label={sections.search.title}><Search/></div>
+        <div label={sections.quicklinks.title}><QuickLinks/></div>
+        <div label={sections.weather.title}><Weather/></div>
+        <div label={sections.appearance.title}><Appearance/></div>
+        <div label={sections.order.title}><Order/></div>
+        <div label={sections.language.title}><Language/></div>
+        <div label={sections.advanced.title}><Advanced/></div>
+        <div label={sections.experimental.title}><Experimental/></div>
+        <div label={sections.changelog}><Changelog/></div>
+        <div label={sections.about.title}><About/></div>
       </Tabs>
-      <div className='reminder-info'>
-        <h1>IMPORTANT INFO</h1>
-        <p>In order for changes to take place, the page must be refreshed.</p>
+      <div className='reminder-info' style={{ 'display': display }}>
+        <h1>{reminder.title}</h1>
+        <p>{reminder.message}</p>
+        <button className='pinNote' onClick={() => window.location.reload()}>{window.language.modals.main.error_boundary.refresh}</button>
       </div>
     </>
   );
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 45856d1f..fa84d472 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -55,6 +55,10 @@
       },
       "settings": {
         "enabled": "Enabled",
+        "reminder": {
+          "title": "NOTICE",
+          "message": "In order for all of the changes to take place, the page must be refreshed."
+        },
         "sections": {
           "time": {
             "title": "Time",
@@ -298,10 +302,6 @@
           "last_updated": "Last Updated",
           "version": "Version",
           "author": "Authour",
-          "notice": {
-            "title": "Notice",
-            "description": "In order for the change to take place, the page must be refreshed."
-          },
           "buttons": {
             "addtomue": "Add To Mue",
             "remove": "Remove"