diff --git a/repo/menu/components.mjs b/repo/menu/components.mjs
index 9b2dec0..d013ec2 100644
--- a/repo/menu/components.mjs
+++ b/repo/menu/components.mjs
@@ -8,7 +8,6 @@
 
 import { fmt, web, registry, components } from '../../api/_.mjs';
 import { notifications } from './notifications.mjs';
-const profileDB = await registry.profileDB();
 
 export const modComponents = {
   preview: (url) => web.html`<img
@@ -56,7 +55,8 @@ export const modComponents = {
 
 export const options = {
   toggle: async (mod, opt) => {
-    const checked = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      checked = await profileDB.get([mod.id, opt.key], opt.value),
       $toggle = modComponents.toggle(opt.label, checked),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = $toggle.children[0],
@@ -71,8 +71,10 @@ export const options = {
     });
     return $toggle;
   },
+
   select: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.values[0]),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.values[0]),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -96,8 +98,10 @@ export const options = {
     });
     return web.render($label, $select, $icon);
   },
+
   text: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -112,8 +116,10 @@ export const options = {
     });
     return web.render($label, $input, $icon);
   },
+
   number: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -128,8 +134,10 @@ export const options = {
     });
     return web.render($label, $input, $icon);
   },
+
   color: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -166,8 +174,10 @@ export const options = {
     paint();
     return web.render($label, $input, $icon);
   },
+
   file: async (mod, opt) => {
-    const { filename } = (await profileDB.get([mod.id, opt.key], {})) || {},
+    const profileDB = await registry.profileDB(),
+      { filename } = (await profileDB.get([mod.id, opt.key], {})) || {},
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
@@ -204,8 +214,10 @@ export const options = {
       $latest
     );
   },
+
   hotkey: async (mod, opt) => {
-    const value = await profileDB.get([mod.id, opt.key], opt.value),
+    const profileDB = await registry.profileDB(),
+      value = await profileDB.get([mod.id, opt.key], opt.value),
       $tooltip = web.html`${await components.feather('info', { class: 'input-tooltip' })}`,
       $label = web.render(
         web.html`<label class="input-label"></label>`,
diff --git a/repo/menu/menu.mjs b/repo/menu/menu.mjs
index 823c792..9f18c51 100644
--- a/repo/menu/menu.mjs
+++ b/repo/menu/menu.mjs
@@ -8,184 +8,185 @@
 
 import * as api from '../../api/_.mjs';
 import { notifications, $changelogModal } from './notifications.mjs';
-const { env, fs, storage, registry, web, components } = api;
-
-for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
-  for (const sheet of mod.css?.menu || []) {
-    web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
-  }
-  for (let script of mod.js?.menu || []) {
-    script = await import(fs.localPath(`repo/${mod._dir}/${script}`));
-    script.default(api, await registry.db(mod.id));
-  }
-}
-const errors = await registry.errors();
-if (errors.length) {
-  console.log('[notion-enhancer] registry errors:');
-  console.table(errors);
-  notifications.add({
-    icon: 'alert-circle',
-    message: 'Failed to load mods (check console).',
-    color: 'red',
-  });
-}
-
 import { modComponents, options } from './components.mjs';
 import * as router from './router.mjs';
 import './styles.mjs';
 
-const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
-  profileName = await registry.profileName(),
-  profileDB = await registry.profileDB();
+(async () => {
+  const { env, fs, storage, registry, web, components } = api;
 
-web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
+  for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
+    for (const sheet of mod.css?.menu || []) {
+      web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
+    }
+    for (let script of mod.js?.menu || []) {
+      script = await import(fs.localPath(`repo/${mod._dir}/${script}`));
+      script.default(api, await registry.db(mod.id));
+    }
+  }
+  const errors = await registry.errors();
+  if (errors.length) {
+    console.log('[notion-enhancer] registry errors:');
+    console.table(errors);
+    notifications.add({
+      icon: 'alert-circle',
+      message: 'Failed to load mods (check console).',
+      color: 'red',
+    });
+  }
 
-const loadTheme = async () => {
-  document.documentElement.className =
-    (await storage.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
-};
-document.addEventListener('visibilitychange', loadTheme);
-loadTheme();
+  const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
+    profileName = await registry.profileName(),
+    profileDB = await registry.profileDB();
 
-window.addEventListener('beforeunload', (event) => {
-  // trigger input save
-  document.activeElement.blur();
-});
+  web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
 
-const $main = web.html`<main class="main"></main>`,
-  $sidebar = web.html`<article class="sidebar"></article>`,
-  $options = web.html`<div class="options-container">
+  const loadTheme = async () => {
+    document.documentElement.className =
+      (await storage.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
+  };
+  document.addEventListener('visibilitychange', loadTheme);
+  loadTheme();
+
+  window.addEventListener('beforeunload', (event) => {
+    // trigger input save
+    document.activeElement.blur();
+  });
+
+  const $main = web.html`<main class="main"></main>`,
+    $sidebar = web.html`<article class="sidebar"></article>`,
+    $options = web.html`<div class="options-container">
     <p class="options-placeholder">Select a mod to view and configure its options.</p>
   </div>`,
-  $profile = web.html`<button class="profile-trigger">
+    $profile = web.html`<button class="profile-trigger">
     Profile: ${web.escape(profileName)}
   </button>`;
 
-// profile
+  // profile
 
-let _$profileConfig;
-const openProfileMenu = async () => {
-  if (!_$profileConfig) {
-    const profileNames = [
-        ...new Set([
-          ...Object.keys(await storage.get(['profiles'], { default: {} })),
-          profileName,
-        ]),
-      ],
-      $options = profileNames.map(
-        (profile) => web.raw`<option
+  let _$profileConfig;
+  const openProfileMenu = async () => {
+    if (!_$profileConfig) {
+      const profileNames = [
+          ...new Set([
+            ...Object.keys(await storage.get(['profiles'], { default: {} })),
+            profileName,
+          ]),
+        ],
+        $options = profileNames.map(
+          (profile) => web.raw`<option
           class="select-option"
           value="${web.escape(profile)}"
           ${profile === profileName ? 'selected' : ''}
         >${web.escape(profile)}</option>`
-      ),
-      $select = web.html`<select class="input">
+        ),
+        $select = web.html`<select class="input">
         <option class="select-option" value="--">-- new --</option>
         ${$options.join('')}
       </select>`,
-      $edit = web.html`<input
+        $edit = web.html`<input
         type="text"
         class="input"
         value="${web.escape(profileName)}"
         pattern="/^[A-Za-z0-9_-]+$/"
       >`,
-      $export = web.html`<button class="profile-export">
+        $export = web.html`<button class="profile-export">
         ${await components.feather('download', { class: 'profile-icon-action' })}
       </button>`,
-      $import = web.html`<label class="profile-import">
+        $import = web.html`<label class="profile-import">
         <input type="file" class="hidden" accept="application/json">
         ${await components.feather('upload', { class: 'profile-icon-action' })}
       </label>`,
-      $save = web.html`<button class="profile-save">
+        $save = web.html`<button class="profile-save">
         ${await components.feather('save', { class: 'profile-icon-text' })} Save
       </button>`,
-      $delete = web.html`<button class="profile-delete">
+        $delete = web.html`<button class="profile-delete">
         ${await components.feather('trash-2', { class: 'profile-icon-text' })} Delete
       </button>`,
-      $error = web.html`<p class="profile-error"></p>`;
+        $error = web.html`<p class="profile-error"></p>`;
 
-    $export.addEventListener('click', async (event) => {
-      const now = new Date(),
-        $a = web.html`<a
+      $export.addEventListener('click', async (event) => {
+        const now = new Date(),
+          $a = web.html`<a
           class="hidden"
           download="notion-enhancer_${web.escape($select.value)}_${now.getFullYear()}-${
-          now.getMonth() + 1
-        }-${now.getDate()}.json"
+            now.getMonth() + 1
+          }-${now.getDate()}.json"
           href="data:text/plain;charset=utf-8,${encodeURIComponent(
             JSON.stringify(await storage.get(['profiles', $select.value], {}), null, 2)
           )}"
         ></a>`;
-      web.render(document.body, $a);
-      $a.click();
-      $a.remove();
-    });
+        web.render(document.body, $a);
+        $a.click();
+        $a.remove();
+      });
 
-    $import.addEventListener('change', (event) => {
-      const file = event.target.files[0],
-        reader = new FileReader();
-      reader.onload = async (progress) => {
-        try {
-          const profileUpload = JSON.parse(progress.currentTarget.result);
-          if (!profileUpload) throw Error;
-          await storage.set(['profiles', $select.value], profileUpload);
-          env.reload();
-        } catch {
-          web.render(web.empty($error), 'Invalid JSON uploaded.');
+      $import.addEventListener('change', (event) => {
+        const file = event.target.files[0],
+          reader = new FileReader();
+        reader.onload = async (progress) => {
+          try {
+            const profileUpload = JSON.parse(progress.currentTarget.result);
+            if (!profileUpload) throw Error;
+            await storage.set(['profiles', $select.value], profileUpload);
+            env.reload();
+          } catch {
+            web.render(web.empty($error), 'Invalid JSON uploaded.');
+          }
+        };
+        reader.readAsText(file);
+      });
+
+      $select.addEventListener('change', async (event) => {
+        if ($select.value === '--') {
+          $edit.value = '';
+        } else $edit.value = $select.value;
+      });
+
+      $save.addEventListener('click', async (event) => {
+        if (profileNames.includes($edit.value) && $select.value !== $edit.value) {
+          web.render(
+            web.empty($error),
+            `The profile "${web.escape($edit.value)}" already exists.`
+          );
+          return false;
         }
-      };
-      reader.readAsText(file);
-    });
+        if (!$edit.value) {
+          web.render(web.empty($error), 'Profile names cannot be empty.');
+          return false;
+        }
+        if (!$edit.value.match(/^[A-Za-z0-9_-]+$/)) {
+          web.render(
+            web.empty($error),
+            'Profile names can only contain letters, numbers, dashes and underscores.'
+          );
+          return false;
+        }
+        await storage.set(['currentprofile'], $edit.value);
+        if ($select.value === '--') {
+          await storage.set(['profiles', $edit.value], {});
+        } else if ($select.value !== $edit.value) {
+          await storage.set(
+            ['profiles', $edit.value],
+            await storage.get(['profiles', $select.value], {})
+          );
+          await storage.set(['profiles', $select.value], undefined);
+        }
+        env.reload();
+      });
 
-    $select.addEventListener('change', async (event) => {
-      if ($select.value === '--') {
-        $edit.value = '';
-      } else $edit.value = $select.value;
-    });
-
-    $save.addEventListener('click', async (event) => {
-      if (profileNames.includes($edit.value) && $select.value !== $edit.value) {
-        web.render(
-          web.empty($error),
-          `The profile "${web.escape($edit.value)}" already exists.`
-        );
-        return false;
-      }
-      if (!$edit.value) {
-        web.render(web.empty($error), 'Profile names cannot be empty.');
-        return false;
-      }
-      if (!$edit.value.match(/^[A-Za-z0-9_-]+$/)) {
-        web.render(
-          web.empty($error),
-          'Profile names can only contain letters, numbers, dashes and underscores.'
-        );
-        return false;
-      }
-      await storage.set(['currentprofile'], $edit.value);
-      if ($select.value === '--') {
-        await storage.set(['profiles', $edit.value], {});
-      } else if ($select.value !== $edit.value) {
-        await storage.set(
-          ['profiles', $edit.value],
-          await storage.get(['profiles', $select.value], {})
-        );
+      $delete.addEventListener('click', async (event) => {
         await storage.set(['profiles', $select.value], undefined);
-      }
-      env.reload();
-    });
+        await storage.set(
+          ['currentprofile'],
+          profileNames.find((profile) => profile !== $select.value) || 'default'
+        );
+        env.reload();
+      });
 
-    $delete.addEventListener('click', async (event) => {
-      await storage.set(['profiles', $select.value], undefined);
-      await storage.set(
-        ['currentprofile'],
-        profileNames.find((profile) => profile !== $select.value) || 'default'
-      );
-      env.reload();
-    });
-
-    _$profileConfig = web.render(
-      web.html`<div></div>`,
-      web.html`<p class="options-placeholder">
+      _$profileConfig = web.render(
+        web.html`<div></div>`,
+        web.html`<p class="options-placeholder">
         Profiles are used to switch entire configurations.
         Here they can be selected, renamed or deleted.
         Profile names can only contain letters, numbers,
@@ -193,261 +194,268 @@ const openProfileMenu = async () => {
         Be careful - deleting a profile deletes all configuration
         related to it. 
       </p>`,
-      web.render(
-        web.html`<label class="input-label"></label>`,
-        $select,
-        web.html`${await components.feather('chevron-down', { class: 'input-icon' })}`
-      ),
-      web.render(
-        web.html`<label class="input-label"></label>`,
-        $edit,
-        web.html`${await components.feather('type', { class: 'input-icon' })}`
-      ),
-      web.render(web.html`<p class="profile-actions"></p>`, $export, $import, $save, $delete),
-      $error
-    );
-  }
-  web.render(web.empty($options), _$profileConfig);
-};
-$profile.addEventListener('click', () => openSidebarMenu('profile'));
-
-// mods
-
-const $modLists = {},
-  generators = {
-    options: async (mod) => {
-      const $fragment = document.createDocumentFragment();
-      for (const opt of mod.options) {
-        if (!opt.environments.includes(env.name)) continue;
-        web.render($fragment, await options[opt.type](mod, opt));
-      }
-      if (!mod.options.length) {
-        web.render($fragment, web.html`<p class="options-placeholder">No options.</p>`);
-      }
-      return $fragment;
-    },
-    mod: async (mod) => {
-      const $mod = web.html`<div class="mod" data-id="${web.escape(mod.id)}"></div>`,
-        $toggle = modComponents.toggle('', await registry.enabled(mod.id));
-      $toggle.addEventListener('change', async (event) => {
-        if (event.target.checked && mod.tags.includes('theme')) {
-          const mode = mod.tags.includes('light') ? 'light' : 'dark',
-            id = mod.id,
-            mods = await registry.list(
-              (mod) =>
-                mod.environments.includes(env.name) &&
-                mod.tags.includes('theme') &&
-                mod.tags.includes(mode) &&
-                mod.id !== id
-            );
-          for (const mod of mods) {
-            profileDB.set(['_mods', mod.id], false);
-            document.querySelector(
-              `[data-id="${web.escape(mod.id)}"] .toggle-check`
-            ).checked = false;
-          }
-        }
-        profileDB.set(['_mods', mod.id], event.target.checked);
-        notifications.onChange();
-      });
-      $mod.addEventListener('click', () => openSidebarMenu(mod.id));
-      return web.render(
-        web.html`<article class="mod-container"></article>`,
         web.render(
-          $mod,
-          mod.preview
-            ? modComponents.preview(
-                mod.preview.startsWith('http')
-                  ? mod.preview
-                  : fs.localPath(`repo/${mod._dir}/${mod.preview}`)
-              )
-            : '',
-          web.render(
-            web.html`<div class="mod-body"></div>`,
-            web.render(modComponents.title(mod.name), modComponents.version(mod.version)),
-            modComponents.tags(mod.tags),
-            modComponents.description(mod.description),
-            modComponents.authors(mod.authors),
-            mod.environments.includes(env.name) && !registry.core.includes(mod.id)
-              ? $toggle
-              : ''
-          )
-        )
+          web.html`<label class="input-label"></label>`,
+          $select,
+          web.html`${await components.feather('chevron-down', { class: 'input-icon' })}`
+        ),
+        web.render(
+          web.html`<label class="input-label"></label>`,
+          $edit,
+          web.html`${await components.feather('type', { class: 'input-icon' })}`
+        ),
+        web.render(
+          web.html`<p class="profile-actions"></p>`,
+          $export,
+          $import,
+          $save,
+          $delete
+        ),
+        $error
       );
-    },
-    modList: async (category, message = '') => {
-      if (!$modLists[category]) {
-        const $search = web.html`<input type="search" class="search"
-          placeholder="Search ('/' to focus)">`,
-          $list = web.html`<div class="mods-list"></div>`,
-          mods = await registry.list(
-            (mod) => mod.environments.includes(env.name) && mod.tags.includes(category)
-          );
-        web.addHotkeyListener(['/'], () => $search.focus());
-        $search.addEventListener('input', (event) => {
-          const query = $search.value.toLowerCase();
-          for (const $mod of $list.children) {
-            const matches = !query || $mod.innerText.toLowerCase().includes(query);
-            $mod.classList[matches ? 'remove' : 'add']('hidden');
-          }
-        });
-        for (const mod of mods) {
-          mod.tags = mod.tags.filter((tag) => tag !== category);
-          web.render($list, await generators.mod(mod));
-          mod.tags.unshift(category);
-        }
-        $modLists[category] = web.render(
-          web.html`<div></div>`,
-          web.render(
-            web.html`<label class="search-container"></label>`,
-            $search,
-            web.html`${await components.feather('search', { class: 'input-icon' })}`
-          ),
-          message ? web.render(web.html`<p class="main-message"></p>`, message) : '',
-          $list
-        );
-      }
-      return $modLists[category];
-    },
+    }
+    web.render(web.empty($options), _$profileConfig);
   };
+  $profile.addEventListener('click', () => openSidebarMenu('profile'));
 
-async function openModMenu(id) {
-  let $mod;
-  for (const $list of Object.values($modLists)) {
-    $mod = $list.querySelector(`[data-id="${web.escape(id)}"]`);
-    if ($mod) break;
+  // mods
+
+  const $modLists = {},
+    generators = {
+      options: async (mod) => {
+        const $fragment = document.createDocumentFragment();
+        for (const opt of mod.options) {
+          if (!opt.environments.includes(env.name)) continue;
+          web.render($fragment, await options[opt.type](mod, opt));
+        }
+        if (!mod.options.length) {
+          web.render($fragment, web.html`<p class="options-placeholder">No options.</p>`);
+        }
+        return $fragment;
+      },
+      mod: async (mod) => {
+        const $mod = web.html`<div class="mod" data-id="${web.escape(mod.id)}"></div>`,
+          $toggle = modComponents.toggle('', await registry.enabled(mod.id));
+        $toggle.addEventListener('change', async (event) => {
+          if (event.target.checked && mod.tags.includes('theme')) {
+            const mode = mod.tags.includes('light') ? 'light' : 'dark',
+              id = mod.id,
+              mods = await registry.list(
+                (mod) =>
+                  mod.environments.includes(env.name) &&
+                  mod.tags.includes('theme') &&
+                  mod.tags.includes(mode) &&
+                  mod.id !== id
+              );
+            for (const mod of mods) {
+              profileDB.set(['_mods', mod.id], false);
+              document.querySelector(
+                `[data-id="${web.escape(mod.id)}"] .toggle-check`
+              ).checked = false;
+            }
+          }
+          profileDB.set(['_mods', mod.id], event.target.checked);
+          notifications.onChange();
+        });
+        $mod.addEventListener('click', () => openSidebarMenu(mod.id));
+        return web.render(
+          web.html`<article class="mod-container"></article>`,
+          web.render(
+            $mod,
+            mod.preview
+              ? modComponents.preview(
+                  mod.preview.startsWith('http')
+                    ? mod.preview
+                    : fs.localPath(`repo/${mod._dir}/${mod.preview}`)
+                )
+              : '',
+            web.render(
+              web.html`<div class="mod-body"></div>`,
+              web.render(modComponents.title(mod.name), modComponents.version(mod.version)),
+              modComponents.tags(mod.tags),
+              modComponents.description(mod.description),
+              modComponents.authors(mod.authors),
+              mod.environments.includes(env.name) && !registry.core.includes(mod.id)
+                ? $toggle
+                : ''
+            )
+          )
+        );
+      },
+      modList: async (category, message = '') => {
+        if (!$modLists[category]) {
+          const $search = web.html`<input type="search" class="search"
+          placeholder="Search ('/' to focus)">`,
+            $list = web.html`<div class="mods-list"></div>`,
+            mods = await registry.list(
+              (mod) => mod.environments.includes(env.name) && mod.tags.includes(category)
+            );
+          web.addHotkeyListener(['/'], () => $search.focus());
+          $search.addEventListener('input', (event) => {
+            const query = $search.value.toLowerCase();
+            for (const $mod of $list.children) {
+              const matches = !query || $mod.innerText.toLowerCase().includes(query);
+              $mod.classList[matches ? 'remove' : 'add']('hidden');
+            }
+          });
+          for (const mod of mods) {
+            mod.tags = mod.tags.filter((tag) => tag !== category);
+            web.render($list, await generators.mod(mod));
+            mod.tags.unshift(category);
+          }
+          $modLists[category] = web.render(
+            web.html`<div></div>`,
+            web.render(
+              web.html`<label class="search-container"></label>`,
+              $search,
+              web.html`${await components.feather('search', { class: 'input-icon' })}`
+            ),
+            message ? web.render(web.html`<p class="main-message"></p>`, message) : '',
+            $list
+          );
+        }
+        return $modLists[category];
+      },
+    };
+
+  async function openModMenu(id) {
+    let $mod;
+    for (const $list of Object.values($modLists)) {
+      $mod = $list.querySelector(`[data-id="${web.escape(id)}"]`);
+      if ($mod) break;
+    }
+    const mod = await registry.get(id);
+    if (!$mod || !mod || $mod.className === 'mod-selected') return;
+
+    $mod.className = 'mod-selected';
+    const fragment = [
+      web.render(modComponents.title(mod.name), modComponents.version(mod.version)),
+      modComponents.tags(mod.tags),
+      await generators.options(mod),
+    ];
+    web.render(web.empty($options), ...fragment);
   }
-  const mod = await registry.get(id);
-  if (!$mod || !mod || $mod.className === 'mod-selected') return;
 
-  $mod.className = 'mod-selected';
-  const fragment = [
-    web.render(modComponents.title(mod.name), modComponents.version(mod.version)),
-    modComponents.tags(mod.tags),
-    await generators.options(mod),
-  ];
-  web.render(web.empty($options), ...fragment);
-}
+  // views
 
-// views
-
-const $notionNavItem = web.html`<h1 class="nav-notion">
+  const $notionNavItem = web.html`<h1 class="nav-notion">
     ${(await fs.getText('media/colour.svg')).replace(
       /width="\d+" height="\d+"/,
       `class="nav-notion-icon"`
     )}
     <span>notion-enhancer</span>
   </h1>`;
-$notionNavItem.addEventListener('click', env.focusNotion);
+  $notionNavItem.addEventListener('click', env.focusNotion);
 
-const $coreNavItem = web.html`<a href="?view=core" class="nav-item">core</a>`,
-  $extensionsNavItem = web.html`<a href="?view=extensions" class="nav-item">extensions</a>`,
-  $themesNavItem = web.html`<a href="?view=themes" class="nav-item">themes</a>`,
-  $integrationsNavItem = web.html`<a href="?view=integrations" class="nav-item">integrations</a>`,
-  $changelogNavItem = web.html`<button class="nav-item nav-changelog">
+  const $coreNavItem = web.html`<a href="?view=core" class="nav-item">core</a>`,
+    $extensionsNavItem = web.html`<a href="?view=extensions" class="nav-item">extensions</a>`,
+    $themesNavItem = web.html`<a href="?view=themes" class="nav-item">themes</a>`,
+    $integrationsNavItem = web.html`<a href="?view=integrations" class="nav-item">integrations</a>`,
+    $changelogNavItem = web.html`<button class="nav-item nav-changelog">
     ${await components.feather('clock', { class: 'nav-changelog-icon' })}
   </button>`;
-$changelogNavItem.addEventListener('click', () => {
-  $changelogModal.scrollTop = 0;
-  $changelogModal.classList.add('modal-visible');
-});
+  $changelogNavItem.addEventListener('click', () => {
+    $changelogModal.scrollTop = 0;
+    $changelogModal.classList.add('modal-visible');
+  });
 
-web.render(
-  document.body,
   web.render(
-    web.html`<div class="body-container"></div>`,
+    document.body,
     web.render(
-      web.html`<div class="content-container"></div>`,
+      web.html`<div class="body-container"></div>`,
       web.render(
-        web.html`<nav class="nav"></nav>`,
-        $notionNavItem,
-        $coreNavItem,
-        $extensionsNavItem,
-        $themesNavItem,
-        $integrationsNavItem,
-        web.html`<a href="https://notion-enhancer.github.io" target="_blank" class="nav-item">docs</a>`,
-        web.html`<a href="https://discord.gg/sFWPXtA" target="_blank" class="nav-item">community</a>`,
-        $changelogNavItem
+        web.html`<div class="content-container"></div>`,
+        web.render(
+          web.html`<nav class="nav"></nav>`,
+          $notionNavItem,
+          $coreNavItem,
+          $extensionsNavItem,
+          $themesNavItem,
+          $integrationsNavItem,
+          web.html`<a href="https://notion-enhancer.github.io" target="_blank" class="nav-item">docs</a>`,
+          web.html`<a href="https://discord.gg/sFWPXtA" target="_blank" class="nav-item">community</a>`,
+          $changelogNavItem
+        ),
+        $main
       ),
-      $main
-    ),
-    web.render($sidebar, $profile, $options)
-  )
-);
+      web.render($sidebar, $profile, $options)
+    )
+  );
 
-function selectNavItem($item) {
-  for (const $selected of document.querySelectorAll('.nav-item-selected')) {
-    $selected.className = 'nav-item';
+  function selectNavItem($item) {
+    for (const $selected of document.querySelectorAll('.nav-item-selected')) {
+      $selected.className = 'nav-item';
+    }
+    $item.className = 'nav-item-selected';
   }
-  $item.className = 'nav-item-selected';
-}
 
-await generators.modList(
-  'core',
-  `Core mods provide the basics required for
+  await generators.modList(
+    'core',
+    `Core mods provide the basics required for
    all other extensions and themes to work. They
    can't be disabled, but they can be configured
    - just click on a mod to access its options.`
-);
-router.addView('core', async () => {
-  web.empty($main);
-  selectNavItem($coreNavItem);
-  return web.render($main, await generators.modList('core'));
-});
+  );
+  router.addView('core', async () => {
+    web.empty($main);
+    selectNavItem($coreNavItem);
+    return web.render($main, await generators.modList('core'));
+  });
 
-await generators.modList(
-  'extension',
-  `Extensions build on the functionality and layout of
+  await generators.modList(
+    'extension',
+    `Extensions build on the functionality and layout of
    the Notion client, modifying and interacting with
    existing interfaces.`
-);
-router.addView('extensions', async () => {
-  web.empty($main);
-  selectNavItem($extensionsNavItem);
-  return web.render($main, await generators.modList('extension'));
-});
+  );
+  router.addView('extensions', async () => {
+    web.empty($main);
+    selectNavItem($extensionsNavItem);
+    return web.render($main, await generators.modList('extension'));
+  });
 
-await generators.modList(
-  'theme',
-  `Themes change Notion's colour scheme.
+  await generators.modList(
+    'theme',
+    `Themes change Notion's colour scheme.
    Dark themes will only work when Notion is in dark mode,
    and light themes will only work when Notion is in light mode.
    Only one theme of each mode can be enabled at a time.`
-);
-router.addView('themes', async () => {
-  web.empty($main);
-  selectNavItem($themesNavItem);
-  return web.render($main, await generators.modList('theme'));
-});
+  );
+  router.addView('themes', async () => {
+    web.empty($main);
+    selectNavItem($themesNavItem);
+    return web.render($main, await generators.modList('theme'));
+  });
 
-await generators.modList(
-  'integration',
-  web.html`<span class="danger">Integrations are extensions that use an unofficial API
+  await generators.modList(
+    'integration',
+    web.html`<span class="danger">Integrations are extensions that use an unofficial API
    to access and modify content. They are used just like
    normal extensions, but may be more dangerous to use.</span>`
-);
-router.addView('integrations', async () => {
-  web.empty($main);
-  selectNavItem($integrationsNavItem);
-  return web.render($main, await generators.modList('integration'));
-});
+  );
+  router.addView('integrations', async () => {
+    web.empty($main);
+    selectNavItem($integrationsNavItem);
+    return web.render($main, await generators.modList('integration'));
+  });
 
-router.setDefaultView('extensions');
+  router.setDefaultView('extensions');
 
-router.addQueryListener('id', openSidebarMenu);
-async function openSidebarMenu(id) {
-  if (!id) return;
-  id = web.escape(id);
+  router.addQueryListener('id', openSidebarMenu);
+  async function openSidebarMenu(id) {
+    if (!id) return;
+    id = web.escape(id);
 
-  const deselectedMods = `.mod-selected:not([data-id="${id}"])`;
-  for (const $list of Object.values($modLists)) {
-    for (const $selected of $list.querySelectorAll(deselectedMods)) {
-      $selected.className = 'mod';
+    const deselectedMods = `.mod-selected:not([data-id="${id}"])`;
+    for (const $list of Object.values($modLists)) {
+      for (const $selected of $list.querySelectorAll(deselectedMods)) {
+        $selected.className = 'mod';
+      }
     }
-  }
-  router.updateQuery(`?id=${id}`);
+    router.updateQuery(`?id=${id}`);
 
-  if (id === 'profile') {
-    openProfileMenu();
-  } else openModMenu(id);
-}
+    if (id === 'profile') {
+      openProfileMenu();
+    } else openModMenu(id);
+  }
+})();
diff --git a/repo/menu/notifications.mjs b/repo/menu/notifications.mjs
index 0315d18..69f6171 100644
--- a/repo/menu/notifications.mjs
+++ b/repo/menu/notifications.mjs
@@ -10,8 +10,6 @@ import { tw } from './styles.mjs';
 const notificationsURL = 'https://notion-enhancer.github.io/notifications.json';
 export const notifications = {
   $container: web.html`<div class="notifications-container"></div>`,
-  cache: await storage.get(['notifications'], []),
-  provider: await fs.getJSON(notificationsURL),
   async add({ icon, message, id = undefined, color = undefined, link = undefined }) {
     const $notification = link
         ? web.html`<a
@@ -59,25 +57,40 @@ export const notifications = {
     $notification.addEventListener('click', env.reload);
   },
 };
-web.render(document.body, notifications.$container);
-for (const notification of notifications.provider) {
-  const cached = notifications.cache.includes(notification.id),
-    versionMatches = notification.version === env.version,
-    envMatches = !notification.environments || notification.environments.includes(env.name);
-  if (!cached && versionMatches && envMatches) notifications.add(notification);
-}
 
-const lastReadChangelog = await storage.get(['last_read_changelog']),
-  $changelogModalButton = web.html`<button type="button" class="modal-button">
-    Accept & Continue
-  </button>`;
+(async () => {
+  notifications.cache = await storage.get(['notifications'], []);
+  notifications.provider = await fs.getJSON(notificationsURL);
+
+  web.render(document.body, notifications.$container);
+  for (const notification of notifications.provider) {
+    const cached = notifications.cache.includes(notification.id),
+      versionMatches = notification.version === env.version,
+      envMatches = !notification.environments || notification.environments.includes(env.name);
+    if (!cached && versionMatches && envMatches) notifications.add(notification);
+  }
+})();
+
 export const $changelogModal = web.render(
   web.html`<div class="modal" role="dialog" aria-modal="true">
     <div class="modal-overlay" aria-hidden="true"></div>
-  </div>`,
+  </div>`
+);
+
+(async () => {
+  const $changelogModalButton = web.html`<button type="button" class="modal-button">
+    Accept & Continue
+  </button>`;
+  $changelogModalButton.addEventListener('click', async () => {
+    $changelogModal.classList.remove('modal-visible');
+    await storage.set(['last_read_changelog'], env.version);
+  });
+
   web.render(
-    web.html`<div class="modal-box"></div>`,
-    web.html`<div class="modal-body">
+    $changelogModal,
+    web.render(
+      web.html`<div class="modal-box"></div>`,
+      web.html`<div class="modal-body">
         <div class="modal-title">
           ${(await fs.getText('media/colour.svg')).replace(
             /width="\d+" height="\d+"/,
@@ -149,14 +162,13 @@ export const $changelogModal = web.render(
           </div>
         </div>
       </div>`,
-    web.render(web.html`<div class="modal-actions"></div>`, $changelogModalButton)
-  )
-);
-web.render(document.body, $changelogModal);
-if (lastReadChangelog !== env.version) {
-  $changelogModal.classList.add('modal-visible');
-}
-$changelogModalButton.addEventListener('click', async () => {
-  $changelogModal.classList.remove('modal-visible');
-  await storage.set(['last_read_changelog'], env.version);
-});
+      web.render(web.html`<div class="modal-actions"></div>`, $changelogModalButton)
+    )
+  );
+
+  const lastReadChangelog = await storage.get(['last_read_changelog']);
+  web.render(document.body, $changelogModal);
+  if (lastReadChangelog !== env.version) {
+    $changelogModal.classList.add('modal-visible');
+  }
+})();
diff --git a/repo/theming/theme.css b/repo/theming/theme.css
index 502dedf..c11799a 100644
--- a/repo/theming/theme.css
+++ b/repo/theming/theme.css
@@ -165,7 +165,7 @@ body,
 .notion-body.dark
   .notion-default-overlay-container
   [style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];'],
-.notion-focusable[style*='background: rgb(80, 85, 88);'],
+.notion-focusable[style*='background: rgb(80, 85, 88);']:not(.notion-help-button):not(.onboarding-checklist-button),
 .notion-body:not(.dark)
   .notion-default-overlay-container
   [style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];']