diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/FreehandCropRegion.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/FreehandCropRegion.tsx
index 32716a2ded..e69de29bb2 100644
--- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/FreehandCropRegion.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/FreehandCropRegion.tsx
@@ -1,119 +0,0 @@
-import type { Dispatch, Ref, SetStateAction } from "react";
-import { forwardRef } from "react";
-import { CropBoxProps } from "./";
-
-interface FreehandCropRegionProps {
-    cropBox: CropBoxProps;
-    setIsDragging: Dispatch<SetStateAction<boolean>>;
-}
-
-const FreehandCropRegion = forwardRef(
-    (props: FreehandCropRegionProps, ref: Ref<HTMLDivElement>) => {
-        return (
-            <>
-                {/* Top overlay */}
-                <div
-                    style={{
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        height: props.cropBox.y + "px", // height up to the top of the crop box
-                        backgroundColor: "rgba(0,0,0,0.5)",
-                        pointerEvents: "none",
-                    }}
-                ></div>
-
-                {/* Bottom overlay */}
-                <div
-                    style={{
-                        position: "absolute",
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        height: `calc(100% - ${
-                            props.cropBox.y + props.cropBox.height
-                        }px)`, // height from the bottom of the crop box to the bottom of the canvas
-                        backgroundColor: "rgba(0,0,0,0.5)",
-                        pointerEvents: "none",
-                    }}
-                ></div>
-
-                {/* Left overlay */}
-                <div
-                    style={{
-                        position: "absolute",
-                        top: props.cropBox.y + "px",
-                        left: 0,
-                        width: props.cropBox.x + "px", // width up to the left side of the crop box
-                        height: props.cropBox.height + "px", // same height as the crop box
-                        backgroundColor: "rgba(0,0,0,0.5)",
-                        pointerEvents: "none",
-                    }}
-                ></div>
-
-                {/* Right overlay */}
-                <div
-                    style={{
-                        position: "absolute",
-                        top: props.cropBox.y + "px",
-                        right: 0,
-                        width: `calc(100% - ${
-                            props.cropBox.x + props.cropBox.width
-                        }px)`, // width from the right side of the crop box to the right side of the canvas
-                        height: props.cropBox.height + "px", // same height as the crop box
-                        backgroundColor: "rgba(0,0,0,0.5)",
-                        pointerEvents: "none",
-                    }}
-                ></div>
-
-                <div
-                    style={{
-                        display: "grid",
-                        position: "absolute",
-                        left: props.cropBox.x + "px",
-                        top: props.cropBox.y + "px",
-                        width: props.cropBox.width + "px",
-                        height: props.cropBox.height + "px",
-                        border: "1px solid white",
-                        gridTemplateColumns: "1fr 1fr 1fr",
-                        gridTemplateRows: "1fr 1fr 1fr",
-                        gap: "0px",
-                        zIndex: 30, // make sure the crop box is above the overlays
-                    }}
-                    ref={ref}
-                >
-                    {Array.from({ length: 9 }).map((_, index) => (
-                        <div
-                            key={index}
-                            style={{
-                                border: "1px solid white",
-                                boxSizing: "border-box",
-                                pointerEvents: "none",
-                            }}
-                        ></div>
-                    ))}
-
-                    <div
-                        style={{
-                            position: "absolute",
-                            height: "10px",
-                            width: "10px",
-                            backgroundColor: "white",
-                            border: "1px solid black",
-                            right: "-5px",
-                            bottom: "-5px",
-                            cursor: "se-resize",
-                        }}
-                        onMouseDown={(e) => {
-                            e.preventDefault();
-                            props.setIsDragging(true);
-                        }}
-                    ></div>
-                </div>
-            </>
-        );
-    },
-);
-
-export default FreehandCropRegion;
diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
index 123c2db1cc..c80c7bf8c9 100644
--- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
@@ -35,13 +35,19 @@ import {
     Typography,
 } from "@mui/material";
 import { t } from "i18next";
-import type { Dispatch, MutableRefObject, SetStateAction } from "react";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import type { Dispatch, MutableRefObject, Ref, SetStateAction } from "react";
+import {
+    createContext,
+    forwardRef,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
 import { getLocalCollections } from "services/collectionService";
 import uploadManager from "services/upload/uploadManager";
 import ColoursMenu from "./ColoursMenu";
 import CropMenu, { cropRegionOfCanvas, getCropRegionArgs } from "./CropMenu";
-import FreehandCropRegion from "./FreehandCropRegion";
 import TransformMenu from "./TransformMenu";
 
 interface IProps {
@@ -724,6 +730,120 @@ const ImageEditorOverlay = (props: IProps) => {
 
 export default ImageEditorOverlay;
 
+interface FreehandCropRegionProps {
+    cropBox: CropBoxProps;
+    setIsDragging: Dispatch<SetStateAction<boolean>>;
+}
+
+const FreehandCropRegion = forwardRef(
+    (props: FreehandCropRegionProps, ref: Ref<HTMLDivElement>) => {
+        return (
+            <>
+                {/* Top overlay */}
+                <div
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        height: props.cropBox.y + "px", // height up to the top of the crop box
+                        backgroundColor: "rgba(0,0,0,0.5)",
+                        pointerEvents: "none",
+                    }}
+                ></div>
+
+                {/* Bottom overlay */}
+                <div
+                    style={{
+                        position: "absolute",
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        height: `calc(100% - ${
+                            props.cropBox.y + props.cropBox.height
+                        }px)`, // height from the bottom of the crop box to the bottom of the canvas
+                        backgroundColor: "rgba(0,0,0,0.5)",
+                        pointerEvents: "none",
+                    }}
+                ></div>
+
+                {/* Left overlay */}
+                <div
+                    style={{
+                        position: "absolute",
+                        top: props.cropBox.y + "px",
+                        left: 0,
+                        width: props.cropBox.x + "px", // width up to the left side of the crop box
+                        height: props.cropBox.height + "px", // same height as the crop box
+                        backgroundColor: "rgba(0,0,0,0.5)",
+                        pointerEvents: "none",
+                    }}
+                ></div>
+
+                {/* Right overlay */}
+                <div
+                    style={{
+                        position: "absolute",
+                        top: props.cropBox.y + "px",
+                        right: 0,
+                        width: `calc(100% - ${
+                            props.cropBox.x + props.cropBox.width
+                        }px)`, // width from the right side of the crop box to the right side of the canvas
+                        height: props.cropBox.height + "px", // same height as the crop box
+                        backgroundColor: "rgba(0,0,0,0.5)",
+                        pointerEvents: "none",
+                    }}
+                ></div>
+
+                <div
+                    style={{
+                        display: "grid",
+                        position: "absolute",
+                        left: props.cropBox.x + "px",
+                        top: props.cropBox.y + "px",
+                        width: props.cropBox.width + "px",
+                        height: props.cropBox.height + "px",
+                        border: "1px solid white",
+                        gridTemplateColumns: "1fr 1fr 1fr",
+                        gridTemplateRows: "1fr 1fr 1fr",
+                        gap: "0px",
+                        zIndex: 30, // make sure the crop box is above the overlays
+                    }}
+                    ref={ref}
+                >
+                    {Array.from({ length: 9 }).map((_, index) => (
+                        <div
+                            key={index}
+                            style={{
+                                border: "1px solid white",
+                                boxSizing: "border-box",
+                                pointerEvents: "none",
+                            }}
+                        ></div>
+                    ))}
+
+                    <div
+                        style={{
+                            position: "absolute",
+                            height: "10px",
+                            width: "10px",
+                            backgroundColor: "white",
+                            border: "1px solid black",
+                            right: "-5px",
+                            bottom: "-5px",
+                            cursor: "se-resize",
+                        }}
+                        onMouseDown={(e) => {
+                            e.preventDefault();
+                            props.setIsDragging(true);
+                        }}
+                    ></div>
+                </div>
+            </>
+        );
+    },
+);
+
 const confirmEditorCloseDialogAttributes = (
     onConfirm: () => void,
 ): MiniDialogAttributes => ({