diff --git a/apps/backoffice/src/app/features/certificate-designer/components/BlockPropertiesPanel.tsx b/apps/backoffice/src/app/features/certificate-designer/components/BlockPropertiesPanel.tsx
new file mode 100644
index 000000000..8e8684350
--- /dev/null
+++ b/apps/backoffice/src/app/features/certificate-designer/components/BlockPropertiesPanel.tsx
@@ -0,0 +1,191 @@
+import {
+  ActionIcon,
+  ColorInput,
+  Group,
+  NumberInput,
+  Paper,
+  SegmentedControl,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Tooltip,
+} from '@mantine/core';
+import { IconTrash } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+import type { TemplateFieldPlacement, TemplateVariable } from '@ema-platform/api';
+
+interface Props {
+  block: TemplateFieldPlacement | null;
+  variables: TemplateVariable[];
+  onChange: (block: TemplateFieldPlacement) => void;
+  onDelete: (id: string) => void;
+  disabled: boolean;
+}
+
+/** Everything about the selected block that is not its position on the page. */
+export function BlockPropertiesPanel({
+  block,
+  variables,
+  onChange,
+  onDelete,
+  disabled,
+}: Props) {
+  const { t } = useTranslation();
+
+  if (!block) {
+    return (
+      <Paper withBorder p="md" radius="md">
+        <Text size="sm" c="dimmed">
+          {t('designer.noBlockSelected', 'Select a block on the page to edit it.')}
+        </Text>
+      </Paper>
+    );
+  }
+
+  const isLiteral = block.variable === null;
+
+  return (
+    <Paper withBorder p="md" radius="md">
+      <Stack gap="sm">
+        <Group justify="space-between" align="center">
+          <Text fw={600} size="sm">
+            {t('designer.blockProperties', 'Selected block')}
+          </Text>
+          <Tooltip label={t('designer.deleteBlock', 'Remove block')}>
+            <ActionIcon
+              variant="subtle"
+              color="red"
+              disabled={disabled}
+              onClick={() => onDelete(block.id)}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+
+        <SegmentedControl
+          fullWidth
+          size="xs"
+          value={isLiteral ? 'text' : 'variable'}
+          disabled={disabled}
+          onChange={(value) =>
+            onChange(
+              value === 'text'
+                ? { ...block, variable: null, text: block.text ?? '' }
+                : { ...block, variable: variables[0]?.key ?? 'companyName' },
+            )
+          }
+          data={[
+            { value: 'variable', label: t('designer.blockVariable', 'Variable') },
+            { value: 'text', label: t('designer.blockText', 'Fixed text') },
+          ]}
+        />
+
+        {isLiteral ? (
+          <TextInput
+            label={t('designer.blockTextLabel', 'Text')}
+            value={block.text ?? ''}
+            onChange={(e) => onChange({ ...block, text: e.currentTarget.value })}
+            disabled={disabled}
+          />
+        ) : (
+          <Select
+            label={t('designer.blockVariableLabel', 'Variable')}
+            data={variables.map((variable) => ({
+              value: variable.key,
+              label: variable.label,
+            }))}
+            value={block.variable}
+            onChange={(value) => onChange({ ...block, variable: value })}
+            searchable
+            disabled={disabled}
+          />
+        )}
+
+        <Group gap="xs" grow>
+          <NumberInput
+            label={t('designer.blockFontSize', 'Font size')}
+            value={block.fontSize ?? 14}
+            onChange={(value) => onChange({ ...block, fontSize: Number(value) || 14 })}
+            min={4}
+            max={200}
+            disabled={disabled}
+          />
+          <NumberInput
+            label={t('designer.blockWidth', 'Width (%)')}
+            value={block.widthPct}
+            onChange={(value) =>
+              onChange({ ...block, widthPct: Math.min(100, Math.max(1, Number(value) || 1)) })
+            }
+            min={1}
+            max={100}
+            disabled={disabled}
+          />
+        </Group>
+
+        <Group gap="xs" grow>
+          <NumberInput
+            label={t('designer.blockX', 'X (%)')}
+            value={block.xPct}
+            onChange={(value) =>
+              onChange({ ...block, xPct: Math.min(100, Math.max(0, Number(value) || 0)) })
+            }
+            min={0}
+            max={100}
+            decimalScale={2}
+            disabled={disabled}
+          />
+          <NumberInput
+            label={t('designer.blockY', 'Y (%)')}
+            value={block.yPct}
+            onChange={(value) =>
+              onChange({ ...block, yPct: Math.min(100, Math.max(0, Number(value) || 0)) })
+            }
+            min={0}
+            max={100}
+            decimalScale={2}
+            disabled={disabled}
+          />
+        </Group>
+
+        <SegmentedControl
+          fullWidth
+          size="xs"
+          value={block.align ?? 'left'}
+          disabled={disabled}
+          onChange={(value) =>
+            onChange({ ...block, align: value as TemplateFieldPlacement['align'] })
+          }
+          data={[
+            { value: 'left', label: t('designer.alignLeft', 'Left') },
+            { value: 'center', label: t('designer.alignCenter', 'Centre') },
+            { value: 'right', label: t('designer.alignRight', 'Right') },
+          ]}
+        />
+
+        <SegmentedControl
+          fullWidth
+          size="xs"
+          value={block.fontWeight ?? 'normal'}
+          disabled={disabled}
+          onChange={(value) =>
+            onChange({ ...block, fontWeight: value as TemplateFieldPlacement['fontWeight'] })
+          }
+          data={[
+            { value: 'normal', label: t('designer.weightNormal', 'Normal') },
+            { value: 'bold', label: t('designer.weightBold', 'Bold') },
+          ]}
+        />
+
+        <ColorInput
+          label={t('designer.blockColor', 'Colour')}
+          value={block.color ?? '#111111'}
+          onChange={(value) => onChange({ ...block, color: value })}
+          disabled={disabled}
+          format="hex"
+        />
+      </Stack>
+    </Paper>
+  );
+}
diff --git a/apps/backoffice/src/app/features/certificate-designer/components/DesignerToolbar.tsx b/apps/backoffice/src/app/features/certificate-designer/components/DesignerToolbar.tsx
index fc6dff825..8dec84dfe 100644
--- a/apps/backoffice/src/app/features/certificate-designer/components/DesignerToolbar.tsx
+++ b/apps/backoffice/src/app/features/certificate-designer/components/DesignerToolbar.tsx
@@ -2,6 +2,7 @@ import { Button, Group, NumberInput, Select, Tooltip } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import { useLocalized, type LicenseType } from '@ema-platform/api';
+import { groupedTypeOptions } from '../config/designer';
 
 interface Props {
   licenseTypes: LicenseType[];
@@ -34,15 +35,18 @@ export function DesignerToolbar({
 
   return (
     <Group align="flex-end" mb="md" gap="sm">
+      {/* Grouped and searchable because the catalogue is 80+ types, over 50 of
+          them STCW certificates: a flat list buries the CoC/CoP a user is
+          looking for among the logistics operator licences. */}
       <Select
         label={t('designer.licenceType', 'Licence type')}
-        data={licenseTypes.map((type) => ({
-          value: type.id,
-          label: localized(type.name) || type.key,
-        }))}
+        data={groupedTypeOptions(licenseTypes, localized, t)}
         value={typeId}
         onChange={onTypeChange}
-        w={280}
+        searchable
+        nothingFoundMessage={t('designer.noTypeMatch', 'No licence type matches')}
+        maxDropdownHeight={340}
+        w={340}
       />
 
       {/* Validity lives beside the design because it is the other half of
diff --git a/apps/backoffice/src/app/features/certificate-designer/components/TemplateBackgroundPanel.tsx b/apps/backoffice/src/app/features/certificate-designer/components/TemplateBackgroundPanel.tsx
index 422814958..70e603189 100644
--- a/apps/backoffice/src/app/features/certificate-designer/components/TemplateBackgroundPanel.tsx
+++ b/apps/backoffice/src/app/features/certificate-designer/components/TemplateBackgroundPanel.tsx
@@ -1,23 +1,56 @@
-import { Button, Group, Image, Paper, Stack, Text, TextInput } from '@mantine/core';
+import {
+  Button,
+  Group,
+  Image,
+  NumberInput,
+  Paper,
+  SegmentedControl,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from '@mantine/core';
 import { IconPhotoUp, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
+import type { TemplateLogoCorner, TemplateLogoPlacement } from '@ema-platform/api';
 
 interface Props {
   backgroundUrl: string;
   onBackgroundChange: (url: string) => void;
+  logoUrl: string;
+  onLogoChange: (url: string) => void;
+  logoPlacement: TemplateLogoPlacement;
+  onLogoPlacementChange: (placement: TemplateLogoPlacement) => void;
+  landscape: boolean;
+  onLandscapeChange: (landscape: boolean) => void;
   disabled: boolean;
 }
 
+const CORNERS: { value: TemplateLogoCorner; labelKey: string; fallback: string }[] = [
+  { value: 'TOP_LEFT', labelKey: 'designer.cornerTopLeft', fallback: 'Top left' },
+  { value: 'TOP_CENTER', labelKey: 'designer.cornerTopCenter', fallback: 'Top centre' },
+  { value: 'TOP_RIGHT', labelKey: 'designer.cornerTopRight', fallback: 'Top right' },
+  { value: 'BOTTOM_LEFT', labelKey: 'designer.cornerBottomLeft', fallback: 'Bottom left' },
+  { value: 'BOTTOM_RIGHT', labelKey: 'designer.cornerBottomRight', fallback: 'Bottom right' },
+];
+
 /**
- * The artwork a certificate is printed on.
+ * Page-level settings: orientation, the artwork a certificate is printed on,
+ * and the authority's logo.
  *
- * A background, not the certificate itself — the number, QR code and holder's
- * name stay in the template layer above it, so one design serves every
- * certificate it issues.
+ * Orientation belongs here rather than beside the version name because it is a
+ * property of the page, and it decides the shape of the canvas everything else
+ * is positioned on.
  */
 export function TemplateBackgroundPanel({
   backgroundUrl,
   onBackgroundChange,
+  logoUrl,
+  onLogoChange,
+  logoPlacement,
+  onLogoPlacementChange,
+  landscape,
+  onLandscapeChange,
   disabled,
 }: Props) {
   const { t } = useTranslation();
@@ -27,16 +60,44 @@ export function TemplateBackgroundPanel({
       <Stack gap="sm">
         <div>
           <Text fw={600} size="sm">
-            {t('designer.background', 'Background artwork')}
+            {t('designer.pageSetup', 'Page setup')}
           </Text>
           <Text size="xs" c="dimmed">
             {t(
-              'designer.backgroundHint',
-              'Printed underneath the template. Certificate data is drawn on top, so the same artwork serves every certificate.',
+              'designer.pageSetupHint',
+              'Orientation, background artwork and the authority logo. Certificate data is drawn on top, so the same page serves every certificate.',
             )}
           </Text>
         </div>
 
+        <Group gap="xl" align="flex-start">
+          <div>
+            <Text size="sm" fw={500} mb={4}>
+              {t('designer.orientation', 'Orientation')}
+            </Text>
+            <SegmentedControl
+              value={landscape ? 'landscape' : 'portrait'}
+              onChange={(value) => onLandscapeChange(value === 'landscape')}
+              disabled={disabled}
+              data={[
+                {
+                  value: 'portrait',
+                  label: t('designer.portrait', 'Portrait'),
+                },
+                {
+                  value: 'landscape',
+                  label: t('designer.landscape', 'Landscape'),
+                },
+              ]}
+            />
+            <Text size="xs" c="dimmed" mt={4}>
+              {landscape
+                ? t('designer.a4Landscape', 'A4 — 297 × 210 mm')
+                : t('designer.a4Portrait', 'A4 — 210 × 297 mm')}
+            </Text>
+          </div>
+        </Group>
+
         <Group align="flex-end" gap="sm">
           <TextInput
             label={t('designer.backgroundUrl', 'Artwork URL')}
@@ -78,6 +139,86 @@ export function TemplateBackgroundPanel({
             </Group>
           </Paper>
         )}
+
+        <Group align="flex-end" gap="sm">
+          <TextInput
+            label={t('designer.logoUrl', 'Institute logo URL')}
+            placeholder="https://…"
+            value={logoUrl}
+            onChange={(e) => onLogoChange(e.currentTarget.value)}
+            disabled={disabled}
+            style={{ flex: 1 }}
+          />
+          {logoUrl && (
+            <Button
+              variant="subtle"
+              color="red"
+              leftSection={<IconTrash size={16} />}
+              disabled={disabled}
+              onClick={() => onLogoChange('')}
+            >
+              {t('designer.removeLogo', 'Remove')}
+            </Button>
+          )}
+        </Group>
+
+        {logoUrl && (
+          <Group align="flex-end" gap="sm">
+            <Select
+              label={t('designer.logoCorner', 'Logo position')}
+              data={CORNERS.map((corner) => ({
+                value: corner.value,
+                label: t(corner.labelKey, corner.fallback),
+              }))}
+              value={logoPlacement.corner ?? 'TOP_LEFT'}
+              onChange={(value) =>
+                onLogoPlacementChange({
+                  ...logoPlacement,
+                  corner: (value as TemplateLogoCorner) ?? 'TOP_LEFT',
+                })
+              }
+              disabled={disabled}
+              w={170}
+            />
+            <NumberInput
+              label={t('designer.logoWidth', 'Width (% of page)')}
+              value={logoPlacement.widthPct ?? 18}
+              onChange={(value) =>
+                onLogoPlacementChange({
+                  ...logoPlacement,
+                  widthPct: Number(value) || 0,
+                })
+              }
+              min={1}
+              max={100}
+              disabled={disabled}
+              w={150}
+            />
+            <NumberInput
+              label={t('designer.logoOffset', 'Inset (%)')}
+              value={logoPlacement.offsetPct ?? 5}
+              onChange={(value) =>
+                onLogoPlacementChange({
+                  ...logoPlacement,
+                  offsetPct: Number(value) || 0,
+                })
+              }
+              min={0}
+              max={100}
+              disabled={disabled}
+              w={120}
+            />
+            <Image
+              src={logoUrl}
+              alt={t('designer.logoPreview', 'Logo preview')}
+              radius="sm"
+              fit="contain"
+              h={56}
+              w={56}
+              fallbackSrc="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
+            />
+          </Group>
+        )}
       </Stack>
     </Paper>
   );
diff --git a/apps/backoffice/src/app/features/certificate-designer/components/TemplateCanvas.tsx b/apps/backoffice/src/app/features/certificate-designer/components/TemplateCanvas.tsx
new file mode 100644
index 000000000..db0530f2f
--- /dev/null
+++ b/apps/backoffice/src/app/features/certificate-designer/components/TemplateCanvas.tsx
@@ -0,0 +1,288 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, Paper, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import type { TemplateFieldPlacement, TemplateLogoPlacement } from '@ema-platform/api';
+
+interface Props {
+  backgroundUrl: string;
+  logoUrl: string;
+  logoPlacement: TemplateLogoPlacement;
+  landscape: boolean;
+  placements: TemplateFieldPlacement[];
+  selectedId: string | null;
+  onSelect: (id: string | null) => void;
+  onChange: (placements: TemplateFieldPlacement[]) => void;
+  disabled: boolean;
+}
+
+/** A4 aspect ratio, the only page size the renderer is configured for. */
+const A4_RATIO = 297 / 210;
+
+const LOGO_CORNER_STYLE: Record<string, (offset: number) => React.CSSProperties> = {
+  TOP_LEFT: (o) => ({ top: `${o}%`, left: `${o}%` }),
+  TOP_CENTER: (o) => ({ top: `${o}%`, left: '50%', transform: 'translateX(-50%)' }),
+  TOP_RIGHT: (o) => ({ top: `${o}%`, right: `${o}%` }),
+  BOTTOM_LEFT: (o) => ({ bottom: `${o}%`, left: `${o}%` }),
+  BOTTOM_RIGHT: (o) => ({ bottom: `${o}%`, right: `${o}%` }),
+};
+
+type DragState = {
+  id: string;
+  mode: 'move' | 'resize';
+  pointerId: number;
+  /** Grab offset within the block, in percent, so it does not jump on grab. */
+  grabDxPct: number;
+  grabDyPct: number;
+  startWidthPct: number;
+  startXPct: number;
+};
+
+/**
+ * The visual certificate editor.
+ *
+ * Blocks are positioned in percentages of the page box, which is what lets the
+ * same layout render correctly in both orientations and at any zoom: the
+ * canvas scales with its container, and the compiled Handlebars uses the same
+ * percentages against the real A4 page.
+ *
+ * Pointer events rather than HTML5 drag-and-drop — the latter cannot report
+ * continuous positions during a drag, and offers no path to resizing.
+ */
+export function TemplateCanvas({
+  backgroundUrl,
+  logoUrl,
+  logoPlacement,
+  landscape,
+  placements,
+  selectedId,
+  onSelect,
+  onChange,
+  disabled,
+}: Props) {
+  const { t } = useTranslation();
+  const pageRef = useRef<HTMLDivElement>(null);
+  const [drag, setDrag] = useState<DragState | null>(null);
+
+  // Held in a ref as well: the pointer handlers are bound to the window for the
+  // life of a drag, and would otherwise close over a stale placements array.
+  const placementsRef = useRef(placements);
+  placementsRef.current = placements;
+
+  const pointToPct = useCallback((clientX: number, clientY: number) => {
+    const rect = pageRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0 || rect.height === 0) return { xPct: 0, yPct: 0 };
+    return {
+      xPct: ((clientX - rect.left) / rect.width) * 100,
+      yPct: ((clientY - rect.top) / rect.height) * 100,
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!drag) return;
+
+    function handleMove(event: PointerEvent) {
+      if (!drag) return;
+      const { xPct, yPct } = pointToPct(event.clientX, event.clientY);
+
+      onChange(
+        placementsRef.current.map((block) => {
+          if (block.id !== drag.id) return block;
+
+          if (drag.mode === 'resize') {
+            // Width follows the pointer's distance from the block's left edge,
+            // clamped so a block can neither invert nor leave the page.
+            const width = Math.min(
+              100 - drag.startXPct,
+              Math.max(5, xPct - drag.startXPct),
+            );
+            return { ...block, widthPct: Number(width.toFixed(2)) };
+          }
+
+          const nextX = Math.min(
+            100 - block.widthPct,
+            Math.max(0, xPct - drag.grabDxPct),
+          );
+          const nextY = Math.min(99, Math.max(0, yPct - drag.grabDyPct));
+          return {
+            ...block,
+            xPct: Number(nextX.toFixed(2)),
+            yPct: Number(nextY.toFixed(2)),
+          };
+        }),
+      );
+    }
+
+    function handleUp() {
+      setDrag(null);
+    }
+
+    window.addEventListener('pointermove', handleMove);
+    window.addEventListener('pointerup', handleUp);
+    window.addEventListener('pointercancel', handleUp);
+    return () => {
+      window.removeEventListener('pointermove', handleMove);
+      window.removeEventListener('pointerup', handleUp);
+      window.removeEventListener('pointercancel', handleUp);
+    };
+  }, [drag, onChange, pointToPct]);
+
+  function startDrag(
+    event: React.PointerEvent,
+    block: TemplateFieldPlacement,
+    mode: 'move' | 'resize',
+  ) {
+    if (disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    onSelect(block.id);
+    const { xPct, yPct } = pointToPct(event.clientX, event.clientY);
+    setDrag({
+      id: block.id,
+      mode,
+      pointerId: event.pointerId,
+      grabDxPct: xPct - block.xPct,
+      grabDyPct: yPct - block.yPct,
+      startWidthPct: block.widthPct,
+      startXPct: block.xPct,
+    });
+  }
+
+  /** Arrow keys nudge the selected block, for placement finer than a drag. */
+  function handleKeyDown(event: React.KeyboardEvent, block: TemplateFieldPlacement) {
+    if (disabled) return;
+    const step = event.shiftKey ? 5 : 0.5;
+    const deltas: Record<string, [number, number]> = {
+      ArrowLeft: [-step, 0],
+      ArrowRight: [step, 0],
+      ArrowUp: [0, -step],
+      ArrowDown: [0, step],
+    };
+    const delta = deltas[event.key];
+    if (!delta) return;
+    event.preventDefault();
+    onChange(
+      placements.map((candidate) =>
+        candidate.id === block.id
+          ? {
+              ...candidate,
+              xPct: Number(
+                Math.min(100 - candidate.widthPct, Math.max(0, candidate.xPct + delta[0])).toFixed(2),
+              ),
+              yPct: Number(Math.min(99, Math.max(0, candidate.yPct + delta[1])).toFixed(2)),
+            }
+          : candidate,
+      ),
+    );
+  }
+
+  const corner = logoPlacement.corner ?? 'TOP_LEFT';
+  const logoStyle = (LOGO_CORNER_STYLE[corner] ?? LOGO_CORNER_STYLE.TOP_LEFT)(
+    logoPlacement.offsetPct ?? 5,
+  );
+
+  return (
+    <Paper withBorder p="sm" radius="md">
+      <Text size="xs" c="dimmed" mb="xs">
+        {t(
+          'designer.canvasHint',
+          'Drag a block to move it, drag its right edge to resize, or use the arrow keys for fine placement.',
+        )}
+      </Text>
+
+      <Box
+        ref={pageRef}
+        onPointerDown={() => onSelect(null)}
+        style={{
+          position: 'relative',
+          width: '100%',
+          aspectRatio: landscape ? String(A4_RATIO) : String(1 / A4_RATIO),
+          background: '#ffffff',
+          border: '1px solid var(--mantine-color-gray-4)',
+          overflow: 'hidden',
+          // Blocks are positioned against this box, so it must not be static.
+          touchAction: 'none',
+        }}
+      >
+        {backgroundUrl && (
+          <img
+            src={backgroundUrl}
+            alt=""
+            style={{
+              position: 'absolute',
+              inset: 0,
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              pointerEvents: 'none',
+            }}
+          />
+        )}
+
+        {logoUrl && (
+          <img
+            src={logoUrl}
+            alt=""
+            style={{
+              position: 'absolute',
+              width: `${logoPlacement.widthPct ?? 18}%`,
+              pointerEvents: 'none',
+              ...logoStyle,
+            }}
+          />
+        )}
+
+        {placements.map((block) => {
+          const isSelected = block.id === selectedId;
+          return (
+            <div
+              key={block.id}
+              role="button"
+              tabIndex={0}
+              onPointerDown={(event) => startDrag(event, block, 'move')}
+              onKeyDown={(event) => handleKeyDown(event, block)}
+              style={{
+                position: 'absolute',
+                left: `${block.xPct}%`,
+                top: `${block.yPct}%`,
+                width: `${block.widthPct}%`,
+                fontSize: block.fontSize ?? 14,
+                fontWeight: block.fontWeight ?? 'normal',
+                textAlign: block.align ?? 'left',
+                color: block.color ?? '#111111',
+                cursor: disabled ? 'default' : 'move',
+                outline: isSelected
+                  ? '2px solid var(--mantine-color-blue-6)'
+                  : '1px dashed var(--mantine-color-gray-5)',
+                background: isSelected ? 'rgba(34,139,230,0.06)' : 'transparent',
+                boxSizing: 'border-box',
+                padding: 2,
+                lineHeight: 1.3,
+                wordWrap: 'break-word',
+                userSelect: 'none',
+              }}
+            >
+              {block.variable ? `{{${block.variable}}}` : block.text || ' '}
+
+              {isSelected && !disabled && (
+                <span
+                  onPointerDown={(event) => startDrag(event, block, 'resize')}
+                  style={{
+                    position: 'absolute',
+                    right: -4,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    width: 8,
+                    height: 18,
+                    borderRadius: 2,
+                    background: 'var(--mantine-color-blue-6)',
+                    cursor: 'ew-resize',
+                  }}
+                />
+              )}
+            </div>
+          );
+        })}
+      </Box>
+    </Paper>
+  );
+}
diff --git a/apps/backoffice/src/app/features/certificate-designer/components/TemplateVariableList.tsx b/apps/backoffice/src/app/features/certificate-designer/components/TemplateVariableList.tsx
index de76467a4..ff5b3ad3a 100644
--- a/apps/backoffice/src/app/features/certificate-designer/components/TemplateVariableList.tsx
+++ b/apps/backoffice/src/app/features/certificate-designer/components/TemplateVariableList.tsx
@@ -1,4 +1,5 @@
 import { Button, Code, ScrollArea, Stack, Text, Tooltip } from '@mantine/core';
+import { IconPlus } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 
 interface Variable {
@@ -9,11 +10,22 @@ interface Variable {
 interface Props {
   variables: Variable[];
   disabled: boolean;
+  /** Canvas mode: drops a block onto the page. Source mode: inserts at caret. */
+  canvasMode: boolean;
   onInsert: (key: string) => void;
+  onAddBlock: (key: string) => void;
+  onAddTextBlock: () => void;
 }
 
-/** Placeholders the template can carry, inserted at the caret. */
-export function TemplateVariableList({ variables, disabled, onInsert }: Props) {
+/** Placeholders the design can carry — dropped on the page, or typed at the caret. */
+export function TemplateVariableList({
+  variables,
+  disabled,
+  canvasMode,
+  onInsert,
+  onAddBlock,
+  onAddTextBlock,
+}: Props) {
   const { t } = useTranslation();
 
   return (
@@ -22,8 +34,23 @@ export function TemplateVariableList({ variables, disabled, onInsert }: Props) {
         {t('designer.variables', 'Placeholders')}
       </Text>
       <Text size="xs" c="dimmed">
-        {t('designer.variablesHint', 'Click to insert at the cursor.')}
+        {canvasMode
+          ? t('designer.variablesCanvasHint', 'Click to add a block to the page.')
+          : t('designer.variablesHint', 'Click to insert at the cursor.')}
       </Text>
+
+      {canvasMode && (
+        <Button
+          size="compact-xs"
+          variant="light"
+          leftSection={<IconPlus size={13} />}
+          disabled={disabled}
+          onClick={onAddTextBlock}
+        >
+          {t('designer.addTextBlock', 'Fixed text block')}
+        </Button>
+      )}
+
       <ScrollArea.Autosize mah={480} type="hover">
         <Stack gap={4}>
           {variables.map((variable) => (
@@ -33,7 +60,9 @@ export function TemplateVariableList({ variables, disabled, onInsert }: Props) {
                 variant="default"
                 justify="flex-start"
                 disabled={disabled}
-                onClick={() => onInsert(variable.key)}
+                onClick={() =>
+                  canvasMode ? onAddBlock(variable.key) : onInsert(variable.key)
+                }
               >
                 <Code fz={10}>{`{{${variable.key}}}`}</Code>
               </Button>
diff --git a/apps/backoffice/src/app/features/certificate-designer/config/designer.ts b/apps/backoffice/src/app/features/certificate-designer/config/designer.ts
index fb89c7801..07d22cd74 100644
--- a/apps/backoffice/src/app/features/certificate-designer/config/designer.ts
+++ b/apps/backoffice/src/app/features/certificate-designer/config/designer.ts
@@ -1,4 +1,4 @@
-import type { LicenseTemplate } from '@ema-platform/api';
+import type { Bilingual, LicenseCategory, LicenseTemplate, LicenseType } from '@ema-platform/api';
 
 /** Same resolution — and same fallback — the shared RTK Query baseQuery uses. */
 export const API_BASE_URL =
@@ -15,3 +15,57 @@ export const STATUS_COLOR: Record<LicenseTemplate['status'], string> = {
 export function pageOptionsFor(landscape: boolean) {
   return { format: 'A4' as const, landscape, printBackground: true };
 }
+
+/**
+ * Order the category groups appear in, and their fallback labels.
+ *
+ * Seafarer certification sits first: it holds over 50 of the 80-odd licence
+ * types, and it is what the designer is opened for most often. Any category
+ * not listed here still renders — it falls to the end under its own key —
+ * so a new category on the server does not silently hide its types.
+ */
+const CATEGORY_ORDER: { key: LicenseCategory; fallback: string }[] = [
+  { key: 'MARITIME_PERSONNEL', fallback: 'Seafarer certification (CoC / CoP)' },
+  { key: 'CARGO_FREIGHT', fallback: 'Cargo & freight' },
+  { key: 'SHIPPING_AGENCY', fallback: 'Shipping agency' },
+  { key: 'INVESTMENT', fallback: 'Investment & joint ventures' },
+  { key: 'VESSEL_SERVICES', fallback: 'Vessel services' },
+  { key: 'WAIVER_SERVICES', fallback: 'Waiver services' },
+];
+
+/**
+ * The licence-type picker's options, grouped by category.
+ *
+ * Grouping is what makes the picker usable at all: certificates of competency
+ * and proficiency are a different kind of thing from an operator's logistics
+ * licence, and a flat alphabetical list interleaves the two.
+ */
+export function groupedTypeOptions(
+  licenseTypes: LicenseType[],
+  localized: (value?: Bilingual) => string,
+  t: (key: string, fallback: string) => string,
+) {
+  const byCategory = new Map<string, { value: string; label: string }[]>();
+
+  for (const type of licenseTypes) {
+    const option = { value: type.id, label: localized(type.name) || type.key };
+    const bucket = byCategory.get(type.category);
+    if (bucket) bucket.push(option);
+    else byCategory.set(type.category, [option]);
+  }
+
+  const known = CATEGORY_ORDER.map(({ key, fallback }) => ({
+    group: t(`designer.category.${key}`, fallback),
+    items: (byCategory.get(key) ?? []).sort((a, b) => a.label.localeCompare(b.label)),
+  }));
+
+  // Categories the client does not know about yet, so their types stay reachable.
+  const unknown = [...byCategory.entries()]
+    .filter(([key]) => !CATEGORY_ORDER.some((c) => c.key === key))
+    .map(([key, items]) => ({
+      group: key,
+      items: items.sort((a, b) => a.label.localeCompare(b.label)),
+    }));
+
+  return [...known, ...unknown].filter((group) => group.items.length > 0);
+}
diff --git a/apps/backoffice/src/app/features/certificate-designer/config/layout-compiler.ts b/apps/backoffice/src/app/features/certificate-designer/config/layout-compiler.ts
new file mode 100644
index 000000000..9488bcd2f
--- /dev/null
+++ b/apps/backoffice/src/app/features/certificate-designer/config/layout-compiler.ts
@@ -0,0 +1,101 @@
+import type { TemplateFieldPlacement, TemplateLogoPlacement } from '@ema-platform/api';
+
+/**
+ * Client-side twin of the server's `certificate-layout.compiler`.
+ *
+ * The preview route renders whatever `hbsSource` it is handed, so a canvas
+ * layout has to be compiled before it can be previewed — the server only
+ * compiles on save, and previewing unsaved edits is the whole point of the
+ * button. The two implementations must emit the same HTML; the server's copy
+ * is authoritative for what is stored, this one only ever reaches a preview.
+ */
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function pct(value: number | undefined, fallback: number, min = 0): number {
+  if (typeof value !== 'number' || Number.isNaN(value)) return fallback;
+  return Math.min(100, Math.max(min, value));
+}
+
+const CORNER_STYLES: Record<string, (offset: number) => string> = {
+  TOP_LEFT: (o) => `top:${o}%;left:${o}%;`,
+  TOP_CENTER: (o) => `top:${o}%;left:50%;transform:translateX(-50%);`,
+  TOP_RIGHT: (o) => `top:${o}%;right:${o}%;`,
+  BOTTOM_LEFT: (o) => `bottom:${o}%;left:${o}%;`,
+  BOTTOM_RIGHT: (o) => `bottom:${o}%;right:${o}%;`,
+};
+
+function logoHtml(logoUrl: string, placement: TemplateLogoPlacement): string {
+  if (!logoUrl.trim()) return '';
+  const corner = placement.corner ?? 'TOP_LEFT';
+  const width = pct(placement.widthPct, 18);
+  const offset = pct(placement.offsetPct, 5);
+  const position = (CORNER_STYLES[corner] ?? CORNER_STYLES.TOP_LEFT)(offset);
+  return `    <img class="ema-logo" src="${escapeHtml(logoUrl)}" alt="" style="position:absolute;${position}width:${width}%;" />\n`;
+}
+
+function blockHtml(block: TemplateFieldPlacement): string {
+  const x = pct(block.xPct, 0);
+  const y = pct(block.yPct, 0);
+  // Minimum 1%, matching the server compiler: a zero-width block would render
+  // as an invisible sliver rather than as the mistake it is.
+  const width = pct(block.widthPct, 30, 1);
+  const size = block.fontSize ?? 14;
+  const weight = block.fontWeight === 'bold' ? 'bold' : 'normal';
+  const align = block.align ?? 'left';
+  const color = escapeHtml(block.color ?? '#111111');
+
+  const content = block.variable
+    ? `{{${block.variable}}}`
+    : escapeHtml(block.text ?? '');
+
+  const style =
+    `position:absolute;left:${x}%;top:${y}%;width:${width}%;` +
+    `font-size:${size}px;font-weight:${weight};text-align:${align};color:${color};`;
+
+  return `    <div class="ema-block" style="${style}">${content}</div>\n`;
+}
+
+export function compileLayoutToHbs(input: {
+  backgroundUrl: string;
+  logoUrl: string;
+  logoPlacement: TemplateLogoPlacement;
+  fieldPlacements: TemplateFieldPlacement[];
+}): string {
+  const background = input.backgroundUrl.trim()
+    ? `    <img class="ema-background" src="${escapeHtml(input.backgroundUrl)}" alt="" />\n`
+    : '';
+
+  const blocks = input.fieldPlacements.map(blockHtml).join('');
+
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      @page { margin: 0; }
+      html, body { margin: 0; padding: 0; height: 100%; }
+      body { font-family: "Helvetica Neue", Arial, sans-serif; }
+      .ema-page { position: relative; width: 100%; height: 100vh; overflow: hidden; }
+      .ema-background {
+        position: absolute; inset: 0;
+        width: 100%; height: 100%;
+        object-fit: cover;
+      }
+      .ema-block { box-sizing: border-box; line-height: 1.3; word-wrap: break-word; }
+    </style>
+  </head>
+  <body>
+    <div class="ema-page">
+${background}${logoHtml(input.logoUrl, input.logoPlacement)}${blocks}    </div>
+  </body>
+</html>
+`;
+}
diff --git a/apps/backoffice/src/app/features/certificate-designer/hooks/useTemplateDraft.ts b/apps/backoffice/src/app/features/certificate-designer/hooks/useTemplateDraft.ts
index f8d854fc0..19a28fe34 100644
--- a/apps/backoffice/src/app/features/certificate-designer/hooks/useTemplateDraft.ts
+++ b/apps/backoffice/src/app/features/certificate-designer/hooks/useTemplateDraft.ts
@@ -1,5 +1,14 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import type { LicenseTemplate } from '@ema-platform/api';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  LicenseTemplate,
+  TemplateFieldPlacement,
+  TemplateLogoPlacement,
+} from '@ema-platform/api';
+
+/** Stable ids for new blocks; `crypto.randomUUID` is not in every test env. */
+function blockId(): string {
+  return `blk_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`;
+}
 
 /**
  * Editor state for the selected version.
@@ -14,6 +23,10 @@ export function useTemplateDraft(templates: LicenseTemplate[]) {
   const [name, setName] = useState('');
   const [landscape, setLandscape] = useState(true);
   const [backgroundUrl, setBackgroundUrl] = useState('');
+  const [logoUrl, setLogoUrl] = useState('');
+  const [logoPlacement, setLogoPlacement] = useState<TemplateLogoPlacement>({});
+  const [placements, setPlacements] = useState<TemplateFieldPlacement[]>([]);
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
   const editorRef = useRef<HTMLTextAreaElement>(null);
 
   const selected = useMemo(
@@ -37,15 +50,65 @@ export function useTemplateDraft(templates: LicenseTemplate[]) {
     setName(selected.name);
     setLandscape(selected.pageOptions?.landscape ?? true);
     setBackgroundUrl(selected.backgroundUrl ?? '');
+    setLogoUrl(selected.logoUrl ?? '');
+    setLogoPlacement(selected.logoPlacement ?? {});
+    setPlacements(selected.fieldPlacements ?? []);
+    setSelectedBlockId(null);
   }, [selected]);
 
   const isPublished = selected?.status === 'PUBLISHED';
+
+  // Compared as JSON because both are plain data the server round-trips; a
+  // reference check would mark the draft dirty on every render.
+  const placementsChanged =
+    JSON.stringify(placements) !== JSON.stringify(selected?.fieldPlacements ?? []);
+  const logoPlacementChanged =
+    JSON.stringify(logoPlacement) !== JSON.stringify(selected?.logoPlacement ?? {});
+
   const dirty =
     Boolean(selected) &&
     (source !== selected?.hbsSource ||
       name !== selected?.name ||
       landscape !== (selected?.pageOptions?.landscape ?? true) ||
-      backgroundUrl !== (selected?.backgroundUrl ?? ''));
+      backgroundUrl !== (selected?.backgroundUrl ?? '') ||
+      logoUrl !== (selected?.logoUrl ?? '') ||
+      logoPlacementChanged ||
+      placementsChanged);
+
+  /** True once the canvas owns the layout, which locks the raw editor. */
+  const usesCanvas = placements.length > 0;
+
+  const selectedBlock =
+    placements.find((block) => block.id === selectedBlockId) ?? null;
+
+  /** Drops a new block near the top-left, where it is immediately visible. */
+  const addBlock = useCallback((variable: string | null, text?: string) => {
+    const block: TemplateFieldPlacement = {
+      id: blockId(),
+      variable,
+      text,
+      xPct: 10,
+      yPct: 10,
+      widthPct: 30,
+      fontSize: 14,
+      fontWeight: 'normal',
+      align: 'left',
+      color: '#111111',
+    };
+    setPlacements((prev) => [...prev, block]);
+    setSelectedBlockId(block.id);
+  }, []);
+
+  const updateBlock = useCallback((next: TemplateFieldPlacement) => {
+    setPlacements((prev) =>
+      prev.map((block) => (block.id === next.id ? next : block)),
+    );
+  }, []);
+
+  const deleteBlock = useCallback((id: string) => {
+    setPlacements((prev) => prev.filter((block) => block.id !== id));
+    setSelectedBlockId((current) => (current === id ? null : current));
+  }, []);
 
   /** Inserts a placeholder where the caret is, rather than at the end. */
   function insertVariable(key: string) {
@@ -76,6 +139,19 @@ export function useTemplateDraft(templates: LicenseTemplate[]) {
     setLandscape,
     backgroundUrl,
     setBackgroundUrl,
+    logoUrl,
+    setLogoUrl,
+    logoPlacement,
+    setLogoPlacement,
+    placements,
+    setPlacements,
+    selectedBlockId,
+    setSelectedBlockId,
+    selectedBlock,
+    usesCanvas,
+    addBlock,
+    updateBlock,
+    deleteBlock,
     editorRef,
     isPublished,
     dirty,
diff --git a/apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx b/apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx
index 4f8a8a24f..7f49af593 100644
--- a/apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx
+++ b/apps/backoffice/src/app/features/certificate-designer/pages/CertificateDesignerPage.tsx
@@ -1,6 +1,22 @@
 import { useEffect, useState } from 'react';
-import { Container, Group, Stack } from '@mantine/core';
-import { IconAlertCircle } from '@tabler/icons-react';
+import {
+  Alert,
+  Button,
+  Container,
+  Group,
+  Paper,
+  Stack,
+  Tabs,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import {
+  IconAlertCircle,
+  IconCode,
+  IconLayoutBoard,
+  IconLock,
+  IconPlus,
+} from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import {
   extractErrorMessage,
@@ -17,14 +33,17 @@ import {
 } from '@ema-platform/api';
 import { EmptyState, ErrorState, PageHeader } from '@ema-platform/ui';
 import { usePermissions, LICENSE_PERMISSIONS as PERMISSIONS } from '@ema-platform/auth';
+import { BlockPropertiesPanel } from '../components/BlockPropertiesPanel';
 import { DesignerToolbar } from '../components/DesignerToolbar';
 import { NewVersionModal } from '../components/NewVersionModal';
 import { TemplateActionBar } from '../components/TemplateActionBar';
 import { TemplateBackgroundPanel } from '../components/TemplateBackgroundPanel';
+import { TemplateCanvas } from '../components/TemplateCanvas';
 import { TemplateEditor } from '../components/TemplateEditor';
 import { TemplateVariableList } from '../components/TemplateVariableList';
 import { TemplateVersionList } from '../components/TemplateVersionList';
 import { pageOptionsFor } from '../config/designer';
+import { compileLayoutToHbs } from '../config/layout-compiler';
 import { useDesignerActions } from '../hooks/useDesignerActions';
 import { useTemplateDraft } from '../hooks/useTemplateDraft';
 import { useTemplatePreview } from '../hooks/useTemplatePreview';
@@ -72,6 +91,7 @@ export function CertificateDesignerPage() {
   const [newOpen, setNewOpen] = useState(false);
   const [newName, setNewName] = useState('');
   const [validityMonths, setValidityMonths] = useState<number>(12);
+  const [mode, setMode] = useState<'canvas' | 'source'>('canvas');
 
   const selectedType = licenseTypes?.items?.find((type) => type.id === typeId);
 
@@ -156,23 +176,115 @@ export function CertificateDesignerPage() {
             <TemplateBackgroundPanel
               backgroundUrl={draft.backgroundUrl}
               onBackgroundChange={draft.setBackgroundUrl}
-              disabled={editingLocked}
-            />
-
-            <TemplateEditor
-              name={draft.name}
-              onNameChange={draft.setName}
-              source={draft.source}
-              onSourceChange={draft.setSource}
+              logoUrl={draft.logoUrl}
+              onLogoChange={draft.setLogoUrl}
+              logoPlacement={draft.logoPlacement}
+              onLogoPlacementChange={draft.setLogoPlacement}
               landscape={draft.landscape}
               onLandscapeChange={draft.setLandscape}
-              editorRef={draft.editorRef}
               disabled={editingLocked}
-              isPublished={draft.isPublished}
             />
 
+            {/* A published design is immutable by rule -- certificates were
+                issued from it -- so the editor is locked. Without this the
+                screen looks broken rather than deliberately read-only, which
+                is what "edit is not available" turns out to mean. */}
+            {draft.isPublished && (
+              <Alert
+                variant="light"
+                color="blue"
+                icon={<IconLock size={18} />}
+                title={t('designer.liveDesign', 'This is the live design')}
+              >
+                <Stack gap="xs" align="flex-start">
+                  <Text size="sm">
+                    {t(
+                      'designer.liveDesignBody',
+                      'Certificates have been issued from this version, so it cannot be changed. Create a new version to edit — it starts as a copy of this one, and only replaces it when you publish.',
+                    )}
+                  </Text>
+                  {canEdit && (
+                    <Button
+                      size="xs"
+                      leftSection={<IconPlus size={14} />}
+                      onClick={startNewVersion}
+                    >
+                      {t('designer.newVersionFromThis', 'New version from this design')}
+                    </Button>
+                  )}
+                </Stack>
+              </Alert>
+            )}
+
+            <Tabs value={mode} onChange={(value) => setMode(value as 'canvas' | 'source')}>
+              <Tabs.List>
+                <Tabs.Tab value="canvas" leftSection={<IconLayoutBoard size={15} />}>
+                  {t('designer.tabCanvas', 'Visual editor')}
+                </Tabs.Tab>
+                <Tabs.Tab value="source" leftSection={<IconCode size={15} />}>
+                  {t('designer.tabSource', 'HTML source')}
+                </Tabs.Tab>
+              </Tabs.List>
+
+              <Tabs.Panel value="canvas" pt="sm">
+                <Stack gap="sm">
+                  <TextInput
+                    label={t('designer.name', 'Version name')}
+                    value={draft.name}
+                    onChange={(e) => draft.setName(e.currentTarget.value)}
+                    disabled={editingLocked}
+                  />
+                  <TemplateCanvas
+                    backgroundUrl={draft.backgroundUrl}
+                    logoUrl={draft.logoUrl}
+                    logoPlacement={draft.logoPlacement}
+                    landscape={draft.landscape}
+                    placements={draft.placements}
+                    selectedId={draft.selectedBlockId}
+                    onSelect={draft.setSelectedBlockId}
+                    onChange={draft.setPlacements}
+                    disabled={editingLocked}
+                  />
+                  <BlockPropertiesPanel
+                    block={draft.selectedBlock}
+                    variables={variables}
+                    onChange={draft.updateBlock}
+                    onDelete={draft.deleteBlock}
+                    disabled={editingLocked}
+                  />
+                </Stack>
+              </Tabs.Panel>
+
+              <Tabs.Panel value="source" pt="sm">
+                {draft.usesCanvas && (
+                  <Paper withBorder p="xs" mb="sm" bg="var(--mantine-color-yellow-light)">
+                    <Text size="xs">
+                      {t(
+                        'designer.canvasOwnsSource',
+                        'This design is laid out on the visual editor, which regenerates the HTML on every save. Edits made here will be overwritten — remove all blocks first to hand-write the template.',
+                      )}
+                    </Text>
+                  </Paper>
+                )}
+                <TemplateEditor
+                  name={draft.name}
+                  onNameChange={draft.setName}
+                  source={draft.source}
+                  onSourceChange={draft.setSource}
+                  landscape={draft.landscape}
+                  onLandscapeChange={draft.setLandscape}
+                  editorRef={draft.editorRef}
+                  disabled={editingLocked}
+                  isPublished={draft.isPublished}
+                />
+              </Tabs.Panel>
+            </Tabs>
+
             <TemplateActionBar
-              hasSource={Boolean(draft.source.trim())}
+              // A canvas layout has no Handlebars source until it is saved --
+              // the server compiles it -- so gating preview on the source alone
+              // left the button dead for exactly the designs the canvas is for.
+              hasSource={Boolean(draft.source.trim()) || draft.usesCanvas}
               hasSelection={Boolean(draft.selected)}
               isPublished={draft.isPublished}
               dirty={draft.dirty}
@@ -182,7 +294,16 @@ export function CertificateDesignerPage() {
               publishing={publishing}
               onPreview={() =>
                 openPreview({
-                  hbsSource: draft.source,
+                  // A canvas layout is compiled here so the preview shows
+                  // unsaved block moves; the server compiles the stored copy.
+                  hbsSource: draft.usesCanvas
+                    ? compileLayoutToHbs({
+                        backgroundUrl: draft.backgroundUrl,
+                        logoUrl: draft.logoUrl,
+                        logoPlacement: draft.logoPlacement,
+                        fieldPlacements: draft.placements,
+                      })
+                    : draft.source,
                   licenseTypeId: typeId,
                   landscape: draft.landscape,
                 })
@@ -193,9 +314,15 @@ export function CertificateDesignerPage() {
                     updateTemplate({
                       id: draft.selected!.id,
                       name: draft.name,
-                      hbsSource: draft.source,
+                      // The server recompiles the HTML from the blocks when a
+                      // canvas layout is present, so sending the stale source
+                      // alongside it would only fight that.
+                      hbsSource: draft.usesCanvas ? undefined : draft.source,
                       pageOptions: pageOptionsFor(draft.landscape),
                       backgroundUrl: draft.backgroundUrl || undefined,
+                      logoUrl: draft.logoUrl || undefined,
+                      logoPlacement: draft.logoPlacement,
+                      fieldPlacements: draft.placements,
                     }).unwrap(),
                   t('designer.saved', 'Draft saved'),
                 )
@@ -224,7 +351,10 @@ export function CertificateDesignerPage() {
           <TemplateVariableList
             variables={variables}
             disabled={editingLocked}
+            canvasMode={mode === 'canvas'}
             onInsert={draft.insertVariable}
+            onAddBlock={(key) => draft.addBlock(key)}
+            onAddTextBlock={() => draft.addBlock(null, 'Text')}
           />
         </Group>
       )}
diff --git a/apps/backoffice/src/app/features/license-review/config/license-types.ts b/apps/backoffice/src/app/features/license-review/config/license-types.ts
index 66caa6f6f..df2d24688 100644
--- a/apps/backoffice/src/app/features/license-review/config/license-types.ts
+++ b/apps/backoffice/src/app/features/license-review/config/license-types.ts
@@ -4,6 +4,7 @@ import {
   IconFileDescription,
   IconId,
   IconRubberStamp,
+  IconShieldCheck,
   IconShip,
   IconTruck,
   IconUsers,
@@ -112,15 +113,43 @@ const PRESENTATION: Record<string, LicenseTypePresentation> = {
   },
 };
 
+/**
+ * A seafarer certificate is judged on the person, not a company.
+ *
+ * Matched by prefix rather than listed: the catalogue holds over fifty
+ * rank-specific CoC/CoP keys and grows whenever EMA configures another, and an
+ * explicit map would silently fall back to the company presentation — showing
+ * a reviewing officer capital, staff-role and inspection tabs that a
+ * certificate application can never fill.
+ */
+const CERTIFICATE_KEY_PREFIXES = ['COC_', 'COP_', 'GOC_'];
+const CERTIFICATE_SECTIONS: DetailSection[] = ['overview', 'documents'];
+
+function isSeafarerCertificate(key: string): boolean {
+  return (
+    CERTIFICATE_KEY_PREFIXES.some((prefix) => key.startsWith(prefix)) ||
+    key === 'CERTIFICATE_OF_COMPETENCY' ||
+    key === 'CERTIFICATE_OF_PROFICIENCY'
+  );
+}
+
 /** Falls back to a generic presentation so an unseeded type still renders. */
 export function presentationFor(key: string | undefined): LicenseTypePresentation {
-  return (
-    (key && PRESENTATION[key]) || {
-      key: key ?? 'UNKNOWN',
-      icon: IconFileDescription,
-      detailSections: DEFAULT_SECTIONS,
-    }
-  );
+  if (key && PRESENTATION[key]) return PRESENTATION[key];
+
+  if (key && isSeafarerCertificate(key)) {
+    return {
+      key,
+      icon: IconShieldCheck,
+      detailSections: CERTIFICATE_SECTIONS,
+    };
+  }
+
+  return {
+    key: key ?? 'UNKNOWN',
+    icon: IconFileDescription,
+    detailSections: DEFAULT_SECTIONS,
+  };
 }
 
 export const LICENSE_TYPE_KEYS = Object.keys(PRESENTATION);
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 34b86989e..8a7a03e38 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -79,6 +79,7 @@ export const am: Translations = {
     dashboard: "ዳሽቦርድ",
     userManagement: "የተጠቃሚ አስተዳደር",
     seamanBookQueue: "የመርከበኞች መጽሐፍ ወረፋ",
+    btcQueue: "የBTC ወረፋ",
     cocQueue: "የCoC ወረፋ",
     copQueue: "የCoP ወረፋ",
     endorsementCocQueue: "የCoC ማረጋገጫ ወረፋ",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index e69198c85..45ffd001d 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -63,6 +63,7 @@ export const en = {
     dashboard: 'Dashboard',
     userManagement: 'User Management',
     seamanBookQueue: 'Seaman Book Queue',
+    btcQueue: 'BTC Queue',
     vesselRegistrationHeadDashboard: 'Vessel Registration Head Dashboard',
     vesselRegistrationApplicationQueue: 'Vessel Registration Queue',
     vesselRegistrationQueue: 'Vessel Register',
diff --git a/apps/backoffice/src/app/layouts/nav-config.ts b/apps/backoffice/src/app/layouts/nav-config.ts
index ddc1fd7ec..b3f9e77b0 100644
--- a/apps/backoffice/src/app/layouts/nav-config.ts
+++ b/apps/backoffice/src/app/layouts/nav-config.ts
@@ -104,7 +104,8 @@ export const NAV_SECTIONS: NavSection[] = [
       { to: '/licence-review/type/SEAFARER_REGISTRATION', label: 'nav.seafarerRegistrationQueue', icon: IconId, permissions: APPLICATION_QUEUE },
       { to: '/licence-review/type/CERTIFICATE_OF_COMPETENCY', label: 'nav.cocQueue', icon: IconShieldCheck, permissions: APPLICATION_QUEUE },
       { to: '/licence-review/type/CERTIFICATE_OF_PROFICIENCY', label: 'nav.copQueue', icon: IconShieldCheck, permissions: APPLICATION_QUEUE },
-      { to: '/seaman-book-queue', label: 'nav.seamanBookQueue', icon: IconBook2, soon: true, permissions: APPLICATION_QUEUE },
+      { to: '/licence-review/type/SEAMAN_BOOK', label: 'nav.seamanBookQueue', icon: IconBook2, permissions: APPLICATION_QUEUE },
+      { to: '/licence-review/type/BTC_BASIC_TRAINING', label: 'nav.btcQueue', icon: IconShieldCheck, permissions: APPLICATION_QUEUE },
       { to: '/licence-review/type/ENDORSEMENT_COC', label: 'nav.endorsementCocQueue', icon: IconRubberStamp, permissions: APPLICATION_QUEUE },
       { to: '/licence-review/type/ENDORSEMENT_GOC', label: 'nav.endorsementGocQueue', icon: IconRubberStamp, permissions: APPLICATION_QUEUE },
       { to: '/medical-verification', label: 'nav.medicalVerification', icon: IconHeart, permissions: [P.VERIFY_SEAFARER_RECORDS] },
diff --git a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
index e3ac1bf0f..e53367d8a 100644
--- a/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
+++ b/apps/portal/src/app/features/licensing/components/LicenseCatalogue.tsx
@@ -15,10 +15,12 @@ import {
   Tooltip,
 } from '@mantine/core';
 import {
+  IconAnchor,
   IconArrowRight,
   IconBuildingWarehouse,
   IconChevronRight,
   IconFileText,
+  IconShieldOff,
   IconShip,
   IconTrendingUp,
 } from '@tabler/icons-react';
@@ -42,9 +44,12 @@ const CATEGORY_ICONS: Record<LicenseCategory, typeof IconShip> = {
   CARGO_FREIGHT: IconBuildingWarehouse,
   SHIPPING_AGENCY: IconShip,
   INVESTMENT: IconTrendingUp,
-  // Filtered out of this catalogue (requiresOperatorMode is false), listed
-  // only so the record stays total if that ever changes.
+  // The three below are filtered out of this catalogue today
+  // (requiresOperatorMode is false for all of them), and are listed only so
+  // the record stays total if that ever changes.
   MARITIME_PERSONNEL: IconShip,
+  VESSEL_SERVICES: IconAnchor,
+  WAIVER_SERVICES: IconShieldOff,
 };
 
 function formatFee(amount: string | number | null, currency: string): string {
diff --git a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
index 75699d5fb..fb6fe5d6f 100644
--- a/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
@@ -22,6 +22,18 @@ import {
 import { notify, ModalFooter } from '@ema-platform/ui';
 import { useDateDisplayer } from '@ema-platform/shared';
 
+/**
+ * Registrations an applicant makes for themselves rather than for a company.
+ *
+ * Named explicitly rather than inferred from `requiresOperatorMode: false`,
+ * because that flag is also false for things nobody declares up front — a
+ * waiver is requested per shipment, not adopted as an identity.
+ */
+const PERSONAL_REGISTRATION_KEYS = [
+  'SEAFARER_REGISTRATION',
+  'VESSEL_REGISTRATION',
+];
+
 /**
  * The applicant's modes of operation — what they do, and therefore which
  * licences the portal offers them.
@@ -54,14 +66,35 @@ export function OperationsFormContent({
   // the form reflects what was actually stored rather than what was typed.
   useEffect(() => setSelected(declaredIds), [declaredIds]);
 
+  /**
+   * The operator licences, plus the two registrations an applicant declares
+   * for themselves.
+   *
+   * Seafarer and vessel registration are not company modes of operation, so
+   * they carry `requiresOperatorMode: false` and were filtered out here. But
+   * this screen is also where a new applicant says what they are, and someone
+   * registering as a seafarer or a vessel owner had no way to say so — they
+   * landed on an onboarding step that did not describe them.
+   *
+   * Listed separately below rather than mixed in, because declaring "I am a
+   * seafarer" is a different kind of statement from "my company forwards
+   * freight".
+   */
+  const { operatorOptions, personalOptions } = useMemo(() => {
+    const active = (catalogue?.items ?? []).filter((t) => t.isActive);
+    return {
+      operatorOptions: active.filter((t) => t.requiresOperatorMode !== false),
+      personalOptions: active.filter(
+        (t) =>
+          t.requiresOperatorMode === false &&
+          PERSONAL_REGISTRATION_KEYS.includes(t.key),
+      ),
+    };
+  }, [catalogue]);
+
   const options = useMemo(
-    () =>
-      (catalogue?.items ?? [])
-        .filter((t) => t.isActive)
-        // A mode of operation is an operator licence; person-centric
-        // registrations (seafarer) cannot be declared as one.
-        .filter((t) => t.requiresOperatorMode !== false),
-    [catalogue],
+    () => [...operatorOptions, ...personalOptions],
+    [operatorOptions, personalOptions],
   );
 
   const showDate = useDateDisplayer();
@@ -110,7 +143,7 @@ export function OperationsFormContent({
 
         <Checkbox.Group value={selected} onChange={setSelected}>
           <Stack gap="sm">
-            {options.map((type) => (
+            {operatorOptions.map((type) => (
               <Checkbox
                 key={type.id}
                 value={type.id}
@@ -129,6 +162,37 @@ export function OperationsFormContent({
                 }
               />
             ))}
+
+            {/* Kept apart from the company modes above: declaring "I am a
+                seafarer" is a different kind of statement from "my company
+                forwards freight", and running them together reads as though
+                one person could be both at once. */}
+            {personalOptions.length > 0 && (
+              <>
+                <Text size="xs" fw={600} c="dimmed" mt="sm" tt="uppercase">
+                  Registering as an individual or vessel owner
+                </Text>
+                {personalOptions.map((type) => (
+                  <Checkbox
+                    key={type.id}
+                    value={type.id}
+                    label={
+                      <Group gap="xs" wrap="nowrap">
+                        <Text size="sm">{localized(type.name)}</Text>
+                        {declaredIds.includes(type.id) && (
+                          <Badge size="xs" variant="light" color="teal">
+                            Current
+                          </Badge>
+                        )}
+                      </Group>
+                    }
+                    description={
+                      type.description ? localized(type.description) : undefined
+                    }
+                  />
+                ))}
+              </>
+            )}
           </Stack>
         </Checkbox.Group>
 
diff --git a/apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx b/apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx
index ab1898fb2..b8f4624c6 100644
--- a/apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx
+++ b/apps/portal/src/app/features/seaman-book/pages/SeamanBookApplicationPage.tsx
@@ -1,21 +1,8 @@
-import { Container } from '@mantine/core';
-import { FeatureUnavailable } from '@ema-platform/ui';
+import { Navigate } from 'react-router-dom';
 
-/**
- * Placeholder until this feature has a backend.
- *
- * This page previously rendered invented figures/records that were
- * indistinguishable from real ones.
- */
+/** The apply route forwards into the shared licensing wizard. */
 export function SeamanBookApplicationPage() {
-  return (
-    <Container size="lg" py="xl">
-      <FeatureUnavailable
-        title="Apply for a Seaman Book"
-        description="Seaman Book applications are not connected to the backend yet."
-      />
-    </Container>
-  );
+  return <Navigate to="/licensing/SEAMAN_BOOK/apply" replace />;
 }
 
 export default SeamanBookApplicationPage;
diff --git a/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx b/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx
index 889bf7f95..7d1b79324 100644
--- a/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx
+++ b/apps/portal/src/app/features/seaman-book/pages/SeamanBookPage.tsx
@@ -1,21 +1,12 @@
-import { Container } from '@mantine/core';
-import { FeatureUnavailable } from '@ema-platform/ui';
+import { Navigate } from 'react-router-dom';
 
 /**
- * Placeholder until this feature has a backend.
- *
- * This page previously rendered hardcoded sample records, which were
- * indistinguishable from real ones.
+ * The seaman book rides the config-driven licensing flow, like every other
+ * issued document, so this route forwards to it rather than duplicating the
+ * wizard. Kept as a route because the nav and older links point here.
  */
 export function SeamanBookPage() {
-  return (
-    <Container size="lg" py="xl">
-      <FeatureUnavailable
-        title="Seaman Book"
-        description="Seaman Book applications are not connected to the backend yet."
-      />
-    </Container>
-  );
+  return <Navigate to="/licensing/SEAMAN_BOOK/apply" replace />;
 }
 
 export default SeamanBookPage;
diff --git a/apps/portal/src/app/i18n/locales/am.ts b/apps/portal/src/app/i18n/locales/am.ts
index 316757c79..0ec13e191 100644
--- a/apps/portal/src/app/i18n/locales/am.ts
+++ b/apps/portal/src/app/i18n/locales/am.ts
@@ -55,6 +55,8 @@ export const am: Translations = {
     seaRecords: 'የባህር መዝገቦቼ',
     myApplication: 'ማመልከቻዬ',
     certificates: 'የምስክር ወረቀቶች',
+    seamanBook: 'የመርከበኛ መጽሐፍ',
+    btc: 'መሠረታዊ ሥልጠና ምስክር ወረቀት',
     endorsements: 'ማረጋገጫዎች',
     vesselRegistrations: 'የመርከብ ምዝገባ',
     vesselTransfers: 'የመርከብ ባለቤትነት ዝውውር',
diff --git a/apps/portal/src/app/i18n/locales/en.ts b/apps/portal/src/app/i18n/locales/en.ts
index c5695efe3..8ea1b47bf 100644
--- a/apps/portal/src/app/i18n/locales/en.ts
+++ b/apps/portal/src/app/i18n/locales/en.ts
@@ -54,6 +54,8 @@ export const en = {
     mtoLicense: 'MTO License',
     waiver: 'Waiver',
     certificates: 'Certificates',
+    seamanBook: 'Seaman Book',
+    btc: 'Basic Training Certificate',
     endorsements: 'Endorsements',
     vesselRegistrations: 'Vessel Registration',
     vesselTransfers: 'Vessel Transfers',
diff --git a/apps/portal/src/app/layouts/PortalLayout.tsx b/apps/portal/src/app/layouts/PortalLayout.tsx
index 76b2d67be..e9ee21833 100644
--- a/apps/portal/src/app/layouts/PortalLayout.tsx
+++ b/apps/portal/src/app/layouts/PortalLayout.tsx
@@ -3,6 +3,7 @@ import { useDisclosure } from "@mantine/hooks";
 import {
   IconArrowsExchange,
   IconBell,
+  IconBook2,
   IconFolderOpen,
   IconHeadset,
   IconHome2,
@@ -76,7 +77,8 @@ const NAV_SECTIONS: { label?: string; items: PortalNavItem[] }[] = [
     items: [
       { to: '/seafarer-registration', label: 'Seafarer Registration', i18nKey: 'nav.seafarerRegistration', icon: IconList, permissions: [P.APPLY_SEAFARER_REGISTRATION] },
       { to: '/seafarer/records', label: 'My Sea Records', i18nKey: 'nav.seaRecords', icon: IconList, permissions: [P.VIEW_OWN_SEA_SERVICE, P.VIEW_OWN_MEDICAL] },
-      { to: '/seaman-book', label: 'Seaman Book', i18nKey: 'nav.myApplication', icon: IconSend, soon: true, permissions: [P.VIEW_OWN_SEA_SERVICE, P.VIEW_OWN_MEDICAL] },
+      { to: '/seaman-book', label: 'Seaman Book', i18nKey: 'nav.seamanBook', icon: IconBook2, permissions: [P.VIEW_OWN_SEA_SERVICE, P.VIEW_OWN_MEDICAL] },
+      { to: '/licensing/BTC_BASIC_TRAINING/apply', label: 'Basic Training Certificate', i18nKey: 'nav.btc', icon: IconShieldCheck, permissions: [P.VIEW_OWN_CERTIFICATES] },
       { to: '/certificates', label: 'Certificates', i18nKey: 'nav.certificates', icon: IconShieldCheck, permissions: [P.VIEW_OWN_CERTIFICATES] },
       { to: '/exams', label: 'Examinations', i18nKey: 'nav.exams', icon: IconList, permissions: [P.VIEW_OWN_EXAM, P.APPLY_EXAM] },
       { to: '/endorsements', label: 'Endorsements', i18nKey: 'nav.endorsements', icon: IconRubberStamp, permissions: [P.VIEW_OWN_CERTIFICATES] },
diff --git a/libs/api/src/lib/features/licensing/licensing-api.ts b/libs/api/src/lib/features/licensing/licensing-api.ts
index 07fe65547..3a0b2148d 100644
--- a/libs/api/src/lib/features/licensing/licensing-api.ts
+++ b/libs/api/src/lib/features/licensing/licensing-api.ts
@@ -25,6 +25,8 @@ import type {
   QueueFilter,
   RemarkTargetType,
   SavedQueueView,
+  TemplateFieldPlacement,
+  TemplateLogoPlacement,
   TemplatePageOptions,
   TemplateVariable,
 } from './licensing.types';
@@ -550,6 +552,9 @@ export const licensingApi = baseApi
           hbsSource?: string;
           pageOptions?: TemplatePageOptions;
           backgroundUrl?: string;
+          logoUrl?: string;
+          logoPlacement?: TemplateLogoPlacement;
+          fieldPlacements?: TemplateFieldPlacement[];
         }
       >({
         query: ({ id, ...body }) => ({
diff --git a/libs/api/src/lib/features/licensing/licensing.types.ts b/libs/api/src/lib/features/licensing/licensing.types.ts
index 27b9921e1..306ba17aa 100644
--- a/libs/api/src/lib/features/licensing/licensing.types.ts
+++ b/libs/api/src/lib/features/licensing/licensing.types.ts
@@ -90,7 +90,9 @@ export type LicenseCategory =
   | 'CARGO_FREIGHT'
   | 'SHIPPING_AGENCY'
   | 'INVESTMENT'
-  | 'MARITIME_PERSONNEL';
+  | 'MARITIME_PERSONNEL'
+  | 'VESSEL_SERVICES'
+  | 'WAIVER_SERVICES';
 
 export interface LicenseCategoryDefinition {
   key: LicenseCategory;
@@ -436,6 +438,44 @@ export interface TemplatePageOptions {
   printBackground?: boolean;
 }
 
+/** Corner the institute logo is anchored to. */
+export type TemplateLogoCorner =
+  | 'TOP_LEFT'
+  | 'TOP_CENTER'
+  | 'TOP_RIGHT'
+  | 'BOTTOM_LEFT'
+  | 'BOTTOM_RIGHT';
+
+/** Where the institute logo sits on the certificate. */
+export interface TemplateLogoPlacement {
+  corner?: TemplateLogoCorner;
+  /** Width as a percentage of page width. */
+  widthPct?: number;
+  /** Inset from the anchored corner, as a percentage of page width. */
+  offsetPct?: number;
+}
+
+/**
+ * One positioned block on the designer canvas.
+ *
+ * Percentages rather than pixels, so a layout survives an orientation change:
+ * the canvas and the rendered PDF agree without either knowing the other's
+ * dimensions.
+ */
+export interface TemplateFieldPlacement {
+  id: string;
+  /** Variable rendered here, or null when the block carries literal `text`. */
+  variable: string | null;
+  text?: string;
+  xPct: number;
+  yPct: number;
+  widthPct: number;
+  fontSize?: number;
+  fontWeight?: 'normal' | 'bold';
+  align?: 'left' | 'center' | 'right';
+  color?: string;
+}
+
 /** A certificate design authored in the backoffice. */
 export interface LicenseTemplate {
   id: string;
@@ -449,6 +489,13 @@ export interface LicenseTemplate {
    * certificate — per-certificate data stays in the template layer above it.
    */
   backgroundUrl?: string | null;
+  logoUrl?: string | null;
+  logoPlacement?: TemplateLogoPlacement | null;
+  /**
+   * Blocks positioned on the visual canvas. Null for a design authored as raw
+   * Handlebars — which is how the two editors stay distinguishable.
+   */
+  fieldPlacements?: TemplateFieldPlacement[] | null;
   status: TemplateStatus;
   publishedAt: string | null;
   createdAt: string;