diff --git a/src/components/molecules/FilterPanel/FilterPanel.tsx b/src/components/molecules/FilterPanel/FilterPanel.tsx
index 9c18cae..704cf2a 100644
--- a/src/components/molecules/FilterPanel/FilterPanel.tsx
+++ b/src/components/molecules/FilterPanel/FilterPanel.tsx
@@ -39,128 +39,146 @@ export interface FilterPanelProps {
  * D-C: Popover for desktop MVP. Mobile Drawer variant planned for later.
  *
  * Used in ProvidersStep, VenueStep, and CoffinsStep.
- *
- * Usage:
- * ```tsx
- * <FilterPanel activeCount={2} onClear={handleClear}>
- *   <TextField select label="Category" ... />
- *   <TextField select label="Price" ... />
- * </FilterPanel>
- * ```
  */
-export const FilterPanel: React.FC<FilterPanelProps> = ({
-  label = 'Filters',
-  activeCount = 0,
-  children,
-  onClear,
-  minWidth = 280,
-  sx,
-}) => {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const open = Boolean(anchorEl);
-  const popoverId = open ? 'filter-panel-popover' : undefined;
+export const FilterPanel = React.forwardRef<HTMLDivElement, FilterPanelProps>(
+  ({ label = 'Filters', activeCount = 0, children, onClear, minWidth = 280, sx }, ref) => {
+    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+    const open = Boolean(anchorEl);
+    const uniqueId = React.useId();
+    const popoverId = `filter-panel-${uniqueId}`;
+    const headingId = `filter-panel-heading-${uniqueId}`;
 
-  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+    const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
 
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
 
-  return (
-    <>
-      {/* Trigger button */}
-      <Box sx={[{ display: 'inline-flex' }, ...(Array.isArray(sx) ? sx : [sx])]}>
-        <Button
-          variant="outlined"
-          color="secondary"
-          size="small"
-          startIcon={<TuneIcon />}
-          onClick={handleOpen}
-          aria-describedby={popoverId}
-          aria-expanded={open}
-          aria-haspopup="dialog"
-        >
-          {label}
-          {activeCount > 0 && (
-            <Badge
-              variant="filled"
-              color="brand"
-              size="small"
-              sx={{ ml: 1 }}
-              aria-label={`${activeCount} active filter${activeCount !== 1 ? 's' : ''}`}
-            >
-              {activeCount}
-            </Badge>
-          )}
-        </Button>
-      </Box>
-
-      {/* Popover panel */}
-      <Popover
-        id={popoverId}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-        slotProps={{
-          paper: {
-            sx: {
-              minWidth,
-              mt: 1,
-              borderRadius: 2,
-              boxShadow: 3,
-            },
-          },
-        }}
-      >
-        {/* Header */}
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            px: 2.5,
-            pt: 2,
-            pb: 1.5,
-          }}
-        >
-          <Typography variant="h6">Filters</Typography>
-          {onClear && activeCount > 0 && (
-            <Link
-              component="button"
-              onClick={() => {
-                onClear();
-              }}
-              underline="hover"
-              sx={{ fontSize: '0.8125rem' }}
-            >
-              Clear all
-            </Link>
-          )}
-        </Box>
-
-        <Divider />
-
-        {/* Filter controls */}
-        <Box sx={{ px: 2.5, py: 2, display: 'flex', flexDirection: 'column', gap: 2.5 }}>
-          {children}
-        </Box>
-
-        <Divider />
-
-        {/* Footer — done button */}
-        <Box sx={{ px: 2.5, py: 1.5, display: 'flex', justifyContent: 'flex-end' }}>
-          <Button variant="contained" size="small" onClick={handleClose}>
-            Done
+    return (
+      <>
+        {/* Trigger button */}
+        <Box ref={ref} sx={[{ display: 'inline-flex' }, ...(Array.isArray(sx) ? sx : [sx])]}>
+          <Button
+            variant="outlined"
+            color="secondary"
+            size="small"
+            startIcon={<TuneIcon />}
+            onClick={handleOpen}
+            aria-controls={open ? popoverId : undefined}
+            aria-expanded={open}
+            aria-haspopup="dialog"
+          >
+            {label}
+            {activeCount > 0 && (
+              <Badge variant="filled" color="brand" size="small" sx={{ ml: 1 }} aria-hidden="true">
+                {activeCount}
+              </Badge>
+            )}
+            {activeCount > 0 && (
+              <Box
+                component="span"
+                sx={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}
+              >
+                {activeCount} active filter{activeCount !== 1 ? 's' : ''}
+              </Box>
+            )}
           </Button>
         </Box>
-      </Popover>
-    </>
-  );
-};
+
+        {/* Popover panel */}
+        <Popover
+          id={popoverId}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+          slotProps={{
+            paper: {
+              sx: {
+                minWidth,
+                maxHeight: '70vh',
+                mt: 1,
+                borderRadius: 2,
+                boxShadow: 3,
+                display: 'flex',
+                flexDirection: 'column',
+              },
+            },
+          }}
+          PaperProps={{
+            role: 'dialog' as const,
+            'aria-labelledby': headingId,
+          }}
+        >
+          {/* Header */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              px: 2.5,
+              pt: 2,
+              pb: 1.5,
+              flexShrink: 0,
+            }}
+          >
+            <Typography id={headingId} variant="h6">
+              {label}
+            </Typography>
+            {onClear && activeCount > 0 && (
+              <Link
+                component="button"
+                onClick={() => {
+                  onClear();
+                }}
+                underline="hover"
+                sx={{ fontSize: (theme: Theme) => theme.typography.caption.fontSize }}
+              >
+                Clear all
+              </Link>
+            )}
+          </Box>
+
+          <Divider />
+
+          {/* Filter controls */}
+          <Box
+            sx={{
+              px: 2.5,
+              py: 2,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2.5,
+              overflowY: 'auto',
+              flex: 1,
+            }}
+          >
+            {children}
+          </Box>
+
+          <Divider />
+
+          {/* Footer — done button */}
+          <Box
+            sx={{ px: 2.5, py: 1.5, display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}
+          >
+            <Button
+              variant="contained"
+              size="small"
+              onClick={handleClose}
+              aria-label="Close filters"
+            >
+              Done
+            </Button>
+          </Box>
+        </Popover>
+      </>
+    );
+  },
+);
 
 FilterPanel.displayName = 'FilterPanel';
 export default FilterPanel;
diff --git a/src/components/organisms/ArrangementDialog/ArrangementDialog.tsx b/src/components/organisms/ArrangementDialog/ArrangementDialog.tsx
index e23cc91..de1eb42 100644
--- a/src/components/organisms/ArrangementDialog/ArrangementDialog.tsx
+++ b/src/components/organisms/ArrangementDialog/ArrangementDialog.tsx
@@ -157,385 +157,412 @@ function getAuthCTALabel(subStep: AuthSubStep): string {
  *
  * Pure presentation component — props in, callbacks out.
  */
-export const ArrangementDialog: React.FC<ArrangementDialogProps> = ({
-  open,
-  onClose,
-  step,
-  onStepChange,
-  provider,
-  selectedPackage,
-  nextSteps = DEFAULT_NEXT_STEPS,
-  isPrePlanning = false,
-  onExplore,
-  authValues,
-  onAuthChange,
-  authErrors,
-  onGoogleSSO,
-  onMicrosoftSSO,
-  onContinue,
-  loading = false,
-  sx,
-}) => {
-  const isEmailOnly = authValues.contactPreference === 'email_only';
+export const ArrangementDialog = React.forwardRef<HTMLDivElement, ArrangementDialogProps>(
+  (
+    {
+      open,
+      onClose,
+      step,
+      onStepChange,
+      provider,
+      selectedPackage,
+      nextSteps = DEFAULT_NEXT_STEPS,
+      isPrePlanning = false,
+      onExplore,
+      authValues,
+      onAuthChange,
+      authErrors,
+      onGoogleSSO,
+      onMicrosoftSSO,
+      onContinue,
+      loading = false,
+      sx,
+    },
+    ref,
+  ) => {
+    const isEmailOnly = authValues.contactPreference === 'email_only';
+    const titleRef = React.useRef<HTMLHeadingElement>(null);
 
-  const handleAuthField = (field: keyof AuthValues, value: string) => {
-    onAuthChange({ ...authValues, [field]: value });
-  };
+    // Focus the dialog title when step changes
+    React.useEffect(() => {
+      if (open && titleRef.current) {
+        titleRef.current.focus();
+      }
+    }, [step, open]);
 
-  return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      maxWidth="sm"
-      fullWidth
-      scroll="body"
-      aria-labelledby="arrangement-dialog-title"
-      sx={sx}
-      PaperProps={{
-        sx: { borderRadius: 3 },
-      }}
-    >
-      {/* ─── Header ─── */}
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          px: 3,
-          pt: 2.5,
-          pb: 1,
+    const handleAuthField = (field: keyof AuthValues, value: string) => {
+      onAuthChange({ ...authValues, [field]: value });
+    };
+
+    return (
+      <Dialog
+        ref={ref}
+        open={open}
+        onClose={onClose}
+        maxWidth="sm"
+        fullWidth
+        scroll="body"
+        aria-labelledby="arrangement-dialog-title"
+        sx={sx}
+        PaperProps={{
+          sx: { borderRadius: 2 },
         }}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          {step === 'auth' && (
-            <IconButton
-              size="small"
-              onClick={() => onStepChange('preview')}
-              aria-label="Back to preview"
-            >
-              <ArrowBackIcon fontSize="small" />
-            </IconButton>
-          )}
-          <Typography id="arrangement-dialog-title" variant="h5">
-            {step === 'preview' ? 'Your selected package' : 'Save your plan'}
-          </Typography>
+        {/* ─── Header ─── */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            px: 3,
+            pt: 2.5,
+            pb: 1,
+          }}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            {step === 'auth' && (
+              <IconButton
+                size="small"
+                onClick={() => onStepChange('preview')}
+                aria-label="Back to preview"
+              >
+                <ArrowBackIcon fontSize="small" />
+              </IconButton>
+            )}
+            <Typography id="arrangement-dialog-title" ref={titleRef} tabIndex={-1} variant="h5">
+              {step === 'preview' ? 'Your selected package' : 'Save your plan'}
+            </Typography>
+          </Box>
+          <IconButton size="small" onClick={onClose} aria-label="Close">
+            <CloseIcon fontSize="small" />
+          </IconButton>
         </Box>
-        <IconButton size="small" onClick={onClose} aria-label="Close">
-          <CloseIcon fontSize="small" />
-        </IconButton>
-      </Box>
 
-      <DialogContent sx={{ px: 3, pb: 3 }}>
-        {/* ═══════════ Step 1: Preview ═══════════ */}
-        {step === 'preview' && (
-          <Box>
-            {/* Provider */}
-            <Box sx={{ mb: 3 }}>
-              <ProviderCardCompact
-                name={provider.name}
-                location={provider.location}
-                imageUrl={provider.imageUrl}
-                rating={provider.rating}
-                reviewCount={provider.reviewCount}
-              />
-            </Box>
+        {/* Screen reader step announcement */}
+        <Box
+          aria-live="polite"
+          aria-atomic="true"
+          sx={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden' }}
+        >
+          {step === 'preview' ? 'Viewing package preview' : 'Create your account'}
+        </Box>
 
-            {/* Package summary */}
-            <Box
-              sx={{
-                bgcolor: 'var(--fa-color-brand-50)',
-                borderRadius: 2,
-                p: 2.5,
-                mb: 3,
-              }}
-            >
+        <DialogContent sx={{ px: 3, pb: 3 }}>
+          {/* ═══════════ Step 1: Preview ═══════════ */}
+          {step === 'preview' && (
+            <Box>
+              {/* Provider */}
+              <Box sx={{ mb: 3 }}>
+                <ProviderCardCompact
+                  name={provider.name}
+                  location={provider.location}
+                  imageUrl={provider.imageUrl}
+                  rating={provider.rating}
+                  reviewCount={provider.reviewCount}
+                />
+              </Box>
+
+              {/* Package summary */}
+              <Box
+                sx={{
+                  bgcolor: 'var(--fa-color-brand-50)',
+                  borderRadius: 2,
+                  p: 2.5,
+                  mb: 3,
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'baseline',
+                    mb: 2,
+                  }}
+                >
+                  <Typography variant="h6">{selectedPackage.name}</Typography>
+                  <Typography variant="h6" color="primary">
+                    ${(selectedPackage.total ?? selectedPackage.price).toLocaleString('en-AU')}
+                  </Typography>
+                </Box>
+
+                {selectedPackage.sections.map((section) => (
+                  <Box key={section.heading} sx={{ mb: 1.5 }}>
+                    <Typography variant="labelSm" color="text.secondary" sx={{ mb: 0.5 }}>
+                      {section.heading}
+                    </Typography>
+                    {section.items.map((item) => (
+                      <Typography key={item.name} variant="body2" sx={{ pl: 1 }}>
+                        {item.name}
+                      </Typography>
+                    ))}
+                  </Box>
+                ))}
+              </Box>
+
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+                You&apos;ll be able to customise everything in the next steps.
+              </Typography>
+
+              {/* What's next */}
+              <Box sx={{ mb: 3 }}>
+                <Typography variant="h6" sx={{ mb: 1.5 }}>
+                  What happens next
+                </Typography>
+                <List disablePadding>
+                  {nextSteps.map((s) => (
+                    <ListItem
+                      key={s.number}
+                      disablePadding
+                      sx={{ mb: 1, alignItems: 'flex-start' }}
+                    >
+                      <ListItemIcon sx={{ minWidth: 36, mt: 0.25 }}>
+                        <Box
+                          sx={{
+                            width: 24,
+                            height: 24,
+                            borderRadius: '50%',
+                            bgcolor: 'var(--fa-color-brand-100)',
+                            color: 'var(--fa-color-brand-700)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '0.75rem',
+                            fontWeight: 600,
+                          }}
+                        >
+                          {s.number}
+                        </Box>
+                      </ListItemIcon>
+                      <ListItemText
+                        primary={s.label}
+                        primaryTypographyProps={{ variant: 'body2', color: 'text.primary' }}
+                      />
+                    </ListItem>
+                  ))}
+                </List>
+              </Box>
+
+              <Divider sx={{ mb: 3 }} />
+
+              {/* CTAs */}
               <Box
                 sx={{
                   display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'baseline',
-                  mb: 2,
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  gap: 2,
+                  justifyContent: 'flex-end',
                 }}
               >
-                <Typography variant="h6">{selectedPackage.name}</Typography>
-                <Typography variant="h6" color="primary">
-                  ${(selectedPackage.total ?? selectedPackage.price).toLocaleString('en-AU')}
-                </Typography>
+                {isPrePlanning && onExplore && (
+                  <Button variant="outlined" color="secondary" size="large" onClick={onExplore}>
+                    Explore other options
+                  </Button>
+                )}
+                <Button
+                  variant="contained"
+                  size="large"
+                  onClick={() => onStepChange('auth')}
+                  loading={loading}
+                >
+                  Continue with this package
+                </Button>
               </Box>
-
-              {selectedPackage.sections.map((section) => (
-                <Box key={section.heading} sx={{ mb: 1.5 }}>
-                  <Typography variant="labelSm" color="text.secondary" sx={{ mb: 0.5 }}>
-                    {section.heading}
-                  </Typography>
-                  {section.items.map((item) => (
-                    <Typography key={item.name} variant="body2" sx={{ pl: 1 }}>
-                      {item.name}
-                    </Typography>
-                  ))}
-                </Box>
-              ))}
             </Box>
+          )}
 
-            <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-              You&apos;ll be able to customise everything in the next steps.
-            </Typography>
-
-            {/* What's next */}
-            <Box sx={{ mb: 3 }}>
-              <Typography variant="h6" sx={{ mb: 1.5 }}>
-                What happens next
-              </Typography>
-              <List disablePadding>
-                {nextSteps.map((s) => (
-                  <ListItem key={s.number} disablePadding sx={{ mb: 1, alignItems: 'flex-start' }}>
-                    <ListItemIcon sx={{ minWidth: 36, mt: 0.25 }}>
-                      <Box
-                        sx={{
-                          width: 24,
-                          height: 24,
-                          borderRadius: '50%',
-                          bgcolor: 'var(--fa-color-brand-100)',
-                          color: 'var(--fa-color-brand-700)',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          fontSize: '0.75rem',
-                          fontWeight: 600,
-                        }}
-                      >
-                        {s.number}
-                      </Box>
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={s.label}
-                      primaryTypographyProps={{ variant: 'body2', color: 'text.primary' }}
-                    />
-                  </ListItem>
-                ))}
-              </List>
-            </Box>
-
-            <Divider sx={{ mb: 3 }} />
-
-            {/* CTAs */}
+          {/* ═══════════ Step 2: Auth ═══════════ */}
+          {step === 'auth' && (
             <Box
-              sx={{
-                display: 'flex',
-                flexDirection: { xs: 'column', sm: 'row' },
-                gap: 2,
-                justifyContent: 'flex-end',
+              component="form"
+              noValidate
+              aria-busy={loading}
+              onSubmit={(e: React.FormEvent) => {
+                e.preventDefault();
+                if (!loading) onContinue();
               }}
             >
-              {isPrePlanning && onExplore && (
-                <Button variant="outlined" color="secondary" size="large" onClick={onExplore}>
-                  Explore other options
-                </Button>
-              )}
-              <Button
-                variant="contained"
-                size="large"
-                onClick={() => onStepChange('auth')}
-                loading={loading}
-              >
-                Continue with this package
-              </Button>
-            </Box>
-          </Box>
-        )}
-
-        {/* ═══════════ Step 2: Auth ═══════════ */}
-        {step === 'auth' && (
-          <Box
-            component="form"
-            noValidate
-            aria-busy={loading}
-            onSubmit={(e: React.FormEvent) => {
-              e.preventDefault();
-              if (!loading) onContinue();
-            }}
-          >
-            <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
-              {isPrePlanning
-                ? 'Save your plan to return and update it anytime.'
-                : 'We need a few details so a funeral arranger can help you with the next steps.'}
-            </Typography>
-
-            {/* SSO buttons */}
-            <Box
-              sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mb: 3 }}
-              role="group"
-              aria-label="Sign in options"
-            >
-              <Button
-                variant="outlined"
-                color="secondary"
-                size="large"
-                fullWidth
-                startIcon={<GoogleIcon />}
-                onClick={onGoogleSSO}
-                type="button"
-              >
-                Continue with Google
-              </Button>
-              <Button
-                variant="outlined"
-                color="secondary"
-                size="large"
-                fullWidth
-                startIcon={<MicrosoftIcon />}
-                onClick={onMicrosoftSSO}
-                type="button"
-              >
-                Continue with Microsoft
-              </Button>
-            </Box>
-
-            <Divider sx={{ my: 3 }}>
-              <Typography variant="body2" color="text.secondary">
-                or
+              <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+                {isPrePlanning
+                  ? 'Save your plan to return and update it anytime.'
+                  : 'We need a few details so a funeral arranger can help you with the next steps.'}
               </Typography>
-            </Divider>
 
-            {/* Email */}
-            <TextField
-              label="Your email address"
-              type="email"
-              value={authValues.email}
-              onChange={(e) => handleAuthField('email', e.target.value)}
-              error={!!authErrors?.email}
-              helperText={authErrors?.email}
-              placeholder="you@example.com"
-              autoComplete="email"
-              inputMode="email"
-              fullWidth
-              required
-              disabled={authValues.subStep !== 'email'}
-              sx={{ mb: 3 }}
-            />
-
-            {/* Details (after email) */}
-            <Collapse in={authValues.subStep === 'details' || authValues.subStep === 'verify'}>
+              {/* SSO buttons */}
               <Box
-                sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, mb: 3 }}
+                sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mb: 3 }}
                 role="group"
-                aria-label="Your details"
+                aria-label="Sign in options"
               >
-                <Typography variant="labelLg" component="h2" sx={{ mb: 0.5 }}>
-                  A few details to save your plan
-                </Typography>
+                <Button
+                  variant="outlined"
+                  color="secondary"
+                  size="large"
+                  fullWidth
+                  startIcon={<GoogleIcon />}
+                  onClick={onGoogleSSO}
+                  type="button"
+                >
+                  Continue with Google
+                </Button>
+                <Button
+                  variant="outlined"
+                  color="secondary"
+                  size="large"
+                  fullWidth
+                  startIcon={<MicrosoftIcon />}
+                  onClick={onMicrosoftSSO}
+                  type="button"
+                >
+                  Continue with Microsoft
+                </Button>
+              </Box>
+
+              <Divider sx={{ my: 3 }}>
+                <Typography variant="body2" color="text.secondary">
+                  or
+                </Typography>
+              </Divider>
+
+              {/* Email */}
+              <TextField
+                label="Your email address"
+                type="email"
+                value={authValues.email}
+                onChange={(e) => handleAuthField('email', e.target.value)}
+                error={!!authErrors?.email}
+                helperText={authErrors?.email}
+                placeholder="you@example.com"
+                autoComplete="email"
+                inputMode="email"
+                fullWidth
+                required
+                disabled={authValues.subStep !== 'email'}
+                sx={{ mb: 3 }}
+              />
+
+              {/* Details (after email) */}
+              <Collapse in={authValues.subStep === 'details' || authValues.subStep === 'verify'}>
+                <Box
+                  sx={{ display: 'flex', flexDirection: 'column', gap: 2.5, mb: 3 }}
+                  role="group"
+                  aria-label="Your details"
+                >
+                  <Typography variant="labelLg" component="h2" sx={{ mb: 0.5 }}>
+                    A few details to save your plan
+                  </Typography>
+
+                  <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}>
+                    <TextField
+                      label="First name"
+                      value={authValues.firstName}
+                      onChange={(e) => handleAuthField('firstName', e.target.value)}
+                      error={!!authErrors?.firstName}
+                      helperText={authErrors?.firstName}
+                      autoComplete="given-name"
+                      fullWidth
+                      required
+                      disabled={authValues.subStep === 'verify'}
+                    />
+                    <TextField
+                      label="Last name"
+                      value={authValues.lastName}
+                      onChange={(e) => handleAuthField('lastName', e.target.value)}
+                      error={!!authErrors?.lastName}
+                      helperText={authErrors?.lastName}
+                      autoComplete="family-name"
+                      fullWidth
+                      required
+                      disabled={authValues.subStep === 'verify'}
+                    />
+                  </Box>
 
-                <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}>
                   <TextField
-                    label="First name"
-                    value={authValues.firstName}
-                    onChange={(e) => handleAuthField('firstName', e.target.value)}
-                    error={!!authErrors?.firstName}
-                    helperText={authErrors?.firstName}
-                    autoComplete="given-name"
+                    label={isEmailOnly ? 'Phone (optional)' : 'Best number to reach you'}
+                    type="tel"
+                    value={authValues.phone}
+                    onChange={(e) => handleAuthField('phone', e.target.value)}
+                    error={!!authErrors?.phone}
+                    helperText={authErrors?.phone}
+                    placeholder="e.g. 0412 345 678"
+                    autoComplete="tel"
+                    inputMode="tel"
                     fullWidth
-                    required
+                    required={!isEmailOnly}
                     disabled={authValues.subStep === 'verify'}
                   />
+
                   <TextField
-                    label="Last name"
-                    value={authValues.lastName}
-                    onChange={(e) => handleAuthField('lastName', e.target.value)}
-                    error={!!authErrors?.lastName}
-                    helperText={authErrors?.lastName}
-                    autoComplete="family-name"
+                    select
+                    label="Contact preference"
+                    value={authValues.contactPreference}
+                    onChange={(e) => handleAuthField('contactPreference', e.target.value)}
+                    fullWidth
+                    disabled={authValues.subStep === 'verify'}
+                  >
+                    <MenuItem value="call_anytime">Call me anytime</MenuItem>
+                    <MenuItem value="email_preferred">Email is preferred</MenuItem>
+                    <MenuItem value="email_only">Only contact by email</MenuItem>
+                  </TextField>
+                </Box>
+              </Collapse>
+
+              {/* Verification */}
+              <Collapse in={authValues.subStep === 'verify'}>
+                <Box sx={{ mb: 3 }} role="group" aria-label="Email verification">
+                  <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                    We&apos;ve sent a 6-digit code to <strong>{authValues.email}</strong>. Please
+                    enter it below.
+                  </Typography>
+
+                  <TextField
+                    label="Verification code"
+                    value={authValues.verificationCode}
+                    onChange={(e) => handleAuthField('verificationCode', e.target.value)}
+                    error={!!authErrors?.verificationCode}
+                    helperText={
+                      authErrors?.verificationCode || 'Check your email for the 6-digit code'
+                    }
+                    placeholder="Enter 6-digit code"
+                    autoComplete="one-time-code"
+                    inputMode="numeric"
                     fullWidth
                     required
-                    disabled={authValues.subStep === 'verify'}
                   />
                 </Box>
+              </Collapse>
 
-                <TextField
-                  label={isEmailOnly ? 'Phone (optional)' : 'Best number to reach you'}
-                  type="tel"
-                  value={authValues.phone}
-                  onChange={(e) => handleAuthField('phone', e.target.value)}
-                  error={!!authErrors?.phone}
-                  helperText={authErrors?.phone}
-                  placeholder="e.g. 0412 345 678"
-                  autoComplete="tel"
-                  inputMode="tel"
-                  fullWidth
-                  required={!isEmailOnly}
-                  disabled={authValues.subStep === 'verify'}
-                />
-
-                <TextField
-                  select
-                  label="Contact preference"
-                  value={authValues.contactPreference}
-                  onChange={(e) => handleAuthField('contactPreference', e.target.value)}
-                  fullWidth
-                  disabled={authValues.subStep === 'verify'}
+              {/* Terms */}
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 3 }}>
+                By continuing, you agree to the{' '}
+                <Box
+                  component="a"
+                  href="#"
+                  sx={{
+                    color: 'var(--fa-color-text-brand)',
+                    textDecoration: 'underline',
+                    fontSize: 'inherit',
+                  }}
                 >
-                  <MenuItem value="call_anytime">Call me anytime</MenuItem>
-                  <MenuItem value="email_preferred">Email is preferred</MenuItem>
-                  <MenuItem value="email_only">Only contact by email</MenuItem>
-                </TextField>
+                  terms and conditions
+                </Box>
+                .
+              </Typography>
+
+              <Divider sx={{ my: 3 }} />
+
+              {/* CTA */}
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                <Button type="submit" variant="contained" size="large" loading={loading}>
+                  {getAuthCTALabel(authValues.subStep)}
+                </Button>
               </Box>
-            </Collapse>
-
-            {/* Verification */}
-            <Collapse in={authValues.subStep === 'verify'}>
-              <Box sx={{ mb: 3 }} role="group" aria-label="Email verification">
-                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                  We&apos;ve sent a 6-digit code to <strong>{authValues.email}</strong>. Please
-                  enter it below.
-                </Typography>
-
-                <TextField
-                  label="Verification code"
-                  value={authValues.verificationCode}
-                  onChange={(e) => handleAuthField('verificationCode', e.target.value)}
-                  error={!!authErrors?.verificationCode}
-                  helperText={
-                    authErrors?.verificationCode || 'Check your email for the 6-digit code'
-                  }
-                  placeholder="Enter 6-digit code"
-                  autoComplete="one-time-code"
-                  inputMode="numeric"
-                  fullWidth
-                  required
-                />
-              </Box>
-            </Collapse>
-
-            {/* Terms */}
-            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 3 }}>
-              By continuing, you agree to the{' '}
-              <Box
-                component="a"
-                href="#"
-                sx={{
-                  color: 'var(--fa-color-text-brand)',
-                  textDecoration: 'underline',
-                  fontSize: 'inherit',
-                }}
-              >
-                terms and conditions
-              </Box>
-              .
-            </Typography>
-
-            <Divider sx={{ my: 3 }} />
-
-            {/* CTA */}
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-              <Button type="submit" variant="contained" size="large" loading={loading}>
-                {getAuthCTALabel(authValues.subStep)}
-              </Button>
             </Box>
-          </Box>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-};
+          )}
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);
 
 ArrangementDialog.displayName = 'ArrangementDialog';
 export default ArrangementDialog;
diff --git a/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx b/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
index e292445..68b0ac7 100644
--- a/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
+++ b/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
@@ -161,6 +161,13 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
 
       {/* CTAs */}
       <Box
+        component="form"
+        noValidate
+        aria-busy={loading}
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          if (!loading) onContinue();
+        }}
         sx={{
           display: 'flex',
           justifyContent: 'space-between',
@@ -170,13 +177,13 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
         }}
       >
         {onSaveAndExit ? (
-          <Button variant="text" color="secondary" onClick={onSaveAndExit}>
+          <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
             Save and continue later
           </Button>
         ) : (
           <Box />
         )}
-        <Button variant="contained" size="large" onClick={onContinue} loading={loading}>
+        <Button type="submit" variant="contained" size="large" loading={loading}>
           Continue
         </Button>
       </Box>
diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx
index 8811446..860b6d6 100644
--- a/src/components/pages/ProvidersStep/ProvidersStep.tsx
+++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx
@@ -145,8 +145,8 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           zIndex: 1,
           bgcolor: 'background.default',
           pb: 1,
-          mx: -3,
-          px: 3,
+          mx: { xs: -2, md: -3 },
+          px: { xs: 2, md: 3 },
         }}
       >
         <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
diff --git a/src/components/pages/VenueStep/VenueStep.tsx b/src/components/pages/VenueStep/VenueStep.tsx
index 35f621c..83dc703 100644
--- a/src/components/pages/VenueStep/VenueStep.tsx
+++ b/src/components/pages/VenueStep/VenueStep.tsx
@@ -214,8 +214,8 @@ export const VenueStep: React.FC<VenueStepProps> = ({
             zIndex: 1,
             bgcolor: 'background.default',
             pb: 1,
-            mx: -3,
-            px: 3,
+            mx: { xs: -2, md: -3 },
+            px: { xs: 2, md: 3 },
           }}
         >
           <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>