diff --git a/frontend/app/assets/img/report-head.png b/frontend/app/assets/img/report-head.png
new file mode 100644
index 000000000..2164cadba
Binary files /dev/null and b/frontend/app/assets/img/report-head.png differ
diff --git a/frontend/app/components/Session_/BugReport/BugReportModal.tsx b/frontend/app/components/Session_/BugReport/BugReportModal.tsx
index d898eb0f5..34f264d96 100644
--- a/frontend/app/components/Session_/BugReport/BugReportModal.tsx
+++ b/frontend/app/components/Session_/BugReport/BugReportModal.tsx
@@ -115,23 +115,29 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
           }).then((canvas) => {
             const imgData = canvas.toDataURL('img/png');
 
-            var imgWidth = 210;
+            var imgWidth = 200;
             var pageHeight = 295;
             var imgHeight = (canvas.height * imgWidth) / canvas.width;
             var heightLeft = imgHeight;
             var position = 0;
 
-            doc.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
-            heightLeft -= pageHeight;
+
+            doc.addImage(imgData, 'PNG', 5, 5, imgWidth, imgHeight);
+
+            doc.addImage('/assets/img/report-head.png', 'png', 210/2 - 40/2, 2, 45, 5);
+
+            heightLeft -= pageHeight - 7;
 
             while (heightLeft >= 0) {
               position = heightLeft - imgHeight + 10;
               doc.addPage();
-              doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+              doc.addImage(imgData, 'PNG', 5, position, imgWidth, imgHeight);
+              doc.addImage('/assets/img/report-head.png', 'png', 210/2 - 40/2, pageHeight - 5, 45, 5);
               heightLeft -= pageHeight;
             }
 
             doc.link(5, 295 - Math.abs(heightLeft) - 25, 200, 30, { url: sessionUrl });
+            if (position === 0) doc.addImage('/assets/img/report-head.png', 'png', 210/2 - 40/2, pageHeight - 5, 45, 5);
 
             doc.save('Bug Report: ' + sessionId + '.pdf');
             setRendering(false);
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
index da0b79fde..65bccd397 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
@@ -6,8 +6,8 @@ const STEP_NAMES = { CLICKRAGE: 'Multiple click', CLICK: 'Clicked', LOCATION: 'V
 import { useStore } from 'App/mstore';
 import cn from 'classnames';
 import { ErrorComp, NetworkComp, NoteComp } from './SubModalItems';
-import { durationFromMs } from 'App/date'
-import { Tooltip } from 'react-tippy'
+import { durationFromMs } from 'App/date';
+import { Tooltip } from 'react-tippy';
 
 const SUBSTEP = {
   network: NetworkComp,
@@ -52,11 +52,9 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
         <div className="rounded-3xl px-4 bg-gray-lightest relative z-10">{ind + 1}</div>
         <div className="w-full">
           <div className="flex items-center w-full gap-2">
-            <div className="px-1 text-disabled-text">
-              {durationFromMs(step.time)}
-            </div>
+            <div className="px-1 text-disabled-text">{durationFromMs(step.time)}</div>
             {/* @ts-ignore */}
-            <Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10"/>
+            <Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10" />
             {/* @ts-ignore */}
             <div className="font-semibold">{STEP_NAMES[step.type]}</div>
             <div className="text-gray-medium">{step.details}</div>
@@ -68,20 +66,24 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
             >
               {/* @ts-ignore */}
               <Tooltip title="Add Note, Error or Network Request" className="!flex items-center">
-              <ItemMenu
-                label={
-                    <Icon name="plus" size={16} className="cursor-pointer hover:fill-gray-darkest" />
-                }
-                items={menuItems}
-                flat
-                onToggle={(isOpen) => setMenu(isOpen)}
-              />
+                <ItemMenu
+                  label={
+                    <Icon
+                      name="plus"
+                      size={16}
+                      className="cursor-pointer hover:fill-gray-darkest"
+                    />
+                  }
+                  items={menuItems}
+                  flat
+                  onToggle={(isOpen) => setMenu(isOpen)}
+                />
               </Tooltip>
               {/* @ts-ignore */}
               <Tooltip title="Delete Step">
-              <div onClick={() => bugReportStore.removeStep(step)}>
-                <Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
-              </div>
+                <div onClick={() => bugReportStore.removeStep(step)}>
+                  <Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
+                </div>
               </Tooltip>
             </div>
           </div>
@@ -90,28 +92,27 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
               {step.substeps.map((subStep) => {
                 const Component = SUBSTEP[subStep.type];
                 return (
-                  <div className="relative">
-                  <div
-                    key={subStep.key}
-                    className="rounded border py-1 px-2 w-full flex flex-col relative z-10"
-                    style={{ background: subStep.type === 'note' ? '#FFFEF5' : 'white' }}
-                  >
-                    {/* @ts-ignore */}
-                    <Component item={subStep} />
-                  </div>
-                  <div
-                    style={{
-                      borderBottom: '1px solid #DDDDDD',
-                      borderLeft: '1px solid #DDDDDD',
-                      borderBottomLeftRadius: 6,
-                      position: 'absolute',
-                      zIndex: 1,
-                      left: -25,
-                      bottom: 10,
-                      height: '120%',
-                      width: 50,
-                    }}
-                  />
+                  <div className="relative" key={subStep.key}>
+                    <div
+                      className="rounded border py-1 px-2 w-full flex flex-col relative z-10"
+                      style={{ background: subStep.type === 'note' ? '#FFFEF5' : 'white' }}
+                    >
+                      {/* @ts-ignore */}
+                      <Component item={subStep} />
+                    </div>
+                    <div
+                      style={{
+                        borderBottom: '1px solid #DDDDDD',
+                        borderLeft: '1px solid #DDDDDD',
+                        borderBottomLeftRadius: 6,
+                        position: 'absolute',
+                        zIndex: 1,
+                        left: -25,
+                        bottom: 10,
+                        height: '120%',
+                        width: 50,
+                      }}
+                    />
                   </div>
                 );
               })}
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
index afbc25e6d..e70f19150 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
@@ -98,7 +98,7 @@ function ModalActions() {
   return (
     <div className="flex items-center gap-2">
       <Button
-        disabled={bugReportStore.pickedSubItems.size === 0}
+        disabled={bugReportStore.pickedSubItems[bugReportStore.targetStep].size === 0}
         variant="primary"
         onClick={saveChoice}
       >
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
index 843007dd5..06c1f8061 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
@@ -35,8 +35,6 @@ function XRay({ xrayProps, timePointer, stepPickRadius, clearEventSelection, set
     CLICKRAGE: eventsList.filter((item: any) => item.type === 'CLICKRAGE'),
   };
 
-  console.log(JSON.stringify(resources.CLICKRAGE, undefined, 2));
-
   const pickEventRadius = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
 
diff --git a/frontend/app/mstore/bugReportStore.ts b/frontend/app/mstore/bugReportStore.ts
index 3feb927ff..abb3f5e84 100644
--- a/frontend/app/mstore/bugReportStore.ts
+++ b/frontend/app/mstore/bugReportStore.ts
@@ -22,7 +22,7 @@ export default class BugReportStore {
   chosenEventSteps: Step[] = [];
   subModalType: 'note' | 'network' | 'error';
   targetStep: string
-  pickedSubItems: Map<string, SubItem> = new Map()
+  pickedSubItems: Record<string, Map<string, SubItem>> = {}
 
   constructor() {
     makeAutoObservable(this);
@@ -42,7 +42,7 @@ export default class BugReportStore {
     this.subModalType = undefined;
     this.isSubStepModalOpen = false;
     this.targetStep = undefined;
-    this.pickedSubItems = new Map();
+    this.pickedSubItems = {};
   }
 
   toggleTitleEdit(isEdit: boolean) {
@@ -88,7 +88,6 @@ export default class BugReportStore {
     }
     this.bugReport = Object.assign(this.bugReport, reportObj)
 
-    console.log(JSON.stringify(this.bugReport, undefined, 2))
     return this.bugReport
   }
 
@@ -98,39 +97,41 @@ export default class BugReportStore {
 
   setSteps(steps: Step[]) {
     this.chosenEventSteps = steps.map(step => ({ ...step, substeps: undefined }));
-    this.pickedSubItems = new Map();
+    this.pickedSubItems = {};
   }
 
   removeStep(step: Step) {
     this.chosenEventSteps = this.chosenEventSteps.filter(
       (chosenStep) => chosenStep.key !== step.key
     );
+    if (this.pickedSubItems[step.key]) this.pickedSubItems[step.key] = new Map()
   }
 
   toggleSubStepModal(isOpen: boolean, type: 'note' | 'network' | 'error', stepKey?: string) {
     this.isSubStepModalOpen = isOpen;
     this.subModalType = type;
     this.targetStep = stepKey
+    if (!this.pickedSubItems[this.targetStep]) this.pickedSubItems[this.targetStep] = new Map()
   }
 
   toggleSubItem(isAdded: boolean, item: SubItem) {
     if (isAdded) {
-      this.pickedSubItems.set(item.key, item)
+      this.pickedSubItems[this.targetStep].set(item.key, item)
     } else {
-      this.pickedSubItems.delete(item.key)
+      this.pickedSubItems[this.targetStep].delete(item.key)
     }
   }
 
   isSubItemChecked(item: SubItem) {
-    return this.pickedSubItems?.get(item.key) !== undefined
+    return this.pickedSubItems[this.targetStep]?.get(item.key) !== undefined
   }
 
   saveSubItems() {
     const targetIndex = this.chosenEventSteps.findIndex(step => step.key === this.targetStep)
     const eventStepsCopy = this.chosenEventSteps
     const step = this.chosenEventSteps[targetIndex]
-    if (this.pickedSubItems.size > 0) {
-      step.substeps = Array.from(this.pickedSubItems, ([name, value]) => ({ ...value }));
+    if (this.pickedSubItems[this.targetStep].size > 0) {
+      step.substeps = Array.from(this.pickedSubItems[this.targetStep], ([name, value]) => ({ ...value }));
     }
     eventStepsCopy[targetIndex] = step