diff --git a/app/api/global-message/route.tsx b/app/api/global-message/route.tsx
new file mode 100644
index 00000000..7e6dfbcd
--- /dev/null
+++ b/app/api/global-message/route.tsx
@@ -0,0 +1,28 @@
+import {NextRequest, NextResponse} from "next/server"
+import {buildHeaders} from "@/lib/drupal/utils"
+import {GraphQLClient} from "graphql-request"
+import {getSdk} from "@/lib/gql/__generated__/queries"
+import type {RequestConfig} from "graphql-request/src/types"
+
+export const GET = async (request: NextRequest) => {
+  const graphqlClient = (requestConfig: RequestConfig = {}, isPreviewMode?: boolean) => {
+    requestConfig.headers = buildHeaders(requestConfig.headers as HeadersInit, isPreviewMode)
+    const client = new GraphQLClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL + "/graphql", {
+      ...requestConfig,
+      next: {
+        revalidate: 5, // revalidate every 5 seconds to catch updates as soon as possible.
+        ...requestConfig.next,
+      },
+      fetch: async (input: URL | RequestInfo, init?: RequestInit) => fetch(input, init),
+    })
+    return getSdk(client)
+  }
+
+  try {
+    const headers = await buildHeaders()
+    const query = await graphqlClient({headers, next: {tags: ["config-pages"]}}).ConfigPages()
+    return NextResponse.json(query.stanfordGlobalMessages.nodes[0])
+  } catch (e) {
+    console.error("Failed to fetch global message", e)
+  }
+}
diff --git a/src/components/layout/global-message.tsx b/src/components/layout/global-message.tsx
index f3af442e..2d3ad40e 100644
--- a/src/components/layout/global-message.tsx
+++ b/src/components/layout/global-message.tsx
@@ -1,91 +1,92 @@
-import formatHtml from "@/lib/format-html";
-import {DrupalActionLink} from "@/components/patterns/link";
-import {
-  BellIcon,
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon
-} from "@heroicons/react/20/solid";
-import {getConfigPage} from "@/lib/gql/fetcher";
-import {StanfordGlobalMessage} from "@/lib/gql/__generated__/drupal.d";
-import {JSX} from "react";
+"use client"
 
-const GlobalMessage = async () => {
-  let configPage: StanfordGlobalMessage | undefined;
-  try {
-    configPage = await getConfigPage<StanfordGlobalMessage>("StanfordGlobalMessage")
-  } catch (e) {
-    return null;
-  }
+import {useEffect, useState} from "react"
+import formatHtml from "@/lib/format-html"
+import {DrupalActionLink} from "@/components/patterns/link"
+import {BellIcon, CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, InformationCircleIcon} from "@heroicons/react/20/solid"
+import {StanfordGlobalMessage} from "@/lib/gql/__generated__/drupal.d"
+import {JSX} from "react"
+
+const GlobalMessage = () => {
+  const [configPage, setConfigPage] = useState<StanfordGlobalMessage | undefined>(undefined)
+
+  useEffect(() => {
+    const fetchConfigPage = async () => {
+      try {
+        const response = await fetch("/api/global-message")
+        const data = await response.json()
+        setConfigPage(data)
+      } catch (e) {
+        console.error("Failed to fetch global message", e)
+      }
+    }
+
+    fetchConfigPage()
+  }, [])
 
   if (!configPage || !configPage.suGlobalMsgEnabled) {
-    return null;
+    return null
   }
 
-  const options: Record<StanfordGlobalMessage["suGlobalMsgType"], { bgColor: string, textColor: string, linkClasses: string, icon: JSX.Element }> = {
+  const options: Record<StanfordGlobalMessage["suGlobalMsgType"], {bgColor: string; textColor: string; linkClasses: string; icon: JSX.Element}> = {
     plain: {
       bgColor: "bg-foggy-light",
       textColor: "text-black-true",
       linkClasses: "transition text-black-true hocus:text-black hocus:bg-sky",
-      icon: <BellIcon width={30}/>
+      icon: <BellIcon width={30} />,
     },
     success: {
       bgColor: "bg-digital-green",
       textColor: "text-white",
       linkClasses: "transition text-white hocus:text-black hocus:bg-white",
-      icon: <CheckCircleIcon width={30}/>
+      icon: <CheckCircleIcon width={30} />,
     },
     info: {
       bgColor: "bg-digital-blue-dark",
       textColor: "text-white",
       linkClasses: "transition text-white hocus:text-black hocus:bg-white",
-      icon: <InformationCircleIcon width={30}/>
+      icon: <InformationCircleIcon width={30} />,
     },
     warning: {
       bgColor: "bg-illuminating-dark",
       textColor: "text-black-true",
       linkClasses: "transition text-black-true hocus:text-black hocus:bg-sky",
-      icon: <ExclamationCircleIcon width={30}/>
+      icon: <ExclamationCircleIcon width={30} />,
     },
     error: {
       bgColor: "bg-digital-red",
       textColor: "text-white",
       linkClasses: "transition text-white hocus:text-black hocus:bg-white",
-      icon: <ExclamationTriangleIcon width={30}/>
+      icon: <ExclamationTriangleIcon width={30} />,
     },
   }
-  const chosenOption = options[configPage.suGlobalMsgType || "success"];
+  const chosenOption = options[configPage.suGlobalMsgType || "success"]
 
   return (
     <div className={"relative z-30 lg:z-0 " + chosenOption.bgColor + " " + chosenOption.textColor}>
-
       <div className="centered flex gap-2xl py-20">
-        <div className="flex-shrink-0 flex items-center justify-center">
+        <div className="flex flex-shrink-0 items-center justify-center">
           {chosenOption.icon}
           {configPage.suGlobalMsgLabel}
         </div>
 
         <div>
-          {configPage.suGlobalMsgHeader &&
-            <h2 className="text-m3">{configPage.suGlobalMsgHeader}</h2>
-          }
+          {configPage.suGlobalMsgHeader && <h2 className="text-m3">{configPage.suGlobalMsgHeader}</h2>}
 
-          {configPage.suGlobalMsgMessage?.processed &&
-            <div className={chosenOption.textColor}>
-              {formatHtml(configPage.suGlobalMsgMessage.processed.replace(/<a /, `<a class="${chosenOption.linkClasses}" `))}
-            </div>
-          }
+          {configPage.suGlobalMsgMessage?.processed && <div className={chosenOption.textColor}>{formatHtml(configPage.suGlobalMsgMessage.processed.replace(/<a /, `<a class="${chosenOption.linkClasses}" `))}</div>}
 
-          {configPage.suGlobalMsgLink?.url &&
-            <DrupalActionLink href={configPage.suGlobalMsgLink.url} className={chosenOption.linkClasses}>
+          {configPage.suGlobalMsgLink?.url && (
+            <DrupalActionLink
+              href={configPage.suGlobalMsgLink.url}
+              className={chosenOption.linkClasses}
+            >
               {configPage.suGlobalMsgLink.title}
             </DrupalActionLink>
-          }
+          )}
         </div>
       </div>
     </div>
   )
 }
 
-export default GlobalMessage;
\ No newline at end of file
+export default GlobalMessage