diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
index e30ee2e30c..7c175ba4e7 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
@@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
 import { PaymentStatus } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
 import SaveResumeButton from "@planx/components/shared/Preview/SaveResumeButton";
+import { hasFeatureFlag } from "lib/featureFlags";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useState } from "react";
 import { ApplicationPath } from "types";
@@ -140,6 +141,9 @@ export default function Confirm(props: Props) {
     changePage,
   };
 
+  const showFeeBreakdown =
+    props.showFeeBreakdown && hasFeatureFlag("FEE_BREAKDOWN");
+
   return (
     <Box textAlign="left" width="100%">
       <>
@@ -181,7 +185,7 @@ export default function Confirm(props: Props) {
                 />
               </Typography>
             </FormWrapper>
-            {props.showFeeBreakdown && <FeeBreakdown />}
+            {showFeeBreakdown && <FeeBreakdown />}
           </Banner>
         )}
         {page === "Pay" ? (
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown.tsx
index f0062d03e7..8298e553c6 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown/FeeBreakdown.tsx
@@ -7,7 +7,6 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
-import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
@@ -91,8 +90,6 @@ export const FeeBreakdown: React.FC = () => {
   const breakdown = useFeeBreakdown();
   if (!breakdown) return null;
 
-  if (!hasFeatureFlag("FEE_BREAKDOWN")) return null;
-
   return (
     <Box mt={3}>
       <Typography variant="h3" mb={1}>
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx
index be94bc59f8..96e1314306 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx
@@ -489,7 +489,20 @@ describe("the demo user view", () => {
 });
 
 describe("Displaying the fee breakdown", () => {
-  beforeAll(() => (initialState = getState()));
+  beforeAll(() => {
+    initialState = getState();
+    // Valid passport data is required to display the breakdown
+    setState({
+      computePassport: vi.fn().mockReturnValue({
+        data: {
+          "application.fee.calculated": 1000,
+          "application.fee.payable": 800,
+          "application.fee.payable.vat": 160,
+        },
+      }),
+    });
+  });
+
   afterEach(() => act(() => setState(initialState)));
 
   test("if the showFeeBreakdown prop is set, the breakdown is displayed to the user", () => {