diff --git a/package.json b/package.json
index 578cedca..8f69bf7a 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   "homepage": "https://muetab.xyz",
   "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
   "license": "BSD-3-Clause",
-  "version": "3.0",
+  "version": "3.0.0",
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/src/App.jsx b/src/App.jsx
index 7e36876f..8399948f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -42,10 +42,14 @@ export default class App extends React.Component {
     localStorage.setItem('offlineMode', false);
     localStorage.setItem('webp', false);
     localStorage.setItem('events', true);
+    localStorage.setItem('customBackgroundColour', '');
+    localStorage.setItem('customBackground', '');
+    localStorage.setItem('greetingName', '');
 
     // Set theme depending on user preferred
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) localStorage.setItem('darkTheme', true);
-    else localStorage.setItem('darkTheme', false);
+    //if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) localStorage.setItem('darkTheme', true);
+    //else localStorage.setItem('darkTheme', false);
+    localStorage.setItem('darkTheme', false);
 
     // Finally we set this to true so it doesn't run the function on every load
     localStorage.setItem('firstRun', true);
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index 07243db1..c3bfffa4 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -1,3 +1,4 @@
+// eslint-disable
 import React from 'react';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 
@@ -25,31 +26,24 @@ export default class Settings extends React.Component {
     localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance
     localStorage.setItem('greetingName', document.getElementById('greetingName').value);
     localStorage.setItem('customBackground', document.getElementById('customBackground').value);
-    if (!document.getElementById('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value);
+    //if (!document.getElementById('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value);
     window.location.reload();
   }
 
   resetItem(key) {
     switch (key) {
-      case 'greetingName':
-        localStorage.setItem('greetingName', '');
-        document.getElementById('greetingName').value = '';
-        break;
+      case 'greetingName': document.getElementById('greetingName').value = ''; break;
       case 'customBackgroundColour':
         localStorage.setItem('customBackgroundColour', '');
         document.getElementById('customBackgroundColour').enabled = 'false';
         break;
-      case 'customBackground':
-        localStorage.setItem('customBackground', '');
-        document.getElementById('customBackground').value = '';
-        break;
+      case 'customBackground': document.getElementById('customBackground').value = ''; break;
       case 'blur':
         localStorage.setItem('blur', 0);
         document.getElementById('blurRange').value = 0;
         document.getElementById('blurAmount').innerText = '0';
         break;
-      default:
-        console.log('[ERROR] resetItem requires a key!');
+      default: console.log('[ERROR] resetItem requires a key!');
     }
     this.showToast();
   }
@@ -63,6 +57,12 @@ export default class Settings extends React.Component {
 
   componentDidMount() {
     document.getElementById('greetingName').value = localStorage.getItem('greetingName');
+    document.getElementById('customBackground').value = localStorage.getItem('customBackground');
+    /*const hex = localStorage.getItem('customBackgroundColour');
+    if (!hex === '') {
+      document.getElementById('customBackgroundColour').value = hex;
+      document.getElementById('customBackgroundHex').innerText = hex;
+    }*/
 
     for (const key of Object.keys(localStorage)) {
       let value = localStorage.getItem(key);
@@ -106,11 +106,11 @@ export default class Settings extends React.Component {
           </label>
           <li className="extraSettings">
             <ul>
-            <input id="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
+            <input name="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
             <label htmlFor="1">Seconds</label>
             </ul>
             <ul>
-            <input id="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
+            <input name="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
             <label htmlFor="2">24 Hour</label>
             </ul>
           </li>
@@ -125,11 +125,11 @@ export default class Settings extends React.Component {
           </label>
           <li className="extraSettings">
             <ul>
-            <input id="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
+            <input name="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
             <label htmlFor="3">Events</label>
             </ul>
             <ul>
-              <p>Name for greeting <a className="modalLink" onClick={() => this.resetItem('greetingName')}>Reset</a></p>
+              <p>Name for greeting <span className="modalLink" onClick={() => this.resetItem('greetingName')}>Reset</span></p>
               <input type='text' id='greetingName'></input>
             </ul>
           </li>
@@ -138,12 +138,12 @@ export default class Settings extends React.Component {
           <h4>Quote</h4>
           <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
           <label className="switch">
-            <input id="quoteStatus" type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
+            <input type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
             <span className="slider"></span>
           </label>
           <li className="extraSettings">
             <ul>
-            <input id="5" type="checkbox" onClick={()=> this.setItem('copyButton')} id='copyButtonStatus' />
+            <input name="5" type="checkbox" onClick={()=> this.setItem('copyButton')} id='copyButtonStatus' />
             <label htmlFor="5">Copy Button</label>
             </ul>
           </li>
@@ -157,19 +157,20 @@ export default class Settings extends React.Component {
           </label>
           <li className="extraSettings">
             <ul>
-              <p>Adjust Blur (<span id='blurAmount'></span>%) <a className="modalLink" onClick={() => this.resetItem('blur')}>Reset</a></p>
+              <p>Adjust Blur (<span id='blurAmount'></span>%) <span className="modalLink" onClick={() => this.resetItem('blur')}>Reset</span></p>
             </ul>
             <ul>
               <input className="range" type="range" min="0" max="100" id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
             </ul>
             <ul>
-              <p>Custom Background URL <a className="modalLink" onClick={() => this.resetItem('customBackground')}>Reset</a></p>
+              <p>Custom Background URL <span className="modalLink" onClick={() => this.resetItem('customBackground')}>Reset</span></p>
               <input type='text' id='customBackground'></input>
             </ul>
-            <ul>
-              <p>Custom Background Colour <a className="modalLink" onClick={() => this.resetItem('customBackgroundColour')}>Reset</a></p>
-              <input type='color' id='customBackgroundColour'></input>
-            </ul>
+            { /*<ul>
+              <p>Custom Background Colour <span className="modalLink" onClick={() => this.resetItem('customBackgroundColour')}>Reset</span></p>
+              <input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
+              <label for='colour' id='customBackgroundHex'>#00000</label>
+            </ul>  */}
           </li>
         </div>
         <div className='section'>
diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss
index 11e686a1..d3f498df 100644
--- a/src/scss/modules/_modal.scss
+++ b/src/scss/modules/_modal.scss
@@ -13,7 +13,7 @@
   }
 }
 
-a.modalLink {
+.modalLink {
   color: #5352ed;
   cursor: pointer;
 }
diff --git a/src/scss/modules/_search.scss b/src/scss/modules/_search.scss
index 8c28f3b1..f1652915 100644
--- a/src/scss/modules/_search.scss
+++ b/src/scss/modules/_search.scss
@@ -6,7 +6,7 @@
     flex-direction: row;
     display: block;
     color: #ffff;
-    font-family: 'Lexend Deca';
+    font-family: 'Lexend Deca', sans-serif;;
 
     input[type=text] {
         font-size: calc(5px + 1.2vmin);
diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss
index 28f7e59a..1c032e39 100644
--- a/src/scss/modules/_settings.scss
+++ b/src/scss/modules/_settings.scss
@@ -204,4 +204,27 @@ li {
     background: $gradient;
     cursor: pointer;
   }
-}
\ No newline at end of file
+}
+
+input[type=color] {
+  border-radius: 100%;
+  height: 30px;
+  width: 30px;
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  vertical-align: middle;
+}
+
+input[type=color]::-webkit-color-swatch-wrapper {
+  padding: 0;	
+}
+input[type=color]::-webkit-color-swatch {
+  border: none;
+  border-radius: 100%;
+}
+
+ul > label {
+  vertical-align: middle;
+}