diff --git a/e2e/tests/ui-driven/src/create-flow.spec.ts b/e2e/tests/ui-driven/src/create-flow.spec.ts
index 8a17b5deb9..94c6bee879 100644
--- a/e2e/tests/ui-driven/src/create-flow.spec.ts
+++ b/e2e/tests/ui-driven/src/create-flow.spec.ts
@@ -73,6 +73,7 @@ test.describe("Flow creation, publish and preview", () => {
     await editor.createResult();
     await editor.createNextSteps();
     await editor.createReview();
+    await editor.createFeedback();
     await editor.createConfirmation();
 
     await expect(editor.nodeList).toContainText([
@@ -91,6 +92,7 @@ test.describe("Flow creation, publish and preview", () => {
       "Planning permission", // default result flag
       "Next steps",
       "Check your answers before sending your application",
+      "Tell us what you think",
       "Confirmation",
     ]);
   });
@@ -290,6 +292,10 @@ test.describe("Flow creation, publish and preview", () => {
     ).toBeVisible();
     await clickContinue({ page });
 
+    await expect(
+      page.locator("h1", { hasText: "Tell us what you think" }),
+    ).toBeVisible();
+    await clickContinue({ page });
     await expect(
       page.locator("h1", { hasText: "Application sent" }),
     ).toBeVisible();
diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 9b41eacf4e..003567d4db 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -1,5 +1,5 @@
 import { ComponentType } from "@opensystemslab/planx-core/types";
-import { Locator, Page } from "@playwright/test";
+import { expect, Locator, Page } from "@playwright/test";
 
 const createBaseComponent = async (
   page: Page,
@@ -10,7 +10,10 @@ const createBaseComponent = async (
 ) => {
   await locatingNode.click();
   await page.getByRole("dialog").waitFor();
-  await page.locator("select").selectOption({ value: type.toString() });
+  const headerSelect = page.getByRole("heading", { name: "Question close" });
+  await headerSelect.locator("select").selectOption({ value: type.toString() });
+
+  await expect(page.getByTestId("header-select")).toHaveValue(type.toString());
 
   switch (type) {
     case ComponentType.Question:
@@ -23,7 +26,7 @@ const createBaseComponent = async (
       await page.getByPlaceholder("Notice").fill(title || "");
       break;
     case ComponentType.Checklist:
-      await page.getByPlaceholder("Text").fill(title || "");
+      await page.getByPlaceholder("Text").fill(title || "text");
       if (options) {
         await createComponentOptions(options, "add new option", page);
       }
@@ -114,6 +117,7 @@ const createBaseComponent = async (
         .fill(options?.[0] || "");
       break;
     case ComponentType.Filter:
+    case ComponentType.Feedback:
       break;
     case ComponentType.InternalPortal:
       await page.getByPlaceholder("Portal name").fill(title || "");
@@ -386,3 +390,7 @@ export const createInternalPortal = async (
     portalName,
   );
 };
+
+export const createFeedback = async (page: Page, locatingNode: Locator) => {
+  await createBaseComponent(page, locatingNode, ComponentType.Feedback);
+};
diff --git a/e2e/tests/ui-driven/src/pages/Editor.ts b/e2e/tests/ui-driven/src/pages/Editor.ts
index eeda650d88..bb581c1386 100644
--- a/e2e/tests/ui-driven/src/pages/Editor.ts
+++ b/e2e/tests/ui-driven/src/pages/Editor.ts
@@ -9,6 +9,7 @@ import {
   createContent,
   createDateInput,
   createDrawBoundary,
+  createFeedback,
   createFileUpload,
   createFilter,
   createFindProperty,
@@ -240,4 +241,8 @@ export class PlaywrightEditor {
       .fill("A notice inside a portal!");
     await this.page.locator('button[form="modal"][type="submit"]').click();
   }
+
+  async createFeedback() {
+    await createFeedback(this.page, this.getNextNode());
+  }
 }
diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
index 8f0a9fbb6c..450c13a4d5 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/Editor.tsx
@@ -1,11 +1,5 @@
-import {
-  ComponentType as TYPES,
-} from "@opensystemslab/planx-core/types";
-import {
-  parsePay,
-  Pay,
-  validationSchema,
-} from "@planx/components/Pay/model";
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { parsePay, Pay, validationSchema } from "@planx/components/Pay/model";
 import { Form, Formik } from "formik";
 import React from "react";
 import { ComponentTagSelect } from "ui/editor/ComponentTagSelect";
@@ -20,13 +14,13 @@ import { Switch } from "ui/shared/Switch";
 
 import { ICONS } from "../../shared/icons";
 import { EditorProps } from "../../shared/types";
+import { FeeBreakdownSection } from "./FeeBreakdownSection";
 import { GovPayMetadataSection } from "./GovPayMetadataSection";
 import { InviteToPaySection } from "./InviteToPaySection";
 
 export type Props = EditorProps<TYPES.Pay, Pay>;
 
 const Component: React.FC<Props> = (props: Props) => {
-
   const onSubmit = (newValues: Pay) => {
     if (props.handleSubmit) {
       props.handleSubmit({ type: TYPES.Pay, data: newValues });
@@ -41,11 +35,7 @@ const Component: React.FC<Props> = (props: Props) => {
       validateOnChange={true}
       validateOnBlur={true}
     >
-      {({
-        values,
-        handleChange,
-        setFieldValue,
-      }) => (
+      {({ values, handleChange, setFieldValue }) => (
         <Form id="modal" name="modal">
           <ModalSection>
             <ModalSectionContent title="Payment" Icon={ICONS[TYPES.Pay]}>
@@ -112,8 +102,9 @@ const Component: React.FC<Props> = (props: Props) => {
               </InputRow>
             </ModalSectionContent>
           </ModalSection>
-          <GovPayMetadataSection/>
-          <InviteToPaySection/>
+          <GovPayMetadataSection />
+          <InviteToPaySection />
+          <FeeBreakdownSection />
           <MoreInformation
             changeField={handleChange}
             definitionImg={values.definitionImg}
diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
new file mode 100644
index 0000000000..5db61ca8ae
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
@@ -0,0 +1,32 @@
+import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
+import { useFormikContext } from "formik";
+import { hasFeatureFlag } from "lib/featureFlags";
+import React from "react";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import InputRow from "ui/shared/InputRow";
+import { Switch } from "ui/shared/Switch";
+
+import { Pay } from "../model";
+
+export const FeeBreakdownSection: React.FC = () => {
+  const { values, setFieldValue } = useFormikContext<Pay>();
+
+  if (!hasFeatureFlag("FEE_BREAKDOWN")) return null;
+
+  return (
+    <ModalSection>
+      <ModalSectionContent title="Fee breakdown" Icon={ReceiptLongIcon}>
+        <InputRow>
+          <Switch
+            checked={values.showFeeBreakdown}
+            onChange={() =>
+              setFieldValue("showFeeBreakdown", !values.showFeeBreakdown)
+            }
+            label="Display a breakdown of the fee to the applicant"
+          />
+        </InputRow>
+      </ModalSectionContent>
+    </ModalSection>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/InviteToPaySection.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/InviteToPaySection.tsx
index 0e14c3da24..9d0b7912e5 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/InviteToPaySection.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/InviteToPaySection.tsx
@@ -1,8 +1,7 @@
-import React from "react";
 import Box from "@mui/material/Box";
-import {
-  ComponentType as TYPES,
-} from "@opensystemslab/planx-core/types";
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { useFormikContext } from "formik";
+import React from "react";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
@@ -11,7 +10,6 @@ import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
 
 import { ICONS } from "../../shared/icons";
-import { useFormikContext } from "formik";
 import { Pay } from "../model";
 
 export const InviteToPaySection: React.FC = () => {
@@ -98,5 +96,5 @@ export const InviteToPaySection: React.FC = () => {
         )}
       </ModalSectionContent>
     </ModalSection>
-  )
-}
\ No newline at end of file
+  );
+};
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 0cf82f91d8..31913894d9 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
@@ -14,30 +14,24 @@ import FormWrapper from "ui/public/FormWrapper";
 import ErrorSummary from "ui/shared/ErrorSummary/ErrorSummary";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHtml";
 
-import { formattedPriceWithCurrencySymbol, getDefaultContent } from "../model";
+import {
+  formattedPriceWithCurrencySymbol,
+  getDefaultContent,
+  Pay,
+} from "../model";
+import { FeeBreakdown } from "./FeeBreakdown";
 import InviteToPayForm, { InviteToPayFormProps } from "./InviteToPayForm";
 import { PAY_API_ERROR_UNSUPPORTED_TEAM } from "./Pay";
 
-export interface Props {
+export interface Props extends Omit<Pay, "title" | "fn" | "govPayMetadata"> {
   title?: string;
-  bannerTitle?: string;
-  description?: string;
   fee: number;
-  instructionsTitle?: string;
-  instructionsDescription?: string;
   showInviteToPay?: boolean;
-  secondaryPageTitle?: string;
-  nomineeTitle?: string;
-  nomineeDescription?: string;
-  yourDetailsTitle?: string;
-  yourDetailsDescription?: string;
-  yourDetailsLabel?: string;
   paymentStatus?: PaymentStatus;
   buttonTitle?: string;
   onConfirm: () => void;
   error?: string;
   hideFeeBanner?: boolean;
-  hidePay?: boolean;
 }
 
 interface PayBodyProps extends Props {
@@ -86,7 +80,7 @@ const PayBody: React.FC<PayBodyProps> = (props) => {
     <Card>
       <PayText>
         <Typography variant="h2" component={props.hideFeeBanner ? "h2" : "h3"}>
-          {props.instructionsTitle || defaults.instructionsTitle }
+          {props.instructionsTitle || defaults.instructionsTitle}
         </Typography>
         <ReactMarkdownOrHtml
           source={
@@ -187,6 +181,7 @@ export default function Confirm(props: Props) {
                 />
               </Typography>
             </FormWrapper>
+            {props.showFeeBreakdown && <FeeBreakdown />}
           </Banner>
         )}
         {page === "Pay" ? (
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.test.tsx
new file mode 100644
index 0000000000..33f37a5d66
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.test.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { setup } from "testUtils";
+import { vi } from "vitest";
+import { axe } from "vitest-axe";
+
+import { FeeBreakdown } from "./FeeBreakdown";
+
+vi.mock("lib/featureFlags", () => ({
+  hasFeatureFlag: () => true,
+}));
+
+it("should not have any accessibility violations", async () => {
+  const { container } = setup(<FeeBreakdown />);
+  const results = await axe(container);
+
+  expect(results).toHaveNoViolations();
+});
+
+// Placeholder tests and initial assumptions
+it.todo("displays a planning fee");
+
+it.todo("displays a total");
+
+it.todo("displays a service charge if applicable");
+it.todo("does not display a service charge if not applicable");
+
+it.todo("displays VAT if applicable");
+it.todo("does not display VAT if not applicable");
+
+it.todo("displays exemptions if applicable");
+it.todo("does not exemptions if not applicable");
+
+it.todo("displays reductions if applicable");
+it.todo("does not reductions if not applicable");
+
+it.todo("does not display if fee calculation values are invalid");
+it.todo("silently throws an error if fee calculations are invalid");
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
new file mode 100644
index 0000000000..2bb415aca3
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
@@ -0,0 +1,111 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
+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";
+
+import { formattedPriceWithCurrencySymbol } from "../model";
+
+const StyledTable = styled(Table)(() => ({
+  [`& .${tableCellClasses.root}`]: {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+}));
+
+const BoldTableRow = styled(TableRow)(() => ({
+  [`& .${tableCellClasses.root}`]: {
+    fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  },
+}));
+
+const VAT_RATE = 20;
+
+const DESCRIPTION =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+const Header = () => (
+  <TableHead>
+    <BoldTableRow>
+      <TableCell>Description</TableCell>
+      <TableCell align="right">Amount</TableCell>
+    </BoldTableRow>
+  </TableHead>
+);
+
+const ApplicationFee = () => (
+  <TableRow>
+    <TableCell>Application fee</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(100)}</TableCell>
+  </TableRow>
+);
+
+const Exemptions = () => (
+  <TableRow>
+    <TableCell>Exemptions</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(-20)}</TableCell>
+  </TableRow>
+);
+
+const Reductions = () => (
+  <TableRow>
+    <TableCell>Reductions</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(-30)}</TableCell>
+  </TableRow>
+);
+
+const ServiceCharge = () => (
+  <TableRow>
+    <TableCell>Service charge</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(30)}</TableCell>
+  </TableRow>
+);
+
+const VAT = () => (
+  <TableRow>
+    <TableCell>{`VAT (${VAT_RATE}%)`}</TableCell>
+    <TableCell align="right">-</TableCell>
+  </TableRow>
+);
+
+const Total = () => (
+  <BoldTableRow>
+    <TableCell>Total</TableCell>
+    <TableCell align="right">{formattedPriceWithCurrencySymbol(80)}</TableCell>
+  </BoldTableRow>
+);
+
+export const FeeBreakdown: React.FC = () => {
+  if (!hasFeatureFlag("FEE_BREAKDOWN")) return null;
+
+  return (
+    <Box mt={3}>
+      <Typography variant="h3" mb={1}>
+        Fee breakdown
+      </Typography>
+      <Typography variant="body1" mb={2}>
+        {DESCRIPTION}
+      </Typography>
+      <TableContainer>
+        <StyledTable data-testid="fee-breakdown-table">
+          <Header />
+          <TableBody>
+            <ApplicationFee />
+            <ServiceCharge />
+            <Exemptions />
+            <Reductions />
+            <VAT />
+            <Total />
+          </TableBody>
+        </StyledTable>
+      </TableContainer>
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
index d554de6d28..619503a550 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.stories.tsx
@@ -17,6 +17,9 @@ const meta = {
       }),
     },
   },
+  loaders: [
+    () => window.localStorage.setItem("FEATURE_FLAGS", '["FEE_BREAKDOWN"]'),
+  ],
 } satisfies Meta<typeof Confirm>;
 
 type Story = StoryObj<typeof meta>;
@@ -71,3 +74,20 @@ export const ForInformationOnly = {
     onConfirm: () => {},
   },
 } satisfies Story;
+
+// TODO: Setup fee breakdown amounts
+export const WithFeeBreakdown = {
+  args: {
+    title: "Pay for your application",
+    bannerTitle: "The fee is",
+    description: "The fee covers the cost of processing your application",
+    fee: 103,
+    instructionsTitle: "How to pay",
+    instructionsDescription: "Pay via GOV.UK Pay",
+    buttonTitle: "Pay",
+    onConfirm: () => {},
+    error: undefined,
+    showInviteToPay: false,
+    showFeeBreakdown: true,
+  },
+} satisfies Story;
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 14f6d42c37..be94bc59f8 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
@@ -1,6 +1,7 @@
 import { PaymentStatus } from "@opensystemslab/planx-core/types";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { screen } from "@testing-library/react";
+import { hasFeatureFlag } from "lib/featureFlags";
 import { FullStore, Store, useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { act } from "react-dom/test-utils";
@@ -8,6 +9,7 @@ import * as ReactNavi from "react-navi";
 import { setup } from "testUtils";
 import { ApplicationPath, Breadcrumbs } from "types";
 import { vi } from "vitest";
+import { Mock } from "vitest";
 import { axe } from "vitest-axe";
 
 import Confirm, { Props } from "./Confirm";
@@ -21,6 +23,12 @@ vi.spyOn(ReactNavi, "useCurrentRoute").mockImplementation(
   () => ({ data: { mountpath: "mountpath" } }) as any,
 );
 
+vi.mock("lib/featureFlags", () => ({
+  hasFeatureFlag: vi.fn(),
+}));
+
+const mockHasFeatureFlag = hasFeatureFlag as Mock;
+
 const resumeButtonText = "Resume an application you have already started";
 const saveButtonText = "Save and return to this application later";
 
@@ -74,6 +82,19 @@ const breadcrumbs: Breadcrumbs = {
   },
 };
 
+const defaultProps = {
+  title: "Pay for your application",
+  bannerTitle: "The fee is",
+  description: "The fee covers the cost of processing your application",
+  fee: 103,
+  instructionsTitle: "How to pay",
+  instructionsDescription: "Pay via GOV.UK Pay",
+  buttonTitle: "Pay",
+  onConfirm: vi.fn(),
+  error: undefined,
+  showInviteToPay: false,
+};
+
 describe("Pay component when fee is undefined or £0", () => {
   beforeEach(() => {
     getState().resetPreview();
@@ -126,19 +147,6 @@ describe("Pay component when fee is undefined or £0", () => {
   });
 });
 
-const defaultProps = {
-  title: "Pay for your application",
-  bannerTitle: "The fee is",
-  description: "The fee covers the cost of processing your application",
-  fee: 103,
-  instructionsTitle: "How to pay",
-  instructionsDescription: "Pay via GOV.UK Pay",
-  buttonTitle: "Pay",
-  onConfirm: vi.fn(),
-  error: undefined,
-  showInviteToPay: false,
-};
-
 describe("Confirm component without inviteToPay", () => {
   beforeAll(() => (initialState = getState()));
   afterEach(() => act(() => setState(initialState)));
@@ -459,6 +467,7 @@ describe("the demo user view", () => {
       }),
     );
   });
+
   it("should render an error when teamSlug is demo", async () => {
     const handleSubmit = vi.fn();
     const { queryByText } = setup(
@@ -478,3 +487,40 @@ describe("the demo user view", () => {
     expect(errorHeader).toBeInTheDocument();
   });
 });
+
+describe("Displaying the fee breakdown", () => {
+  beforeAll(() => (initialState = getState()));
+  afterEach(() => act(() => setState(initialState)));
+
+  test("if the showFeeBreakdown prop is set, the breakdown is displayed to the user", () => {
+    mockHasFeatureFlag.mockReturnValue(true);
+
+    const { getByRole, getByTestId } = setup(
+      <Confirm {...defaultProps} showFeeBreakdown={true} />,
+    );
+
+    expect(mockHasFeatureFlag).toHaveBeenCalledWith("FEE_BREAKDOWN");
+    expect(mockHasFeatureFlag).toHaveBeenCalledTimes(1);
+
+    expect(
+      getByRole("heading", { level: 3, name: "Fee breakdown" }),
+    ).toBeVisible();
+    expect(getByTestId("fee-breakdown-table")).toBeVisible();
+  });
+
+  test("if the showFeeBreakdown prop is not set, the breakdown is not displayed to the user", () => {
+    mockHasFeatureFlag.mockReturnValue(true);
+
+    const { queryByRole, queryByTestId } = setup(
+      <Confirm {...defaultProps} showFeeBreakdown={false} />,
+    );
+
+    expect(mockHasFeatureFlag).toHaveBeenCalledWith("FEE_BREAKDOWN");
+    expect(mockHasFeatureFlag).toHaveBeenCalledTimes(1);
+
+    expect(
+      queryByRole("heading", { level: 3, name: "Fee breakdown" }),
+    ).not.toBeInTheDocument();
+    expect(queryByTestId("fee-breakdown-table")).not.toBeInTheDocument();
+  });
+});
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
index b9e4c21442..a89b976d8f 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
@@ -14,7 +14,13 @@ import { useErrorHandler } from "react-error-boundary";
 import type { Session } from "types";
 
 import { makeData } from "../../shared/utils";
-import { createPayload, getDefaultContent, GOV_UK_PAY_URL, Pay, toDecimal } from "../model";
+import {
+  createPayload,
+  getDefaultContent,
+  GOV_UK_PAY_URL,
+  Pay,
+  toDecimal,
+} from "../model";
 import Confirm from "./Confirm";
 
 export default Component;
@@ -53,7 +59,6 @@ function Component(props: Props) {
     passport,
     environment,
     teamSlug,
-    flowSlug,
   ] = useStore((state) => [
     state.id,
     state.sessionId,
@@ -63,7 +68,6 @@ function Component(props: Props) {
     state.computePassport(),
     state.previewEnvironment,
     state.teamSlug,
-    state.flowSlug,
   ]);
   const fee = props.fn ? Number(passport.data?.[props.fn]) : 0;
 
@@ -303,7 +307,6 @@ function Component(props: Props) {
           }
           showInviteToPay={showPayOptions && isTeamSupported}
           paymentStatus={govUkPayment?.state?.status}
-          hidePay={props.hidePay}
         />
       ) : (
         <DelayedLoadingIndicator text={state.displayText || state.status} />
diff --git a/editor.planx.uk/src/@planx/components/Pay/model.ts b/editor.planx.uk/src/@planx/components/Pay/model.ts
index 0a905ce14f..5b390e42c6 100644
--- a/editor.planx.uk/src/@planx/components/Pay/model.ts
+++ b/editor.planx.uk/src/@planx/components/Pay/model.ts
@@ -8,7 +8,7 @@ import { useStore } from "pages/FlowEditor/lib/store";
 import { ApplicationPath, Passport } from "types";
 import { array, boolean, object, string } from "yup";
 
-import { parseBaseNodeData, type BaseNodeData } from "../shared";
+import { type BaseNodeData, parseBaseNodeData } from "../shared";
 
 export interface Pay extends BaseNodeData {
   title: string;
@@ -27,6 +27,7 @@ export interface Pay extends BaseNodeData {
   yourDetailsDescription?: string;
   yourDetailsLabel?: string;
   govPayMetadata: GovPayMetadata[];
+  showFeeBreakdown?: boolean;
 }
 
 export const toPence = (decimal: number) => Math.trunc(decimal * 100);
@@ -181,6 +182,7 @@ export const getDefaultContent = (): Pay => ({
   nomineeTitle: "Details of the person paying",
   yourDetailsTitle: "Your details",
   yourDetailsLabel: "Your name or organisation name",
+  showFeeBreakdown: false,
   govPayMetadata: [
     {
       key: "flow",
diff --git a/editor.planx.uk/src/lib/featureFlags.ts b/editor.planx.uk/src/lib/featureFlags.ts
index 5fd7349747..1e34728156 100644
--- a/editor.planx.uk/src/lib/featureFlags.ts
+++ b/editor.planx.uk/src/lib/featureFlags.ts
@@ -1,5 +1,5 @@
 // add/edit/remove feature flags in array below
-const AVAILABLE_FEATURE_FLAGS = [] as const;
+const AVAILABLE_FEATURE_FLAGS = ["FEE_BREAKDOWN"] as const;
 
 type FeatureFlag = (typeof AVAILABLE_FEATURE_FLAGS)[number];
 
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
index 81d8839ab5..af7400b806 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
@@ -43,6 +43,7 @@ const NodeTypeSelect: React.FC<{
   return (
     <TypeSelect
       value={fromSlug(props.value)}
+      data-testId="header-select"
       onChange={(ev) => {
         props.onChange(ev.target.value);
       }}