diff --git a/README.md b/README.md
index f406b526..537a0c0f 100644
--- a/README.md
+++ b/README.md
@@ -132,11 +132,11 @@ Please see our [roadmap](https://github.com/mue/mue/projects/2)
 ### Translators
 [Wessel Tip](https://github.com/Wessel) - Dutch
 
-[Alex Sparkes](https://github.com/alexsparkes) - French
+[Alex Sparkes](https://github.com/alexsparkes), [Maxime](https://github.com/exiam) - French
 
 [Anders](https://github.com/FuryingFox) - Norwegian
 
-[MrZillaGold](https://github.com/MrZillaGold) - Russian
+[Pronin Egor](https://github.com/MrZillaGold) - Russian
 
 ### Other
 [Pexels](https://pexels.com) - Stock photos used for offline mode
diff --git a/public/offline-images/1.jpeg b/public/offline-images/1.jpg
similarity index 100%
rename from public/offline-images/1.jpeg
rename to public/offline-images/1.jpg
diff --git a/public/offline-images/10.jpeg b/public/offline-images/10.jpg
similarity index 100%
rename from public/offline-images/10.jpeg
rename to public/offline-images/10.jpg
diff --git a/public/offline-images/11.jpeg b/public/offline-images/11.jpg
similarity index 100%
rename from public/offline-images/11.jpeg
rename to public/offline-images/11.jpg
diff --git a/public/offline-images/12.jpeg b/public/offline-images/12.jpg
similarity index 100%
rename from public/offline-images/12.jpeg
rename to public/offline-images/12.jpg
diff --git a/public/offline-images/13.jpeg b/public/offline-images/13.jpg
similarity index 100%
rename from public/offline-images/13.jpeg
rename to public/offline-images/13.jpg
diff --git a/public/offline-images/14.jpeg b/public/offline-images/14.jpg
similarity index 100%
rename from public/offline-images/14.jpeg
rename to public/offline-images/14.jpg
diff --git a/public/offline-images/15.jpeg b/public/offline-images/15.jpg
similarity index 100%
rename from public/offline-images/15.jpeg
rename to public/offline-images/15.jpg
diff --git a/public/offline-images/16.jpeg b/public/offline-images/16.jpg
similarity index 100%
rename from public/offline-images/16.jpeg
rename to public/offline-images/16.jpg
diff --git a/public/offline-images/17.jpeg b/public/offline-images/17.jpg
similarity index 100%
rename from public/offline-images/17.jpeg
rename to public/offline-images/17.jpg
diff --git a/public/offline-images/18.jpeg b/public/offline-images/18.jpg
similarity index 100%
rename from public/offline-images/18.jpeg
rename to public/offline-images/18.jpg
diff --git a/public/offline-images/19.jpeg b/public/offline-images/19.jpg
similarity index 100%
rename from public/offline-images/19.jpeg
rename to public/offline-images/19.jpg
diff --git a/public/offline-images/2.jpeg b/public/offline-images/2.jpg
similarity index 100%
rename from public/offline-images/2.jpeg
rename to public/offline-images/2.jpg
diff --git a/public/offline-images/20.jpeg b/public/offline-images/20.jpg
similarity index 100%
rename from public/offline-images/20.jpeg
rename to public/offline-images/20.jpg
diff --git a/public/offline-images/3.jpeg b/public/offline-images/3.jpg
similarity index 100%
rename from public/offline-images/3.jpeg
rename to public/offline-images/3.jpg
diff --git a/public/offline-images/4.jpeg b/public/offline-images/4.jpg
similarity index 100%
rename from public/offline-images/4.jpeg
rename to public/offline-images/4.jpg
diff --git a/public/offline-images/5.jpeg b/public/offline-images/5.jpg
similarity index 100%
rename from public/offline-images/5.jpeg
rename to public/offline-images/5.jpg
diff --git a/public/offline-images/6.jpeg b/public/offline-images/6.jpg
similarity index 100%
rename from public/offline-images/6.jpeg
rename to public/offline-images/6.jpg
diff --git a/public/offline-images/7.jpeg b/public/offline-images/7.jpg
similarity index 100%
rename from public/offline-images/7.jpeg
rename to public/offline-images/7.jpg
diff --git a/public/offline-images/8.jpeg b/public/offline-images/8.jpg
similarity index 100%
rename from public/offline-images/8.jpeg
rename to public/offline-images/8.jpg
diff --git a/public/offline-images/9.jpeg b/public/offline-images/9.jpg
similarity index 100%
rename from public/offline-images/9.jpeg
rename to public/offline-images/9.jpg
diff --git a/src/App.jsx b/src/App.jsx
index 16a05ae6..7e144853 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -16,7 +16,7 @@ import Modal from 'react-modal';
 import merge from 'lodash.merge';
 import RoomIcon from '@material-ui/icons/Room';
 
-// Modals are lazy loaded as a user won't use them every time they open a tab
+// Modals are lazy loaded as the user won't use them every time they open a tab
 const MainModal = React.lazy(() => import('./components/modals/MainModal'));
 const Update = React.lazy(() => import('./components/modals/Update'));
 //const Welcome = React.lazy(() => import('./components/modals/Welcome'));
diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx
index bf127e24..7b71cab5 100644
--- a/src/components/modals/settings/Section.jsx
+++ b/src/components/modals/settings/Section.jsx
@@ -22,7 +22,7 @@ export default class Section extends React.PureComponent {
   }
 
   render() {
-    let extraHTML, expandMore, slider;
+    let extraHTML, expandMore, slider, noDropdown;
     if (this.props.children) {
         extraHTML = <li className='extraSettings'>{this.props.children}</li>
         expandMore = <ExpandMore
@@ -33,10 +33,11 @@ export default class Section extends React.PureComponent {
     }
 
     if (this.props.slider !== false) slider = <Slider name={this.props.name} />;
+    if (this.props.noDropdown) noDropdown = 'nodropdown';
 
     return (
         <div className='section'>
-            <h4 onClick={() => this.toggleSection()}>{this.props.title}</h4>
+            <h4 className={noDropdown} onClick={() => this.toggleSection()}>{this.props.title}</h4>
             {expandMore}
             {slider}
             <div style={{display: this.state.display}}>
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx
index 6f3c575a..dae31f65 100644
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/src/components/modals/settings/sections/BackgroundSettings.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { toast } from 'react-toastify';
 import Checkbox from '../Checkbox';
+import Section from '../Section';
 
 export default class BackgroundSettings extends React.PureComponent {
   DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" };
@@ -151,44 +152,46 @@ export default class BackgroundSettings extends React.PureComponent {
     }
 
     return (
-      <div>
-        <ul>
-          <Checkbox name='view' text={this.props.language.background.view} />
-          <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
-          <Checkbox name='refresh' text={this.props.language.background.refresh} />
-        </ul>
-        <ul>
-          <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
-          <label className='dropdown'>
-            <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
-              <option className='choices' value='mue'>Mue</option>
-              <option className='choices' value='unsplash'>Unsplash</option>
-            </select>
-          </label>
-        </ul>
-        <ul>
-          <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
-          <input className='range' type='range' min='0' max='100' id='blurRange' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
-        </ul>
-        <ul>
-          <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
-          <input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
-        </ul>
-        <ul>
-          <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
-          <input type='text' id='customBackground'></input>
-        </ul>
-        <ul>
-          <p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
-          <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
-          <input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
-        </ul>
-        <ul>
-          <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
-          <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
-          {colourSettings}
-        </ul>
-      </div>
+      <React.Fragment>
+        <Section title={this.props.language.background.title} name='background'>
+          <ul>
+            <Checkbox name='view' text={this.props.language.background.view} />
+            <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
+            <Checkbox name='refresh' text={this.props.language.background.refresh} />
+          </ul>
+          <ul>
+            <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
+            <label className='dropdown'>
+              <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
+                <option className='choices' value='mue'>Mue</option>
+                <option className='choices' value='unsplash'>Unsplash</option>
+              </select>
+            </label>
+          </ul>
+          <ul>
+            <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
+            <input className='range' type='range' min='0' max='100' id='blurRange' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
+          </ul>
+          <ul>
+            <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
+            <input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
+          </ul>
+          <ul>
+            <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+            <input type='text' id='customBackground'></input>
+          </ul>
+          <ul>
+            <p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+            <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
+            <input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
+          </ul>
+          <ul>
+            <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
+             <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
+            {colourSettings}
+          </ul>
+        </Section>
+      </React.Fragment>
     );
   }
 }
\ No newline at end of file
diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx
index c95dde2b..0003754b 100644
--- a/src/components/modals/settings/sections/SearchSettings.jsx
+++ b/src/components/modals/settings/sections/SearchSettings.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import SettingsFunctions from '../../../../modules/settingsFunctions';
 import { toast } from 'react-toastify';
+import Section from '../Section';
 
 const searchEngines = require('../../../../modules/searchEngines.json');
 
@@ -24,21 +25,23 @@ export default class SearchSettings extends React.PureComponent {
 
   render() {
     return (
-        <div>
-          <ul>
-            <label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
-              <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
-                {searchEngines.map((engine) =>
-                  <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
-                )}
-                <option className='choices' value='custom'>Custom</option>
-              </select>
-            </ul>
-            <ul id='searchEngineInput' style={{ display: 'none' }}>
-              <p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
-              <input type='text' id='customSearchEngine'></input>
-            </ul>
-        </div>
+        <React.Fragment>
+          <Section title={this.props.language.searchbar.title} name='searchBar'>
+            <ul>
+              <label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
+                <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
+                  {searchEngines.map((engine) =>
+                    <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
+                  )}
+                  <option className='choices' value='custom'>Custom</option>
+                </select>
+              </ul>
+              <ul id='searchEngineInput' style={{ display: 'none' }}>
+                <p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
+                <input type='text' id='customSearchEngine'></input>
+              </ul>
+            </Section>
+        </React.Fragment>
     );
   }
 }
\ No newline at end of file
diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx
index 6860b1e8..3919eb00 100644
--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import SettingsFunctions from '../../../modules/settingsFunctions';
 import Checkbox from '../settings/Checkbox';
-import Slider from '../settings/Slider';
 import Section from '../settings/Section';
 import { toast } from 'react-toastify';
 
@@ -50,6 +49,7 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='zero' text={this.props.language.time.zero} />
             <Checkbox name='analog' text={this.props.language.time.analog} />
           </Section>
+
           <Section title={this.props.language.greeting.title} name='greeting'>
             <Checkbox name='events' text={this.props.language.greeting.events} />
             <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
@@ -58,31 +58,27 @@ export default class Settings extends React.PureComponent {
               <input type='text' id='greetingName'></input>
             </ul>
           </Section>
+
           <Section title={this.props.language.quote.title} name='quote'>
             <Checkbox name='copyButton' text={this.props.language.quote.copy} />
             <Checkbox name='tweetButton' text={this.props.language.quote.tweet} />
             <Checkbox name='favouriteQuoteEnabled' text={this.props.language.experimental.favourite} />
           </Section>
-          <Section title={this.props.language.background.title} name='background'>
-            <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-          </Section>
-          <Section title={this.props.language.searchbar.title} name='searchBar'>
-            <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-          </Section>
-          <div className='section'>
-            <h4 className='nodropdown'>{this.props.language.offline}</h4>
-            <Slider name='offlineMode'/>
-          </div>
-          <div className='section'>
-            <h4 className='nodropdown'>{this.props.language.experimental.dark}</h4>
-            <Slider name='darkTheme'/>
-          </div>
+
+          <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+
+          <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+
+          <Section title={this.props.language.offline} name='offlineMode' noDropdown={true} />
+          <Section title={this.props.language.dark} name='darkTheme' noDropdown={true} />
+
           <Section title={this.props.language.experimental.title} name='experimental' slider={false}>
             <Checkbox name='webp' text={this.props.language.experimental.webp} />
             <Checkbox name='animations' text={this.props.language.experimental.animations} />
             <Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} newFeature={true} />
-            <Checkbox name='brightnessTime' text='Automatic Night Mode' newFeature={true} />
+            <Checkbox name='brightnessTime' text={this.props.language.experimental.nightmode} newFeature={true} />
           </Section>
+
           <LanguageSettings language={this.props.language} />
 
           <button className='apply' onClick={() => SettingsFunctions.saveStuff(this.props.language.background.disabled)}>{this.props.language.apply}</button>
diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index 2c6c8ace..48841117 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/Background.jsx
@@ -25,14 +25,13 @@ export default class Background extends React.PureComponent {
         localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
       }
     }
-    const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url});`;
+    const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url})`;
     let brightness = localStorage.getItem('brightness');
     if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) brightness = 75;
 
     document.querySelector('#backgroundImage').setAttribute(
       'style',
-      `${background};
-      -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
+      `${background}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
     );
 
     if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit
@@ -52,7 +51,7 @@ export default class Background extends React.PureComponent {
     const randomImage = offlineImages[photographer].photo[
       Math.floor(Math.random() * offlineImages[photographer].photo.length)
     ]; // Select a random image
-    const url = `../offline-images/${randomImage}.jpeg`;
+    const url = `../offline-images/${randomImage}.jpg`;
 
     this.setBackground(url);
     this.setCredit(photographer);
diff --git a/src/components/widgets/Maximise.jsx b/src/components/widgets/Maximise.jsx
index f940f526..30d7ceda 100644
--- a/src/components/widgets/Maximise.jsx
+++ b/src/components/widgets/Maximise.jsx
@@ -27,6 +27,7 @@ export default class View extends React.PureComponent {
             return;
         }
     });
+
     if (this.state.hidden === false) {
         this.setState({ hidden: true });
         this.setAttribute(0, 100);
diff --git a/src/translations/en.json b/src/translations/en.json
index 498bfc51..750adb2f 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -57,12 +57,13 @@
             "custom": "Custom Search URL"
         },
         "offline": "Offline Mode",
+        "dark": "Dark Theme",
         "experimental": {
             "title": "Experimental",
             "webp": "Enable WebP",
-            "dark": "Dark Theme",
             "animations": "Animations",
-            "voicesearch": "Voice Search"
+            "voicesearch": "Voice Search",
+            "nightmode": "Automatic Night Mode"
         },
         "language": "Language",
         "apply": "Apply",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index 3b1aacd7..63bc382a 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -56,10 +56,10 @@
             "custom": "URL de recherche personnalisée"
         },
         "offline": "Mode Hors-Ligne",
+        "dark": "Thème sombre",
         "experimental": {
             "title": "Expérimental",
             "webp": "Activer WebP",
-            "dark": "Thème sombre",
             "animations": "Animations",
             "favourite": "Bouton Ajouter aux favoris",
             "voicesearch": "Recherche vocale"
diff --git a/src/translations/nl.json b/src/translations/nl.json
index 29c48028..e0f522c5 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -49,10 +49,10 @@
             "searchengine": "Zoekmachine"
         },
         "offline": "Offline Modus",
+        "dark": "Donker Thema",
         "experimental": {
             "title": "Experimenteel",
             "webp": "WebP Gebruiken",
-            "dark": "Donker Thema",
             "animations": "Animaties"
         },
         "language": "Taal",
diff --git a/src/translations/no.json b/src/translations/no.json
index ea92c346..2134ac11 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -48,10 +48,10 @@
             "searchengine": "Søkemotor"
         },
         "offline": "Frakoblet Modus",
+        "dark": "Mørkt tema",
         "experimental": {
             "title": "Eksperimental",
             "webp": "Skru på WebP",
-            "dark": "Mørkt tema",
             "animations": "Animasjoner"
         },
         "language": "Språk",
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 087ad5b3..5e8297fc 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -50,10 +50,10 @@
             "searchengine": "Поисковый движок"
         },
         "offline": "Офлайн режим",
+        "dark": "Тёмная тема",
         "experimental": {
             "title": "Экспериментальные настройки",
             "webp": "Включить WebP",
-            "dark": "Тёмная тема",
             "animations": "Анимации"
         },
         "language": "Язык",