diff --git a/astro.config.mjs b/astro.config.mjs
index 0e37b3b..7f3c7be 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,6 +6,11 @@ export default defineConfig({
   output: "server",
   adapter: cloudflare(),
   integrations: [react()],
+  server: {
+    middleware: {
+      onRequest: "./src/middleware.js",
+    },
+  },
   vite: {
     build: {
       sourcemap: false,
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 78720e1..0f9bfd4 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,7 +1,8 @@
 ---
 import NavLink from '@components/nav/NavLink.astro';
 
-const { nav, updated } = Astro.props;
+const { updated } = Astro.props;
+const { nav } = Astro.locals;
 ---
 
 <footer style={updated ? undefined : 'margin-top: var(--spacing-3xl)'}>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index a1c48f4..44ba00e 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,7 +1,8 @@
 ---
 import Menu from '@components/nav/Menu.astro';
 
-const { nav, siteName, url } = Astro.props;
+const { siteName, url } = Astro.props;
+const { nav } = Astro.locals;
 const isHomePage = url === '/';
 ---
 
diff --git a/src/components/Metadata.astro b/src/components/Metadata.astro
index 377f9d0..4f70d52 100644
--- a/src/components/Metadata.astro
+++ b/src/components/Metadata.astro
@@ -3,7 +3,6 @@ import { escapeHtml } from "@utils/helpers.js";
 
 const {
   schema = "page",
-  globals,
   pageTitle: titleOverride,
   description: descriptionOverride,
   ogImage: ogImageOverride,
@@ -19,6 +18,7 @@ const {
   genre,
   year,
 } = Astro.props;
+const { globals} = Astro.locals;
 
 let pageTitle = globals.site_name;
 let pageDescription = globals.site_description;
diff --git a/src/components/media/Grid.astro b/src/components/media/Grid.astro
index 9292eda..1842773 100644
--- a/src/components/media/Grid.astro
+++ b/src/components/media/Grid.astro
@@ -1,7 +1,8 @@
 ---
 import Paginator from '@components/nav/Paginator.astro';
 
-const { data, globals, count, shape, pagination, loading = "lazy" } = Astro.props;
+const { data, count, shape, pagination, loading = "lazy" } = Astro.props;
+const { globals } = Astro.locals;
 const pageCount = pagination?.pages?.length || 0;
 const hidePagination = pageCount <= 1;
 
diff --git a/src/components/media/music/Recent.astro b/src/components/media/music/Recent.astro
index 9921178..5cc0e3a 100644
--- a/src/components/media/music/Recent.astro
+++ b/src/components/media/music/Recent.astro
@@ -1,5 +1,6 @@
 ---
-const { data, globals } = Astro.props;
+const { data } = Astro.props;
+const { globals } = Astro.locals;
 ---
 
 <div class="music-chart">
diff --git a/src/components/media/watching/Hero.astro b/src/components/media/watching/Hero.astro
index 078ef55..fa72d4c 100644
--- a/src/components/media/watching/Hero.astro
+++ b/src/components/media/watching/Hero.astro
@@ -1,7 +1,8 @@
 ---
 import Hero from "@components/blocks/Hero.astro";
 
-const { movie, globals } = Astro.props;
+const { movie } = Astro.props;
+const { globals } = Astro.locals;
 ---
 
 <a href={movie.url}>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 2ad2093..734f023 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -9,15 +9,15 @@ const currentUrl = Astro.url.pathname;
 const nav = await fetchNavigation();
 
 const {
-  globals,
   schema = "page",
   pageTitle,
   description,
   ogImage,
   fullUrl,
+  updated,
   ...otherProps
 } = Astro.props;
-
+const { globals} = Astro.locals;
 const isProduction = import.meta.env.MODE === "production";
 ---
 
@@ -42,18 +42,15 @@ const isProduction = import.meta.env.MODE === "production";
       type="font/woff2"
       crossorigin="anonymous"
     />
-
     <Metadata
       schema={schema}
-      globals={globals}
       pageTitle={pageTitle}
       description={description}
       ogImage={ogImage}
       fullUrl={fullUrl}
       {...otherProps}
     />
-
-    <script defer src="/scripts/index.js"></script>
+    <script defer src="/scripts/index.js" is:inline></script>
     {
       isProduction && (
         <>
@@ -72,12 +69,12 @@ const isProduction = import.meta.env.MODE === "production";
   <body>
     <div class="main-wrapper">
       <main>
-        <Header nav={nav} siteName={globals?.site_name} url={currentUrl} />
+        <Header siteName={globals?.site_name} url={currentUrl} />
         <div class="default-wrapper">
           <slot />
         </div>
       </main>
-      <Footer nav={nav} />
+      <Footer updated={updated} />
     </div>
   </body>
 </html>
diff --git a/src/middleware.js b/src/middleware.js
new file mode 100644
index 0000000..4e70472
--- /dev/null
+++ b/src/middleware.js
@@ -0,0 +1,19 @@
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchNavigation } from "@utils/data/nav.js";
+
+export async function onRequest(context, next) {
+  const { locals } = context;
+
+  try {
+    const globals = await fetchGlobals();
+    const nav = await fetchNavigation();
+
+    locals.globals = globals;
+    locals.nav = nav;
+  } catch (error) {
+    console.error("Error in middleware fetching data:", error);
+    return new Response("Internal Server Error", { status: 500 });
+  }
+
+  return next();
+}
diff --git a/src/pages/[permalink].astro b/src/pages/[permalink].astro
index 06faa28..6379606 100644
--- a/src/pages/[permalink].astro
+++ b/src/pages/[permalink].astro
@@ -1,7 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
 import BlockRenderer from '@components/blocks/BlockRenderer.astro';
-import { fetchGlobals } from '@utils/data/globals.js';
 import { fetchPages } from '@utils/data/pages';
 
 export const prerender = true;
@@ -14,8 +13,8 @@ export async function getStaticPaths() {
   }));
 }
 
-const globals = await fetchGlobals();
 const { page } = Astro.props;
+const { globals } = Astro.locals;
 const currentUrl = Astro.url.pathname;
 ---
 
diff --git a/src/pages/blogroll.astro b/src/pages/blogroll.astro
index b5f0052..cb659e7 100644
--- a/src/pages/blogroll.astro
+++ b/src/pages/blogroll.astro
@@ -1,19 +1,14 @@
 ---
 import Layout from '@layouts/Layout.astro';
 import { IconRss, IconJson, IconMailPlus, IconBrandMastodon } from "@tabler/icons-react";
-import { fetchGlobals } from '@utils/data/globals.js';
 import { fetchBlogroll } from '@utils/data/blogroll.js';
 
 const blogroll = await fetchBlogroll();
-const globals = await fetchGlobals();
-
 const currentUrl = Astro.url.pathname;
-
 const title = "Blogroll";
 const description = "These are awesome blogs that I enjoy and you may enjoy too.";
 ---
 <Layout
-  globals={globals}
   pageTitle={title}
   description={description}
   currentUrl={currentUrl}
diff --git a/src/pages/books/[isbn].astro b/src/pages/books/[isbn].astro
new file mode 100644
index 0000000..32ab6ac
--- /dev/null
+++ b/src/pages/books/[isbn].astro
@@ -0,0 +1,108 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Warning from "@components/blocks/banners/Warning.astro";
+import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
+import ProgressBar from "@components/media/ProgressBar.astro";
+import { IconArrowLeft, IconHeart, IconNeedle } from "@tabler/icons-react";
+import { fetchBookByUrl } from "@utils/data/bookByUrl.js";
+
+const { isbn } = Astro.params;
+
+const book = await fetchBookByUrl(Astro.url.pathname);
+if (!book) return Astro.redirect("/404", 404);
+
+const alt = `${book.title}${book.author ? ` by ${book.author}` : ""}`;
+const pageTitle = `Books / ${book.title}`;
+const description = book.description || `Details about the book ${book.title}`;
+const { globals } = Astro.locals;
+---
+
+<Layout pageTitle={pageTitle} description={description} schema="book">
+  <a class="back-link" href="/books" title="Go back to the books index page">
+    <IconArrowLeft size={18} /> Back to books
+  </a>
+  <article class="book-focus">
+    <div class="book-display">
+      <img
+        srcset={`
+          ${globals.cdn_url}${book.image}?class=verticalsm&type=webp 200w,
+          ${globals.cdn_url}${book.image}?class=verticalmd&type=webp 400w,
+          ${globals.cdn_url}${book.image}?class=verticalbase&type=webp 800w
+        `}
+        sizes="(max-width: 450px) 203px,
+          (max-width: 850px) 406px,
+          (max-width: 1000px) 812px,
+          812px"
+        src={`${globals.cdn_url}${book.image}?class=verticalsm&type=webp`}
+        alt={alt}
+        loading="lazy"
+        decoding="async"
+        width="200"
+        height="307"
+      />
+      <div class="media-meta">
+        <span class="title"><strong>{book.title}</strong></span>
+        {book.rating && <span>{book.rating}</span>}
+        {book.author && <span class="sub-meta">By {book.author}</span>}
+        {
+          book.favorite && (
+            <span class="sub-meta favorite">
+              <IconHeart size={18} /> This is one of my favorite books!
+            </span>
+          )
+        }
+        {
+          book.tattoo && (
+            <span class="sub-meta tattoo">
+              <IconNeedle size={18} /> I have a tattoo inspired by this book!
+            </span>
+          )
+        }
+        {
+          book.status === "finished" && (
+            <span class="sub-meta">
+              Finished on:{" "}
+              <strong class="highlight-text">
+                {new Date(book.date_finished).toLocaleDateString("en-US", {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric",
+                })}
+              </strong>
+            </span>
+          )
+        }
+        {
+          book.status === "started" && (
+            <ProgressBar percentage={`${book.progress}%`} />
+          )
+        }
+      </div>
+    </div>
+    {
+      book.review && (
+        <>
+          <Warning text="There are probably spoilers after this banner — this is a warning about them." />
+          <h2>My thoughts</h2>
+          <div set:html={book.review} />
+        </>
+      )
+    }
+    <AssociatedMedia
+      artists={book.artists}
+      books={book.related_books}
+      genres={book.genres}
+      movies={book.movies}
+      posts={book.posts}
+      shows={book.shows}
+    />
+    {
+      book.description && (
+        <>
+          <h2>Overview</h2>
+          <div set:html={book.description} />
+        </>
+      )
+    }
+  </article>
+</Layout>
diff --git a/src/pages/books/index.astro b/src/pages/books/index.astro
index 139dbc9..3d85bdd 100644
--- a/src/pages/books/index.astro
+++ b/src/pages/books/index.astro
@@ -2,18 +2,15 @@
 import Layout from "@layouts/Layout.astro";
 import Rss from "@components/blocks/banners/Rss.astro";
 import ProgressBar from "@components/media/ProgressBar.astro";
-import { fetchGlobals } from "@utils/data/globals.js";
 import { fetchBooks } from "@utils/data/books.js";
 import { md, htmlTruncate } from "@utils/helpers.js";
 
-const globals = await fetchGlobals();
 const books = await fetchBooks();
-
+const { globals } = Astro.locals;
 const title = "Currently reading";
 const description = "Here's what I'm reading at the moment.";
 const updated = new Date().toISOString();
 const schema = "books";
-
 const currentYear = new Date().getFullYear();
 const bookData = books.all
   .filter((book) => book.status === "started")
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 51d8289..fae8b66 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,10 @@
 ---
-import { fetchGlobals } from '@utils/data/globals';
 import Layout from '@layouts/Layout.astro';
 import Intro from '@components/home/Intro.astro';
 import RecentActivity from '@components/home/RecentActivity.astro';
 import RecentPosts from '@components/home/RecentPosts.astro';
 
-const globals = await fetchGlobals();
+const { globals } = Astro.locals;
 const schema = 'blog';
 const pageTitle = globals.site_name;
 const description = 'This is a blog post description';
diff --git a/src/pages/links.astro b/src/pages/links.astro
index 58ef9d5..1965349 100644
--- a/src/pages/links.astro
+++ b/src/pages/links.astro
@@ -2,10 +2,9 @@
 import Layout from "@layouts/Layout.astro";
 import Paginator from "@components/nav/Paginator.astro";
 import RssBanner from "@components/blocks/banners/Rss.astro";
-import { fetchGlobals } from "@utils/data/globals.js";
 import { fetchLinks } from "@utils/data/links.js";
 
-const globals = await fetchGlobals();
+const { globals } = Astro.locals;
 const links = await fetchLinks();
 
 const title = "Links";
diff --git a/src/pages/posts/[...page].astro b/src/pages/posts/[...page].astro
index 93404b2..a2dc7ba 100644
--- a/src/pages/posts/[...page].astro
+++ b/src/pages/posts/[...page].astro
@@ -1,16 +1,15 @@
 ---
 import { getCollection } from 'astro:content';
 import { IconStar } from '@tabler/icons-react';
-import { fetchGlobals } from "@data/globals.js";
 import { fetchAllPosts } from "@data/posts.js";
 import Layout from "@layouts/Layout.astro";
 import Paginator from '@components/nav/Paginator.astro';
 import { md } from '@utils/helpers.js';
 import { DateTime } from 'luxon';
 
-const globals = await fetchGlobals();
 const posts = await fetchAllPosts();
 const { page } = Astro.props;
+const { globals } = Astro.locals;
 const currentUrl = Astro.url.pathname;
 
 const currentPage = Astro.params.page ? parseInt(Astro.params.page, 10) : 1;
diff --git a/src/pages/posts/[year]/[title].astro b/src/pages/posts/[year]/[title].astro
index 1a298f2..566ee50 100644
--- a/src/pages/posts/[year]/[title].astro
+++ b/src/pages/posts/[year]/[title].astro
@@ -1,11 +1,8 @@
 ---
 import { IconStar } from "@tabler/icons-react";
-
 import { fetchAllPosts } from "@data/posts.js";
 import { fetchAnalyticsData } from "@data/analytics.js";
-import { fetchGlobals } from "@data/globals.js";
 import { fetchLinks } from "@data/links.js";
-
 import { md } from '@utils/helpers.js';
 import { getPopularPosts } from '@utils/getPopularPosts.js';
 
@@ -41,14 +38,13 @@ export async function getStaticPaths() {
 }
 
 const { post } = Astro.props;
+const { globals } = Astro.locals;
 const { year, title } = Astro.params;
-const globals = await fetchGlobals();
 const currentUrl = Astro.url.pathname;
 const htmlContent = md(post.content);
 ---
 
 <Layout
-  globals={globals}
   pageTitle={post.title}
   description={post.description}
   ogImage={post.open_graph_image}
diff --git a/src/utils/data/bookByUrl.js b/src/utils/data/bookByUrl.js
new file mode 100644
index 0000000..985a058
--- /dev/null
+++ b/src/utils/data/bookByUrl.js
@@ -0,0 +1,26 @@
+import { createClient } from "@supabase/supabase-js";
+
+const SUPABASE_URL = import.meta.env.SUPABASE_URL;
+const SUPABASE_KEY = import.meta.env.SUPABASE_KEY;
+const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
+
+const bookCache = {};
+
+export async function fetchBookByUrl(url) {
+  if (bookCache[url]) return bookCache[url];
+
+  const { data: book, error } = await supabase
+    .from("optimized_books")
+    .select("*")
+    .eq("url", url)
+    .limit(1);
+
+  if (error || !book) {
+    console.error(`Error fetching book with URL ${url}:`, error);
+    return null;
+  }
+
+  bookCache[url] = book[0];
+
+  return book[0];
+}