diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
index 5db61ca8ae..da9874f7e2 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Editor/FeeBreakdownSection.tsx
@@ -1,13 +1,134 @@
+import HelpIcon from "@mui/icons-material/Help";
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
+import Box from "@mui/material/Box";
+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 Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { BoldTableRow } from "@planx/components/shared/Table/TableRow";
 import { useFormikContext } from "formik";
 import { hasFeatureFlag } from "lib/featureFlags";
-import React from "react";
+import React, { PropsWithChildren } 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";
+import { VAT_RATE } from "../Public/FeeBreakdown";
+
+const DataField: React.FC<PropsWithChildren> = ({ children }) => (
+  <Typography variant="data" sx={(theme) => ({ fontSize: theme.typography.body3.fontSize, pr: 2 })}>{children}</Typography>
+);
+
+const HelpTooltip: React.FC<{ text: string }> = ({ text }) => (
+  <Tooltip title={text} placement="bottom-end">
+    <HelpIcon color="primary"/>
+  </Tooltip>
+)
+
+const ExampleTable: React.FC = () => (
+  <TableContainer>
+    <Table sx={{ [`& .${tableCellClasses.root}`]: { px: 0 } }} >
+      <TableHead>
+        <BoldTableRow>
+          <TableCell>Description</TableCell>
+          <TableCell align="right">Passport field</TableCell>
+        </BoldTableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Application fee</TableCell>
+          <TableCell align="right" sx={{ display: "flex", alignItems: "center"}}>
+            <HelpTooltip text="The fee will be the calculated amount (if set), or the payable amount" />
+            <DataField>£ application.fee.calculated</DataField>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Reduction</TableCell>
+          <TableCell align="right" sx={{ display: "flex", alignItems: "center" }}>
+            <HelpTooltip text="This is the sum of all reductions applied to the application fee. The list of reductions will be listed below" />
+            <DataField>- £ (calculated - payable)</DataField>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell colSpan={2}>
+            <Box sx={{ pl: 4 }}>
+              <DataField>application.fee.reduction.x.reason</DataField>
+            </Box>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell colSpan={2}>
+            <Box sx={{ pl: 4 }}>
+              <DataField>application.fee.reduction.y.reason</DataField>
+            </Box>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell colSpan={2}>
+            <Box sx={{ pl: 4 }}>
+              <DataField>application.fee.reduction.z.reason</DataField>
+            </Box>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Exemptions</TableCell>
+          <TableCell align="right" sx={{ display: "flex", alignItems: "center" }}>
+            <HelpTooltip text="Exemptions will set the fee to £0.00, and list the reasons below" />
+            <DataField>- £ application.fee.payable</DataField>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell colSpan={2}>
+            <Box sx={{ pl: 4 }}>
+              <DataField>application.fee.exemption.x.reason</DataField>
+            </Box>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell colSpan={2}>
+            <Box sx={{ pl: 4 }}>
+              <DataField>application.fee.exemption.y.reason</DataField>
+            </Box>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell colSpan={2}>
+            <Box sx={{ pl: 4 }}>
+              <DataField>application.fee.exemption.z.reason</DataField>
+            </Box>
+          </TableCell>
+        </TableRow>
+        <BoldTableRow>
+          <TableCell>Total</TableCell>
+          <TableCell align="right" sx={{ display: "flex", alignItems: "center" }}>
+            <HelpTooltip text="This is the sum the applicant will pay via GovPay" />
+            <DataField>£ application.fee.payable</DataField>
+          </TableCell>
+        </BoldTableRow>
+        <TableRow>
+          <TableCell>VAT ({VAT_RATE * 100}%)</TableCell>
+          <TableCell align="right" sx={{ display: "flex", alignItems: "center"}}>
+            <HelpTooltip text='If this value is set to "true" in the flow, we will display the calculated VAT amount' />
+            <DataField>application.fee.payable.includesVAT</DataField>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </TableContainer>
+)
+
+const Details: React.FC = () => (
+  <>
+    <Typography variant="body2" py={2}>The table below describes the structure and passport variables that describe how the fee breakdown is displayed to the user. A validation check will run at publish to ensure the necessary fields are set by your service.</Typography>
+    <ExampleTable />
+  </>
+);
 
 export const FeeBreakdownSection: React.FC = () => {
   const { values, setFieldValue } = useFormikContext<Pay>();
@@ -26,6 +147,9 @@ export const FeeBreakdownSection: React.FC = () => {
             label="Display a breakdown of the fee to the applicant"
           />
         </InputRow>
+        <>
+          {values.showFeeBreakdown && <Details /> }
+        </>
       </ModalSectionContent>
     </ModalSection>
   );
diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
index 2bb415aca3..c7f8be8634 100644
--- a/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
+++ b/editor.planx.uk/src/@planx/components/Pay/Public/FeeBreakdown.tsx
@@ -7,9 +7,9 @@ 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 { BoldTableRow } from "@planx/components/shared/Table/TableRow";
 import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 import { formattedPriceWithCurrencySymbol } from "../model";
 
@@ -20,13 +20,7 @@ const StyledTable = styled(Table)(() => ({
   },
 }));
 
-const BoldTableRow = styled(TableRow)(() => ({
-  [`& .${tableCellClasses.root}`]: {
-    fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  },
-}));
-
-const VAT_RATE = 20;
+export const VAT_RATE = 0.2;
 
 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.";
@@ -70,7 +64,7 @@ const ServiceCharge = () => (
 
 const VAT = () => (
   <TableRow>
-    <TableCell>{`VAT (${VAT_RATE}%)`}</TableCell>
+    <TableCell>{`VAT (${VAT_RATE * 100}%)`}</TableCell>
     <TableCell align="right">-</TableCell>
   </TableRow>
 );
diff --git a/editor.planx.uk/src/@planx/components/shared/Table/TableRow.tsx b/editor.planx.uk/src/@planx/components/shared/Table/TableRow.tsx
new file mode 100644
index 0000000000..93441fc79e
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/shared/Table/TableRow.tsx
@@ -0,0 +1,10 @@
+import { styled } from "@mui/material/styles";
+import { tableCellClasses } from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+
+export const BoldTableRow = styled(TableRow)(() => ({
+  [`& .${tableCellClasses.root}`]: {
+    fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  },
+}));
\ No newline at end of file