diff --git a/apps/client/src/features/base/components/grid/base-drop-edge-indicator.tsx b/apps/client/src/features/base/components/grid/base-drop-edge-indicator.tsx
new file mode 100644
index 000000000..72970388e
--- /dev/null
+++ b/apps/client/src/features/base/components/grid/base-drop-edge-indicator.tsx
@@ -0,0 +1,10 @@
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import classes from "@/features/base/styles/grid.module.css";
+
+type Props = {
+  edge: Edge;
+};
+
+export function BaseDropEdgeIndicator({ edge }: Props) {
+  return <div className={classes.dropEdgeLine} data-edge={edge} aria-hidden />;
+}
diff --git a/apps/client/src/features/base/styles/grid.module.css b/apps/client/src/features/base/styles/grid.module.css
index 06ef8d011..1f16f5345 100644
--- a/apps/client/src/features/base/styles/grid.module.css
+++ b/apps/client/src/features/base/styles/grid.module.css
@@ -614,3 +614,41 @@
   background: rgba(255, 255, 255, 0.08);
   color: var(--mantine-color-white);
 }
+
+.dropEdgeLine {
+  position: absolute;
+  background: light-dark(
+    var(--mantine-color-blue-5),
+    var(--mantine-color-blue-4)
+  );
+  pointer-events: none;
+  z-index: 2;
+}
+
+.dropEdgeLine[data-edge="left"] {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+}
+
+.dropEdgeLine[data-edge="right"] {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 2px;
+}
+
+.dropEdgeLine[data-edge="top"] {
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2px;
+}
+
+.dropEdgeLine[data-edge="bottom"] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+}