diff --git a/src/components/dialogs/report/report-dialog.tsx b/src/components/dialogs/report/report-dialog.tsx
index 3a8d2d5f..54007cdc 100644
--- a/src/components/dialogs/report/report-dialog.tsx
+++ b/src/components/dialogs/report/report-dialog.tsx
@@ -12,7 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useTranslation } from "react-i18next";
-import { FileText, X } from "lucide-react";
+import { FileText, X, Check } from "lucide-react";
 import { ICON } from "@/lib/utils/const";
 import { CANVAS_ID } from "@/components/pixi/canvas/hooks/useCanvasContext";
 import { MarkingsStore } from "@/lib/stores/Markings";
@@ -55,6 +55,16 @@ export function ReportDialog({ className }: ReportDialogProps) {
     const [addressLine4, setAddressLine4] = useState("");
     const [reportLanguage, setReportLanguage] = useState(i18n.language);
 
+    const markingsLeft = MarkingsStore(CANVAS_ID.LEFT).use(state => state.markings);
+    const markingsRight = MarkingsStore(CANVAS_ID.RIGHT).use(state => state.markings);
+
+    const allFeatures = useMemo(() => {
+        const labels = new Set([...markingsLeft.map(m => m.label), ...markingsRight.map(m => m.label)]);
+        return Array.from(labels).sort((a, b) => a - b);
+    },[markingsLeft, markingsRight]);
+
+    const[selectedLabels, setSelectedLabels] = useState<number[]>([]);
+
     useEffect(() => {
         if (!isOpen) return;
         setReportDateTime(formatReportDateTime(new Date()));
@@ -65,38 +75,24 @@ export function ReportDialog({ className }: ReportDialogProps) {
         setAddressLine3(reportDefaults?.addressLine3 ?? "");
         setAddressLine4(reportDefaults?.addressLine4 ?? "");
         setReportLanguage(i18n.language);
-    }, [isOpen, reportDefaults]);
-
-    const workingMode = WorkingModeStore.use(state => state.workingMode);
-    const leftCount = MarkingsStore(CANVAS_ID.LEFT).use(
-        state => state.markings.length
-    );
-    const rightCount = MarkingsStore(CANVAS_ID.RIGHT).use(
-        state => state.markings.length
-    );
+        setSelectedLabels(allFeatures);
+    }, [isOpen, reportDefaults, allFeatures]);
 
-    const matchedFeatures = useMemo(() => {
-        const left = MarkingsStore(CANVAS_ID.LEFT).state.markings;
-        const right = MarkingsStore(CANVAS_ID.RIGHT).state.markings;
-        return getMatchedFeatures(left, right);
-    }, [leftCount, rightCount]);
+    const toggleFeature = (label: number) => {
+        setSelectedLabels(prev => 
+            prev.includes(label) ? prev.filter(l => l !== label) : [...prev, label]
+        );
+    };
 
-    const pairedFeatures = useMemo(() => {
-        const left = MarkingsStore(CANVAS_ID.LEFT).state.markings;
-        const right = MarkingsStore(CANVAS_ID.RIGHT).state.markings;
-        return getPairedByLabel(left, right);
-    }, [leftCount, rightCount]);
+    const matchedFeaturesCount = useMemo(() => 
+        getMatchedFeatures(markingsLeft, markingsRight).length,[markingsLeft, markingsRight]);
 
-    const availableCount = includeMatchedOnly
-        ? matchedFeatures.length
-        : pairedFeatures.length;
-    const selectedCount = availableCount;
     const generateReportLabel = t("Generate report", { ns: "keywords" });
-
+    const workingMode = WorkingModeStore.use(state => state.workingMode);
     const canGenerate =
         workingMode === WORKING_MODE.FINGERPRINT &&
-        leftCount > 0 &&
-        rightCount > 0;
+        markingsLeft.length > 0 &&
+        markingsRight.length > 0;
 
     const onGenerate = async () => {
         if (!canGenerate) return;
@@ -104,7 +100,6 @@ export function ReportDialog({ className }: ReportDialogProps) {
             setIsGenerating(true);
             const now = new Date();
             const timestamp = formatReportDateTime(now);
-            setReportDateTime(timestamp);
             await generateReportPdfWithDialog({
                 includeMatchedOnly,
                 reportDateTime: timestamp,
@@ -117,6 +112,7 @@ export function ReportDialog({ className }: ReportDialogProps) {
                     addressLine3.trim(),
                     addressLine4.trim(),
                 ],
+                selectedLabels,
             });
             toast.success(t("Report generated", { ns: "tooltip" }));
             setIsOpen(false);
@@ -158,209 +154,206 @@ export function ReportDialog({ className }: ReportDialogProps) {
             </DialogTrigger>
 
             <DialogPortal>
-                <DialogOverlay />
-                <DialogContent className="w-[640px] max-w-[92vw] max-h-[90vh] flex flex-col">
-                    <DialogTitle className="text-lg font-semibold">
-                        {t("Report generation", { ns: "keywords" })}
-                    </DialogTitle>
-                    <DialogDescription className="text-sm text-muted-foreground">
-                        {t("Generate PDF report", { ns: "description" })}
-                    </DialogDescription>
-
-                    <div className="mt-4 min-h-0 flex-1 overflow-y-auto pr-1">
-                        <div className="grid gap-3">
-                            <div className="grid gap-1 text-sm">
-                                <div>
-                                    {t("Matched features", { ns: "keywords" })}:{" "}
-                                    <strong>{matchedFeatures.length}</strong>
-                                </div>
-                                <div>
-                                    {t("Selected features", { ns: "keywords" })}
-                                    : <strong>{selectedCount}</strong>
-                                </div>
-                                <div className="text-xs text-muted-foreground">
-                                    {t("Selected features", { ns: "keywords" })}
-                                    : {selectedCount}
-                                </div>
-                            </div>
+                <DialogOverlay className="bg-black/40 backdrop-blur-sm z-50" />
+                <DialogContent className="z-50 w-full sm:w-[880px] max-w-[100vw] sm:max-w-[95vw] max-h-[100dvh] sm:max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden bg-background sm:border-border sm:shadow-2xl rounded-none sm:rounded-xl">
 
-                            <label
-                                htmlFor="include-matched-only"
-                                className="flex items-center gap-2 text-sm"
-                            >
-                                <input
-                                    id="include-matched-only"
-                                    type="checkbox"
-                                    checked={includeMatchedOnly}
-                                    onChange={e =>
-                                        setIncludeMatchedOnly(e.target.checked)
-                                    }
-                                />
-                                {t("Include matched only", { ns: "keywords" })}
-                            </label>
+                    <div className="flex flex-col gap-1.5 p-4 sm:p-6 pb-4 border-b border-border bg-muted/10 shrink-0">
+                        <DialogTitle className="text-xl font-semibold tracking-tight text-foreground pr-8">
+                            {t("Report generation", { ns: "keywords" })}
+                        </DialogTitle>
+                        <DialogDescription className="text-sm text-muted-foreground">
+                            {t("Generate PDF report", { ns: "description" })}
+                        </DialogDescription>
+                    </div>
 
-                            <div className="grid grid-cols-1 gap-3">
-                                <div className="flex flex-col gap-1.5">
-                                    <label
-                                        htmlFor="report-language"
-                                        className="text-sm font-medium"
-                                    >
+                    <div className="flex-1 overflow-y-auto md:overflow-hidden p-4 sm:p-6 grid grid-cols-1 md:grid-cols-[1.1fr_0.9fr] gap-6 md:gap-8 bg-background">
+                        <div className="flex flex-col space-y-5 pb-2">
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div className="flex flex-col justify-end space-y-1.5">
+                                    <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
                                         {t("Language", { ns: "keywords" })}
                                     </label>
                                     <select
-                                        id="report-language"
-                                        className="h-10 rounded-md border border-input bg-background px-3 text-sm"
+                                        className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm hover:border-primary/50 focus:ring-2 focus:ring-primary focus:outline-none transition-all cursor-pointer"
                                         value={reportLanguage}
-                                        onChange={e =>
-                                            setReportLanguage(e.target.value)
-                                        }
+                                        onChange={e => setReportLanguage(e.target.value)}
                                     >
                                         <option value="pl">Polski</option>
                                         <option value="en">English</option>
                                     </select>
                                 </div>
-                                <div className="flex flex-col gap-1.5">
-                                    <label
-                                        htmlFor="report-datetime"
-                                        className="text-sm font-medium"
-                                    >
-                                        {t("Report date and time", {
-                                            ns: "keywords",
-                                        })}
-                                    </label>
-                                    <div className="flex gap-2">
-                                        <Input
-                                            id="report-datetime"
-                                            value={reportDateTime}
-                                            readOnly
-                                            placeholder="30.12.2025 - 15:28:31"
-                                        />
-                                    </div>
-                                </div>
 
-                                <div className="flex flex-col gap-1.5">
-                                    <label
-                                        htmlFor="report-performed-by"
-                                        className="text-sm font-medium"
-                                    >
-                                        {t("Performed by", { ns: "keywords" })}
+                                <div className="flex flex-col justify-end space-y-1.5">
+                                    <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                        {t("Report date and time", { ns: "keywords" })}
                                     </label>
                                     <Input
-                                        id="report-performed-by"
-                                        value={performedBy}
-                                        onChange={e =>
-                                            setPerformedBy(e.target.value)
-                                        }
-                                        placeholder="Jan Kowalski"
+                                        value={reportDateTime}
+                                        readOnly
+                                        className="flex h-10 w-full rounded-md border border-input/60 bg-muted/40 cursor-not-allowed text-sm shadow-sm text-muted-foreground"
                                     />
                                 </div>
+                            </div>
 
-                                <div className="flex flex-col gap-1.5">
-                                    <label
-                                        htmlFor="report-department"
-                                        className="text-sm font-medium"
-                                    >
-                                        {t("Department", { ns: "keywords" })}
+                            <div className="flex flex-col space-y-1.5">
+                                <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                    {t("Performed by", { ns: "keywords" })}
+                                </label>
+                                <Input 
+                                    value={performedBy} 
+                                    onChange={e => setPerformedBy(e.target.value)} 
+                                    className="flex h-10 w-full rounded-md border border-input bg-background shadow-sm hover:border-primary/50 transition-colors" 
+                                />
+                            </div>
+
+                            <div className="flex flex-col space-y-1.5">
+                                <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                    {t("Department", { ns: "keywords" })}
+                                </label>
+                                <Input 
+                                    value={department} 
+                                    onChange={e => setDepartment(e.target.value)} 
+                                    className="flex h-10 w-full rounded-md border border-input bg-background shadow-sm hover:border-primary/50 transition-colors" 
+                                />
+                            </div>
+
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-1">
+                                <div className="flex flex-col space-y-1.5">
+                                    <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                        {t("Address line 1", { ns: "keywords" })}
                                     </label>
-                                    <Input
-                                        id="report-department"
-                                        value={department}
-                                        onChange={e =>
-                                            setDepartment(e.target.value)
-                                        }
-                                        placeholder="Wydzia\u0142 Bada\u0144 Daktyloskopijnych i Traseologicznych"
+                                    <Input 
+                                        value={addressLine1} 
+                                        onChange={e => setAddressLine1(e.target.value)} 
+                                        className="flex h-10 w-full rounded-md border border-input bg-background shadow-sm hover:border-primary/50 transition-colors" 
                                     />
                                 </div>
-
-                                <div className="flex flex-col gap-1.5">
-                                    <label
-                                        htmlFor="report-address-1"
-                                        className="text-sm font-medium"
-                                    >
-                                        {t("Address line 1", {
-                                            ns: "keywords",
-                                        })}
+                                <div className="flex flex-col space-y-1.5">
+                                    <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                        {t("Address line 2", { ns: "keywords" })}
                                     </label>
-                                    <Input
-                                        id="report-address-1"
-                                        value={addressLine1}
-                                        onChange={e =>
-                                            setAddressLine1(e.target.value)
-                                        }
-                                        placeholder="ul. Mi\u0142a 1"
+                                    <Input 
+                                        value={addressLine2} 
+                                        onChange={e => setAddressLine2(e.target.value)} 
+                                        className="flex h-10 w-full rounded-md border border-input bg-background shadow-sm hover:border-primary/50 transition-colors" 
                                     />
                                 </div>
-
-                                <div className="flex flex-col gap-1.5">
-                                    <label
-                                        htmlFor="report-address-2"
-                                        className="text-sm font-medium"
-                                    >
-                                        {t("Address line 2", {
-                                            ns: "keywords",
-                                        })}
+                                <div className="flex flex-col space-y-1.5">
+                                    <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                        {t("Address line 3", { ns: "keywords" })}
                                     </label>
-                                    <Input
-                                        id="report-address-2"
-                                        value={addressLine2}
-                                        onChange={e =>
-                                            setAddressLine2(e.target.value)
-                                        }
-                                        placeholder="02-520 Warszawa"
+                                    <Input 
+                                        value={addressLine3} 
+                                        onChange={e => setAddressLine3(e.target.value)} 
+                                        className="flex h-10 w-full rounded-md border border-input bg-background shadow-sm hover:border-primary/50 transition-colors" 
                                     />
                                 </div>
-
-                                <div className="flex flex-col gap-1.5">
-                                    <label
-                                        htmlFor="report-address-3"
-                                        className="text-sm font-medium"
-                                    >
-                                        {t("Address line 3", {
-                                            ns: "keywords",
-                                        })}
+                                <div className="flex flex-col space-y-1.5">
+                                    <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                        {t("Address line 4", { ns: "keywords" })}
                                     </label>
-                                    <Input
-                                        id="report-address-3"
-                                        value={addressLine3}
-                                        onChange={e =>
-                                            setAddressLine3(e.target.value)
-                                        }
-                                        placeholder=""
+                                    <Input 
+                                        value={addressLine4} 
+                                        onChange={e => setAddressLine4(e.target.value)} 
+                                        className="flex h-10 w-full rounded-md border border-input bg-background shadow-sm hover:border-primary/50 transition-colors" 
                                     />
                                 </div>
+                            </div>
+                        </div>
 
-                                <div className="flex flex-col gap-1.5">
-                                    <label
-                                        htmlFor="report-address-4"
-                                        className="text-sm font-medium"
-                                    >
-                                        {t("Address line 4", {
-                                            ns: "keywords",
-                                        })}
-                                    </label>
-                                    <Input
-                                        id="report-address-4"
-                                        value={addressLine4}
-                                        onChange={e =>
-                                            setAddressLine4(e.target.value)
-                                        }
-                                        placeholder=""
+                        <div className="flex flex-col space-y-4 md:min-h-0 md:h-full">
+                            <div className="bg-card p-4 rounded-lg border border-border flex justify-between items-center shadow-sm shrink-0">
+                                <div className="flex flex-col">
+                                    <span className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                        {t("Matched features", { ns: "keywords" })}
+                                    </span>
+                                    <span className="text-2xl font-bold text-foreground">
+                                        {matchedFeaturesCount}
+                                    </span>
+                                </div>
+                                <div className="w-px h-10 bg-border hidden xs:block"></div>
+                                <div className="flex flex-col items-end">
+                                    <span className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+                                        {t("Selected features", { ns: "keywords" })}
+                                    </span>
+                                    <span className="text-2xl font-bold text-primary">
+                                        {selectedLabels.length} <span className="text-muted-foreground text-lg">/ {allFeatures.length}</span>
+                                    </span>
+                                </div>
+                            </div>
+                            
+                            <label className="flex items-center gap-2.5 cursor-pointer text-sm font-medium w-max hover:text-primary transition-colors shrink-0">
+                                <div className="relative flex items-center justify-center">
+                                    <input
+                                        type="checkbox"
+                                        className="peer appearance-none w-4 h-4 border border-input rounded-sm bg-background checked:bg-primary checked:border-primary transition-all cursor-pointer shadow-sm"
+                                        checked={includeMatchedOnly}
+                                        onChange={e => setIncludeMatchedOnly(e.target.checked)}
                                     />
+                                    <Check className="absolute w-3 h-3 text-primary-foreground opacity-0 peer-checked:opacity-100 pointer-events-none" strokeWidth={3} />
+                                </div>
+                                {t("Include matched only", { ns: "keywords" })}
+                            </label>
+
+                            <div className="md:flex-1 md:min-h-0 rounded-lg border border-border bg-muted/5 p-2 md:overflow-y-auto custom-scrollbar shadow-inner">
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                                    {allFeatures.map((label) => {
+                                        const left = markingsLeft.find(m => m.label === label);
+                                        const right = markingsRight.find(m => m.label === label);
+                                        const isSelected = selectedLabels.includes(label);
+
+                                        return (
+                                            <div 
+                                                key={label}
+                                                onClick={() => toggleFeature(label)}
+                                                className={cn(
+                                                    "flex flex-col gap-2 p-3 rounded-md border cursor-pointer transition-all duration-200 select-none bg-background",
+                                                    isSelected 
+                                                        ? "border-primary ring-1 ring-primary/20 shadow-sm" 
+                                                        : "border-border hover:border-primary/50 hover:bg-muted/30 opacity-80"
+                                                )}
+                                            >
+                                                <div className="flex items-center gap-2.5">
+                                                    <div className={cn(
+                                                        "w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors shadow-sm", 
+                                                        isSelected ? "bg-primary border-primary text-primary-foreground" : "bg-card border-input"
+                                                    )}>
+                                                        {isSelected && <Check size={12} strokeWidth={3} />}
+                                                    </div>
+                                                    <span className={cn(
+                                                        "text-sm font-semibold truncate",
+                                                        isSelected ? "text-foreground" : "text-muted-foreground"
+                                                    )}>
+                                                        {t("Feature", { ns: "keywords" })} #{label}
+                                                    </span>
+                                                </div>
+                                                <div className="flex justify-between pl-6.5 text-xs font-medium">
+                                                    <span className={cn("px-1.5 py-0.5 rounded-sm border", left ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:text-emerald-400" : "bg-muted/50 border-border/50 text-muted-foreground")}>
+                                                        L: {left ? "OK" : "—"}
+                                                    </span>
+                                                    <span className={cn("px-1.5 py-0.5 rounded-sm border", right ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:text-emerald-400" : "bg-muted/50 border-border/50 text-muted-foreground")}>
+                                                        R: {right ? "OK" : "—"}
+                                                    </span>
+                                                </div>
+                                            </div>  
+                                        );
+                                    })}
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <div className="mt-6 flex justify-between shrink-0">
+                    <div className="p-4 sm:px-6 border-t border-border bg-muted/10 flex flex-col-reverse sm:flex-row justify-end gap-3 shrink-0">
                         <DialogClose asChild>
-                            <Button type="button" variant="outline">
+                            <Button type="button" variant="outline" className="w-full sm:w-28 shadow-sm">
                                 {t("Cancel", { ns: "keywords" })}
                             </Button>
                         </DialogClose>
                         <Button
                             type="button"
                             onClick={onGenerate}
-                            disabled={!canGenerate || isGenerating}
+                            className="w-full sm:w-44 shadow-sm"
+                            disabled={!canGenerate || isGenerating || selectedLabels.length === 0}
                         >
                             {isGenerating
                                 ? t("Generating...", { ns: "keywords" })
@@ -368,11 +361,11 @@ export function ReportDialog({ className }: ReportDialogProps) {
                         </Button>
                     </div>
 
-                    <DialogClose className="absolute top-3 right-3">
-                        <X size={ICON.SIZE} strokeWidth={ICON.STROKE_WIDTH} />
+                    <DialogClose className="absolute top-4 right-4 sm:top-6 sm:right-6 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none text-muted-foreground hover:bg-muted p-1">
+                        <X size={20} strokeWidth={ICON.STROKE_WIDTH} />
                     </DialogClose>
                 </DialogContent>
             </DialogPortal>
         </Dialog>
     );
-}
+}
\ No newline at end of file
diff --git a/src/lib/locales/en/keywords.ts b/src/lib/locales/en/keywords.ts
index 5fcb1fdc..d5d57d2e 100644
--- a/src/lib/locales/en/keywords.ts
+++ b/src/lib/locales/en/keywords.ts
@@ -61,6 +61,7 @@ const d: Dictionary = {
     "Include matched only": "Include matched only",
     "Matched features": "Matched features",
     "Selected features": "Selected features",
+    "Feature": "Feature",
     Cancel: "Cancel",
     "Generating...": "Generating...",
     "FFT Spectrum Editor": "FFT Spectrum Editor",
diff --git a/src/lib/locales/pl/keywords.ts b/src/lib/locales/pl/keywords.ts
index 79d4be16..da66aecd 100644
--- a/src/lib/locales/pl/keywords.ts
+++ b/src/lib/locales/pl/keywords.ts
@@ -61,6 +61,7 @@ const d: Dictionary = {
     "Include matched only": "Tylko cechy dopasowane",
     "Matched features": "Cechy dopasowane",
     "Selected features": "Cechy wybrane",
+    "Feature": "Cecha",
     Cancel: "Anuluj",
     "Generating...": "Generowanie...",
     "FFT Spectrum Editor": "Edytor widma (FFT)",
diff --git a/src/lib/locales/translation.ts b/src/lib/locales/translation.ts
index 02014d98..2345131c 100644
--- a/src/lib/locales/translation.ts
+++ b/src/lib/locales/translation.ts
@@ -70,6 +70,7 @@ export type i18nKeywords = Recordify<
     | "Include matched only"
     | "Matched features"
     | "Selected features"
+    | "Feature"
     | "Cancel"
     | "Generating..."
     | "FFT Spectrum Editor"
diff --git a/src/lib/report/generate-report-pdf.ts b/src/lib/report/generate-report-pdf.ts
index e5697b89..5109478f 100644
--- a/src/lib/report/generate-report-pdf.ts
+++ b/src/lib/report/generate-report-pdf.ts
@@ -19,6 +19,7 @@ import { WORKING_MODE } from "@/views/selectMode";
 import { MarkingClass } from "@/lib/markings/MarkingClass";
 import { MarkingType } from "@/lib/markings/MarkingType";
 import { MARKING_CLASS } from "@/lib/markings/MARKING_CLASS";
+import { TracingStore, TracingPath } from "@/lib/stores/Tracing/Tracing.store";
 import {
     clamp,
     formatReportDateTime,
@@ -34,6 +35,7 @@ type ReportGenerationOptions = {
     performedBy: string;
     department: string;
     addressLines: string[];
+    selectedLabels: number[];
 };
 
 type ImageMeta = {
@@ -48,18 +50,15 @@ type ImageMeta = {
 type RenderedImages = {
     originalDataUrl: string;
     allMarkingsCanvas: HTMLCanvasElement;
-    selectedMarkingsCanvas: HTMLCanvasElement;
 };
 
 const PAGE = {
     width: 794,
     height: 1123,
-    margin: 95,
 };
 const LANDSCAPE = {
     width: PAGE.height,
     height: PAGE.width,
-    margin: 70,
 };
 
 const IMAGE_CELL_SIZE = 200;
@@ -158,6 +157,7 @@ const renderImageWithMarkings = async (
     markings: MarkingClass[],
     markingTypes: MarkingType[],
     sizeScale: number,
+    tracingPaths?: TracingPath[], 
     options?: {
         showMarkingLabels?: boolean;
         markingsAlpha?: number;
@@ -180,6 +180,35 @@ const renderImageWithMarkings = async (
     sprite.position.set(0, 0);
     app.stage.addChild(sprite);
 
+    if (tracingPaths && tracingPaths.length > 0) {
+    const tracingContainer = new PIXI.Container();
+
+    tracingPaths.forEach(path => {
+        const g = new PIXI.Graphics();
+        g.lineStyle({
+            width: path.brushSize,
+            color: Number(path.color.replace("#", "0x")),
+            alpha: path.opacity ?? 1,
+            join: PIXI.LINE_JOIN.ROUND,
+            cap: PIXI.LINE_CAP.ROUND,
+        });
+        
+        if (path.points && path.points.length > 0) {
+            const p0 = path.points[0];
+            if (p0) {
+                g.moveTo(p0.x, p0.y);
+                path.points.slice(1).forEach(p => {
+                    if (p) g.lineTo(p.x, p.y);
+                });
+            }
+        }
+        
+        tracingContainer.addChild(g);
+    });
+    
+    app.stage.addChild(tracingContainer);
+}
+
     const g = new PIXI.Graphics();
     g.alpha = markingsAlpha;
     app.stage.addChild(g);
@@ -533,24 +562,39 @@ const createReportRoot = () => {
 const createStyles = () => {
     const style = document.createElement("style");
     style.textContent = `
-        .report-root { position: fixed; left: -10000px; top: 0; width: ${PAGE.width}px; }
-        .report-page { width: ${PAGE.width}px; height: ${PAGE.height}px; background: #fff; color: #111; font-family: "Arial", sans-serif; padding: ${PAGE.margin}px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
-        .report-page.landscape { width: ${LANDSCAPE.width}px; height: ${LANDSCAPE.height}px; padding: ${LANDSCAPE.margin}px; }
-        .report-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 6px; }
-        .section-title { font-size: 12px; font-weight: 700; margin-top: 4px; }
-        .meta-grid { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 11px; }
-        .meta-block { display: grid; gap: 2px; }
-        .software-grid, .input-grid { display: grid; gap: 4px; font-size: 11px; }
-        .counts { display: grid; gap: 2px; font-size: 11px; }
-        .fig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
-        .fig { display: grid; gap: 4px; font-size: 10px; text-align: center; }
-        .fig img { width: 100%; height: auto; border: 1px solid #ddd; }
-        .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+        .report-root { position: fixed; left: -10000px; top: 0; width: ${PAGE.width}px; font-family: "Arial", sans-serif; color: #000; }
+        .report-page { width: ${PAGE.width}px; height: ${PAGE.height}px; background: #fff; padding: 60px 80px; box-sizing: border-box; position: relative; display: block; }
+        .report-page.landscape { width: ${LANDSCAPE.width}px; height: ${LANDSCAPE.height}px; padding: 60px 80px; }
+
+        .report-title { font-size: 26px; font-weight: bold; text-align: center; line-height: 1.3; margin: 0 auto 40px auto; max-width: 500px; }
+        .kv-row { display: flex; margin-bottom: 4px; font-size: 14px; }
+        .kv-label { font-weight: bold; width: 260px; }
+        .kv-value { flex: 1; }
+        .performer-title { font-weight: bold; font-size: 14px; margin-top: 20px; margin-bottom: 2px; }
+        .performer-data { font-size: 14px; line-height: 1.4; }
+        .software-title { font-size: 16px; font-weight: bold; margin-top: 40px; margin-bottom: 15px; }
+        .section-title-large { font-size: 20px; font-weight: bold; margin-top: 40px; margin-bottom: 20px; }
+
+        .section-title { margin-top: 0; margin-bottom: 20px !important; display: block; font-weight: bold; }
+        
+        .overview-grid { margin-top: 20px !important; }
+        
+        .fig { display: grid; gap: 6px; font-size: 14px; }
+        .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
         .overview-grid.landscape { grid-template-columns: 1fr 1fr; align-items: center; }
-        .overview-grid img { width: 100%; height: auto; border: 1px solid #ddd; }
-        .zoom img { width: 100%; height: auto; border: 1px solid #ddd; }
-        .note { font-size: 11px; border-top: 1px solid #ddd; padding-top: 6px; }
-        .table { width: 100%; border-collapse: collapse; font-size: 10px; }
+        
+        .fig img, .overview-grid img { 
+            width: 100%; 
+            height: auto; 
+            border: 1px solid #ccc; 
+            display: block; 
+            margin-top: 10px !important; 
+        }
+        
+        .note { font-size: 11px; border-top: 1px solid #ddd; padding-top: 12px; position: absolute; bottom: 80px; left: 80px; right: 80px; }
+        .footer { position: absolute; bottom: 40px; left: 80px; right: 80px; font-size: 10px; display: flex; justify-content: space-between; }
+
+        .table { width: 100%; border-collapse: collapse; font-size: 10px; margin-top: 20px !important; }
         .table th, .table td { border: 1px solid #ccc; padding: 4px; vertical-align: middle; }
         .feature-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
         .feature-index {
@@ -576,8 +620,7 @@ const createStyles = () => {
             transform: translateY(-7px);
         }
         .feature-type { font-size: 9px; }
-        .feature-image { width: ${IMAGE_CELL_SIZE}px; height: ${IMAGE_CELL_SIZE}px; object-fit: cover; border: 1px solid #ddd; }
-        .footer { margin-top: auto; font-size: 10px; display: flex; justify-content: space-between; }
+        .feature-image { width: ${IMAGE_CELL_SIZE}px; height: ${IMAGE_CELL_SIZE}px; object-fit: cover; border: 1px solid #ddd; display: block; }
     `;
     return style;
 };
@@ -679,11 +722,17 @@ export const generateReportPdfWithDialog = async (
             throw new Error("Load both images before generating the report.");
         }
 
-        stage = "collect-markings";
-        const markingsLeft = MarkingsStore(CANVAS_ID.LEFT).state.markings;
-        const markingsRight = MarkingsStore(CANVAS_ID.RIGHT).state.markings;
+        stage = "collect-markings-and-tracings";
+        const markingsLeft = MarkingsStore(CANVAS_ID.LEFT).state.markings
+            .filter(m => options.selectedLabels.includes(m.label));
+        const markingsRight = MarkingsStore(CANVAS_ID.RIGHT).state.markings
+            .filter(m => options.selectedLabels.includes(m.label));
+            
         const markingTypes = MarkingTypesStore.state.types;
 
+        const leftTracingPaths = TracingStore(CANVAS_ID.LEFT).getState().paths;
+        const rightTracingPaths = TracingStore(CANVAS_ID.RIGHT).getState().paths;
+
         const matched = options.includeMatchedOnly
             ? getMatchedFeatures(markingsLeft, markingsRight)
             : getPairedByLabel(markingsLeft, markingsRight);
@@ -702,27 +751,17 @@ export const generateReportPdfWithDialog = async (
             leftMeta.bytes,
             markingsLeft,
             markingTypes,
-            1.6
+            1.6,
+            leftTracingPaths
         );
         const rightAllCanvas = await renderImageWithMarkings(
             rightMeta.bytes,
             markingsRight,
             markingTypes,
-            1.6
+            1.6,
+            rightTracingPaths
         );
 
-        const leftSelectedCanvas = await renderImageWithMarkings(
-            leftMeta.bytes,
-            selectedFeatures.map(x => x.left),
-            markingTypes,
-            1.6
-        );
-        const rightSelectedCanvas = await renderImageWithMarkings(
-            rightMeta.bytes,
-            selectedFeatures.map(x => x.right),
-            markingTypes,
-            1.6
-        );
         const detailCrops = await Promise.all(
             selectedFeatures.map(async feature => {
                 const [leftSingleCanvas, rightSingleCanvas] = await Promise.all(
@@ -732,6 +771,7 @@ export const generateReportPdfWithDialog = async (
                             [feature.left],
                             markingTypes,
                             1.6,
+                            undefined,
                             { showMarkingLabels: false, markingsAlpha: 0.45 }
                         ),
                         renderImageWithMarkings(
@@ -739,6 +779,7 @@ export const generateReportPdfWithDialog = async (
                             [feature.right],
                             markingTypes,
                             1.6,
+                            undefined,
                             { showMarkingLabels: false, markingsAlpha: 0.45 }
                         ),
                     ]
@@ -833,12 +874,10 @@ export const generateReportPdfWithDialog = async (
         const leftImages: RenderedImages = {
             originalDataUrl: leftOriginal,
             allMarkingsCanvas: leftAllCanvas,
-            selectedMarkingsCanvas: leftSelectedCanvas,
         };
         const rightImages: RenderedImages = {
             originalDataUrl: rightOriginal,
             allMarkingsCanvas: rightAllCanvas,
-            selectedMarkingsCanvas: rightSelectedCanvas,
         };
 
         stage = "report-metadata";
@@ -874,6 +913,7 @@ export const generateReportPdfWithDialog = async (
                 options.department?.trim() || reportSettings?.department || "-"
             )
         );
+
         const addressFallback = [
             reportSettings?.addressLine1,
             reportSettings?.addressLine2,
@@ -882,9 +922,11 @@ export const generateReportPdfWithDialog = async (
         ]
             .map(line => line?.trim())
             .filter(Boolean) as string[];
+        
         const addressLines =
             options.addressLines?.map(line => line.trim()).filter(Boolean) ??
             [];
+
         const address = (
             addressLines.length > 0 ? addressLines : addressFallback
         ).map(line => stripDiacritics(decodeUnicodeEscapes(line)));
@@ -903,49 +945,61 @@ export const generateReportPdfWithDialog = async (
         const page1 = createPage();
         page1.innerHTML = `
         <div class="report-title">${tReport("Technical report title")}</div>
-        <div class="meta-grid">
-            <div>${tReport("Report ID label")} <strong>${reportId}</strong></div>
-            <div>${tReport("Report date and time label")} ${reportDateTime}</div>
-            <div>${tReport("Performed by label")}</div>
-            <div class="meta-block">
-                <div>${performedBy || "-"}</div>
-                <div>${department || "-"}</div>
-                ${addressHtml}
-            </div>
+
+        <div class="kv-row">
+            <div class="kv-label">${tReport("Report ID label")}</div>
+            <div class="kv-value">${reportId}</div>
+        </div>
+        <div class="kv-row">
+            <div class="kv-label">${tReport("Report date and time label")}</div>
+            <div class="kv-value">${reportDateTime}</div>
         </div>
 
-        <div class="section-title">${tReport("Software information")}</div>
-        <div class="software-grid">
-            <div>${tReport("Application name")} Biometrics-Studio</div>
-            <div>${tReport("Application version")} ${appVersion}</div>
+        <div class="performer-title">${tReport("Performed by label")}</div>
+        <div class="performer-data">
+            ${performedBy ? `<div>${performedBy}</div>` : ""}
+            ${department ? `<div>${department}</div>` : ""}
+            ${addressHtml}
         </div>
 
-        <div class="section-title">${tReport("Input material")}</div>
-        <div class="input-grid">
-            <div class="meta-block">
-                <div><strong>${tReport("Image 1")}:</strong></div>
-                <div>${tReport("File name")} ${leftMeta.name}</div>
-                <div>${tReport("Image dimensions")} ${leftMeta.width} x ${leftMeta.height} px</div>
-                <div>${tReport("Size")} ${formatBytes(leftMeta.sizeBytes)}</div>
-                <div>${tReport("Checksum")} ${leftMeta.checksum}</div>
-            </div>
-            <div class="meta-block">
-                <div><strong>${tReport("Image 2")}:</strong></div>
-                <div>${tReport("File name")} ${rightMeta.name}</div>
-                <div>${tReport("Image dimensions")} ${rightMeta.width} x ${rightMeta.height} px</div>
-                <div>${tReport("Size")} ${formatBytes(rightMeta.sizeBytes)}</div>
-                <div>${tReport("Checksum")} ${rightMeta.checksum}</div>
-            </div>
+        <div class="software-title">${tReport("Software information")}:</div>
+        <div class="kv-row">
+            <div class="kv-label">${tReport("Application name")}</div>
+            <div class="kv-value">Biometrics-Studio</div>
+        </div>
+        <div class="kv-row">
+            <div class="kv-label">${tReport("Application version")}</div>
+            <div class="kv-value">${appVersion}</div>
         </div>
 
-        <div class="counts">
-            <div>${tReport("Matched features count")} ${matched.length}</div>
-            <div>${tReport("Selected features count")} ${selectedFeatures.length}</div>
+        <div class="section-title-large">${tReport("Input material")}:</div>
+        
+        <div class="performer-title" style="margin-top: 10px;">${tReport("Image 1")}</div>
+        <div class="kv-row"><div class="kv-label" style="font-weight: normal; width: 220px; padding-left: 20px;">- ${tReport("File name")}</div><div class="kv-value">${leftMeta.name}</div></div>
+        <div class="kv-row"><div class="kv-label" style="font-weight: normal; width: 220px; padding-left: 20px;">- ${tReport("Image dimensions")}</div><div class="kv-value">${leftMeta.width} x ${leftMeta.height} px</div></div>
+        <div class="kv-row"><div class="kv-label" style="font-weight: normal; width: 220px; padding-left: 20px;">- ${tReport("Size")}</div><div class="kv-value">${formatBytes(leftMeta.sizeBytes)}</div></div>
+        <div class="kv-row"><div class="kv-label" style="font-weight: normal; width: 220px; padding-left: 20px;">- ${tReport("Checksum")}</div><div class="kv-value" style="font-family: monospace;">${leftMeta.checksum}</div></div>
+
+        <div class="performer-title" style="margin-top: 15px;">${tReport("Image 2")}</div>
+        <div class="kv-row"><div class="kv-label" style="font-weight: normal; width: 220px; padding-left: 20px;">- ${tReport("File name")}</div><div class="kv-value">${rightMeta.name}</div></div>
+        <div class="kv-row"><div class="kv-label" style="font-weight: normal; width: 220px; padding-left: 20px;">- ${tReport("Image dimensions")}</div><div class="kv-value">${rightMeta.width} x ${rightMeta.height} px</div></div>
+        <div class="kv-row"><div class="kv-label" style="font-weight: normal; width: 220px; padding-left: 20px;">- ${tReport("Size")}</div><div class="kv-value">${formatBytes(rightMeta.sizeBytes)}</div></div>
+        <div class="kv-row"><div class="kv-label" style="font-weight: normal; width: 220px; padding-left: 20px;">- ${tReport("Checksum")}</div><div class="kv-value" style="font-family: monospace;">${rightMeta.checksum}</div></div>
+
+        <div class="counts" style="margin-top: 30px;">
+            <div class="kv-row">
+                <div class="kv-label" style="width: 350px;">${tReport("Matched features count")}</div>
+                <div class="kv-value"><strong>${matched.length}</strong></div>
+            </div>
+            <div class="kv-row">
+                <div class="kv-label" style="width: 350px;">${tReport("Selected features count")}</div>
+                <div class="kv-value"><strong>${selectedFeatures.length}</strong></div>
+            </div>
         </div>
 
         <div class="note">
-            <div class="section-title">${tReport("Note title")}</div>
-            <div>${tReport("Note body")}</div>
+            <div class="performer-title" style="font-size: 11px; margin-top: 0;">${tReport("Note title")}:</div>
+            <div style="margin-top: 4px;">${tReport("Note body")}</div>
         </div>
 
         ${createFooter(1, reportId, tReport)}
@@ -1014,8 +1068,6 @@ export const generateReportPdfWithDialog = async (
     `;
         pages.push(overviewPage);
 
-        // Zoom page removed per requirement.
-
         const detailsStartIndex = pages.length;
         selectedFeatures.forEach((feature, idx) => {
             const pageIndex = Math.floor(idx / ROWS_PER_PAGE);
@@ -1147,5 +1199,4 @@ export const generateReportPdfWithDialog = async (
         console.error(`[report] failed at ${stage}: ${message}`, error);
         throw new Error(`Report failed at ${stage}: ${message}`);
     }
-};
-/* eslint-enable sonarjs/cognitive-complexity */
+};
\ No newline at end of file