diff --git a/TODO.md b/TODO.md
index 0cdd348..66e166a 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,2 +1,3 @@
-- [ ] Check why I'm getting NS_BINDING_ABORTED on fonts when fetched in the network browser dev tool tab
-- [ ] Add a background when opening menus in mobile mode
\ No newline at end of file
+- Check why I'm getting NS_BINDING_ABORTED on fonts when fetched in the network browser dev tool tab
+- Add a background when opening menus in mobile mode
+- Strong is not bold...
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 85ca21b..590d410 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/src/pages/_components/AppLayout/AppLayout.astro b/src/pages/_components/AppLayout/AppLayout.astro
index 016ea2e..37e73a3 100644
--- a/src/pages/_components/AppLayout/AppLayout.astro
+++ b/src/pages/_components/AppLayout/AppLayout.astro
@@ -1,10 +1,9 @@
 ---
 import Html from "pages/_components/Html.astro";
-import MenuPanel from "./components/MenuPanel.astro";
 import Navbar from "./components/Navbar.astro";
-import MenuPanelReduced from "./components/MenuPanelReduced.astro";
 import { parseCookie } from "utils/astro";
 import { CookieNames } from "utils/cookies";
+import MenuPanel from "./components/MenuPanel.astro";
 
 interface Props {
   title: string;
@@ -35,7 +34,7 @@ const isMenuPanelReduced = parseCookie<boolean>(
       class:list={["texture-dots", { reduced: isMenuPanelReduced }]}
     >
       <div class="when-reduced">
-        <MenuPanelReduced />
+        <MenuPanel isReduced />
       </div>
       <div class="when-not-reduced">
         <MenuPanel />
@@ -131,8 +130,7 @@ const isMenuPanelReduced = parseCookie<boolean>(
           transition: 0.2s width;
 
           &.reduced {
-            width: auto;
-            padding: 1rem;
+            width: 6rem;
           }
 
           &.reduced > .when-not-reduced,
diff --git a/src/pages/_components/AppLayout/components/MenuPanel.astro b/src/pages/_components/AppLayout/components/MenuPanel.astro
index fb858fe..1c6dbdb 100644
--- a/src/pages/_components/AppLayout/components/MenuPanel.astro
+++ b/src/pages/_components/AppLayout/components/MenuPanel.astro
@@ -1,12 +1,17 @@
 ---
 import { Icon } from "astro-icon/components";
 import { getLocalizedUrl } from "utils/urls";
-import NavOption from "pages/_components/NavOption.astro";
 import HorizontalLine from "pages/_components/HorizontalLine.astro";
 import ReduceToggleButton from "./ReduceToggleButton.astro";
 import ThemeToggleButton from "./ThemeToggleButton.astro";
+import NavOption from "pages/_components/NavOption.astro";
+
+interface Props {
+  isReduced?: boolean;
+}
 
 const { locale = "en" } = Astro.params;
+const { isReduced = false } = Astro.props;
 ---
 
 {
@@ -21,10 +26,10 @@ const { locale = "en" } = Astro.params;
   <Icon name="accords" />
 </a>
 
-<p id="title">Accord’s Library</p>
+<p id="title" class:list={{ hidden: isReduced }}>Accord’s Library</p>
 
-<div id="buttons">
-  <ReduceToggleButton icon="material-symbols:chevron-left-rounded" />
+<div id="buttons" class:list={["when-js", { reduced: isReduced }]}>
+  <ReduceToggleButton icon={isReduced ? "material-symbols:chevron-right": "material-symbols:chevron-left"} />
   <ThemeToggleButton />
 </div>
 
@@ -35,6 +40,7 @@ const { locale = "en" } = Astro.params;
   icon="material-symbols:auto-stories"
   title="Library"
   subtitle="Browse all physical and digital media"
+  mode={isReduced ? "iconOnly" : "default"}
 />
 
 <NavOption
@@ -42,6 +48,7 @@ const { locale = "en" } = Astro.params;
   icon="material-symbols:workspaces"
   title="Content"
   subtitle="Explore all content and filter by type or category"
+  mode={isReduced ? "iconOnly" : "default"}
 />
 
 <NavOption
@@ -49,6 +56,7 @@ const { locale = "en" } = Astro.params;
   icon="material-symbols:travel-explore"
   title="Wiki"
   subtitle="An encyclopedia for everything related to DrakeNieR"
+  mode={isReduced ? "iconOnly" : "default"}
 />
 
 <NavOption
@@ -56,45 +64,64 @@ const { locale = "en" } = Astro.params;
   icon="material-symbols:schedule"
   title="Chronicles"
   subtitle="Experience all events and content in chronological order"
+  mode={isReduced ? "iconOnly" : "default"}
 />
 
 <HorizontalLine />
 
-<NavOption href="/news" icon="material-symbols:newspaper" title="News" />
+<NavOption
+  href="/news"
+  icon="material-symbols:newspaper"
+  title="News"
+  mode={isReduced ? "iconOnly" : "default"}
+/>
 
 <NavOption
   href="https://gallery.accords-library.com/posts/"
   icon="material-symbols:perm-media"
   title="Gallery"
+  mode={isReduced ? "iconOnly" : "default"}
 />
 
-<NavOption href="/archives" icon="material-symbols:save" title="Archives" />
+<NavOption
+  href="/archives"
+  icon="material-symbols:save"
+  title="Archives"
+  mode={isReduced ? "iconOnly" : "default"}
+/>
 
-<NavOption href="/about-us" icon="material-symbols:info" title="About us" />
+<NavOption
+  href="/about-us"
+  icon="material-symbols:info"
+  title="About us"
+  mode={isReduced ? "iconOnly" : "default"}
+/>
 
-<HorizontalLine />
+<div class:list={{ hidden: isReduced }}>
+  <HorizontalLine />
 
-<p>
-  This website’s content is made available under <a
-    href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a
-  > unless otherwise noted.
-</p>
+  <p>
+    This website’s content is made available under <a
+      href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a
+    > unless otherwise noted.
+  </p>
 
-<div id="common-creative">
-  <Icon name="creative-commons-brands" />
-  <Icon name="creative-commons-by-brands" />
-  <Icon name="creative-commons-sa-brands" />
-</div>
+  <div id="common-creative">
+    <Icon name="creative-commons-brands" />
+    <Icon name="creative-commons-by-brands" />
+    <Icon name="creative-commons-sa-brands" />
+  </div>
 
-<p>
-  Accord’s Library is not affiliated with or endorsed by SQUARE ENIX CO. LTD.
-  All game assets and promotional materials belongs to © SQUARE ENIX CO. LTD.
-</p>
+  <p>
+    Accord’s Library is not affiliated with or endorsed by SQUARE ENIX CO. LTD.
+    All game assets and promotional materials belongs to © SQUARE ENIX CO. LTD.
+  </p>
 
-<div id="social-links">
-  <Icon name="github-brands" />
-  <Icon name="x-brands" />
-  <Icon name="discord-brands" />
+  <div id="social-links">
+    <Icon name="github-brands" />
+    <Icon name="x-brands" />
+    <Icon name="discord-brands" />
+  </div>
 </div>
 
 {
@@ -102,6 +129,10 @@ const { locale = "en" } = Astro.params;
 }
 
 <style>
+  .hidden {
+    display: none;
+  }
+
   #title {
     font-family: var(--font-headers);
     font-size: 1.875rem;
@@ -130,6 +161,15 @@ const { locale = "en" } = Astro.params;
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
+
+    &.reduced {
+      flex-direction: column;
+    }
+
+    & > #theme-toggle.dark > .when-light,
+    & > #theme-toggle.light > .when-dark {
+      display: none;
+    }
   }
 
   #common-creative {
@@ -144,10 +184,6 @@ const { locale = "en" } = Astro.params;
     }
   }
 
-  p {
-    text-align: center;
-  }
-
   #social-links {
     display: grid;
     grid-auto-flow: column;
@@ -160,3 +196,35 @@ const { locale = "en" } = Astro.params;
     }
   }
 </style>
+
+{
+  /* -------------------------------------------- JS -------------------------------------------- */
+}
+
+<script>
+  import tippy, { createSingleton } from "tippy.js";
+  import { onLoad } from "utils/turbo";
+
+  onLoad(() => {
+    createSingleton(
+      tippy("#menu-panel > .when-reduced > [data-tippy-template]", {
+        content: (reference) => {
+          const templateQuery = reference.getAttribute("data-tippy-template")!;
+          const template = reference.querySelector(templateQuery)!;
+          const container = document.createElement("div");
+          container.append(template.cloneNode(true));
+          container.style.fontSize = "90%";
+          return container;
+        },
+      }),
+      {
+        allowHTML: true,
+        placement: "right",
+        delay: 250,
+        moveTransition: "transform 0.2s ease",
+        maxWidth: "18rem",
+        inertia: true,
+      }
+    );
+  });
+</script>
diff --git a/src/pages/_components/AppLayout/components/MenuPanelReduced.astro b/src/pages/_components/AppLayout/components/MenuPanelReduced.astro
deleted file mode 100644
index a1d1597..0000000
--- a/src/pages/_components/AppLayout/components/MenuPanelReduced.astro
+++ /dev/null
@@ -1,159 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import { getLocalizedUrl } from "utils/urls";
-import { CookieNames } from "utils/cookies";
-import NavOptionIcon from "pages/_components/NavOptionIcon.astro";
-import { parseCookie } from "utils/astro";
-import HorizontalLine from "pages/_components/HorizontalLine.astro";
-import ReduceToggleButton from "./ReduceToggleButton.astro";
-
-const { locale = "en" } = Astro.params;
-
-const themeColors = parseCookie<string>(
-  Astro.cookies.get(CookieNames.THEME_COLOR),
-  "theme-color-light"
-);
----
-
-{
-  /* ------------------------------------------- HTML ------------------------------------------- */
-}
-
-<a
-  id="accords-logo"
-  data-turbo-confirm="Do you want to leave this page?"
-  href={getLocalizedUrl("/", locale)}
->
-  <Icon name="accords" />
-</a>
-
-<div id="buttons">
-  <ReduceToggleButton icon="material-symbols:chevron-right-rounded" />
-
-  <button
-    class={themeColors === "theme-color-dark" ? "dark" : "light"}
-    id="theme-toggle"
-  >
-    <Icon
-      class="when-light"
-      name="material-symbols:light-mode"
-      width={24}
-      height={24}
-    />
-    <Icon
-      class="when-dark"
-      name="material-symbols:dark-mode"
-      width={24}
-      height={24}
-    />
-  </button>
-</div>
-
-<HorizontalLine />
-
-<NavOptionIcon
-  href="/library"
-  icon="material-symbols:auto-stories"
-  title="Library"
-  subtitle="Browse all physical and digital media"
-/>
-
-<NavOptionIcon
-  href="/contents"
-  icon="material-symbols:workspaces"
-  title="Content"
-  subtitle="Explore all content and filter by type or category"
-/>
-
-<NavOptionIcon
-  href="/wiki"
-  icon="material-symbols:travel-explore"
-  title="Wiki"
-  subtitle="An encyclopedia for everything related to DrakeNieR"
-/>
-
-<NavOptionIcon
-  href="/chronicles"
-  icon="material-symbols:schedule"
-  title="Chronicles"
-  subtitle="Experience all events and content in chronological order"
-/>
-
-<HorizontalLine />
-
-<NavOptionIcon href="/news" icon="material-symbols:newspaper" title="News" />
-
-<NavOptionIcon
-  href="https://gallery.accords-library.com/posts/"
-  icon="material-symbols:perm-media"
-  title="Gallery"
-/>
-
-<NavOptionIcon href="/archives" icon="material-symbols:save" title="Archives" />
-
-<NavOptionIcon href="/about-us" icon="material-symbols:info" title="About us" />
-
-{
-  /* ------------------------------------------- CSS -------------------------------------------- */
-}
-
-<style>
-  #accords-logo {
-    width: 3rem;
-    aspect-ratio: 1/1;
-    color: var(--color-base-1000);
-
-    &:hover {
-      color: var(--color-base-600);
-    }
-
-    & > svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  #buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-
-    & > #theme-toggle.dark > .when-light,
-    & > #theme-toggle.light > .when-dark {
-      display: none;
-    }
-  }
-</style>
-
-{
-  /* -------------------------------------------- JS -------------------------------------------- */
-}
-
-<script>
-  import tippy, { createSingleton } from "tippy.js";
-  import { onLoad } from "utils/turbo";
-
-  onLoad(() => {
-    createSingleton(
-      tippy(".menu-panel-content > [data-tippy-template]", {
-        content: (reference) => {
-          const templateQuery = reference.getAttribute("data-tippy-template")!;
-          const template = reference.querySelector(templateQuery)!;
-          const container = document.createElement("div");
-          container.append(template.cloneNode(true));
-          container.style.fontSize = "90%";
-          return container;
-        },
-      }),
-      {
-        allowHTML: true,
-        placement: "right",
-        delay: 250,
-        moveTransition: "transform 0.2s ease",
-        maxWidth: "18rem",
-        inertia: true,
-      }
-    );
-  });
-</script>
diff --git a/src/pages/_components/AppLayout/components/Navbar.astro b/src/pages/_components/AppLayout/components/Navbar.astro
index ed1d0ef..b0246a5 100644
--- a/src/pages/_components/AppLayout/components/Navbar.astro
+++ b/src/pages/_components/AppLayout/components/Navbar.astro
@@ -12,25 +12,29 @@ const { title, showSubPanel } = Astro.props;
   /* ------------------------------------------- HTML ------------------------------------------- */
 }
 
-<button id="toggle-menu-panel">
-  <Icon
-    class="when-off"
-    name="material-symbols:menu-rounded"
-    width={24}
-    height={24}
-  />
-  <Icon
-    class="when-on"
-    name="material-symbols:close-rounded"
-    width={24}
-    height={24}
-  />
-</button>
+<div>
+  <button id="toggle-menu-panel" class="when-js">
+    <Icon
+      class="when-off"
+      name="material-symbols:menu-rounded"
+      width={24}
+      height={24}
+    />
+    <Icon
+      class="when-on"
+      name="material-symbols:close-rounded"
+      width={24}
+      height={24}
+    />
+  </button>
+</div>
+
 <p>{title}</p>
+
 <div>
   {
     showSubPanel && (
-      <button id="toggle-sub-panel">
+      <button id="toggle-sub-panel" class="when-js">
         <Icon
           class="when-off"
           name="material-symbols:tune-rounded"
diff --git a/src/pages/_components/Html.astro b/src/pages/_components/Html.astro
index c857f3d..89e94a1 100644
--- a/src/pages/_components/Html.astro
+++ b/src/pages/_components/Html.astro
@@ -26,6 +26,16 @@ const themeColors = parseCookie(
     <link href="/css/sanitize.min.css" rel="stylesheet" />
     <link href="/css/tippy.css" rel="stylesheet" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <noscript>
+      <style>
+        .when-js {
+          display: none !important;
+        }
+        .when-no-js {
+          display: initial !important;
+        }
+      </style>
+    </noscript>
   </head>
 
   <body class={themeColors}>
@@ -33,6 +43,10 @@ const themeColors = parseCookie(
   </body>
 </html>
 
+<script>
+  Turbo.setProgressBarDelay(0);
+</script>
+
 {
   /* ------------------------------------------- CSS -------------------------------------------- */
 }
@@ -376,8 +390,21 @@ const themeColors = parseCookie(
   }
 
   .turbo-progress-bar {
+    position: fixed;
+    display: block;
+    top: 0;
+    left: 0;
     height: 5px;
     background-color: #b07751;
+    z-index: 2147483647;
+    transition:
+      width 1000ms ease-out,
+      opacity 500ms 500ms ease-in;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .when-no-js {
+    display: none;
   }
 
   :root {
diff --git a/src/pages/_components/NavOption.astro b/src/pages/_components/NavOption.astro
index 1dbd8df..c0f5735 100644
--- a/src/pages/_components/NavOption.astro
+++ b/src/pages/_components/NavOption.astro
@@ -6,10 +6,11 @@ interface Props {
   icon?: string;
   title: string | null | undefined;
   subtitle?: string | null | undefined;
+  mode?: "iconOnly" | "default";
 }
 
 const { locale } = Astro.params;
-const { href, icon, title, subtitle } = Astro.props;
+const { href, icon, title, subtitle, mode = "default" } = Astro.props;
 
 const currentPath = new URL(Astro.request.url).pathname.slice(
   `/${locale}`.length
@@ -23,12 +24,12 @@ const isActive = currentPath.startsWith(href);
 }
 
 <a
-  id="component"
   href={getLocalizedUrl(href, locale)}
   class:list={{ active: isActive }}
+  data-tippy-template="#text-content"
 >
   {icon && <Icon name={icon} />}
-  <div id="text-content">
+  <div id="text-content" class:list={{ hidden: mode === "iconOnly" }}>
     <p class="font-headers">
       {title}
     </p>
@@ -41,7 +42,7 @@ const isActive = currentPath.startsWith(href);
 }
 
 <style>
-  #component {
+  a {
     padding: 1rem;
     color: inherit;
     text-decoration: inherit;
@@ -71,12 +72,8 @@ const isActive = currentPath.startsWith(href);
       flex-shrink: 0;
     }
 
-    @container (max-width: 15rem) {
-      width: 3.5rem;
-
-      & > #text-content {
-        display: none;
-      }
+    & > #text-content.hidden {
+      display: none;
     }
   }
 
diff --git a/src/pages/_components/NavOptionIcon.astro b/src/pages/_components/NavOptionIcon.astro
deleted file mode 100644
index 2fc3ae1..0000000
--- a/src/pages/_components/NavOptionIcon.astro
+++ /dev/null
@@ -1,93 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import { getLocalizedUrl } from "utils/urls";
-interface Props {
-  href: string;
-  icon?: string;
-  title: string | null | undefined;
-  subtitle?: string | null | undefined;
-}
-
-const { locale } = Astro.params;
-const { href, icon, title, subtitle } = Astro.props;
-
-const currentPath = new URL(Astro.request.url).pathname.slice(
-  `/${locale}`.length
-);
-
-const isActive = currentPath.startsWith(href);
----
-
-{
-  /* ------------------------------------------- HTML ------------------------------------------- */
-}
-
-<a
-  id="component"
-  href={getLocalizedUrl(href, locale)}
-  class:list={{ active: isActive }}
-  data-tippy-template="#text-content"
->
-  {icon && <Icon name={icon} />}
-  <div id="text-content">
-    <p class="font-headers">
-      {title}
-    </p>
-    {subtitle && <p>{subtitle}</p>}
-  </div>
-</a>
-
-{
-  /* ------------------------------------------- CSS -------------------------------------------- */
-}
-
-<style>
-  #component {
-    padding: 1rem;
-    color: inherit;
-    text-decoration: inherit;
-
-    display: flex;
-    width: 100%;
-    gap: 1.25rem;
-    border-radius: 1rem;
-
-    transition:
-      0.15s background-color,
-      0.15s box-shadow;
-
-    &:hover,
-    &.active {
-      box-shadow: inset 0 1px 4px -2px var(--color-shadow);
-      background-color: var(--color-base-250);
-
-      &:active {
-        box-shadow: inset 0 2px 4px 0 var(--color-shadow);
-      }
-    }
-
-    & > svg {
-      width: 24px;
-      height: 24px;
-      flex-shrink: 0;
-    }
-
-    & > #text-content {
-      display: none;
-    }
-  }
-
-  #text-content {
-    display: grid;
-    flex-grow: 1;
-    gap: 0.25rem;
-
-    & > .font-headers {
-      font-size: 150%;
-    }
-
-    & > :not(.font-headers) {
-      line-height: 1.5;
-    }
-  }
-</style>
diff --git a/src/typings/turbo.d.ts b/src/typings/turbo.d.ts
index a127271..5dbb0f5 100644
--- a/src/typings/turbo.d.ts
+++ b/src/typings/turbo.d.ts
@@ -1,6 +1,7 @@
 // https://turbo.hotwired.dev/reference/drive
 declare namespace Turbo {
-  const cache = {
-    clear: () => null,
+  const cache: {
+    clear: () => void;
   };
+  const setProgressBarDelay: (delayInMs: number) => void;
 }