diff --git a/frontend/pages/sch.js b/frontend/pages/sch.js
new file mode 100644
index 00000000..dac3a141
--- /dev/null
+++ b/frontend/pages/sch.js
@@ -0,0 +1,72 @@
+import React, { useRef } from "react";
+import { Box } from "@chakra-ui/react";
+import Schematic from "../src/components/schematic";
+import Xarrow, { Xwrapper, useXarrow } from "react-xarrows";
+
+const Sch = () => {
+  const updateXarrow = useXarrow();
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref3 = useRef(null);
+  const ref4 = useRef(null);
+  return (
+    <Box minH="100vh" w="100%" overflow="scroll">
+      <Xwrapper>
+        <Schematic ref={ref1} def={{ x: 0, y: 0 }} />
+        <Schematic ref={ref2} def={{ x: 60, y: 0 }} />
+        <Schematic ref={ref3} def={{ x: 120, y: 0 }} />
+        <Schematic ref={ref4} def={{ x: 180, y: 0 }} />
+        <Xarrow
+          // showXarrow={!!box0Ref.current && !!box1Ref.current}
+          dashness={{
+            strokeLen: 10,
+            nonStrokeLen: 15,
+            animation: 1 * 1,
+          }}
+          // animateDrawing={true}
+          color="#920050"
+          path="grid"
+          gridBreak="30px"
+          //   startAnchor={"top"}
+          showHead={false}
+          start={ref1} //can be react ref
+          end={ref2} //or an id
+        />
+        <Xarrow
+          // showXarrow={!!box0Ref.current && !!box1Ref.current}
+          dashness={{
+            strokeLen: 10,
+            nonStrokeLen: 15,
+            animation: 1 * 1,
+          }}
+          // animateDrawing={true}
+          color="#113350"
+          path="grid"
+          gridBreak="30px"
+          //   startAnchor={"auto"}
+          showHead={false}
+          start={ref2} //can be react ref
+          end={ref3} //or an id
+        />
+        <Xarrow
+          // showXarrow={!!box0Ref.current && !!box1Ref.current}
+          dashness={{
+            strokeLen: 10,
+            nonStrokeLen: 15,
+            animation: 1 * 1,
+          }}
+          // animateDrawing={true}
+          color="#92D0F0"
+          gridBreak="30px"
+          path="grid"
+          //   startAnchor={"top"}
+          showHead={false}
+          start={ref4} //can be react ref
+          end={ref1} //or an id
+        />
+      </Xwrapper>
+    </Box>
+  );
+};
+
+export default Sch;
diff --git a/frontend/src/components/Schematic.js b/frontend/src/components/Schematic.js
new file mode 100644
index 00000000..920800d8
--- /dev/null
+++ b/frontend/src/components/Schematic.js
@@ -0,0 +1,49 @@
+import React from "react";
+import Draggable from "react-draggable";
+import { Box, Container } from "@chakra-ui/react";
+import { useXarrow } from "react-xarrows";
+const Schematic = React.forwardRef(({ def }, ref) => {
+  const updateXarrow = useXarrow();
+  const eventLogger = (e, data) => {
+    console.log("Event: ", e);
+    console.log("Data: ", data);
+  };
+
+  const handleStart = (e) => {
+    console.log(e);
+  };
+
+  const handleDrag = (e) => {
+    console.log(e);
+  };
+
+  const handleStop = (e) => {
+    console.log(e);
+  };
+
+  console.log("def", def);
+
+  return (
+    <Draggable
+      nodeRef={ref}
+      axis="both"
+      handle=".handle"
+      defaultPosition={{ ...def }}
+      position={null}
+      grid={[60, 60]}
+      scale={1}
+      onStart={updateXarrow}
+      onDrag={updateXarrow}
+      onStop={updateXarrow}
+    >
+      <Box ref={ref} className="handle" boxSize="60px" bg="red.900">
+        hmm?
+      </Box>
+    </Draggable>
+    // <Box ref={ref} className="handle" boxSize="60px" bg="red.900">
+    //   hmm?
+    // </Box>
+  );
+});
+
+export default Schematic;