diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index 53f405b7..5ee6f9ad 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -118,7 +118,8 @@ span.modalLink {
 }
 
 h2 {
-  font-size: 1.5rem;
+  font-size: 2rem;
+  margin-bottom: 0;
 }
 
 h3 {
diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss
index 9047e1db..409bc46e 100644
--- a/src/components/modals/main/scss/modules/_tab-content.scss
+++ b/src/components/modals/main/scss/modules/_tab-content.scss
@@ -31,7 +31,6 @@
 (min-width: 1400px) {
   .tab-content {
     left: 350px;
-    top: 75px;
   }
 }
 
diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index 63320151..549d5c0f 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -83,3 +83,7 @@ input {
 h4 {
   cursor: pointer;
 }
+
+.keybind-table {
+  text-align: left;
+}
diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
index 1ed538c0..14c887e6 100644
--- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss
+++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
@@ -15,8 +15,7 @@
   }
 
   &:hover {
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.15);
-    transition: 0.3s;
+    background: var(--tab-active) !important;
   }
 }
 
diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx
new file mode 100644
index 00000000..b7a5a10b
--- /dev/null
+++ b/src/components/modals/main/settings/Header.jsx
@@ -0,0 +1,22 @@
+import variables from 'modules/variables';
+
+import { PureComponent } from 'react';
+
+import Slider from './Slider';
+import Switch from './Switch';
+
+export default class Header extends PureComponent {
+  render() {
+    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+
+    return (
+      <>
+        <h2>{this.props.title}</h2>
+        <Switch name={this.props.setting} text={getMessage('modals.main.settings.enabled')} category={this.props.category} element={this.props.element || null} />
+        {this.props.zoomSetting ? 
+          <><Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name={this.props.zoomSetting} min='10' max='400' default='100' display='%' category={this.props.category} /><br/><br/></>
+        : null}
+      </>
+    );
+  }
+}
diff --git a/src/components/modals/main/settings/KeybindInput.jsx b/src/components/modals/main/settings/KeybindInput.jsx
index a5b5b204..0af26527 100644
--- a/src/components/modals/main/settings/KeybindInput.jsx
+++ b/src/components/modals/main/settings/KeybindInput.jsx
@@ -1,15 +1,16 @@
 import variables from 'modules/variables';
+import { Cancel } from '@mui/icons-material';
 
 export default function KeybindInput(props) {
   const value = props.state[props.setting];
 
   const getButton = () => {
     if (!value) {
-      return null;
+      return <button className='cleanButton' style={{ visibility: 'hidden' }} onClick={() => props.action('reset', props.setting)}><Cancel/></button>;;
     } else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) {
       return <span className='modalLink' onClick={() => props.action('cancel', props.setting)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.cancel')}</span>
     } else {
-      return <span className='modalLink' onClick={() => props.action('reset', props.setting)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>;
+      return <button className='cleanButton' onClick={() => props.action('reset', props.setting)}><Cancel/></button>;
     }
   }
 
diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx
index c98d9c75..7bf89cd5 100644
--- a/src/components/modals/main/settings/sections/Date.jsx
+++ b/src/components/modals/main/settings/sections/Date.jsx
@@ -1,10 +1,9 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
+import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
-import Switch from '../Switch';
-import Slider from '../Slider';
 
 export default class DateSettings extends PureComponent {
   constructor() {
@@ -52,8 +51,7 @@ export default class DateSettings extends PureComponent {
 
     return (
       <>
-        <h2>{getMessage('modals.main.settings.sections.time.date.title')}</h2>
-        <Switch name='date' text={getMessage('modals.main.settings.enabled')} category='date' element='.date'/>
+        <Header title={getMessage('modals.main.settings.sections.time.date.title')} category='date' element='.date' zoomSetting='zoomDate' category='date'/>
         <Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
           <option value='long'>{getMessage('modals.main.settings.sections.time.date.type.long')}</option>
           <option value='short'>{getMessage('modals.main.settings.sections.time.date.type.short')}</option>
@@ -62,7 +60,6 @@ export default class DateSettings extends PureComponent {
         <Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
         <Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.time.date.week_number')} category='date'/>
         {dateSettings}
-        <Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index a16b31f3..ee4a7b23 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -1,10 +1,10 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
+import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
-import Slider from '../Slider';
 
 export default class GreetingSettings extends PureComponent {
   constructor() {
@@ -23,22 +23,19 @@ export default class GreetingSettings extends PureComponent {
   }
 
   render() {
-    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
-    const languagecode = variables.languagecode;
+    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
     return (
       <>
-        <h2>{getMessage(languagecode, 'modals.main.settings.sections.greeting.title')}</h2>
-        <Switch name='greeting' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='greeting' element='.greeting'/>
-        <Checkbox name='events' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.events')} category='greeting'/>
-        <Checkbox name='defaultGreetingMessage' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.default')} category='greeting'/>
-        <Text title={getMessage(languagecode, 'modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
-        <Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' />
+        <Header title={getMessage('modals.main.settings.sections.greeting.title')} category='greeting' element='.greeting' zoomSetting='zoomGreeting' category='greeting'/>
+        <Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
+        <Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
+        <Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
 
-        <h3>{getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday')}</h3>
-        <Switch name='birthdayenabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='greeting'/>
-        <Checkbox name='birthdayage' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
-        <p>{getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday_date')}</p>
+        <h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
+        <Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
+        <Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
+        <p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
         <input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)}/>
       </>
     );
diff --git a/src/components/modals/main/settings/sections/Keybinds.jsx b/src/components/modals/main/settings/sections/Keybinds.jsx
index fff24f68..fe57b3a4 100644
--- a/src/components/modals/main/settings/sections/Keybinds.jsx
+++ b/src/components/modals/main/settings/sections/Keybinds.jsx
@@ -29,18 +29,25 @@ export default class KeybindSettings extends PureComponent {
     this.forceUpdate();
 
     let keys = '';
+    let previouskey = '';
     this.keydown = document.addEventListener('keydown', (event) => {
+      if (event.key === previouskey) {
+        return;
+      }
+
       if (keys === '') {
         keys = event.key;
       } else {
         keys = `${keys}+${event.key}`;
       }
+
+      previouskey = event.key
     });
 
     this.keyup = document.addEventListener('keyup', () => {
       document.removeEventListener('keydown', this.keydown);
       const keybinds = this.state.keybinds;
-      keybinds[type] = keys;
+      keybinds[type] = keys.split('+').slice(0, 4).join('+');
       localStorage.setItem('keybinds', JSON.stringify(keybinds));
       this.setState({
         keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
@@ -97,18 +104,28 @@ export default class KeybindSettings extends PureComponent {
       <>
         <h2>{getMessage(languagecode, 'modals.main.settings.sections.keybinds.title')}</h2>
         <Switch name='keybindsEnabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} element='.other' />
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/>
-        <KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/>
+        <table className='keybind-table'>
+          <tr>  
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/></th>
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/></th>
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/></th>
+          </tr> 
+          <tr>  
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/></th>
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/></th>
+          </tr> 
+          <tr>  
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/></th>
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/></th>
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/></th>
+          </tr> 
+          <tr>  
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/></th>
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/></th>
+            <th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/></th>
+          </tr>  
+      </table>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx
index c4efef74..92db48a1 100644
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@@ -3,14 +3,13 @@ import { PureComponent, Fragment } from 'react';
 import { Cancel } from '@mui/icons-material';
 import { toast } from 'react-toastify';
 
-import Switch from '../Switch';
+import Header from '../Header';
 import Slider from '../Slider';
 
 import EventBus from 'modules/helpers/eventbus';
 
 export default class Message extends PureComponent {
-  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
-  languagecode = variables.languagecode;
+  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
@@ -62,9 +61,8 @@ export default class Message extends PureComponent {
   render() {
     return (
       <>
-        <h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.message.title')}</h2>
-        <Switch name='message' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='message' element='.message'/>
-        <p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.message.text')}</p>
+        <Header title={this.getMessage('modals.main.settings.sections.message.title')} category='message' element='.message' zoomSetting='zoomMessage' category='message'/>
+        <p>{this.getMessage('modals.main.settings.sections.message.text')}</p>
         {this.state.messages.map((_url, index) => (
           <Fragment key={index}>
             <input type='text' value={this.state.messages[index]} onChange={(e) => this.message(e, true, index)}></input>
@@ -74,8 +72,8 @@ export default class Message extends PureComponent {
             <br/><br/>
           </Fragment>
         ))}
-        <button className='uploadbg' onClick={() => this.modifyMessage('add')}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.message.add')}</button>
-        <Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomMessage' min='10' max='400' default='100' display='%' category='message' />
+        <button className='uploadbg' onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')}</button>
+        <Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomMessage' min='10' max='400' default='100' display='%' category='message' />
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index 0ea958f4..2e5e04a2 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -1,28 +1,33 @@
 import variables from 'modules/variables';
 
+import { PureComponent } from 'react';
+
+import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Slider from '../Slider';
 
-export default function NavbarSettings() {
-  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+export default class Navbar extends PureComponent {
+  render() {
+    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
-  return (
-    <>
-      <h2>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h2>
-      <Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
-      <Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
-      <Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
-      <Dropdown label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
-        <option value='false'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
-        <option value='background'>{getMessage('modals.main.settings.sections.background.title')}</option>
-        <option value='quote'>{getMessage('modals.main.settings.sections.quote.title')}</option>
-        <option value='quotebackground'>{getMessage('modals.main.settings.sections.quote.title')} + {getMessage('modals.main.settings.sections.background.title')}</option>
-        {/* before it was just a checkbox */}
-        <option value='true'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
-      </Dropdown>
-      <br/>
-      <Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
-    </>
-  );
+    return (
+      <>
+        <Header title={getMessage('modals.main.settings.sections.appearance.navbar.title')} />
+        <Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
+        <Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
+        <Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
+        <Dropdown label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
+          <option value='false'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
+          <option value='background'>{getMessage('modals.main.settings.sections.background.title')}</option>
+          <option value='quote'>{getMessage('modals.main.settings.sections.quote.title')}</option>
+          <option value='quotebackground'>{getMessage('modals.main.settings.sections.quote.title')} + {getMessage('modals.main.settings.sections.background.title')}</option>
+          {/* before it was just a checkbox */}
+          <option value='true'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
+        </Dropdown>
+        <br/>
+        <Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
+      </>
+    );
+  }
 }
diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx
index 04ce1e3a..ea585147 100644
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -35,22 +35,12 @@ export default class OrderSettings extends PureComponent {
     };
   }
 
-  // based on https://stackoverflow.com/a/48301905
   arrayMove(array, oldIndex, newIndex) {
-    if (oldIndex === newIndex) {
-      return array;
-    }
+    const result = Array.from(array);
+    const [removed] = result.splice(oldIndex, 1);
+    result.splice(newIndex, 0, removed);
   
-    const newArray = [...array];
-    const target = newArray[oldIndex];
-    const inc = newIndex < oldIndex ? -1 : 1;
-  
-    for (let i = oldIndex; i !== newIndex; i += inc) {
-      newArray[i] = newArray[i + inc];
-    }
-  
-    newArray[newIndex] = target;
-    return newArray;
+    return result;
   }
 
   onSortEnd = ({ oldIndex, newIndex }) => {
diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx
index 5b49eeaa..249cf1f0 100644
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/src/components/modals/main/settings/sections/QuickLinks.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 
-import Switch from '../Switch';
+import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
 
@@ -9,8 +9,7 @@ export default function QuickLinks() {
 
   return (
     <>
-      <h2>{getMessage('modals.main.settings.sections.quicklinks.title')}</h2>
-      <Switch name='quicklinksenabled' text={getMessage('modals.main.settings.enabled')} category='quicklinks' element='.quicklinks-container'/>
+      <Header title={getMessage('modals.main.settings.sections.quicklinks.title')} category='quicklinks' element='.quicklinks-container' zoomSetting='zoomQuicklinks' category='quicklinks'/>
       <Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks'/>
       <Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks'/>
       <Checkbox name='quicklinksnewtab' text={getMessage('modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index a4e2d4a4..f2d3c0c0 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -2,9 +2,8 @@ import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { Cancel } from '@mui/icons-material';
 
+import Header from '../Header';
 import Checkbox from '../Checkbox';
-import Switch from '../Switch';
-import Slider from '../Slider';
 import Dropdown from '../Dropdown';
 
 export default class QuoteSettings extends PureComponent {
@@ -120,8 +119,7 @@ export default class QuoteSettings extends PureComponent {
 
     return (
       <>
-        <h2>{this.getMessage('modals.main.settings.sections.quote.title')}</h2>
-        <Switch name='quote' text={this.getMessage('modals.main.settings.enabled')} category='quote' element='.quotediv' />
+        <Header title={this.getMessage('modals.main.settings.sections.quote.title')} category='quote' element='.quotediv' zoomSetting='zoomQuote' category='quote'/>
         <Checkbox name='authorLink' text={this.getMessage('modals.main.settings.sections.quote.author_link')} element='.other' />
         <Dropdown label={this.getMessage('modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
           {this.marketplaceType()}
@@ -129,7 +127,6 @@ export default class QuoteSettings extends PureComponent {
           <option value='custom'>{this.getMessage('modals.main.settings.sections.quote.custom')}</option>
         </Dropdown>
         {customSettings}
-        <Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
   
         <h3>{this.getMessage('modals.main.settings.sections.quote.buttons.title')}</h3>
         <Checkbox name='copyButton' text={this.getMessage('modals.main.settings.sections.quote.buttons.copy')} category='quote'/>
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 08072afa..c669e63e 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -2,6 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 
+import Header from '../Header';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
@@ -72,6 +73,7 @@ export default class SearchSettings extends PureComponent {
   render() {
     return (
       <>
+        <Header title={this.getMessage('modals.main.settings.sections.search.title')} category='widgets'/>
         <h2>{this.getMessage('modals.main.settings.sections.search.title')}</h2>
         <Switch name='searchBar' text={this.getMessage('modals.main.settings.enabled')} category='widgets' />
         {/* not supported on firefox */}
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index 5d46f4b2..c952f72b 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -1,11 +1,10 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
+import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
-import Switch from '../Switch';
 import Radio from '../Radio';
-import Slider from '../Slider';
 
 export default class TimeSettings extends PureComponent {
   constructor() {
@@ -60,17 +59,13 @@ export default class TimeSettings extends PureComponent {
 
     return (
       <>
-        <h2>{getMessage('modals.main.settings.sections.time.title')}</h2>
-        <Switch name='time' text={getMessage('modals.main.settings.enabled')} category='clock' element='.clock-container' />
+        <Header title={getMessage('modals.main.settings.sections.time.title')} category='clock' element='.clock-container' zoomSetting='zoomClock' category='clock'/>
         <Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
           <option value='digital'>{getMessage('modals.main.settings.sections.time.digital.title')}</option>
           <option value='analogue'>{getMessage('modals.main.settings.sections.time.analogue.title')}</option>
           <option value='percentageComplete'>{getMessage('modals.main.settings.sections.time.percentage_complete')}</option>
         </Dropdown>
         {timeSettings}
-        {this.state.timeType !== 'analogue' ? 
-          <Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
-        : null}
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 635a1158..dab0539a 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -3,11 +3,11 @@ import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
 import { Cancel } from '@mui/icons-material';
 
+import Header from '../../Header';
 import Checkbox from '../../Checkbox';
 import Dropdown from '../../Dropdown';
 import FileUpload from '../../FileUpload';
 import Slider from '../../Slider';
-import Switch from '../../Switch';
 import Radio from '../../Radio';
 
 import ColourSettings from './Colour';
@@ -156,7 +156,7 @@ export default class BackgroundSettings extends PureComponent {
 
     const interval = (
       <>
-         <br/><br/>
+        <br/><br/>
         <Dropdown label={getMessage('modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
         <option value='refresh'>{getMessage('tabname')}</option>
           <option value='60000'>{getMessage('modals.main.settings.sections.background.interval.minute')}</option>
@@ -191,25 +191,23 @@ export default class BackgroundSettings extends PureComponent {
     );
 
     const customSettings = (
-      <>
-        <ul>
-          <p>{getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{getMessage('modals.main.settings.buttons.reset')}</span></p>
-          {this.state.customBackground.map((_url, index) => (
-            <Fragment key={index}>
-              <input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)}></input>
-              {this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
-                <Cancel/>
-              </button> : null}
-              <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{getMessage('modals.main.settings.sections.background.source.upload')}</span>
-              {this.videoCustomSettings(index)}
-              <br/><br/>  
-            </Fragment>
-          ))}
-          <button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{getMessage('modals.main.settings.sections.background.source.add_background')}</button>
-          <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
-          {interval}
-        </ul>
-      </>
+      <ul>
+        <p>{getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{getMessage('modals.main.settings.buttons.reset')}</span></p>
+        {this.state.customBackground.map((_url, index) => (
+          <Fragment key={index}>
+            <input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)}></input>
+            {this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
+              <Cancel/>
+            </button> : null}
+            <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{getMessage('modals.main.settings.sections.background.source.upload')}</span>
+            {this.videoCustomSettings(index)}
+            <br/><br/>  
+          </Fragment>
+        ))}
+        <button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{getMessage('modals.main.settings.sections.background.source.add_background')}</button>
+        <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
+        {interval}
+      </ul>
     );
 
     switch (this.state.backgroundType) {
@@ -224,8 +222,7 @@ export default class BackgroundSettings extends PureComponent {
   
     return (
       <>
-        <h2>{getMessage('modals.main.settings.sections.background.title')}</h2>
-        <Switch name='background' text={getMessage('modals.main.settings.enabled')} category='background' element='#backgroundImage' />
+        <Header title={getMessage('modals.main.settings.sections.background.title')} category='background' element='#backgroundImage'/>
         <Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
         <Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' />
         <Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' />
diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx
index 99c66ac8..ba01b665 100644
--- a/src/components/modals/main/tabs/backend/Tabs.jsx
+++ b/src/components/modals/main/tabs/backend/Tabs.jsx
@@ -26,12 +26,9 @@ export default class Tabs extends PureComponent {
   };
 
   render() {
-    const language = variables.language;
-    const languagecode = variables.languagecode;
-
     let className = 'sidebar';
     let tabClass = 'tab-content';
-    let optionsText = (<h1>{language.getMessage(languagecode, 'modals.main.title')}</h1>);
+    let optionsText = (<h1>{variables.language.getMessage(variables.languagecode, 'modals.main.title')}</h1>);
 
     if (this.props.navbar) {
       className = 'modalNavbar';