diff --git a/.eslintrc.json b/.eslintrc.json
index 16faa338..1d13e0d7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,5 +1,8 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ],
   "rules": {
     "comma-dangle": ["error", {
       "objects": "always-multiline",
@@ -19,30 +22,57 @@
     "jsx-a11y/label-has-associated-control": [ 2, {
       "components": [ "Label" ],
       "required": {
-          "some": [ "nesting", "id" ]
+        "some": [ "nesting", "id" ]
       }
     }],
+    "jsx-quotes": ["error", "prefer-double"],
     "quotes": [2, "single",
       { "avoidEscape": true, "allowTemplateLiterals": true }
     ],
     "space-before-function-paren": 0,
     "react/jsx-props-no-spreading": 0,
+    "react/prop-types": 0,
     "react/jsx-handler-names": 0,
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        "extensions": [
+            ".js",
+            ".ts",
+            ".jsx",
+            ".tsx"
+        ]
+      }
+    ],
     "react/jsx-fragments": 0,
     "react/jsx-one-expression-per-line": 0,
     "react/no-unused-prop-types": 0,
     "react/require-default-props": 0,
-    "react/function-component-definition": [2, {
-      "namedComponents": ["function-declaration", "arrow-function"]
-    }],
+    "react/jsx-no-useless-fragment": [2, { "allowExpressions": true }], // https://github.com/jsx-eslint/eslint-plugin-react/issues/2584
+    "react/jsx-indent": [2, 2],
     "react/display-name": 0,
+    "class-methods-use-this": 0,
     "import/prefer-default-export": 0,
     "import/no-extraneous-dependencies": 0,
     "import/no-cycle": 0,
     "import/no-unresolved": 0,
+    "no-unused-vars": 0,
+    "no-multi-spaces": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "vars": "local",
+        "args": "none"
+      }
+    ],
     "import/export": 0,
     "func-names": 0,
     "semi": [1, "always"], // 1 is for warning
     "@next/next/no-img-element": 0
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["classnames", "clsx", "ctl", "cva", "tv", "cn", "dcnb", "cnb"] // Tailwind utility class detection for specific libraries
+    }
   }
 }
diff --git a/app/(editor)/editor/page.tsx b/app/(editor)/editor/page.tsx
index 1c4c72dc..0f74589e 100644
--- a/app/(editor)/editor/page.tsx
+++ b/app/(editor)/editor/page.tsx
@@ -4,8 +4,8 @@ import { components as Components } from '@/components/StoryblokProvider';
 import { resolveRelations } from '@/utilities/resolveRelations';
 import { notFound } from 'next/navigation';
 import { ComponentNotFound } from '@/components/Storyblok/ComponentNotFound';
-import getStoryData from '@/utilities/data/getStoryData';
-import getStoryList from '@/utilities/data/getStoryList';
+import { getStoryData } from '@/utilities/data/getStoryData';
+import { getStoryList } from '@/utilities/data/getStoryList';
 
 // Control what happens when a dynamic segment is visited that was not generated with generateStaticParams.
 export const dynamic = 'force-dynamic';
diff --git a/app/(storyblok)/[[...slug]]/not-found.tsx b/app/(storyblok)/[[...slug]]/not-found.tsx
index f3dfc36f..81af8ff7 100644
--- a/app/(storyblok)/[[...slug]]/not-found.tsx
+++ b/app/(storyblok)/[[...slug]]/not-found.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import StoryblokProvider from '@/components/StoryblokProvider';
 import {
-  ISbStoriesParams, getStoryblokApi, storyblokInit, apiPlugin, StoryblokStory, StoryblokClient,
+  storyblokInit, apiPlugin, StoryblokStory,
 } from '@storyblok/react/rsc';
 import { components as Components } from '@/components/StoryblokProvider';
 import { resolveRelations } from '@/utilities/resolveRelations';
 import { ComponentNotFound } from '@/components/Storyblok/ComponentNotFound';
-import { isProduction } from '@/utilities/getActiveEnv';
+import { getStoryDataCached } from '@/utilities/data/getStoryData';
+import { getConfigBlokCached } from '@/utilities/data/getConfigBlok';
+import { getSlugPrefix } from '@/utilities/getSlugPrefix';
+import { getPageMetadata } from '@/utilities/getPageMetadata';
+import { Metadata } from 'next';
 
 // Storyblok bridge options.
 const bridgeOptions = {
@@ -31,34 +35,27 @@ storyblokInit({
 });
 
 /**
- * Get the data out of the Storyblok API for the page.
- *
- * Make sure to not export the below functions otherwise there will be a typescript error
- * https://github.com/vercel/next.js/discussions/48724
+ * Generate the SEO metadata for the page.
  */
-async function getStoryData(slug = 'momentum/page-not-found') {
-  const isProd = isProduction();
-  const storyblokApi: StoryblokClient = getStoryblokApi();
-  const sbParams: ISbStoriesParams = {
-    version: isProd ? 'published' : 'draft',
-    resolve_relations: resolveRelations,
-  };
+export async function generateMetadata(): Promise<Metadata> {
 
-  try {
-    const story = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);
-    return story;
-  } catch (error: any) {
+  const slugPrefix = getSlugPrefix();
+  const prefixedSlug = slugPrefix + '/page-not-found';
+  const config = await getConfigBlokCached();
 
-    if (error && error.status && error.status === 404) {
-      return { data: 404 };
-    }
+  // Get the story data.
+  const { data: { story } } = await getStoryDataCached({ path: prefixedSlug });
 
-    throw error;
-  }
-};
+  // Generate the metadata.
+  const meta = getPageMetadata({ story, sbConfig: config, slug: prefixedSlug });
+  return meta;
+}
 
+/**
+ * Get the story data from the Storyblok API through the cache.
+ */
 export default async function PageNotFound() {
-  const { data } = await getStoryData();
+  const { data } = await getStoryDataCached({ path: 'momentum/page-not-found' });
 
   if (data === 404) {
     return (
diff --git a/app/(storyblok)/[[...slug]]/page.tsx b/app/(storyblok)/[[...slug]]/page.tsx
index 0e0649b1..c4d94913 100644
--- a/app/(storyblok)/[[...slug]]/page.tsx
+++ b/app/(storyblok)/[[...slug]]/page.tsx
@@ -1,14 +1,14 @@
 import { Metadata } from 'next';
 import {
-  ISbStoriesParams, getStoryblokApi, storyblokInit, apiPlugin, StoryblokStory, StoryblokClient,
+  storyblokInit, apiPlugin, StoryblokStory,
 } from '@storyblok/react/rsc';
 import { components as Components } from '@/components/StoryblokProvider';
 import { resolveRelations } from '@/utilities/resolveRelations';
 import { getPageMetadata } from '@/utilities/getPageMetadata';
 import { ComponentNotFound } from '@/components/Storyblok/ComponentNotFound';
 import { notFound } from 'next/navigation';
-import getStoryData from '@/utilities/data/getStoryData';
-import getStoryList from '@/utilities/data/getStoryList';
+import { getStoryDataCached, getConfigBlokCached, getAllStoriesCached } from '@/utilities/data/';
+import { getStoryListCached } from '@/utilities/data/getStoryList';
 import { isProduction } from '@/utilities/getActiveEnv';
 import { getSlugPrefix } from '@/utilities/getSlugPrefix';
 
@@ -57,29 +57,19 @@ storyblokInit({
  */
 export async function generateStaticParams() {
   const isProd = isProduction();
-  // Fetch new content from storyblok.
-  const storyblokApi: StoryblokClient = getStoryblokApi();
-  let sbParams: ISbStoriesParams = {
-    version: isProd ? 'published' : 'draft',
-    resolve_links: '0',
-    resolve_assets: 0,
-    per_page: 100,
-    starts_with: getSlugPrefix() + '/',
-  };
-
-  // Use the `cdn/links` endpoint to get a list of all stories without all the extra data.
-  const response = await storyblokApi.getAll('cdn/links', sbParams);
-
-  // Filters
-  let stories = response;
+
+  // Get all the stories.
+  let stories = await getAllStoriesCached();
   // Filter out folders.
-  stories = response.filter((link) => link.is_folder === false);
+  stories = stories.filter((link) => link.is_folder === false);
   // Filter out test content by filtering out the `test` folder.
-  stories = stories.filter((link) => !link.slug.startsWith(getSlugPrefix() + '/test'));
+  if (isProd) {
+    stories = stories.filter((link) => !link.slug.startsWith(getSlugPrefix() + '/test'));
+  }
   // Filter out globals by filtering out the `global-components` folder.
   stories = stories.filter((link) => !link.slug.startsWith(getSlugPrefix() + '/global-components'));
 
-  let paths: PathsType[] = [];
+  const paths: PathsType[] = [];
 
   stories.forEach((story) => {
 
@@ -101,9 +91,6 @@ export async function generateStaticParams() {
 
   });
 
-  // Add the home page.
-  paths.push({ slug: [''] });
-
   return paths;
 };
 
@@ -112,28 +99,17 @@ export async function generateStaticParams() {
  */
 export async function generateMetadata({ params }: ParamsType): Promise<Metadata> {
   const { slug } = params;
-  try {
-
-    // Convert the slug to a path.
-    const slugPath = slug ? slug.join('/') : '';
-
-    // Construct the slug for Storyblok.
-    const prefixedSlug = getSlugPrefix() + '/' + slugPath;
+  const slugPrefix = getSlugPrefix();
+  const slugPath = slug ? slug.join('/') : '';
+  const prefixedSlug = slugPrefix + '/' + slugPath;
+  const config = await getConfigBlokCached();
 
-    // Get the story data.
-    const { data } = await getStoryData({ path: prefixedSlug });
-    if (!data.story || !data.story.content) {
-      notFound();
-    }
-    const blok = data.story.content;
-    const meta = getPageMetadata({ blok, slug: slugPath });
-    return meta;
-  }
-  catch (error) {
-    console.log('Metadata error:', error, slug);
-  }
+  // Get the story data.
+  const { data: { story } } = await getStoryDataCached({ path: prefixedSlug });
 
-  notFound();
+  // Generate the metadata.
+  const meta = getPageMetadata({ story, sbConfig: config, slug: slugPath });
+  return meta;
 }
 
 /**
@@ -149,7 +125,7 @@ export default async function Page({ params }: ParamsType) {
   const prefixedSlug = getSlugPrefix() + '/' + slugPath;
 
   // Get data out of the API.
-  const { data } = await getStoryData({ path: prefixedSlug });
+  const { data } = await getStoryDataCached({ path: prefixedSlug });
 
   // Define an additional data container to pass through server data fetch to client components.
   // as everything below the `StoryblokStory` is a client side component.
@@ -157,7 +133,7 @@ export default async function Page({ params }: ParamsType) {
 
   // Get additional data for those stories that need it.
   if (data?.story?.content?.component === 'sbStoryFilterPage') {
-    extra = await getStoryList({ path: prefixedSlug });
+    extra = await getStoryListCached({ path: prefixedSlug });
   }
 
   // Failed to fetch from API because story slug was not found.
diff --git a/app/(storyblok)/error.tsx b/app/(storyblok)/error.tsx
index 11abe1e3..cf15943b 100644
--- a/app/(storyblok)/error.tsx
+++ b/app/(storyblok)/error.tsx
@@ -14,10 +14,10 @@ export default function Error({error, reset}: {
   }, [error]);
 
   return (
-    <div className='bg-black'>
+    <div className="bg-black">
       <Masthead />
       <main>
-        <Container width='site' className='rs-my-8 text-white'>
+        <Container width="site" className="rs-my-8 text-white">
           <h1>Something went wrong.</h1>
           <p>Try refreshing your browser.</p>
         </Container>
diff --git a/app/(storyblok)/loading.tsx b/app/(storyblok)/loading.tsx
index c7713a80..639f0d2e 100644
--- a/app/(storyblok)/loading.tsx
+++ b/app/(storyblok)/loading.tsx
@@ -6,13 +6,13 @@ const Skeleton = DynamicLoad(() => import('react-loading-skeleton'), { ssr: fals
 
 const Loading = () => {
   return (
-    <div className='bg-black'>
+    <div className="bg-black">
       <Masthead />
       <main>
-        <Container width='site' className='rs-my-10'>
-          <FlexBox gap direction='row' wrap='wrap'>
-            <Skeleton height={500} highlightColor="rgba(255,255,255,0.2)" baseColor="rgba(0,0,0,0.6)" containerClassName='w-full'/>
-            <Skeleton height={300} highlightColor="rgba(255,255,255,0.2)" baseColor="rgba(0,0,0,0.6)" containerClassName='w-full'/>
+        <Container width="site" className="rs-my-10">
+          <FlexBox gap direction="row" wrap="wrap">
+            <Skeleton height={500} highlightColor="rgba(255,255,255,0.2)" baseColor="rgba(0,0,0,0.6)" containerClassName="w-full"/>
+            <Skeleton height={300} highlightColor="rgba(255,255,255,0.2)" baseColor="rgba(0,0,0,0.6)" containerClassName="w-full"/>
           </FlexBox>
         </Container>
       </main>
diff --git a/app/global-error.tsx b/app/global-error.tsx
index 486b8a15..7b074bf0 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -14,10 +14,10 @@ export default function Error({error, reset}: {
   }, [error]);
 
   return (
-    <div className='bg-black'>
+    <div className="bg-black">
       <Masthead />
       <main>
-        <Container width='site' className='rs-my-8 text-white'>
+        <Container width="site" className="rs-my-8 text-white">
           <h1>Something went very wrong.</h1>
           <p>Try refreshing your browser.</p>
         </Container>
diff --git a/app/loading.tsx b/app/loading.tsx
index c7713a80..639f0d2e 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -6,13 +6,13 @@ const Skeleton = DynamicLoad(() => import('react-loading-skeleton'), { ssr: fals
 
 const Loading = () => {
   return (
-    <div className='bg-black'>
+    <div className="bg-black">
       <Masthead />
       <main>
-        <Container width='site' className='rs-my-10'>
-          <FlexBox gap direction='row' wrap='wrap'>
-            <Skeleton height={500} highlightColor="rgba(255,255,255,0.2)" baseColor="rgba(0,0,0,0.6)" containerClassName='w-full'/>
-            <Skeleton height={300} highlightColor="rgba(255,255,255,0.2)" baseColor="rgba(0,0,0,0.6)" containerClassName='w-full'/>
+        <Container width="site" className="rs-my-10">
+          <FlexBox gap direction="row" wrap="wrap">
+            <Skeleton height={500} highlightColor="rgba(255,255,255,0.2)" baseColor="rgba(0,0,0,0.6)" containerClassName="w-full"/>
+            <Skeleton height={300} highlightColor="rgba(255,255,255,0.2)" baseColor="rgba(0,0,0,0.6)" containerClassName="w-full"/>
           </FlexBox>
         </Container>
       </main>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index f3dfc36f..7c12abf4 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -7,6 +7,11 @@ import { components as Components } from '@/components/StoryblokProvider';
 import { resolveRelations } from '@/utilities/resolveRelations';
 import { ComponentNotFound } from '@/components/Storyblok/ComponentNotFound';
 import { isProduction } from '@/utilities/getActiveEnv';
+import { getSlugPrefix } from '@/utilities/getSlugPrefix';
+import { Metadata } from 'next';
+import { getStoryDataCached } from '@/utilities/data/getStoryData';
+import { getConfigBlokCached } from '@/utilities/data/getConfigBlok';
+import { getPageMetadata } from '@/utilities/getPageMetadata';
 
 // Storyblok bridge options.
 const bridgeOptions = {
@@ -47,6 +52,7 @@ async function getStoryData(slug = 'momentum/page-not-found') {
   try {
     const story = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);
     return story;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
 
     if (error && error.status && error.status === 404) {
@@ -57,6 +63,24 @@ async function getStoryData(slug = 'momentum/page-not-found') {
   }
 };
 
+/**
+ * Generate the SEO metadata for the page.
+ */
+export async function generateMetadata(): Promise<Metadata> {
+
+  const slugPrefix = getSlugPrefix();
+  const prefixedSlug = slugPrefix + '/page-not-found';
+  const config = await getConfigBlokCached();
+
+
+  // Get the story data.
+  const { data: { story } } = await getStoryDataCached({ path: prefixedSlug });
+
+  // Generate the metadata.
+  const meta = getPageMetadata({ story, sbConfig: config, slug: prefixedSlug });
+  return meta;
+}
+
 export default async function PageNotFound() {
   const { data } = await getStoryData();
 
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 2bfba559..5f3ac03e 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -18,7 +18,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 
   const isProd = isProduction();
   // Fetch new content from storyblok.
-  let sbParams: ISbStoriesParams = {
+  const sbParams: ISbStoriesParams = {
     version: isProd ? 'published' : 'draft',
     resolve_links: '0',
     resolve_assets: 0,
@@ -47,7 +47,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const currentURL = process.env.URL || process.env.DEPLOY_PRIME_URL || 'https://momentum.stanford.edu';
 
   const ret = indexStories.map((story) => {
-    const url =  `${currentURL}${sbStripSlugURL(story.full_slug)}`;
+    const url = `${currentURL}${sbStripSlugURL(story.full_slug)}`;
     return {
       url: url.replace(/\/+$/, ''),
       lastModified: new Date(story.published_at),
diff --git a/components/AnnotatedImage/ImageHotspot.styles.ts b/components/AnnotatedImage/ImageHotspot.styles.ts
index 997d1435..73f3f21c 100644
--- a/components/AnnotatedImage/ImageHotspot.styles.ts
+++ b/components/AnnotatedImage/ImageHotspot.styles.ts
@@ -12,7 +12,7 @@ export const dialog = 'relative z-[150]';
 export const srOnly = 'sr-only';
 export const dialogOverlay = 'fixed inset-0 bg-gc-black/60 backdrop-blur-lg w-screen';
 export const dialogWrapper = 'fixed inset-0 sm:py-30 w-screen overflow-y-auto overscroll-contain overflow-x-hidden';
-export const dialogPanel  = (modalContentType: SbImageHotspotModalContentType) => cnb(
+export const dialogPanel = (modalContentType: SbImageHotspotModalContentType) => cnb(
   'relative sm:cc flex w-screen min-h-screen inset-0 break-words justify-center',
   (modalContentType === 'text-image' || modalContentType === 'text') ? 'items-start sm:items-center' : 'items-center text-white',
 );
diff --git a/components/AnnotatedImage/ImageHotspot.tsx b/components/AnnotatedImage/ImageHotspot.tsx
index ac0fa8e4..94125edc 100644
--- a/components/AnnotatedImage/ImageHotspot.tsx
+++ b/components/AnnotatedImage/ImageHotspot.tsx
@@ -54,9 +54,9 @@ export const ImageHotspot = ({
   : undefined;
 
   return (
-      <>
-        <div className={styles.hotspotWrapper} style={{ top: `${y * 100}%`, left: `${x * 100}%` }}>
-          <button
+    <>
+      <div className={styles.hotspotWrapper} style={{ top: `${y * 100}%`, left: `${x * 100}%` }}>
+        <button
             type="button"
             ref={buttonRef}
             onClick={handleClick}
@@ -64,15 +64,15 @@ export const ImageHotspot = ({
             aria-label={`Open modal ${ariaLabel || heading}`}
             className={styles.button}
           >
-            <HeroIcon noBaseStyle icon="plus" strokeWidth={2} className={styles.icon} />
-          </button>
-          {!isClicked && (
-            <span aria-hidden="true" className={styles.hotspotRing} />
+          <HeroIcon noBaseStyle icon="plus" strokeWidth={2} className={styles.icon} />
+        </button>
+        {!isClicked && (
+        <span aria-hidden="true" className={styles.hotspotRing} />
           )}
-        </div>
-        <Transition show={isModalOpen}>
-          <Dialog onClose={() => setIsModalOpen(false)} className={styles.dialog}>
-            <TransitionChild
+      </div>
+      <Transition show={isModalOpen}>
+        <Dialog onClose={() => setIsModalOpen(false)} className={styles.dialog}>
+          <TransitionChild
               enter="ease-out duration-300"
               enterFrom="opacity-0"
               enterTo="opacity-100"
@@ -80,9 +80,9 @@ export const ImageHotspot = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className={styles.dialogOverlay} />
-            </TransitionChild>
-            <TransitionChild
+            <div className={styles.dialogOverlay} />
+          </TransitionChild>
+          <TransitionChild
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
               enterTo="opacity-100 scale-100"
@@ -90,66 +90,66 @@ export const ImageHotspot = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <div className={styles.dialogWrapper}>
-                <DialogPanel className={styles.dialogPanel(modalContentType)}>
-                  <DialogTitle className={styles.srOnly}>{heading || ariaLabel}</DialogTitle>
-                  {subhead && (
-                    <Description className={styles.srOnly}>{subhead}</Description>
+            <div className={styles.dialogWrapper}>
+              <DialogPanel className={styles.dialogPanel(modalContentType)}>
+                <DialogTitle className={styles.srOnly}>{heading || ariaLabel}</DialogTitle>
+                {subhead && (
+                <Description className={styles.srOnly}>{subhead}</Description>
                   )}
-                  <div ref={panelRef} className={styles.contentWrapper(modalContentType, isVerticalCard)}>
-                    <button
+                <div ref={panelRef} className={styles.contentWrapper(modalContentType, isVerticalCard)}>
+                  <button
                       type="button"
                       aria-label="Close modal"
                       onClick={() => setIsModalOpen(false)}
                       className={styles.modalClose}
                     >
-                      <HeroIcon
+                    <HeroIcon
                         noBaseStyle
                         focusable="false"
                         strokeWidth={2}
-                        icon='close'
+                        icon="close"
                         className={styles.modalIcon}
                       />
-                    </button>
-                    {/* Content for modals with text+image, fullwidth image or text only */}
-                    {(modalContentType !== 'component' && modalContentType !== 'image-quote') && (
-                      <Grid xl={modalContentType === 'text-image' && !isVerticalCard ? 12 : 1} className={styles.grid}>
-                        {(modalContentType === 'text-image' || modalContentType === 'text') && (
-                          <div className={styles.textWrapper(isVerticalCard)}>
-                            {(heading || subhead) && (
-                              <div className={styles.header}>
-                                {heading &&
-                                  <Heading size={3} className={styles.heading}>{heading}</Heading>
+                  </button>
+                  {/* Content for modals with text+image, fullwidth image or text only */}
+                  {(modalContentType !== 'component' && modalContentType !== 'image-quote') && (
+                  <Grid xl={modalContentType === 'text-image' && !isVerticalCard ? 12 : 1} className={styles.grid}>
+                    {(modalContentType === 'text-image' || modalContentType === 'text') && (
+                    <div className={styles.textWrapper(isVerticalCard)}>
+                      {(heading || subhead) && (
+                      <div className={styles.header}>
+                        {heading &&
+                        <Heading size={3} className={styles.heading}>{heading}</Heading>
                                 }
-                                {subhead &&
-                                  <Text weight="semibold" className={styles.subhead}>{subhead}</Text>
+                        {subhead &&
+                        <Text weight="semibold" className={styles.subhead}>{subhead}</Text>
                                 }
-                              </div>
+                      </div>
                             )}
-                            {DescriptionRichText}
-                          </div>
+                      {DescriptionRichText}
+                    </div>
                         )}
-                        {(modalContentType === 'fullwidth-image' || modalContentType === 'text-image') && filename && (
-                          <figure className={styles.figure(isVerticalCard)}>
-                            {modalContentType === 'fullwidth-image' && (
-                              <picture>
-                                <source
+                    {(modalContentType === 'fullwidth-image' || modalContentType === 'text-image') && filename && (
+                    <figure className={styles.figure(isVerticalCard)}>
+                      {modalContentType === 'fullwidth-image' && (
+                      <picture>
+                        <source
                                   media="(min-width: 1200px)"
                                   src={getProcessedImage(filename, '1500x750', focus)}
                                 />
-                                <source
+                        <source
                                   media="(min-width: 992px)"
                                   src={getProcessedImage(filename, '1200x600', focus)}
                                 />
-                                <source
+                        <source
                                   media="(min-width: 576x)"
                                   src={getProcessedImage(filename, '1000x500', focus)}
                                 />
-                                <source
+                        <source
                                   media="(max-width: 575px)"
                                   src={getProcessedImage(filename, '600x300', focus)}
                                 />
-                                <img
+                        <img
                                   alt={alt || ''}
                                   fetchPriority="high"
                                   src={getProcessedImage(filename, '1500x750', focus)}
@@ -157,12 +157,12 @@ export const ImageHotspot = ({
                                   width="1500"
                                   height="750"
                                 />
-                              </picture>
+                      </picture>
                             )}
-                            {modalContentType === 'text-image' && (
-                              <picture>
-                                {isVerticalCard ? (
-                                  <source
+                      {modalContentType === 'text-image' && (
+                      <picture>
+                        {isVerticalCard ? (
+                          <source
                                     media="(min-width: 1200px)"
                                     src={getProcessedImage(filename, '1200x800', focus)}
                                   />
@@ -178,23 +178,23 @@ export const ImageHotspot = ({
                                     />
                                   </>
                                 )}
-                                <source
+                        <source
                                   media="(min-width: 992px)"
                                   src={getProcessedImage(filename, '1200x800', focus)}
                                 />
-                                <source
+                        <source
                                   media="(min-width: 768px)"
                                   src={getProcessedImage(filename, '1000x750', focus)}
                                 />
-                                <source
+                        <source
                                   media="(min-width: 576px)"
                                   src={getProcessedImage(filename, '810x540', focus)}
                                 />
-                                <source
+                        <source
                                   media="(max-width: 575px)"
                                   src={getProcessedImage(filename, '600x400', focus)}
                                 />
-                                <img
+                        <img
                                   alt={alt || ''}
                                   fetchPriority="high"
                                   src={getProcessedImage(filename, isVerticalCard ? '1200x800' : '800x600', focus)}
@@ -202,28 +202,28 @@ export const ImageHotspot = ({
                                   width={isVerticalCard ? 1200 : 800}
                                   height={isVerticalCard ? 800 : 600}
                                 />
-                              </picture>
+                      </picture>
                             )}
-                            {hasRichText(caption) && (
-                              <figcaption className={styles.figcaption}>
-                                {Caption}
-                              </figcaption>
+                      {hasRichText(caption) && (
+                      <figcaption className={styles.figcaption}>
+                        {Caption}
+                      </figcaption>
                             )}
-                          </figure>
+                    </figure>
                         )}
-                      </Grid>
-                    )}
-                    {(modalContentType === 'component' || modalContentType === 'image-quote') && !!getNumBloks(content) && (
-                      <div className={styles.nestedComponentWrapper(modalContentType)}>
-                        <CreateBloks blokSection={content} />
-                      </div>
+                  </Grid>
                     )}
+                  {(modalContentType === 'component' || modalContentType === 'image-quote') && !!getNumBloks(content) && (
+                  <div className={styles.nestedComponentWrapper(modalContentType)}>
+                    <CreateBloks blokSection={content} />
                   </div>
-                </DialogPanel>
-              </div>
-            </TransitionChild>
-          </Dialog>
-        </Transition>
-      </>
+                    )}
+                </div>
+              </DialogPanel>
+            </div>
+          </TransitionChild>
+        </Dialog>
+      </Transition>
+    </>
   );
 };
diff --git a/components/BasicCard/BasicCard.tsx b/components/BasicCard/BasicCard.tsx
index 469dce4e..2dfdc3cb 100644
--- a/components/BasicCard/BasicCard.tsx
+++ b/components/BasicCard/BasicCard.tsx
@@ -6,7 +6,6 @@ import { Heading, type HeadingType, Text } from '@/components/Typography';
 import {
   accentBgColors,
   type AccentColorType,
-  imageAspectRatios,
   type ImageAspectRatioType,
 } from '@/utilities/datasource';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
diff --git a/components/Bookshelf/BookAlt.tsx b/components/Bookshelf/BookAlt.tsx
index c42809a6..2750cf69 100644
--- a/components/Bookshelf/BookAlt.tsx
+++ b/components/Bookshelf/BookAlt.tsx
@@ -1,9 +1,7 @@
-import { m, AnimatePresence, useWillChange } from 'framer-motion';
 import { cnb } from 'cnbuilder';
 import { FlexBox } from '../FlexBox';
-import { Heading, Text, Paragraph } from '../Typography';
+import { Text, Paragraph } from '../Typography';
 import { HeroIcon } from '../HeroIcon';
-import { ImageOverlay } from '../ImageOverlay';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 
 type BookAltProps = {
@@ -24,15 +22,12 @@ export const BookAlt = ({
   expanded,
   setExpanded,
   buttonClassName,
-  contentClassName,
   imgSrc,
 }: BookAltProps) => {
-  const willChange = useWillChange();
   const isOpen = i === expanded;
 
   return (
-    <>
-      <button
+    <button
         aria-expanded={isOpen}
         onClick={() => setExpanded(isOpen ? false : i)}
         className={cnb(
@@ -42,13 +37,13 @@ export const BookAlt = ({
           buttonClassName,
         )}
       >
-        <img
+      <img
           src={getProcessedImage(imgSrc, '1600x1300')}
           alt=""
           className="size-full object-cover object-left-top"
         />
-        <span className="absolute block bottom-0 right-0 bg-gradient-to-t from-gc-black via-50% via-gc-black/50 w-full h-2/5 group-hocus-visible:h-1/2 transition-all" />
-        <Text
+      <span className="absolute block bottom-0 right-0 bg-gradient-to-t from-gc-black via-50% via-gc-black/50 w-full h-2/5 group-hocus-visible:h-1/2 transition-all" />
+      <Text
           as="span"
           color="white"
           size={3}
@@ -60,24 +55,23 @@ export const BookAlt = ({
             'block transition-transform origin-top-left relative z-10 group-hocus:no-underline',
           )}
         >
-          {title}
-        </Text>
-        <FlexBox direction="col" alignItems="center" className="absolute bottom-50 3xl:bottom-95 right-[5.3rem] text-white">
-          <HeroIcon
+        {title}
+      </Text>
+      <FlexBox direction="col" alignItems="center" className="absolute bottom-50 3xl:bottom-95 right-[5.3rem] text-white">
+        <HeroIcon
             noBaseStyle
             icon={isOpen ? 'minus' : 'plus'}
             className="w-75 h-75 border-2 border-white rounded-full p-19 mb-04em group-hocus-visible:border-dashed group-hocus-visible:bg-gc-black"
           />
-          <Text as="span" font="serif" color="white" variant="caption">
-            {isOpen ? 'minimize' : 'explore'}
-          </Text>
-        </FlexBox>
-        {isOpen && (
-          <Paragraph variant="card" color="white" leading="snug" className="absolute bottom-100 z-20 rs-px-3 max-w-[74rem]" align="left">
-            {body}
-          </Paragraph>
+        <Text as="span" font="serif" color="white" variant="caption">
+          {isOpen ? 'minimize' : 'explore'}
+        </Text>
+      </FlexBox>
+      {isOpen && (
+      <Paragraph variant="card" color="white" leading="snug" className="absolute bottom-100 z-20 rs-px-3 max-w-[74rem]" align="left">
+        {body}
+      </Paragraph>
         )}
-      </button>
-    </>
+    </button>
   );
 };
diff --git a/components/Bookshelf/BookshelfAlt.tsx b/components/Bookshelf/BookshelfAlt.tsx
index 6b8d1604..adc3f680 100644
--- a/components/Bookshelf/BookshelfAlt.tsx
+++ b/components/Bookshelf/BookshelfAlt.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { LayoutGroup } from 'framer-motion';
 import { Container } from '../Container';
 import { FlexBox } from '../FlexBox';
-import { Paragraph, Text } from '../Typography';
 import { BookAlt } from './BookAlt';
 
 export const BookshelfAlt = () => {
diff --git a/components/ChangemakerCard/ChangemakerCard.tsx b/components/ChangemakerCard/ChangemakerCard.tsx
index ad254f88..e54c31fa 100644
--- a/components/ChangemakerCard/ChangemakerCard.tsx
+++ b/components/ChangemakerCard/ChangemakerCard.tsx
@@ -189,7 +189,7 @@ export const ChangemakerCard = ({
             >
               <HeroIcon
                 noBaseStyle
-                icon='plus'
+                icon="plus"
                 strokeWidth={2}
                 className={styles.icon(isHorizontal)}
               />
@@ -230,7 +230,7 @@ export const ChangemakerCard = ({
                     noBaseStyle
                     focusable="false"
                     strokeWidth={2}
-                    icon='close'
+                    icon="close"
                     className={styles.modalIcon}
                   />
                 </button>
diff --git a/components/CreateBloks.tsx b/components/CreateBloks.tsx
index 8e256d12..556be192 100644
--- a/components/CreateBloks.tsx
+++ b/components/CreateBloks.tsx
@@ -3,7 +3,7 @@ import { StoryblokComponent, type SbBlokData } from '@storyblok/react/rsc';
 type CreateBloksProps = {
   blokSection: SbBlokData[];
   isListItems?: boolean;
-  [k: string]: any;
+  [k: string]: unknown;
 };
 
 export const CreateBloks = ({ blokSection, isListItems, ...props }: CreateBloksProps) => {
diff --git a/components/CreateStories.tsx b/components/CreateStories.tsx
index f6167488..d740db7f 100644
--- a/components/CreateStories.tsx
+++ b/components/CreateStories.tsx
@@ -9,7 +9,7 @@ import { StoryblokComponent, type ISbStoryData } from '@storyblok/react/rsc';
 
 type CreateStoriesProps = {
   stories: ISbStoryData[];
-  [key: string]: any;
+  [key: string]: unknown;
 };
 
 export const CreateStories = ({ stories, ...props }: CreateStoriesProps) => {
@@ -20,6 +20,7 @@ export const CreateStories = ({ stories, ...props }: CreateStoriesProps) => {
         currentStory = story;
         return <StoryblokComponent key={story.content._uid} blok={story.content} {...props} />;
       });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (error) {
       console.error('Could not create story', currentStory);
     }
diff --git a/components/Cta/CtaLink.tsx b/components/Cta/CtaLink.tsx
index 538c9bd6..2ace252c 100644
--- a/components/Cta/CtaLink.tsx
+++ b/components/Cta/CtaLink.tsx
@@ -26,8 +26,6 @@ export const CtaLink = React.forwardRef<HTMLAnchorElement, CtaLinkProps>(
     } = props;
 
     const {
-      id,
-      fieldtype,
       linktype,
       cached_url: cachedUrl,
       url,
diff --git a/components/Embed/Embed.tsx b/components/Embed/Embed.tsx
index a3518e21..d12c0669 100644
--- a/components/Embed/Embed.tsx
+++ b/components/Embed/Embed.tsx
@@ -12,7 +12,7 @@ import React, { useRef, useEffect } from 'react';
 import { WidthBox, type WidthType } from '../WidthBox';
 import { type PaddingType } from '@/utilities/datasource';
 
-export interface EmbedProps extends  React.HTMLAttributes<HTMLDivElement> {
+export interface EmbedProps extends React.HTMLAttributes<HTMLDivElement> {
   id?: string;
   src?: string;
   content?: string;
@@ -83,7 +83,7 @@ id, src, content, boundingWidth, spacingTop, spacingBottom, className, width, ..
     );
   }
 
-  return (<p className='bg-digital-red text-white text-30'>You must provide either an src or content to the embed</p>);
+  return (<p className="bg-digital-red text-white text-30">You must provide either an src or content to the embed</p>);
 };
 
 export default Embed;
diff --git a/components/EventBanner/EventBanner.tsx b/components/EventBanner/EventBanner.tsx
index 25bfa1a9..13f3f539 100644
--- a/components/EventBanner/EventBanner.tsx
+++ b/components/EventBanner/EventBanner.tsx
@@ -180,7 +180,7 @@ export const EventBanner = ({
                 <>
                   <Heading as="h3" srOnly>List of dates & locations</Heading>
                   <FlexBox as="ul" direction="col" className={styles.dateLocationList}>
-                  {dateLocation.map(({ date, location }) => {
+                    {dateLocation.map(({ date, location }) => {
                     const { dateTime, monthShort, day } = formatDate(date);
                     return (
                       <Text as="li" size={1} color={isDarkTheme ? 'white' : 'black-80'} key={dateTime} className={styles.dateLocationListItem}>
diff --git a/components/GlobalFooter/GlobalFooter.tsx b/components/GlobalFooter/GlobalFooter.tsx
index 758e23f2..ea76b238 100644
--- a/components/GlobalFooter/GlobalFooter.tsx
+++ b/components/GlobalFooter/GlobalFooter.tsx
@@ -1,6 +1,5 @@
 import { cnb } from 'cnbuilder';
 import { StanfordLogo } from '../StanfordLogo';
-import { SrOnlyText } from '../Typography';
 import { Container } from '../Container';
 import { FlexBox } from '../FlexBox';
 import * as styles from './GlobalFooter.styles';
diff --git a/components/Heap.tsx b/components/Heap.tsx
index 68b90fb5..269b530a 100644
--- a/components/Heap.tsx
+++ b/components/Heap.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 'use client';
 import Script from 'next/script';
 
@@ -10,11 +11,11 @@ export const Heap = () => {
   if (process.env.CONTEXT && ['production'].includes(process.env.CONTEXT)) {
     return (
       <Script id="heap-id" strategy="afterInteractive">
-      {`
+        {`
           window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
           heap.load(${ID});
       `}
-    </Script>
+      </Script>
     );
   }
   return null;
diff --git a/components/Hero/StoryListHero.tsx b/components/Hero/StoryListHero.tsx
index 93478a2c..444a5624 100644
--- a/components/Hero/StoryListHero.tsx
+++ b/components/Hero/StoryListHero.tsx
@@ -44,7 +44,7 @@ export const StoryListHero = ({
               {subheading && (
                 <Text
                   as="span"
-                  size='f7'
+                  size="f7"
                   font="serif"
                   align="center"
                   leading="tight"
diff --git a/components/InitiativeCard/InitiativeCard.tsx b/components/InitiativeCard/InitiativeCard.tsx
index 31b227c5..badf9b23 100644
--- a/components/InitiativeCard/InitiativeCard.tsx
+++ b/components/InitiativeCard/InitiativeCard.tsx
@@ -75,7 +75,7 @@ export const InitiativeCard = ({
     <AnimateInView animation={animation} delay={delay}>
       <FlexBox
         as="article"
-        direction='col'
+        direction="col"
         className={cnb(styles.root(isHorizontal), className)}
         {...props}
       >
diff --git a/components/LocalFooter/LocalFooter.tsx b/components/LocalFooter/LocalFooter.tsx
index c4639ab5..b56501e8 100644
--- a/components/LocalFooter/LocalFooter.tsx
+++ b/components/LocalFooter/LocalFooter.tsx
@@ -102,5 +102,5 @@ export const LocalFooter = () => (
         </section>
       </div>
     </Grid>
-</Container>
+  </Container>
 );
diff --git a/components/Logo/LogoLockup.tsx b/components/Logo/LogoLockup.tsx
index babda304..8fbd550b 100644
--- a/components/Logo/LogoLockup.tsx
+++ b/components/Logo/LogoLockup.tsx
@@ -1,4 +1,4 @@
-import React, { AllHTMLAttributes } from 'react';
+import React from 'react';
 import { cnb } from 'cnbuilder';
 import { StanfordLogo } from '@/components/StanfordLogo';
 import Link from 'next/link';
diff --git a/components/Parallax/Parallax.tsx b/components/Parallax/Parallax.tsx
index fea59cdd..ba63efe3 100644
--- a/components/Parallax/Parallax.tsx
+++ b/components/Parallax/Parallax.tsx
@@ -6,7 +6,6 @@ import {
   useTransform,
   useSpring,
   useReducedMotion,
-  MotionValue,
 } from 'framer-motion';
 
 type ParallaxProps = {
diff --git a/components/Scrollytelling/ScrollyFullwidth.tsx b/components/Scrollytelling/ScrollyFullwidth.tsx
index 506739d4..962fd243 100644
--- a/components/Scrollytelling/ScrollyFullwidth.tsx
+++ b/components/Scrollytelling/ScrollyFullwidth.tsx
@@ -99,7 +99,7 @@ export const ScrollyFullwidth = () => {
               Cras dui ipsum, aliquet eget nibh ut, sollicitudin pharetra risus.
             </Paragraph>
             <Paragraph className="bg-black/80 rs-p-2 mt-300">
-            Cras dui ipsum, aliquet eget nibh ut, sollicitudin pharetra risus.
+              Cras dui ipsum, aliquet eget nibh ut, sollicitudin pharetra risus.
             </Paragraph>
           </section>
         </div>
@@ -115,7 +115,7 @@ export const ScrollyFullwidth = () => {
             overlay="black-70"
           />
           <Grid sm={2} gap="split" alignItems="center" className="w-3/4 mx-auto h-screen">
-          <div className={cnb('relative z-20 transition-all', cat2contentInView ? 'opacity-30 blur-sm' : 'opacity-100 blur-none')}>
+            <div className={cnb('relative z-20 transition-all', cat2contentInView ? 'opacity-30 blur-sm' : 'opacity-100 blur-none')}>
               <div className="rs-mb-0">
                 <Text font="serif" size={1} weight="semibold" align="center">
                   Meowy Meowington
diff --git a/components/Scrollytelling/ScrollytellingDemo.tsx b/components/Scrollytelling/ScrollytellingDemo.tsx
index 654975ad..955fd86f 100644
--- a/components/Scrollytelling/ScrollytellingDemo.tsx
+++ b/components/Scrollytelling/ScrollytellingDemo.tsx
@@ -89,15 +89,15 @@ export const ScrollytellingDemo = () => {
       </Grid>
       <Grid md={3} className="border-t border-black-50 -mt-1">
         <div className="sticky top-0 bg-black self-start h-screen col-span-2">
-        <FlexBox className="h-full" alignItems="stretch">
-          <div className="relative bg-white border-r-black-50 border-r uppercase font-bold">
-            <Text align="center" font="druk-wide" leading="normal" className="text-vertical-lr -rotate-180 h-screen">
-              Chapter 2
-            </Text>
-          </div>
-          <div className="size-full">
-            <figure className="relative h-full w-full overflow-hidden">
-              {section4InView && (
+          <FlexBox className="h-full" alignItems="stretch">
+            <div className="relative bg-white border-r-black-50 border-r uppercase font-bold">
+              <Text align="center" font="druk-wide" leading="normal" className="text-vertical-lr -rotate-180 h-screen">
+                Chapter 2
+              </Text>
+            </div>
+            <div className="size-full">
+              <figure className="relative h-full w-full overflow-hidden">
+                {section4InView && (
                 <>
                   <img
                     loading="eager"
@@ -114,7 +114,7 @@ export const ScrollytellingDemo = () => {
                   </figcaption>
                 </>
               )}
-              {section5AtTop && (
+                {section5AtTop && (
                 <>
                   <m.img
                     loading="eager"
@@ -137,7 +137,7 @@ export const ScrollytellingDemo = () => {
                   </figcaption>
                 </>
               )}
-              {section6AtTop && (
+                {section6AtTop && (
                 // eslint-disable-next-line max-len
                 // <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ehFCaL2PUyo?autoplay=1&enablejsapi=1&rel=0&mute=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />
                 <>
@@ -162,9 +162,9 @@ export const ScrollytellingDemo = () => {
                   </figcaption>
                 </>
               )}
-            </figure>
-          </div>
-        </FlexBox>
+              </figure>
+            </div>
+          </FlexBox>
         </div>
         <div className="relative bg-gc-black text-white rs-py-6 rs-px-4">
           <section ref={section4Ref}>
diff --git a/components/SocialSharing/SocialSharing.tsx b/components/SocialSharing/SocialSharing.tsx
index ed9f4cd7..8345f73b 100644
--- a/components/SocialSharing/SocialSharing.tsx
+++ b/components/SocialSharing/SocialSharing.tsx
@@ -27,6 +27,7 @@ export const SocialSharing = ({
   isTop,
   className,
 }: SocialSharingProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [copiedText, copy] = useCopyToClipboard();
   const [buttonState, setButtonState] = useState('default');
 
diff --git a/components/Storyblok/ComponentNotFound.tsx b/components/Storyblok/ComponentNotFound.tsx
index 3c596e2e..ead91efe 100644
--- a/components/Storyblok/ComponentNotFound.tsx
+++ b/components/Storyblok/ComponentNotFound.tsx
@@ -7,9 +7,9 @@ type ComponentNotFoundProps = {
 };
 
 export const ComponentNotFound = ({ component: { blok } }: ComponentNotFoundProps) => (
-  <div className='rs-p-4 bg-digital-red'>
-    <h2 className='text-white type-2'>{blok.component} component is missing from the Momentum codebase.</h2>
-    <p className='text-white type-1'>You are currently using a <strong>Momentum</strong> preview URL.</p>
-    <p className='text-white'>Source blok UID: {blok._uid}</p>
+  <div className="rs-p-4 bg-digital-red">
+    <h2 className="text-white type-2">{blok.component} component is missing from the Momentum codebase.</h2>
+    <p className="text-white type-1">You are currently using a <strong>Momentum</strong> preview URL.</p>
+    <p className="text-white">Source blok UID: {blok._uid}</p>
   </div>
 );
diff --git a/components/Storyblok/SbChatBubble.tsx b/components/Storyblok/SbChatBubble.tsx
index f38b75b1..f2636716 100644
--- a/components/Storyblok/SbChatBubble.tsx
+++ b/components/Storyblok/SbChatBubble.tsx
@@ -1,6 +1,6 @@
 import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts';
 import { storyblokEditable } from '@storyblok/react/rsc';
-import { ChatBubble, paletteBubbleColors, type PaletteBubbleHexColorType  } from '@/components/Chat';
+import { ChatBubble, paletteBubbleColors, type PaletteBubbleHexColorType } from '@/components/Chat';
 import { RichText } from '@/components/RichText';
 import { hasRichText } from '@/utilities/hasRichText';
 import { type SbImageType } from './Storyblok.types';
diff --git a/components/Storyblok/SbStoryFilterPage/SbStoryFilterPage.tsx b/components/Storyblok/SbStoryFilterPage/SbStoryFilterPage.tsx
index be8d22c3..2d5b153b 100644
--- a/components/Storyblok/SbStoryFilterPage/SbStoryFilterPage.tsx
+++ b/components/Storyblok/SbStoryFilterPage/SbStoryFilterPage.tsx
@@ -17,7 +17,7 @@ import * as styles from './SbStoryFilterPage.styles';
 
 type StoryPickerType = {
   uuid: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 type FaturedStoryType = SbBlokData & {
@@ -96,7 +96,7 @@ export const SbStoryFilterPage = ({
           </Skiplink>
           <CreateStories stories={storyListNavPicker} fullSlug={slug} name={name} />
           <Heading font="druk" size="f5" color="white" id="latest-stories" className={styles.heading(hasIntro)}>Latest stories</Heading>
-            {hasIntro && <RichText wysiwyg={intro} textColor="white" className={styles.intro} />}
+          {hasIntro && <RichText wysiwyg={intro} textColor="white" className={styles.intro} />}
           <CreateBloks blokSection={belowIntro} />
           {hasFeaturedStories && (
             <>
@@ -108,7 +108,7 @@ export const SbStoryFilterPage = ({
           )}
           {!!filteredStoryList?.length && (
             <>
-            {hasFeaturedStories && <Heading as="h3" srOnly>Other stories</Heading>}
+              {hasFeaturedStories && <Heading as="h3" srOnly>Other stories</Heading>}
               <Grid isList pt={6} className={styles.otherGrid}>
                 {storyListToDisplay.map((story, index) => {
                   const {
@@ -160,7 +160,7 @@ export const SbStoryFilterPage = ({
                       Back to top
                     </CtaLink>
                   ) : (
-                  <CtaButton
+                    <CtaButton
                     variant="ghost-swipe"
                     color="white"
                     size="large"
@@ -169,8 +169,8 @@ export const SbStoryFilterPage = ({
                     onClick={handleShowAll}
                     className={styles.showAllButton}
                   >
-                    Show all stories
-                  </CtaButton>
+                      Show all stories
+                    </CtaButton>
                   )}
                 </>
               )}
diff --git a/components/Storyblok/SbStoryListNav/SbStoryListNav.tsx b/components/Storyblok/SbStoryListNav/SbStoryListNav.tsx
index da9fdeeb..dac18032 100644
--- a/components/Storyblok/SbStoryListNav/SbStoryListNav.tsx
+++ b/components/Storyblok/SbStoryListNav/SbStoryListNav.tsx
@@ -39,7 +39,7 @@ const StoryListContent = ({ blok: { links }, fullSlug }: SbStoryListNavType) =>
               variant="storyListNav"
               color="current"
               className={styles.cta(isCurrentPage)}
-              srText='stories'
+              srText="stories"
             >
               <FlexBox alignItems="center" className={styles.ctaInner}>
                 <span className="grow leading-display">{label}</span>
@@ -81,7 +81,7 @@ export const SbStoryListNav = ({
             <FlexBox alignItems="center" className={styles.filterBtnInner}>
               <span className={styles.filterBtnLabel}>{!isStoryLandingPage ? name : 'All'}</span>
               <HeroIcon
-                icon='chevron-down'
+                icon="chevron-down"
                 strokeWidth={2}
                 className={styles.filterChevron}
               />
@@ -119,7 +119,7 @@ export const SbStoryListNav = ({
                           noBaseStyle
                           focusable="false"
                           strokeWidth={2}
-                          icon='close'
+                          icon="close"
                           className={styles.closeIcon}
                         />
                       </CloseButton>
diff --git a/components/Storyblok/SbTypeform.tsx b/components/Storyblok/SbTypeform.tsx
index 92a247ce..daf91efe 100644
--- a/components/Storyblok/SbTypeform.tsx
+++ b/components/Storyblok/SbTypeform.tsx
@@ -181,7 +181,7 @@ export const SbTypeform = ({
             autoResize={resize}
             opacity={opacity}
             height={!resize ? embedHeight : undefined}
-            className='w-full'
+            className="w-full"
             iframeProps={iframeProps}
           />
         </Container>
diff --git a/components/Storyblok/SbVerticalPoster.tsx b/components/Storyblok/SbVerticalPoster.tsx
index c5f070cc..c10b76ce 100644
--- a/components/Storyblok/SbVerticalPoster.tsx
+++ b/components/Storyblok/SbVerticalPoster.tsx
@@ -64,7 +64,7 @@ export const SbVerticalPoster = ({
 
   const Cta = !!getNumBloks(cta) ? <CreateBloks blokSection={cta} /> : undefined;
   const Body = hasRichText(body) ? <RichText textAlign="center" textColor={bgColor === 'black' ? 'white' : 'black'} wysiwyg={body} /> : undefined;
-  const Caption = hasRichText(caption) ? <RichText textColor='black-70' wysiwyg={caption} /> : undefined;
+  const Caption = hasRichText(caption) ? <RichText textColor="black-70" wysiwyg={caption} /> : undefined;
 
   return (
     <VerticalPoster
diff --git a/components/Storyblok/Storyblok.types.ts b/components/Storyblok/Storyblok.types.ts
index 353975e8..3e8c8dc2 100644
--- a/components/Storyblok/Storyblok.types.ts
+++ b/components/Storyblok/Storyblok.types.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { type SbBlokData } from '@storyblok/react/rsc';
 import { type FontSizeType } from '@/components/Typography';
 import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts';
@@ -80,7 +81,7 @@ export type SbSliderType = {
 }
 
 // Used for Annotated Image component
-export type SbImageHotspotModalContentType =  'text-image' | 'fullwidth-image' | 'text' | 'component' | 'image-quote';
+export type SbImageHotspotModalContentType = 'text-image' | 'fullwidth-image' | 'text' | 'component' | 'image-quote';
 export type SbImageHotspotDescriptionSizeType = 'card' | 'default' | 'big';
 
 export type SbImageHotspotType = {
diff --git a/components/VerticalPoster/VerticalPoster.tsx b/components/VerticalPoster/VerticalPoster.tsx
index a6c58038..dd091dc8 100644
--- a/components/VerticalPoster/VerticalPoster.tsx
+++ b/components/VerticalPoster/VerticalPoster.tsx
@@ -86,7 +86,7 @@ export const VerticalPoster = ({
               className={styles.contentWrapper(imageOnLeft, isParallax)}
             >
               <FlexBox className={styles.headingWrapper}>
-                <AnimateInView animation='slideUp'>
+                <AnimateInView animation="slideUp">
                   {/* Render all Druk font heading if custom heading is not entered */}
                   {heading && !customHeading?.length && (
                     <Heading
diff --git a/docs/decisions/0005-storyblok-config-blok.md b/docs/decisions/0005-storyblok-config-blok.md
new file mode 100644
index 00000000..1cd16562
--- /dev/null
+++ b/docs/decisions/0005-storyblok-config-blok.md
@@ -0,0 +1,17 @@
+# 5. Storyblok Config Blok
+
+Date: 2024-10-22
+
+## Context
+
+Global and site wide and specific configuration that is editable by content authors 
+
+## Decision
+
+Creating a central and content author editable configuration blok in Storyblok was chosen to create a centralized place for site configuration. For example, default SEO information like the site title and description should have a single place to change that is available to content authors. This centralized place for site configuration can lead to other global configuration like 'block from search engines' (nobots) or maintenance mode in the future. 
+
+The possibility for creating other site configuration bloks is open if separation of configuration is needed but the general idea is that we should use and build upon the existing one.
+
+## Consequences
+
+There is now a need to pull a configuration block from Storyblok when building page metadata. 
diff --git a/docs/decisions/0006-next-cache-and-storyblok-api.md b/docs/decisions/0006-next-cache-and-storyblok-api.md
new file mode 100644
index 00000000..15e08547
--- /dev/null
+++ b/docs/decisions/0006-next-cache-and-storyblok-api.md
@@ -0,0 +1,33 @@
+# 6. Next cache and Storyblok API
+
+Date: 2024-10-23
+
+## Context
+
+Save on API calls and build time by caching the Storyblok API responses
+
+## Decision
+
+Provide a Nextjs cached and uncached option for developers to fetch from the Storyblok API through utility functions. The utility functions will have sensible defaults and allow developer to opt in to them. Developers are encouraged to use the utility functions and to create their own cached versions as well. 
+
+We are still using the Storyblok API cache through the storyblok js client as it handles cache invalidation 'automagically'.
+
+Storyblok API Cache
+* https://www.storyblok.com/docs/api/content-delivery/v2/getting-started/cache-invalidation
+* https://www.storyblok.com/tp/optimize-your-caching-strategy-with-storyblok
+
+Storyblok JS Client Cache
+* https://github.com/storyblok/storyblok-js-client/#activating-request-cache
+
+Nextjs Unstable Cache
+* https://nextjs.org/docs/app/api-reference/functions/unstable_cache
+
+
+We have added a 'patch' to the Netlify config to bypass the 2MB limit of the default unstable_cache. This little 'hack' simply re-imports the existing cache handler. https://github.com/vercel/next.js/discussions/48324#discussioncomment-10542097
+
+## Consequences
+
+* Caching in Nextjs should help mitigate against multiple API calls for the same thing on a single build
+* Developers will need to opt-in to using the cache as it is not a default
+* The utility functions are caching 'indefinitely' as they should be cleared on every build.
+* Had to 'hack' the default cache handler to support responses greater than 2MB.
diff --git a/next.config.mjs b/next.config.mjs
index db483981..592c0318 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,5 @@
 import { getStoryblokRedirects } from './utilities/data/getStoryblokRedirects.mjs';
+import path from 'path';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -22,6 +23,11 @@ const nextConfig = {
     const storyblokRedirects = await getStoryblokRedirects();
     return storyblokRedirects;
   },
+  // Hack to get over the 2MB limit on cacheHandler
+  // This just reimports the default one but it skips the limit
+  // See: https://github.com/vercel/next.js/discussions/48324#discussioncomment-10542097
+  // Remove when upgrading to Next 15+
+  cacheHandler: path.resolve('node_modules/next/dist/server/lib/incremental-cache/file-system-cache.js'),
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
index fd695105..203e5b3e 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "proxy": "local-ssl-proxy --source 3010 --target 3000 --cert ./dev/localhost.pem --key ./dev/localhost-key.pem",
     "vault": "netlify-plugin-vault-variables",
     "vault:local": "NODE_ENV=development netlify-plugin-vault-variables",
-    "lint:fix": "eslint \"{components,utilities}/**/*.{ts,tsx,js,jsx}\" --quiet --fix",
+    "lint:fix": "next lint --fix",
     "typecheck": "tsc --noEmit",
     "tsc": "tsc"
   },
diff --git a/utilities/data/getAllStories.ts b/utilities/data/getAllStories.ts
new file mode 100644
index 00000000..7c732ad4
--- /dev/null
+++ b/utilities/data/getAllStories.ts
@@ -0,0 +1,37 @@
+import {
+  ISbStoriesParams, getStoryblokApi, StoryblokClient,
+} from '@storyblok/react/rsc';
+import { isProduction } from '@/utilities/getActiveEnv';
+import { getSlugPrefix } from '@/utilities/getSlugPrefix';
+import { unstable_cache } from 'next/cache';
+
+/**
+ * Fetches all stories from Storyblok.
+ */
+export const getAllStories = async () => {
+  const isProd = isProduction();
+  // Fetch new content from storyblok.
+  const storyblokApi: StoryblokClient = getStoryblokApi();
+  const sbParams: ISbStoriesParams = {
+    version: isProd ? 'published' : 'draft',
+    resolve_links: '0',
+    resolve_assets: 0,
+    starts_with: getSlugPrefix() + '/',
+  };
+
+  // Use the `cdn/links` endpoint to get a list of all stories without all the extra data.
+  const response = await storyblokApi.getAll('cdn/links', sbParams);
+
+  return response;
+};
+
+/**
+ * Get all stories from Storyblok through the cache.
+ */
+export const getAllStoriesCached = unstable_cache(
+  getAllStories,
+  [],
+  {
+    tags: ['story', 'all'],
+  },
+);
diff --git a/utilities/data/getConfigBlok.ts b/utilities/data/getConfigBlok.ts
new file mode 100644
index 00000000..f004d5e4
--- /dev/null
+++ b/utilities/data/getConfigBlok.ts
@@ -0,0 +1,33 @@
+import { getStoryblokApi, StoryblokClient } from '@storyblok/react/rsc';
+import { isProduction } from '@/utilities/getActiveEnv';
+import { unstable_cache } from 'next/cache';
+
+/**
+ * Get the global configuration from Storyblok.
+ */
+export const getConfigBlok = async () => {
+  const storyblokApi: StoryblokClient = getStoryblokApi();
+  const isProd = isProduction();
+
+  // Get the global configuration.
+  const { data: { story: config } } = await storyblokApi.get(
+    'cdn/stories/momentum/global-components/configuration/site-configuration',
+    {
+      version: isProd ? 'published' : 'draft',
+      token: process.env.STORYBLOK_ACCESS_TOKEN,
+    },
+  );
+
+  return config;
+};
+
+/**
+ * Get the global configuration from Storyblok through the cache.
+ */
+export const getConfigBlokCached = unstable_cache(
+  getConfigBlok,
+  ['site-configuration'],
+  {
+    tags: ['global', 'config'],
+  },
+);
diff --git a/utilities/data/getStoryData.ts b/utilities/data/getStoryData.ts
index d9603b28..1fd93db2 100644
--- a/utilities/data/getStoryData.ts
+++ b/utilities/data/getStoryData.ts
@@ -3,33 +3,44 @@ import type { ISbStoriesParams, ISbResult } from '@storyblok/react';
 import { resolveRelations } from '@/utilities/resolveRelations';
 import { getStoryblokApi, StoryblokClient } from '@storyblok/react/rsc';
 import { isProduction } from '../getActiveEnv';
+import { unstable_cache } from 'next/cache';
 
 /**
  * Get the data out of the Storyblok API for the page.
  */
-async function getStoryData({ path, isEditor = false }: getStoryDataProps): Promise<ISbResult | { data: 404 }> {
-  const storyblokApi: StoryblokClient = getStoryblokApi();
-  const isProd = isProduction();
+export const getStoryData =
+  async ({ path, isEditor = false }: getStoryDataProps): Promise<ISbResult | { data: 404 }> => {
+    const storyblokApi: StoryblokClient = getStoryblokApi();
+    const isProd = isProduction();
 
-  let sbParams: ISbStoriesParams = {
-    version: isProd && !isEditor ? 'published' : 'draft',
-    cv: isEditor ? Date.now() : undefined,
-    resolve_relations: resolveRelations,
-    token: isEditor ? process.env.STORYBLOK_PREVIEW_EDITOR_TOKEN : process.env.STORYBLOK_ACCESS_TOKEN,
-  };
+    const sbParams: ISbStoriesParams = {
+      version: isProd && !isEditor ? 'published' : 'draft',
+      cv: isEditor ? Date.now() : undefined,
+      resolve_relations: resolveRelations,
+      token: isEditor ? process.env.STORYBLOK_PREVIEW_EDITOR_TOKEN : process.env.STORYBLOK_ACCESS_TOKEN,
+    };
 
-  const slug = path.replace(/\/$/, ''); // Remove trailing slash.
+    const slug = path.replace(/\/$/, ''); // Remove trailing slash.
 
-  try {
-    const story: ISbResult = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);
-    return story;
-  } catch (error: any) {
-    if (error && error.status && error.status === 404) {
-      return { data: 404 };
+    try {
+      const story: ISbResult = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);
+      return story;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      if (error && error.status && error.status === 404) {
+        return { data: 404 };
+      }
+      throw error;
     }
-    throw error;
-  }
-
-};
+  };
 
-export default getStoryData;
+/**
+ * Get the data out of the Storyblok API for the page through the cache.
+ */
+export const getStoryDataCached = unstable_cache(
+  getStoryData,
+  [],
+  {
+    tags: ['story', 'page'],
+  },
+);
diff --git a/utilities/data/getStoryList.ts b/utilities/data/getStoryList.ts
index c24c3f02..2f5bf662 100644
--- a/utilities/data/getStoryList.ts
+++ b/utilities/data/getStoryList.ts
@@ -2,11 +2,12 @@ import type { getStoryDataProps, FilterQuery } from '@/utilities/data/types';
 import { ISbStoriesParams, getStoryblokApi, StoryblokClient } from '@storyblok/react/rsc';
 import { isProduction } from '../getActiveEnv';
 import { getSlugPrefix } from '../getSlugPrefix';
+import { unstable_cache } from 'next/cache';
 
 /**
  * Get a list of stories that are of component sbStoryMvp in reverse chronological order.
  */
-async function getStoryList({ path }: getStoryDataProps) {
+export async function getStoryList({ path }: getStoryDataProps) {
   const isProd = isProduction();
   const storyblokApi: StoryblokClient = getStoryblokApi();
   const fullslug = path.replace(/\/$/, '');
@@ -61,4 +62,13 @@ async function getStoryList({ path }: getStoryDataProps) {
   }
 }
 
-export default getStoryList;
+/**
+ * Get the data out of the Storyblok API for the page through the cache.
+ */
+export const getStoryListCached = unstable_cache(
+  getStoryList,
+  [],
+  {
+    tags: ['story', 'page', 'list'],
+  },
+);
diff --git a/utilities/data/getStoryblokRedirects.mjs b/utilities/data/getStoryblokRedirects.mjs
index e0f603ab..7bf6909b 100644
--- a/utilities/data/getStoryblokRedirects.mjs
+++ b/utilities/data/getStoryblokRedirects.mjs
@@ -86,7 +86,7 @@ const extractQueryParameters = (url) => {
 export const getStoryblokRedirects = async () => {
   const storyblokApi = getStoryblokApi();
   const isProd = isProduction();
-  const  sbParams = {
+  const sbParams = {
     version: isProd ? 'published' : 'draft',
     resolve_links: '0',
     resolve_assets: 0,
diff --git a/utilities/data/index.ts b/utilities/data/index.ts
new file mode 100644
index 00000000..551fc426
--- /dev/null
+++ b/utilities/data/index.ts
@@ -0,0 +1,4 @@
+export * from './getAllStories';
+export * from './getConfigBlok';
+export * from './getStoryData';
+export * from './getStoryList';
diff --git a/utilities/getFirstImage.ts b/utilities/getFirstImage.ts
new file mode 100644
index 00000000..618350c1
--- /dev/null
+++ b/utilities/getFirstImage.ts
@@ -0,0 +1,53 @@
+import { type SbImageType } from '@/components/Storyblok/Storyblok.types';
+
+/**
+ * A utility function to get the first image from the story content.
+ *
+ * @param priorityFields - The priority fields to check for an image.
+ * @param content - The content object to check for an image field
+ *
+ * @returns SbImageType | false - The first image found in the content object.
+ */
+
+export const getFirstImage = (priorityFields: string[], content: { [key:string]: unknown }): SbImageType | false => {
+  if (!content || typeof content !== 'object') {
+    throw new Error('Content object is required.');
+  }
+
+  // Check the priority fields for an image.
+  for (const field of priorityFields) {
+    if (content[field]) {
+      return content[field];
+    }
+  }
+
+  // Dig through the content object to find an image field.
+  const image = findFirstAssetField(content);
+  return image;
+};
+
+// Loop through the object and the nested arrays and objects to find an image field.
+// An image field has the key 'fieldtype` and the value `asset`.
+// It should also have an id that is an integer.
+const findFirstAssetField = (obj: { [key:string]: unknown }): SbImageType | false => {
+  // Check if the current object has the required fieldtype as 'asset'
+  // and the id is an integer as the field could be empty.
+  if (obj && obj.fieldtype === 'asset' && obj.id && typeof obj.id === 'number') {
+    return obj;
+  }
+
+  // Iterate through the object keys to recursively search in nested objects or arrays
+  if (obj && typeof obj === 'object') {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const result = findFirstAssetField(obj[key] as { [key: string]: unknown });
+        if (result) {
+          return result;
+        }
+      }
+    }
+  }
+
+  // Return false if no asset field is found
+  return false;
+};
diff --git a/utilities/getPageMetadata.ts b/utilities/getPageMetadata.ts
index 58002aca..072ba0b2 100644
--- a/utilities/getPageMetadata.ts
+++ b/utilities/getPageMetadata.ts
@@ -1,8 +1,9 @@
 import { type ISbStoryData } from '@storyblok/react/rsc';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
-import { type SbImageType, type SbLinkType } from '@/components/Storyblok/Storyblok.types';
+import { type SbLinkType } from '@/components/Storyblok/Storyblok.types';
 import { config } from './config';
 import { sbStripSlugURL } from './sbStripSlugUrl';
+import { getFirstImage } from './getFirstImage';
 
 export type SbSEOType = {
   title?: string;
@@ -16,91 +17,113 @@ export type SbSEOType = {
 };
 
 type PageMetadataProps = {
-  blok: {
-    component: string;
-    title: string;
-    dek?: string;
-    heroImage?: SbImageType;
-    heroPicker?: ISbStoryData[];
-    bgImage?: SbImageType;
-    noindex?: boolean;
-    canonicalUrl?: SbLinkType;
-    seo?: SbSEOType;
-  },
+  story: ISbStoryData & {
+    content: ISbStoryData['content'] & {
+      noindex?: boolean;
+      seo?: SbSEOType;
+      title?: string;
+      canonicalUrl?: SbLinkType;
+    };
+  };
+  sbConfig: ISbStoryData;
   slug: string;
 };
 
-export const getPageMetadata = ({
-  blok: {
-    component,
-    title: pageTitle,
-    dek,
-    heroImage: { filename = '', focus = '' } = {},
-    heroPicker,
-    bgImage: { filename: bgFilename = '', focus: bgFocus = '' } = {},
-    noindex = false,
-    canonicalUrl,
-    seo: {
-      title: seoTitle,
-      description: seoDescription,
-      og_title,
-      og_description,
-      og_image,
-      twitter_title,
-      twitter_description,
-      twitter_image,
-    } = {},
-  },
-  slug,
-}: PageMetadataProps) => {
-  // We only care about canonical URL for production so ok to use the prod URL here
-  const { siteTitle, siteDescription, siteUrlProd: siteUrl } = config;
-  const heroPickerImage = heroPicker?.[0]?.content?.heroImage?.filename;
-  const heroPickerFocus = heroPicker?.[0]?.content?.heroImage?.focus;
+/**
+ * Get the page metadata for the story.
+ * Merge the story data with the global configuration to generate the metadata.
+ *
+ * @param story - The story data.
+ * @param sbConfig - The global configuration.
+ * @param slug - The slug of the story.
+ *
+ * @returns Metadata - The metadata for the page.
+ */
+export const getPageMetadata = ({ story, sbConfig, slug }: PageMetadataProps) => {
+  // Story explicit content.
+  const {
+    name,
+    content: {
+      noindex,
+      seo,
+      title,
+      canonicalUrl,
+    },
+  } = story;
 
-  const title = seoTitle || pageTitle;
-  const searchTitle = slug === 'home' ? 'Home' : title;
-  const description = seoDescription || dek || siteDescription;
-  const ogTitle = og_title || title;
-  const ogDescription = og_description || description;
-  const heroImageCropped = getProcessedImage(filename, '1200x630', focus) || getProcessedImage(bgFilename, '1200x630', bgFocus) || getProcessedImage(heroPickerImage, '1200x630', heroPickerFocus);
+  // Config component.
+  const {
+    content: {
+      seoOgType,
+      seoOgImage: {
+        filename,
+      },
+      seoSiteTitle,
+      seoSiteDescription,
+    },
+  } = sbConfig;
 
-  /**
-   * The og_image and twitter_image fields provided by the Storyblok SEO plugin has no image focus support
-   */
-  const ogCropped = getProcessedImage(og_image, '1200x630');
-  // Twitter card image has an aspect ratio of 2:1
-  const twitterCropped = getProcessedImage(twitter_image, '1200x600');
-  const ogImage = ogCropped || heroImageCropped;
+  // Default hardcoded values.
+  const {
+    siteUrlProd,
+    siteTitle,
+    siteDescription,
+  } = config;
 
-  const ogType = component === 'sbStoryMvp' ? 'article' : 'website';
+  // Canonical URL.
+  // Canonical priority: Story Canonical URL > Config Site URL + Slug
+  let canonical = `${siteUrlProd}${sbStripSlugURL(slug)}`;
+  if (canonicalUrl) {
+    switch (canonicalUrl.linktype) {
+      case 'story': {
+          if (canonicalUrl.cached_url && canonicalUrl.cached_url.length) {
+            canonical = `${siteUrlProd}${sbStripSlugURL(canonicalUrl.cached_url)}`;
+          }
+        }
+        break;
+      case 'url': {
+        if (canonicalUrl.url && canonicalUrl.url.length) {
+          canonical = canonicalUrl.url;
+        }
+      }
+      break;
+    }
+  }
 
-  // Self reference URL is the page's URL without any query params
-  const selfReferencingUrl = slug !== 'home' ? `${siteUrl}/${slug}` : siteUrl;
-  // If the canonical URL is entered in Storyblok, find the full URL for it
-  const canonicalNotSelf = canonicalUrl?.linktype === 'story' && canonicalUrl.cached_url
-    ? `${siteUrl}${sbStripSlugURL(canonicalUrl.cached_url)}`
-    : canonicalUrl?.url;
-  const canonical = canonicalNotSelf || selfReferencingUrl;
+  // Process the images.
+  // Use the explicitly set image from the SEO component if available,
+  // then use a known field if the CT has it,
+  // otherwise use the first image in the content.
+  const knownImageFields = ['heroImage']; // order of priority
+  const firstImage = getFirstImage(knownImageFields, story.content);
+  const firstImageProcessed = firstImage ? getProcessedImage(firstImage.filename, '1200x630', firstImage.focus) : undefined;
+  // Process the images. Use the explicitly set image if available, otherwise use the first image in the content.
+  const ogImage = seo?.og_image ? getProcessedImage(seo.og_image, '1200x630') : firstImageProcessed;
+  const twitterImage = seo?.twitter_image ? getProcessedImage(seo.twitter_image, '1200x600') : firstImageProcessed;
+  const defaultImage = filename ? getProcessedImage(filename, '1200x630') : firstImageProcessed;
 
+  // SEO metadata.
+  // Image priority: Story SEO > First Image > Config Blok Default Image
+  // Title priority: Story SEO > Story Title > Config Blok Site Title
+  // Description priority: Story SEO > Config Blok Site Description > Hardcoded Site Description
   return {
-    title: `${searchTitle} | ${siteTitle}`,
-    description: description,
-    metadataBase: new URL(config.siteUrlProd),
-    openGraph: {
-      title: ogTitle,
-      description: ogDescription,
-      images: ogImage,
-      type: ogType,
+    title: `${seo.title || title || name} | ${seoSiteTitle || siteTitle}`,
+    description: seo?.description || seoSiteDescription || siteDescription,
+    metadataBase: new URL(siteUrlProd),
+    openGraph:{
+      title: seo?.og_title || title || name,
+      description: seo?.og_description || seo?.description || seoSiteDescription || siteDescription,
+      images: ogImage || defaultImage,
+      type: seoOgType || 'website',
     },
     twitter: {
       card: 'summary_large_image',
-      title:  twitter_title,
-      description: twitter_description,
-      images: twitterCropped,
+      title: seo?.twitter_title || title || name,
+      description: seo?.twitter_description || seo?.description || seoSiteDescription || siteDescription,
+      images: twitterImage || defaultImage,
     },
     alternates: {
-      canonical: !noindex && canonical,
+      canonical,
     },
     robots: noindex && 'noindex',
   };
diff --git a/utilities/sbStripSlugUrl.ts b/utilities/sbStripSlugUrl.ts
index db355cd9..541043ed 100644
--- a/utilities/sbStripSlugUrl.ts
+++ b/utilities/sbStripSlugUrl.ts
@@ -4,7 +4,7 @@ import { type SbLinkType } from '@/components/Storyblok/Storyblok.types';
 // Remove the slug prefix from a SbLinkType.
 export const sbStripSlugLinkType = (link:SbLinkType): SbLinkType => {
   const prefix = getSlugPrefix();
-  let linkCopy = { ...link };
+  const linkCopy = { ...link };
   const {
     linkType,
     cached_url,