diff --git a/components/CustomImageNode.tsx b/components/CustomImageNode.tsx
index fd2237b..88fa87e 100644
--- a/components/CustomImageNode.tsx
+++ b/components/CustomImageNode.tsx
@@ -45,6 +45,7 @@ export function CustomImageNode ({ data }: NodeProps<CustomNode>) {
         width: dimensions.width,
         height: dimensions.height,
         position: "relative",
+        border: "12px solid black",
       }}
     >
       <Image
diff --git a/components/EventFlow.tsx b/components/EventFlow.tsx
index 5013b24..a3e7376 100644
--- a/components/EventFlow.tsx
+++ b/components/EventFlow.tsx
@@ -12,6 +12,8 @@ import {
   applyNodeChanges,
   Edge,
   ReactFlowInstance,
+  BackgroundVariant,
+  Background,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { Event, EventToLocation, Location } from "@prisma/client";
@@ -466,6 +468,7 @@ function Flow({
           elementsSelectable={isEditable}
           className="touch-none"
         >
+          <Background color="#ccc" variant={BackgroundVariant.Dots} gap={144} size={12} />
           <Controls position="bottom-right" showInteractive={false} />
 
           {/* Hide legend on view only mode */}