diff --git a/client/src/components/composite/BookingsPolicyTabs/TabsContent.story.tsx b/client/src/components/composite/BookingsPolicyTabs/TabsContent.story.tsx
index 24a6fe8d0..8285b8968 100644
--- a/client/src/components/composite/BookingsPolicyTabs/TabsContent.story.tsx
+++ b/client/src/components/composite/BookingsPolicyTabs/TabsContent.story.tsx
@@ -1,8 +1,8 @@
 import type { Meta } from "@storybook/react"
 import {
   BehaviourPolicyContent,
-  BookingPolicyContent,
   CancellationPolicyContent,
+  LodgeBookingsPolicyContent,
   PolicyTabs
 } from "./TabsContent"
 
@@ -15,8 +15,8 @@ export const DefaultPolicyTabs = () => {
   return <PolicyTabs />
 }
 
-export const BookingPolicyStory = () => {
-  return <BookingPolicyContent />
+export const LodgeBookingsPolicyStory = () => {
+  return <LodgeBookingsPolicyContent />
 }
 
 export const CancellationPolicyStory = () => {
diff --git a/client/src/components/composite/BookingsPolicyTabs/TabsContent.tsx b/client/src/components/composite/BookingsPolicyTabs/TabsContent.tsx
index 6ff652681..590d7a842 100644
--- a/client/src/components/composite/BookingsPolicyTabs/TabsContent.tsx
+++ b/client/src/components/composite/BookingsPolicyTabs/TabsContent.tsx
@@ -1,70 +1,78 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import TabsComponent from "@/components/generic/TabsComponent/TabsComponent"
 import { PortableText } from "@portabletext/react"
 import { POLICIES_GROQ_QUERY, Policies } from "@/models/sanity/Policies/Utils"
 import { sanityQuery } from "../../../../sanity/lib/utils"
 
-export const BookingPolicyContent = async () => {
-  const policies = await sanityQuery<Policies[]>(POLICIES_GROQ_QUERY)
-
-  /**
-   * We assume there will be only one based on the way {@link Policies} is set up in sanity
-   *
-   */
-  const policiesSingleton: Policies | undefined =
-    policies.length > 0 ? policies[2] : undefined
-
-  const LodgeBookingsPolicies = () => {
-    return (
-      policiesSingleton?.information && (
-        <PortableText value={policiesSingleton.information} />
-      )
+import PropTypes from "prop-types"
+
+export const BookingPolicyContent = ({
+  policiesSingleton
+}: {
+  policiesSingleton: Policies | undefined
+}) => {
+  return (
+    policiesSingleton?.information && (
+      <PortableText value={policiesSingleton.information} />
     )
-  }
+  )
+}
 
-  return <LodgeBookingsPolicies />
+BookingPolicyContent.propTypes = {
+  policiesSingleton: PropTypes.shape({
+    information: PropTypes.array
+  })
 }
 
-export const CancellationPolicyContent = async () => {
-  const policies = await sanityQuery<Policies[]>(POLICIES_GROQ_QUERY)
-
-  /**
-   * We assume there will be only one based on the way {@link Policies} is set up in sanity
-   *
-   */
-  const policiesSingleton: Policies | undefined =
-    policies.length > 0 ? policies[0] : undefined
-
-  const CancellationPolicies = () => {
-    return (
-      policiesSingleton?.information && (
-        <PortableText value={policiesSingleton.information} />
-      )
-    )
-  }
+export const LodgeBookingsPolicyContent = () => {
+  const [policiesSingleton, setPoliciesSingleton] = useState<
+    Policies | undefined
+  >(undefined)
+
+  useEffect(() => {
+    const fetchPolicies = async () => {
+      const policies = await sanityQuery<Policies[]>(POLICIES_GROQ_QUERY)
+      setPoliciesSingleton(policies.length > 0 ? policies[2] : undefined)
+    }
+
+    fetchPolicies()
+  }, [])
 
-  return <CancellationPolicies />
+  return <BookingPolicyContent policiesSingleton={policiesSingleton} />
 }
 
-export const BehaviourPolicyContent = async () => {
-  const policies = await sanityQuery<Policies[]>(POLICIES_GROQ_QUERY)
-
-  /**
-   * We assume there will be only one based on the way {@link Policies} is set up in sanity
-   *
-   */
-  const policiesSingleton: Policies | undefined =
-    policies.length > 0 ? policies[1] : undefined
-
-  const BehaviourPolicies = () => {
-    return (
-      policiesSingleton?.information && (
-        <PortableText value={policiesSingleton.information} />
-      )
-    )
-  }
+export const CancellationPolicyContent = () => {
+  const [policiesSingleton, setPoliciesSingleton] = useState<
+    Policies | undefined
+  >(undefined)
+
+  useEffect(() => {
+    const fetchPolicies = async () => {
+      const policies = await sanityQuery<Policies[]>(POLICIES_GROQ_QUERY)
+      setPoliciesSingleton(policies.length > 0 ? policies[0] : undefined)
+    }
+
+    fetchPolicies()
+  }, [])
+
+  return <BookingPolicyContent policiesSingleton={policiesSingleton} />
+}
+
+export const BehaviourPolicyContent = () => {
+  const [policiesSingleton, setPoliciesSingleton] = useState<
+    Policies | undefined
+  >(undefined)
+
+  useEffect(() => {
+    const fetchPolicies = async () => {
+      const policies = await sanityQuery<Policies[]>(POLICIES_GROQ_QUERY)
+      setPoliciesSingleton(policies.length > 0 ? policies[1] : undefined)
+    }
+
+    fetchPolicies()
+  }, [])
 
-  return <BehaviourPolicies />
+  return <BookingPolicyContent policiesSingleton={policiesSingleton} />
 }
 
 enum PolicyPage {
@@ -75,7 +83,7 @@ enum PolicyPage {
 const exampleHeadings = [
   {
     title: "LODGE BOOKINGS",
-    content: <BookingPolicyContent />,
+    content: <LodgeBookingsPolicyContent />,
     index: PolicyPage.ONE
   },
   {