diff --git a/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx b/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
index 81923dc459..788c7c5818 100644
--- a/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
@@ -1,9 +1,9 @@
 import Check from "@mui/icons-material/Check";
 import Box from "@mui/material/Box";
-import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { QuestionAndResponses } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
+import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
 import { PublicProps } from "@planx/components/ui";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";
@@ -14,20 +14,6 @@ import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
 
 import type { Confirmation } from "./model";
 
-const Table = styled("table")(({ theme }) => ({
-  width: "100%",
-  borderCollapse: "collapse",
-  "& tr": {
-    borderBottom: `1px solid ${theme.palette.grey[400]}`,
-    "&:last-of-type": {
-      border: "none",
-    },
-    "& td": {
-      padding: theme.spacing(1.5, 1),
-    },
-  },
-}));
-
 export type Props = PublicProps<Confirmation>;
 
 export default function ConfirmationComponent(props: Props) {
@@ -70,18 +56,14 @@ export default function ConfirmationComponent(props: Props) {
       </Banner>
       <Card>
         {props.details && (
-          <Table>
-            <tbody>
-              {Object.entries(props.details).map((item, i) => (
-                <tr key={i}>
-                  <td>{item[0]}</td>
-                  <td>
-                    <b>{item[1]}</b>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </Table>
+          <SummaryListTable>
+            {Object.entries(props.details).map((item) => (
+              <>
+                <Box component="dt">{item[0]}</Box>
+                <Box component="dd">{item[1]}</Box>
+              </>
+            ))}
+          </SummaryListTable>
         )}
 
         {<FileDownload data={data} filename={sessionId || "application"} />}
diff --git a/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx b/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
index 021906f9b5..1c86fb91a6 100644
--- a/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
@@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
 import { visuallyHidden } from "@mui/utils";
 import Card from "@planx/components/shared/Preview/Card";
 import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
+import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
 import type { PublicProps } from "@planx/components/ui";
 import { Feature } from "@turf/helpers";
 import { useFormik } from "formik";
@@ -15,7 +16,6 @@ import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { handleSubmit } from "pages/Preview/Node";
 import React from "react";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 import type { SiteAddress } from "../FindProperty/model";
 import { FETCH_BLPU_CODES } from "../FindProperty/Public";
@@ -201,41 +201,10 @@ interface PropertyDetail {
 interface PropertyDetailsProps {
   data: PropertyDetail[];
   showPropertyTypeOverride?: boolean;
+  showChangeButton?: boolean;
   overrideAnswer: (fn: string) => void;
 }
 
-// Borrows and tweaks grid style from Review page's `SummaryList`
-const PropertyDetailsList = styled(Box)(({ theme }) => ({
-  display: "grid",
-  gridTemplateColumns: "1fr 2fr 100px",
-  marginTop: theme.spacing(2),
-  marginBottom: theme.spacing(2),
-  "& > *": {
-    borderBottom: `1px solid ${theme.palette.border.main}`,
-    paddingBottom: theme.spacing(1.5),
-    paddingTop: theme.spacing(1.5),
-    verticalAlign: "top",
-    margin: 0,
-  },
-  "& ul": {
-    listStylePosition: "inside",
-    padding: 0,
-    margin: 0,
-  },
-  "& dt": {
-    // left column
-    fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  },
-  "& dd:nth-of-type(n)": {
-    // middle column
-    paddingLeft: "10px",
-  },
-  "& dd:nth-of-type(2n)": {
-    // right column
-    textAlign: "right",
-  },
-}));
-
 function PropertyDetails(props: PropertyDetailsProps) {
   const { data, showPropertyTypeOverride, overrideAnswer } = props;
   const filteredData = data.filter((d) => Boolean(d.detail));
@@ -248,7 +217,7 @@ function PropertyDetails(props: PropertyDetailsProps) {
   };
 
   return (
-    <PropertyDetailsList component="dl">
+    <SummaryListTable showChangeButton={true}>
       {filteredData.map(({ heading, detail, fn }: PropertyDetail) => (
         <React.Fragment key={heading}>
           <Box component="dt">{heading}</Box>
@@ -275,6 +244,6 @@ function PropertyDetails(props: PropertyDetailsProps) {
           </Box>
         </React.Fragment>
       ))}
-    </PropertyDetailsList>
+    </SummaryListTable>
   );
 }
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
index 4b60e55c4b..2f5338895f 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -19,7 +19,7 @@ export default SummaryListsBySections;
 const FIND_PROPERTY_DT = "Property address";
 const DRAW_BOUNDARY_DT = "Location plan";
 
-const Grid = styled("dl", {
+export const SummaryListTable = styled("dl", {
   shouldForwardProp: (prop) => prop !== "showChangeButton",
 })<{ showChangeButton?: boolean }>(({ theme, showChangeButton }) => ({
   display: "grid",
@@ -49,7 +49,7 @@ const Grid = styled("dl", {
   },
   "& dd:nth-of-type(2n)": {
     // right column
-    textAlign: "right",
+    textAlign: showChangeButton ? "right" : "left",
   },
 }));
 
@@ -235,7 +235,7 @@ function SummaryList(props: SummaryListProps) {
 
   return (
     <>
-      <Grid showChangeButton={props.showChangeButton}>
+      <SummaryListTable showChangeButton={props.showChangeButton}>
         {props.summaryBreadcrumbs.map(
           ({ component: Component, nodeId, node, userData }, i) => (
             <React.Fragment key={i}>
@@ -247,7 +247,7 @@ function SummaryList(props: SummaryListProps) {
                 passport={props.passport}
               />
               {props.showChangeButton && (
-                <dd>
+                <Box component="dd">
                   <Link
                     onClick={() => handleChange(nodeId)}
                     component="button"
@@ -263,12 +263,12 @@ function SummaryList(props: SummaryListProps) {
                         "this answer"}
                     </span>
                   </Link>
-                </dd>
+                </Box>
               )}
             </React.Fragment>
           ),
         )}
-      </Grid>
+      </SummaryListTable>
       <ConfirmationDialog
         open={isDialogOpen}
         onClose={handleCloseDialog}
@@ -300,8 +300,8 @@ interface ComponentProps {
 function Question(props: ComponentProps) {
   return (
     <>
-      <dt>{props.node.data.text}</dt>
-      <dd>{getNodeText()}</dd>
+      <Box component="dt">{props.node.data.text}</Box>
+      <Box component="dd">{getNodeText()}</Box>
     </>
   );
 
@@ -323,26 +323,26 @@ function FindProperty(props: ComponentProps) {
       props.passport.data?._address;
     return (
       <>
-        <dt>{FIND_PROPERTY_DT}</dt>
-        <dd>
+        <Box component="dt">{FIND_PROPERTY_DT}</Box>
+        <Box component="dd">
           {`${single_line_address.split(`, ${town}`)[0]}`}
           <br />
           {town}
           <br />
           {postcode}
-        </dd>
+        </Box>
       </>
     );
   } else {
     const { x, y, title } = props.passport.data?._address;
     return (
       <>
-        <dt>{FIND_PROPERTY_DT}</dt>
-        <dd>
+        <Box component="dt">{FIND_PROPERTY_DT}</Box>
+        <Box component="dd">
           {`${title}`}
           <br />
           {`${Math.round(x)} Easting (X), ${Math.round(y)} Northing (Y)`}
-        </dd>
+        </Box>
       </>
     );
   }
@@ -351,14 +351,14 @@ function FindProperty(props: ComponentProps) {
 function Checklist(props: ComponentProps) {
   return (
     <>
-      <dt>{props.node.data.text}</dt>
-      <dd>
+      <Box component="dt">{props.node.data.text}</Box>
+      <Box component="dd">
         <ul>
           {getAnswers(props).map((nodeId, i: number) => (
             <li key={i}>{props.flow[nodeId].data.text}</li>
           ))}
         </ul>
-      </dd>
+      </Box>
     </>
   );
 }
@@ -366,8 +366,8 @@ function Checklist(props: ComponentProps) {
 function TextInput(props: ComponentProps) {
   return (
     <>
-      <dt>{props.node.data.title}</dt>
-      <dd>{getAnswersByNode(props)}</dd>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd">{getAnswersByNode(props)}</Box>
     </>
   );
 }
@@ -375,8 +375,8 @@ function TextInput(props: ComponentProps) {
 function FileUpload(props: ComponentProps) {
   return (
     <>
-      <dt>{props.node.data.title}</dt>
-      <dd>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd">
         <ul>
           {getAnswersByNode(props)?.map((file: any, i: number) => (
             <li key={i}>
@@ -384,7 +384,7 @@ function FileUpload(props: ComponentProps) {
             </li>
           ))}
         </ul>
-      </dd>
+      </Box>
     </>
   );
 }
@@ -392,8 +392,10 @@ function FileUpload(props: ComponentProps) {
 function DateInput(props: ComponentProps) {
   return (
     <>
-      <dt>{props.node.data.title}</dt>
-      <dd>{format(new Date(getAnswersByNode(props)), "d MMMM yyyy")}</dd>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd">
+        {format(new Date(getAnswersByNode(props)), "d MMMM yyyy")}
+      </Box>
     </>
   );
 }
@@ -413,8 +415,8 @@ function DrawBoundary(props: ComponentProps) {
 
   return (
     <>
-      <dt>{DRAW_BOUNDARY_DT}</dt>
-      <dd>
+      <Box component="dt">{DRAW_BOUNDARY_DT}</Box>
+      <Box component="dd">
         {fileName && (
           <span data-testid="uploaded-plan-name">
             Your uploaded file: <b>{fileName}</b>
@@ -443,7 +445,7 @@ function DrawBoundary(props: ComponentProps) {
           !geodata &&
           props.node.data?.hideFileUpload &&
           "Not provided"}
-      </dd>
+      </Box>
     </>
   );
 }
@@ -451,8 +453,10 @@ function DrawBoundary(props: ComponentProps) {
 function NumberInput(props: ComponentProps) {
   return (
     <>
-      <dt>{props.node.data.title}</dt>
-      <dd>{`${getAnswersByNode(props)} ${props.node.data.units ?? ""}`}</dd>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd">{`${getAnswersByNode(props)} ${
+        props.node.data.units ?? ""
+      }`}</Box>
     </>
   );
 }
@@ -463,8 +467,8 @@ function AddressInput(props: ComponentProps) {
 
   return (
     <>
-      <dt>{props.node.data.title}</dt>
-      <dd>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd">
         {line1}
         <br />
         {line2}
@@ -480,7 +484,7 @@ function AddressInput(props: ComponentProps) {
             {country}
           </>
         ) : null}
-      </dd>
+      </Box>
     </>
   );
 }
@@ -492,8 +496,8 @@ function ContactInput(props: ComponentProps) {
 
   return (
     <>
-      <dt>{props.node.data.title}</dt>
-      <dd>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd">
         {[title, firstName, lastName].filter(Boolean).join(" ").trim()}
         <br />
         {organisation ? (
@@ -505,7 +509,7 @@ function ContactInput(props: ComponentProps) {
         {phone}
         <br />
         {email}
-      </dd>
+      </Box>
     </>
   );
 }
@@ -520,8 +524,8 @@ function FileUploadAndLabel(props: ComponentProps) {
 
   return (
     <>
-      <dt>{props.node.data.title}</dt>
-      <dd>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd">
         <ul>
           {uniqueFilenames.length
             ? uniqueFilenames.map((filename, index) => (
@@ -529,7 +533,7 @@ function FileUploadAndLabel(props: ComponentProps) {
               ))
             : "No files uploaded"}
         </ul>
-      </dd>
+      </Box>
     </>
   );
 }
@@ -537,8 +541,8 @@ function FileUploadAndLabel(props: ComponentProps) {
 function Debug(props: ComponentProps) {
   return (
     <>
-      <dt>{JSON.stringify(props.node.data)}</dt>
-      <dd>{JSON.stringify(props.userData?.answers)}</dd>
+      <Box component="dt">{JSON.stringify(props.node.data)}</Box>
+      <Box component="dd">{JSON.stringify(props.userData?.answers)}</Box>
     </>
   );
 }