diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index 9dae95be..21df549f 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -29,19 +29,6 @@ export default function AppearanceSettings() {
       <h2>{getMessage('modals.main.settings.sections.appearance.title')}</h2>
       <Radio name='theme' title={getMessage('modals.main.settings.sections.appearance.theme.title')} options={themeOptions} category='other' />
 
-      <h3>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h3>
-      <Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} 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' />
-
       <h3>{getMessage('modals.main.settings.sections.appearance.font.title')}</h3>
       <Text title={getMessage('modals.main.settings.sections.appearance.font.custom')} name='font' upperCaseFirst={true} category='other' />
       <br/>
diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx
new file mode 100644
index 00000000..c98d9c75
--- /dev/null
+++ b/src/components/modals/main/settings/sections/Date.jsx
@@ -0,0 +1,69 @@
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
+
+import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
+import Switch from '../Switch';
+import Slider from '../Slider';
+
+export default class DateSettings extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      dateType: localStorage.getItem('dateType') || 'long'
+    };
+  }
+
+  render() {
+    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+
+    let dateSettings;
+    
+    const longSettings = (
+      <>
+        <Checkbox name='dayofweek' text={getMessage('modals.main.settings.sections.time.date.day_of_week')} category='date' />
+        <Checkbox name='datenth' text={getMessage('modals.main.settings.sections.time.date.datenth')} category='date' />
+      </>
+    );
+
+    const shortSettings = (
+      <>
+        <br/>
+        <Dropdown label={getMessage('modals.main.settings.sections.time.date.short_format')} name='dateFormat' category='date'>
+          <option value='DMY'>DMY</option>
+          <option value='MDY'>MDY</option>
+          <option value='YMD'>YMD</option>
+        </Dropdown>
+        <br/><br/>
+        <Dropdown label={getMessage('modals.main.settings.sections.time.date.short_separator.title')} name='shortFormat' category='date'>
+          <option value='dash'>{getMessage('modals.main.settings.sections.time.date.short_separator.dash')}</option>
+          <option value='dots'>{getMessage('modals.main.settings.sections.time.date.short_separator.dots')}</option>
+          <option value='gaps'>{getMessage('modals.main.settings.sections.time.date.short_separator.gaps')}</option>
+          <option value='slashes'>{getMessage('modals.main.settings.sections.time.date.short_separator.slashes')}</option>
+       </Dropdown>
+      </>
+    );
+
+    switch (this.state.dateType) {
+      case 'short': dateSettings = shortSettings; break;
+      case 'long': dateSettings = longSettings; break;
+      default: break;
+    }
+
+    return (
+      <>
+        <h2>{getMessage('modals.main.settings.sections.time.date.title')}</h2>
+        <Switch name='date' text={getMessage('modals.main.settings.enabled')} category='date' element='.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>
+        </Dropdown>
+        <br/>
+        <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/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
new file mode 100644
index 00000000..0ea958f4
--- /dev/null
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -0,0 +1,28 @@
+import variables from 'modules/variables';
+
+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);
+
+  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' />
+    </>
+  );
+}
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index ed492b2e..5d46f4b2 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -11,8 +11,7 @@ export default class TimeSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
-      timeType: localStorage.getItem('timeType') || 'digital',
-      dateType: localStorage.getItem('dateType') || 'long'
+      timeType: localStorage.getItem('timeType') || 'digital'
     };
   }
 
@@ -59,39 +58,6 @@ export default class TimeSettings extends PureComponent {
       default: timeSettings = null; break;
     }
 
-    let dateSettings;
-    
-    const longSettings = (
-      <>
-        <Checkbox name='dayofweek' text={getMessage('modals.main.settings.sections.time.date.day_of_week')} category='date' />
-        <Checkbox name='datenth' text={getMessage('modals.main.settings.sections.time.date.datenth')} category='date' />
-      </>
-    );
-
-    const shortSettings = (
-      <>
-        <br/>
-        <Dropdown label={getMessage('modals.main.settings.sections.time.date.short_format')} name='dateFormat' category='date'>
-          <option value='DMY'>DMY</option>
-          <option value='MDY'>MDY</option>
-          <option value='YMD'>YMD</option>
-        </Dropdown>
-        <br/><br/>
-        <Dropdown label={getMessage('modals.main.settings.sections.time.date.short_separator.title')} name='shortFormat' category='date'>
-          <option value='dash'>{getMessage('modals.main.settings.sections.time.date.short_separator.dash')}</option>
-          <option value='dots'>{getMessage('modals.main.settings.sections.time.date.short_separator.dots')}</option>
-          <option value='gaps'>{getMessage('modals.main.settings.sections.time.date.short_separator.gaps')}</option>
-          <option value='slashes'>{getMessage('modals.main.settings.sections.time.date.short_separator.slashes')}</option>
-       </Dropdown>
-      </>
-    );
-
-    switch (this.state.dateType) {
-      case 'short': dateSettings = shortSettings; break;
-      case 'long': dateSettings = longSettings; break;
-      default: break;
-    }
-
     return (
       <>
         <h2>{getMessage('modals.main.settings.sections.time.title')}</h2>
@@ -105,18 +71,6 @@ export default class TimeSettings extends PureComponent {
         {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}
-
-        <h3>{getMessage('modals.main.settings.sections.time.date.title')}</h3>
-        <Switch name='date' text={getMessage('modals.main.settings.enabled')} category='date' element='.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>
-        </Dropdown>
-        <br/>
-        <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/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index e64b367d..635a1158 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -245,8 +245,6 @@ export default class BackgroundSettings extends PureComponent {
         {backgroundSettings}
 
         <h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
-        <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' />
         <Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
 
         <h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index e8c44c96..4819f26a 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -18,6 +18,8 @@ import Weather from '../settings/sections/Weather';
 import Stats from '../settings/sections/Stats';
 import Keybinds from '../settings/sections/Keybinds';
 import Message from '../settings/sections/Message';
+import Date from '../settings/sections/Date';
+import Navbar from '../settings/sections/Navbar';
 
 export default function Settings() {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -25,16 +27,18 @@ export default function Settings() {
   return (
     <>
       <Tabs>
-        <div label={getMessage('modals.main.settings.sections.time.title')} name='time'><Time/></div>
-        <div label={getMessage('modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
+        <div label={getMessage('modals.main.settings.sections.appearance.navbar.title')} name='navbar'><Navbar/></div>
         <div label={getMessage('modals.main.settings.sections.greeting.title')} name='greeting'><Greeting/></div>
+        <div label={getMessage('modals.main.settings.sections.time.title')} name='time'><Time/></div>
+        <div label={getMessage('modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
+        <div label={getMessage('modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
+        <div label={getMessage('modals.main.settings.sections.time.date.title')} name='date'><Date/></div>
+        <div label={getMessage('modals.main.settings.sections.message.title')} name='message'><Message/></div>
         <div label={getMessage('modals.main.settings.sections.background.title')} name='background'><Background/></div>
         <div label={getMessage('modals.main.settings.sections.search.title')} name='search'><Search/></div>
-        <div label={getMessage('modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
         <div label={getMessage('modals.main.settings.sections.weather.title')} name='weather'><Weather/></div>
-        <div label={getMessage('modals.main.settings.sections.message.title')} name='message'><Message/></div>
-        <div label={getMessage('modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></div>
         <div label={getMessage('modals.main.settings.sections.order.title')} name='order'><Order/></div>
+        <div label={getMessage('modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></div>
         <div label={getMessage('modals.main.settings.sections.language.title')} name='language'><Language/></div>
         <div label={getMessage('modals.main.settings.sections.advanced.title')} name='advanced'><Advanced/></div>
         <div label={getMessage('modals.main.settings.sections.keybinds.title')} name='keybinds'><Keybinds/></div>
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 4dc06bbd..ef391520 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -23,7 +23,9 @@ import {
   Code as Sideload,
   AddCircleOutline as Added,
   CreateNewFolderOutlined as Create,
-  KeyboardAltOutlined as Keybinds
+  KeyboardAltOutlined as Keybinds,
+  DateRangeOutlined as Date,
+  MenuOutlined as Navbar
 } from '@mui/icons-material';
 
 function Tab({ label, currentTab, onClick, navbarTab }) {
@@ -47,12 +49,14 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     case getMessage('modals.main.navbar.addons'): icon = <Addons/>; break;
     case getMessage('modals.main.navbar.marketplace'): icon = <Marketplace/>; break;
 
+    case getMessage('modals.main.settings.sections.appearance.navbar.title'): icon = <Navbar/>; break;
     case getMessage('modals.main.settings.sections.time.title'): icon = <Time/>; break;
+    case getMessage('modals.main.settings.sections.time.date.title'): icon = <Date/>; break;
     case getMessage('modals.main.settings.sections.greeting.title'): icon = <Greeting/>; break;
     case getMessage('modals.main.settings.sections.quote.title'): icon = <Quote/>; break;
     case getMessage('modals.main.settings.sections.background.title'): icon = <Background/>; break;
     case getMessage('modals.main.settings.sections.search.title'): icon = <Search/>; break;
-    case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; break;
+    case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; divider = true; break;
     case getMessage('modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
     case getMessage('modals.main.settings.sections.appearance.title'): icon = <Appearance/>; break;
     case getMessage('modals.main.settings.sections.order.title'): icon = <Order/>; break;