diff --git a/.changeset/slow-rules-unite.md b/.changeset/slow-rules-unite.md
new file mode 100644
index 0000000000..0611caf4d4
--- /dev/null
+++ b/.changeset/slow-rules-unite.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Fixing bug in creating concave shapes in unlimited polygons.
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx
index d1fcf454ea..18ec8c1ff6 100644
--- a/packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx
@@ -263,6 +263,14 @@ const UnlimitedPolygonGraph = (statefulProps: StatefulProps) => {
 
     return (
         <>
+            <Polyline
+                points={[...points]}
+                color="var(--movable-line-stroke-color)"
+                svgPolylineProps={{
+                    strokeWidth: "var(--movable-line-stroke-weight)",
+                    style: {fill: "transparent"},
+                }}
+            />
             {/* This rect is here to grab clicks so that new points can be added */}
             {/* It's important because it stops mouse events from propogating
                 when dragging a points around */}
@@ -289,14 +297,6 @@ const UnlimitedPolygonGraph = (statefulProps: StatefulProps) => {
                     dispatch(actions.polygon.addPoint(graphCoordinates[0]));
                 }}
             />
-            <Polyline
-                points={[...points]}
-                color="var(--movable-line-stroke-color)"
-                svgPolylineProps={{
-                    strokeWidth: "var(--movable-line-stroke-weight)",
-                    style: {fill: "transparent"},
-                }}
-            />
             {coords.map((point, i) => (
                 <MovablePoint
                     key={i}