diff --git a/src/components/modals/settings/sections/About.jsx b/src/components/modals/settings/sections/About.jsx
index 9543742e..e38b4713 100644
--- a/src/components/modals/settings/sections/About.jsx
+++ b/src/components/modals/settings/sections/About.jsx
@@ -18,11 +18,12 @@ export default class About extends React.PureComponent {
 
   async getGitHubData() {
     const contributors = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
-    const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
     const { sponsors } = await (await fetch(Constants.SPONSORS_URL + '/list')).json();
 
+    const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
+    const version = versionData[0].tag_name;
+
     let updateMsg = this.props.language.version.no_update;
-    let version = versionData[0].tag_name;
     if (version !== '5.0' && version !== '4.1') {
       updateMsg = `${this.props.language.version.update_available}: ${version}`;
     }
@@ -48,6 +49,7 @@ export default class About extends React.PureComponent {
         <h3>{this.props.language.resources_used.title}</h3>
         <p>Pexels ({this.props.language.resources_used.bg_images})</p>
         <p>Google ({this.props.language.resources_used.pin_icon})</p>
+        <p>Undraw ({this.props.language.resources_used.welcome_img})</p>
         <h3>{this.props.language.contributors}</h3>
         {this.state.contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
diff --git a/src/components/modals/settings/sections/Advanced.jsx b/src/components/modals/settings/sections/Advanced.jsx
index 7c263675..4cdfd3ba 100644
--- a/src/components/modals/settings/sections/Advanced.jsx
+++ b/src/components/modals/settings/sections/Advanced.jsx
@@ -10,7 +10,7 @@ import { toast } from 'react-toastify';
 export default class AdvancedSettings extends React.PureComponent {
   resetItem(type) {
     document.getElementById(type).value = '';
-    toast(this.props.toastLanguage.reset);
+    toast(this.props.language.toasts.reset);
   }
 
   componentDidMount() {
@@ -25,7 +25,7 @@ export default class AdvancedSettings extends React.PureComponent {
       localStorage.setItem(key, content[key]);
     }
 
-    toast(this.props.toastLanguage.imported);
+    toast(this.props.language.toasts.imported);
   }
 
   componentWillUnmount() {
diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/settings/sections/Appearance.jsx
index 768acc23..7a00e895 100644
--- a/src/components/modals/settings/sections/Appearance.jsx
+++ b/src/components/modals/settings/sections/Appearance.jsx
@@ -1,22 +1,34 @@
 import React from 'react';
 import Checkbox from '../Checkbox';
 
-export default function AppearanceSettings (props) {
-  return (
-    <div>
-      <h2>{props.language.title}</h2>
-      <Checkbox name='darkTheme' text={props.language.dark_theme} />
-      <Checkbox name='brightnessTime' text={props.language.night_mode} />
-      <h3>{props.language.accessibility.title}</h3>
-      <Checkbox name='animations' text={props.language.animations} betaFeature={true} />
-      <ul>
-        <p>{props.language.accessibility.zoom} (100%) <span className='modalLink'>Reset</span></p>
-        <input className='range' type='range' min='50' max='200' value={100} />
-      </ul>
-      <ul>
-        <p>{props.language.accessibility.toast_duration} (2500 {props.language.accessibility.milliseconds}) <span className='modalLink'>{props.language.reset}</span></p>
-        <input className='range' type='range' min='50' max='200' value={100} />
-      </ul>
-    </div>
-  );
+export default class AppearanceSettings extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      zoom: 100,
+      toast_duration: 2500
+    };
+  }
+
+  render() {
+    const { appearance } = this.props.language.sections;
+
+    return (
+      <div>
+        <h2>{appearance.title}</h2>
+        <Checkbox name='darkTheme' text={appearance.dark_theme} />
+        <Checkbox name='brightnessTime' text={appearance.night_mode} />
+        <h3>{appearance.accessibility.title}</h3>
+        <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
+        <ul>
+          <p>{appearance.accessibility.zoom} (100%) <span className='modalLink'>{this.props.language.buttons.reset}</span></p>
+          <input className='range' type='range' min='50' max='200' value={100} />
+        </ul>
+        <ul>
+          <p>{appearance.accessibility.toast_duration} (2500 {appearance.accessibility.milliseconds}) <span className='modalLink'>{this.props.language.buttons.reset}</span></p>
+          <input className='range' type='range' min='50' max='200' value={100} />
+        </ul>
+      </div>
+    );
+  }
 }
diff --git a/src/components/modals/settings/sections/Background.jsx b/src/components/modals/settings/sections/Background.jsx
index b94aab80..16f0adb3 100644
--- a/src/components/modals/settings/sections/Background.jsx
+++ b/src/components/modals/settings/sections/Background.jsx
@@ -20,8 +20,8 @@ export default class BackgroundSettings extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      blur: 0,
-      brightness: 100,
+      blur: localStorage.getItem('blur'),
+      brightness: localStorage.getItem('brightness'),
       customBackground: localStorage.getItem('customBackground') || '',
       gradientSettings: this.DefaultGradientSettings
     };
@@ -58,7 +58,7 @@ export default class BackgroundSettings extends React.PureComponent {
         toast('resetItem requires a key!');
     }
 
-    toast(this.props.toastLanguage.reset);
+    toast(this.props.language.toasts.reset);
   }
 
   InitializeColorPickerState(gradientSettings) {
@@ -95,8 +95,6 @@ export default class BackgroundSettings extends React.PureComponent {
     }
 
     this.setState({
-      blur: localStorage.getItem('blur'),
-      brightness: localStorage.getItem('brightness'),
       gradientSettings
     });
 
@@ -163,7 +161,7 @@ export default class BackgroundSettings extends React.PureComponent {
     localStorage.setItem('customBackground', e.target.result);
     this.setState({
       customBackground: e.target.result
-     });
+    });
   }
 
   componentDidUpdate() {
diff --git a/src/components/modals/settings/sections/Quote.jsx b/src/components/modals/settings/sections/Quote.jsx
index 1ce31ce4..bb7ca338 100644
--- a/src/components/modals/settings/sections/Quote.jsx
+++ b/src/components/modals/settings/sections/Quote.jsx
@@ -8,12 +8,12 @@ export default function QuoteSettings (props) {
   return (
     <div>
       <h2>{quote.title}</h2>
-      <Checkbox name='quote' text={props.language.enabled}></Checkbox>
-      <Checkbox name='authorLink' text={quote.author_link}></Checkbox>
+      <Checkbox name='quote' text={props.language.enabled}/>
+      <Checkbox name='authorLink' text={quote.author_link}/>
       <h3>{quote.buttons}</h3>
-      <Checkbox name='copyButton' text={quote.copy} />
-      <Checkbox name='tweetButton' text={quote.tweet} />
-      <Checkbox name='favouriteQuoteEnabled' text={quote.favourite} />
+      <Checkbox name='copyButton' text={quote.copy}/>
+      <Checkbox name='tweetButton' text={quote.tweet}/>
+      <Checkbox name='favouriteQuoteEnabled' text={quote.favourite}/>
     </div>
   );
 }
diff --git a/src/components/modals/settings/sections/Search.jsx b/src/components/modals/settings/sections/Search.jsx
index 6b1fee97..0995f96f 100644
--- a/src/components/modals/settings/sections/Search.jsx
+++ b/src/components/modals/settings/sections/Search.jsx
@@ -12,7 +12,7 @@ export default class SearchSettings extends React.PureComponent {
     localStorage.removeItem('customSearchEngine');
     document.getElementById('customSearchEngine').value = '';
 
-    toast(this.props.toastLanguage.reset);
+    toast(this.props.language.toasts.reset);
   }
 
   componentDidMount() {
diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx
index 62ccfb34..aa7e7709 100644
--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -32,7 +32,7 @@ export default function Settings (props) {
           <Search language={props.language}/>
         </div>
         <div label={props.language.sections.appearance.title}>
-          <Appearance language={props.language.sections.appearance} resetLanguage={props.language.buttons.reset} toastLanguage={props.toastLanguage}/>
+          <Appearance language={props.language}/>
         </div>
         <div label={props.language.sections.language.title}>
           <Language language={props.language.sections.language}/>
diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json
index f0f017bf..631972db 100644
--- a/src/translations/en-GB.json
+++ b/src/translations/en-GB.json
@@ -144,7 +144,8 @@
             },
             "resources_used": {
               "title": "Resources Used",
-              "bg_images": "Background Images",
+              "bg_images": "Offline Background Images",
+              "welcome_img": "Welcome Image",
               "pin_icon": "Pin Icon"
             },
             "contributors": "Contributors",
@@ -155,6 +156,10 @@
           "reset": "Reset",
           "import": "Import",
           "export": "Export"
+        },
+        "toasts": {
+          "reset": "Reset successfully",
+          "imported": "Successfully imported"
         }
       },
       "marketplace": {
@@ -228,8 +233,6 @@
   },
   "toasts": {
     "quote": "Quote copied",
-    "reset": "Reset successfully",
-    "imported": "Successfully imported",
     "installed": "Successfully installed",
     "uninstalled": "Successfully removed",
     "error": "Something went wrong"