diff --git a/src/components/Background.jsx b/src/components/Background.jsx
index 3962a5bb..3b1c9f19 100644
--- a/src/components/Background.jsx
+++ b/src/components/Background.jsx
@@ -4,7 +4,46 @@ import supportsWebP from 'supports-webp';
 
 
 export default class Background extends React.Component {
+  doOffline() {
+    const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
+    document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+    let photographer; // Photographer credit
+    let pixabayNumbers = [2, 3, 9, 11, 13, 14, 15]; // As there are a lot of Pixabay photos, we shorten the code a bit here
+    if (pixabayNumbers.includes(photo)) photographer = 'Pixabay';
+    else switch (photo) {
+      default: {
+        photographer = 'Unknown';
+        break;
+      }
+      case 1: {
+        photographer = 'Tirachard Kumtanom';
+        break;
+      }
+      case 4: {
+        photographer = 'Sohail Na';
+        break;
+      }
+      case 7: {
+        photographer = 'Miriam Espacio';
+        break;
+      }
+      case 10: {
+        photographer = 'NO NAME';
+        break;
+      }
+      case 20: {
+        photographer = 'Fabian Wiktor';
+        break;
+      }
+    }
+    document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
+    document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
+  }  
+
   async setBackground() {    
+    const enabled = localStorage.getItem('offlineMode');
+    if (enabled === 'true') return this.doOffline();
+
     try { // First we try and get an image from the API...
       let requestURL;
       if (await supportsWebP) requestURL = 'https://api.muetab.xyz/getImage?webp=true';
@@ -16,39 +55,7 @@ export default class Background extends React.Component {
       document.getElementById('photographer').innerText = `Photo by ${data.photographer}`; // Set the credit
       document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
     } catch (e) { // ..and if that fails we load one locally
-      const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
-      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
-      let photographer; // Photographer credit
-      let pixabayNumbers = [2, 3, 9, 11, 13, 14, 15]; // As there are a lot of Pixabay photos, we shorten the code a bit here
-      if (pixabayNumbers.includes(photo)) photographer = 'Pixabay';
-      else switch (photo) {
-        default: {
-          photographer = 'Unknown';
-          break;
-        }
-        case 1: {
-          photographer = 'Tirachard Kumtanom';
-          break;
-        }
-        case 4: {
-          photographer = 'Sohail Na';
-          break;
-        }
-        case 7: {
-          photographer = 'Miriam Espacio';
-          break;
-        }
-        case 10: {
-          photographer = 'NO NAME';
-          break;
-        }
-        case 20: {
-          photographer = 'Fabian Wiktor';
-          break;
-        }
-      }
-      document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
-      document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
+      this.doOffline();
     }
   }
 
diff --git a/src/components/Quote.jsx b/src/components/Quote.jsx
index 2089077a..bcb1160b 100644
--- a/src/components/Quote.jsx
+++ b/src/components/Quote.jsx
@@ -11,27 +11,30 @@ export default class Quote extends React.Component {
     };
   }
 
+  doOffline() {
+    const quote = Quotes.random(); // Get a random quote from our local package
+    this.setState({ 
+      quote: '"' + quote.quote + '"', 
+      author: quote.author 
+    }); // Set the quote
+  }
+
   async getQuote() {
+    const enabled = localStorage.getItem('offlineMode');
+    if (enabled === 'true') return this.doOffline();
+    
     try { // First we try and get a quote from the API...
       let data = await fetch('https://api.muetab.xyz/getQuote');
       data = await data.json();
       if (data.statusCode === 429) { // If we hit the ratelimit, we fallback to local quotes
-        const quote = Quotes.random(); // Get a random quote from our local package
-        return this.setState({ 
-          quote: '"' + quote.quote + '"', 
-          author: quote.author 
-        }); // Set the quote
+        this.doOffline();
       }
       this.setState({ 
         quote: '"' + data.quote + '"', 
         author: data.author 
       });
     } catch (e) { // ..and if that fails we load one locally
-      const quote = Quotes.random(); // Get a random quote from our local package
-      this.setState({ 
-        quote: '"' + quote.quote + '"', 
-        author: quote.author 
-      }); // Set the quote
+      this.doOffline();
     }
   }
 
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index 1438bd2c..6611c5cc 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -11,7 +11,7 @@ export default class Settings extends React.Component {
     }
 
     localStorage.setItem(key, val);
-    document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF';
+    //document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF';
     console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
   }
 
@@ -25,26 +25,53 @@ export default class Settings extends React.Component {
         <div className='section'>
           <h4>Time</h4>
           <label class="switch">
-            <input type="checkbox" />
+            <input type="checkbox" onClick={()=> this.setItem('time')} />
+            <span class="slider round"></span>
+          </label>
+        </div>
+        <div className='section'>
+          <h4>Greeting</h4>
+          <label class="switch">
+            <input type="checkbox" onClick={()=> this.setItem('greeting')} />
             <span class="slider round"></span>
           </label>
         </div>
         <div className='section'>
           <h4>Quote</h4>
           <label class="switch">
-            <input type="checkbox" />
+            <input type="checkbox" onClick={()=> this.setItem('quote')} />
             <span class="slider"></span>
           </label>
         </div>
         <div className='section'>
           <h4>Background</h4>
           <label class="switch">
-            <input type="checkbox" />
+            <input type="checkbox" onClick={()=> this.setItem('background')}  />
             <span class="slider"></span>
           </label>
         </div>
-        <button class="apply">Apply</button>
-        <p>You need to refresh the page to see your changes!</p>
+        <div className='section'>
+          <h4>Search Bar</h4>
+          <label class="switch">
+            <input type="checkbox" onClick={()=> this.setItem('searchBar')}  />
+            <span class="slider"></span>
+          </label>
+        </div>
+        <div className='section'>
+          <h4>Offline Mode</h4>
+          <label class="switch">
+            <input type="checkbox" onClick={()=> this.setItem('offlineMode')}  />
+            <span class="slider"></span>
+          </label>
+        </div>
+        <div className='section'>
+          <h4>Enable WebP (experimental)</h4>
+          <label class="switch">
+            <input type="checkbox" onClick={()=> this.setItem('webp')}  />
+            <span class="slider"></span>
+          </label>
+        </div>
+        <button class="apply" onClick={() => window.location.reload()}>Apply</button>
       {/*
         <h4 style={{ flex: 2 }}>Time <span id="timeStatus">{localStorage.getItem('time') === 'true' ? 'ON' : 'OFF'}</span>
         </h4>