diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss
index 5eb38aa1..a6ef4410 100644
--- a/src/components/modals/main/scss/modules/_tab-content.scss
+++ b/src/components/modals/main/scss/modules/_tab-content.scss
@@ -25,6 +25,7 @@
       align-items: center;
       min-height: 100px;
       justify-content: space-between;
+      transition: 0.4s ease-in-out;
 
       /* border-top: 1px solid #ccc; */
       border-bottom: 1px solid #676767;
diff --git a/src/components/modals/main/settings/SettingsItem.jsx b/src/components/modals/main/settings/SettingsItem.jsx
index b93a1540..fa1b583e 100644
--- a/src/components/modals/main/settings/SettingsItem.jsx
+++ b/src/components/modals/main/settings/SettingsItem.jsx
@@ -1,9 +1,6 @@
 function Row(props) {
-  return (
-    <div className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
-      {props.children}
-    </div>
-  );
+  const classes = `${props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'} ${props.inactive ? 'preferencesInactive' : ''}`;
+  return <div className={classes}>{props.children}</div>;
 }
 
 function Content(props) {
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index 526f052d..bc3ee377 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -14,11 +14,13 @@ import { Row, Content, Action } from '../SettingsItem';
 import Header from '../Header';
 import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
 import QuickLink from './quicklinks/QuickLink';
+import Apps from '../../../../widgets/navbar/Apps';
 
 function Navbar() {
   const [showRefreshOptions, setShowRefreshOptions] = useState(
     localStorage.getItem('refresh') === 'true',
   );
+  const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true');
   const [appsModalInfo, setAppsModalInfo] = useState({
     newLink: false,
     edit: false,
@@ -112,15 +114,8 @@ function Navbar() {
 
   const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
 
-  return (
-    <>
-      <Header
-        title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
-        setting="navbar"
-        category="widgets"
-        zoomSetting="zoomNavbar"
-        zoomCategory="navbar"
-      />
+  const AdditionalSettings = () => {
+    return (
       <Row final={false}>
         <Content
           title={variables.getMessage('modals.main.settings.additional_settings')}
@@ -160,40 +155,48 @@ function Navbar() {
             name="appsEnabled"
             text={variables.getMessage('widgets.navbar.apps.title')}
             category="navbar"
+            onChange={setAppsEnabled}
           />
         </Action>
       </Row>
-      {showRefreshOptions && (
-        <Row final={false}>
-          <Content
-            title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
-            subtitle={variables.getMessage(
-              'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
-            )}
-          />
-          <Action>
-            <Dropdown name="refreshOption" category="navbar">
-              <option value="page">
-                {variables.getMessage(
-                  'modals.main.settings.sections.appearance.navbar.refresh_options.page',
-                )}
-              </option>
-              <option value="background">
-                {variables.getMessage('modals.main.settings.sections.background.title')}
-              </option>
-              <option value="quote">
-                {variables.getMessage('modals.main.settings.sections.quote.title')}
-              </option>
-              <option value="quotebackground">
-                {variables.getMessage('modals.main.settings.sections.quote.title')} +{' '}
-                {variables.getMessage('modals.main.settings.sections.background.title')}
-              </option>
-            </Dropdown>
-          </Action>
-        </Row>
-      )}
+    );
+  };
 
-      <Row final={true}>
+  const RefreshOptions = () => {
+    return (
+      <Row final={false} inactive={!showRefreshOptions}>
+        <Content
+          title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
+          subtitle={variables.getMessage(
+            'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
+          )}
+        />
+        <Action>
+          <Dropdown name="refreshOption" category="navbar">
+            <option value="page">
+              {variables.getMessage(
+                'modals.main.settings.sections.appearance.navbar.refresh_options.page',
+              )}
+            </option>
+            <option value="background">
+              {variables.getMessage('modals.main.settings.sections.background.title')}
+            </option>
+            <option value="quote">
+              {variables.getMessage('modals.main.settings.sections.quote.title')}
+            </option>
+            <option value="quotebackground">
+              {variables.getMessage('modals.main.settings.sections.quote.title')} +{' '}
+              {variables.getMessage('modals.main.settings.sections.background.title')}
+            </option>
+          </Dropdown>
+        </Action>
+      </Row>
+    );
+  };
+
+  const AppsOptions = () => {
+    return (
+      <Row final={true} inactive={!appsEnabled}>
         <Content
           title={variables.getMessage('widgets.navbar.apps.title')}
           subtitle={variables.getMessage(
@@ -207,6 +210,21 @@ function Navbar() {
           </button>
         </Action>
       </Row>
+    );
+  };
+
+  return (
+    <>
+      <Header
+        title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
+        setting="navbar"
+        category="widgets"
+        zoomSetting="zoomNavbar"
+        zoomCategory="navbar"
+      />
+      <AdditionalSettings />
+      <RefreshOptions />
+      <AppsOptions />
 
       <div className="messagesContainer">
         {appsModalInfo.items.map((item, i) => (
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index 6370e989..622a4188 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -278,10 +278,10 @@ function PhotoInformation({ info, url, api }) {
 
           {showExtraInfo || other ? (
             <>
+              <span className="subtitle">
+                {variables.getMessage('widgets.background.information')}
+              </span>
               <div className="extra-content">
-                <span className="subtitle">
-                  {variables.getMessage('widgets.background.information')}
-                </span>
                 {info.location && info.location !== 'N/A' ? (
                   <div className="row" title={variables.getMessage('widgets.background.location')}>
                     <MdLocationOn />
diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss
index 8449c0bb..75eedb59 100644
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@@ -19,8 +19,9 @@
       }
 
       .extra-content {
-        display: flex;
-        flex-flow: column;
+        margin-top: 10px;
+        display: grid;
+        grid-template-columns: auto auto;
         gap: 10px;
         transition: 0.8s;
       }