diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index 2d5eaa4f..9b112c07 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -233,6 +233,10 @@ li {
   font-size: 22px;
   font-weight: 500;
   display: inline-flex;
+
+  &:hover {
+    color: rgb(105, 105, 105);
+  }
 }
 
 .modalNavbar {
@@ -296,7 +300,6 @@ li {
   }
 
   &:hover {
-    opacity: .8;
     background: map-get($theme-colours, 'gradient');
     -webkit-background-clip: text;
     background-clip: text;
diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index 30eec096..38d3e7b8 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -11,19 +11,6 @@ input {
     padding: 10px 10px;
     border-radius: 5px;
   }
-
-  &:checked+.slider {
-    background: map-get($theme-colours, 'gradient');
-
-    &:before {
-      -webkit-transform: translateX(26px);
-      transform: translateX(26px);
-    }
-  }
-
-  &:focus+.slider {
-    box-shadow: 0 0 1px #e67e22;
-  }
 }
 
 h4 {
@@ -42,7 +29,7 @@ ul {
 .range {
   -webkit-appearance: none;
   width: 200px;
-  height: 15px;
+  height: 12px;
   border-radius: 12px;
   outline: none;
   background: var(--sidebar);
@@ -52,10 +39,10 @@ ul {
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 25px;
-    height: 25px;
+    width: 20px;
+    height: 20px;
     border-radius: 12px;
-    background: map-get($theme-colours, 'gradient');
+    background: #ff4757;
     cursor: pointer;
   }
 
@@ -64,7 +51,7 @@ ul {
     height: 25px;
     border-radius: 12px;
     border: 0;
-    background: map-get($theme-colours, 'gradient');
+    background: #ff4757;
     cursor: pointer;
   }
 }
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index a0396c5f..bced0d5e 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -11,7 +11,7 @@ export default class Slider extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
-  handleChange = () => {
+  handleChange = (e) => {
     const { value } = e.target;
   
     localStorage.setItem(this.props.name, value);
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 2f62e04c..0ac658d6 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -11,7 +11,8 @@ export default class About extends React.PureComponent {
       contributors: [],
       sponsors: [],
       other_contributors: [],
-      update: window.language.modals.main.settings.sections.about.version.checking_update
+      update: window.language.modals.main.settings.sections.about.version.checking_update,
+      loading: 'Loading...'
     }
     this.language = window.language.modals.main.settings.sections.about;
   }
@@ -32,7 +33,8 @@ export default class About extends React.PureComponent {
       contributors: contributors.filter((contributor) => !contributor.login.includes('bot')),
       sponsors: sponsors,
       update: updateMsg,
-      other_contributors: other_contributors
+      other_contributors: other_contributors,
+      loading: null
     });
   }
 
@@ -59,6 +61,7 @@ export default class About extends React.PureComponent {
         <p>Google ({this.language.resources_used.pin_icon})</p>
         <p>Undraw ({this.language.resources_used.welcome_img})</p>
         <h3>{this.language.contributors}</h3>
+        {this.state.loading}
         {this.state.contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
@@ -71,6 +74,7 @@ export default class About extends React.PureComponent {
           </Tooltip>
         )}
         <h3>{this.language.supporters}</h3>
+        {this.state.loading}
         {this.state.sponsors.map((item) =>
           <Tooltip title={item.handle} placement='top' key={item.handle}>
             <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=256'} alt={item.handle}></img></a>
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index f227563a..60087a66 100644
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -15,6 +15,7 @@
 }
 
 .welcomeContent {
+  margin-top: 2em;
   text-align: center;
   padding: 25px;
 
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 9838b3ee..f951676a 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -132,7 +132,6 @@ export default class Background extends React.PureComponent {
       case 'colour':
         // background colour
         const customBackgroundColour = localStorage.getItem('customBackgroundColour');
-        if (customBackgroundColour !== 'Disabled' && customBackgroundColour !== '') {
         let gradientSettings = '';
         try {
           gradientSettings = JSON.parse(customBackgroundColour);
@@ -148,7 +147,6 @@ export default class Background extends React.PureComponent {
         if (typeof gradientSettings === 'object' && gradientSettings !== null) {
           return this.gradientStyleBuilder(gradientSettings);
         }
-      }
       break;
 
       case 'custom':
@@ -188,7 +186,10 @@ export default class Background extends React.PureComponent {
             }
           });
         }
-      }
+      break;
+      default: 
+        break;
+    }
   }
 
   componentDidMount() {
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index 85eed99c..694e573d 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -6,11 +6,9 @@ import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Tooltip from '@material-ui/core/Tooltip';
 import Report from '@material-ui/icons/SmsFailed';
 
-import './scss/index.scss';
+import Notes from './Notes';
 
-// the user probably won't use the notes feature every time so we lazy load
-const Notes = React.lazy(() => import('./Notes'));
-const renderLoader = () => <></>;
+import './scss/index.scss';
 
 export default function Navbar(props) {
   const language = window.language;
@@ -20,9 +18,7 @@ export default function Navbar(props) {
       {(localStorage.getItem('notesEnabled') === 'true') ?
         <div className='notes'>
           <NotesIcon className='topicons'/>
-          <React.Suspense fallback={renderLoader()}>
-            <Notes/>
-          </React.Suspense>
+          <Notes/>
         </div>
       :null}
 
diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json
index 50a8475f..60f46fab 100644
--- a/src/modules/default_settings.json
+++ b/src/modules/default_settings.json
@@ -134,5 +134,9 @@
   {
     "name": "theme",
     "value": "auto"
+  },
+  {
+    "name": "backgroundType",
+    "value": "api"
   }
 ]
diff --git a/src/modules/languages.json b/src/modules/languages.json
index 13eeed19..f4821ef8 100644
--- a/src/modules/languages.json
+++ b/src/modules/languages.json
@@ -1,4 +1,8 @@
 [
+  {
+    "name": "Deutsch",
+    "value": "de_DE"
+  },
   {
     "name": "English (UK)",
     "value": "en_GB"
@@ -7,10 +11,6 @@
     "name": "English (US)",
     "value": "en_US"
   },
-  {
-    "name": "Germany",
-    "value": "de_DE"
-  },
   {
     "name": "Español",
     "value": "es"