diff --git a/src/components/field/svg/FieldOverlayRoot.tsx b/src/components/field/svg/FieldOverlayRoot.tsx
index 79b00a6475..b25e5c01fa 100644
--- a/src/components/field/svg/FieldOverlayRoot.tsx
+++ b/src/components/field/svg/FieldOverlayRoot.tsx
@@ -242,6 +242,8 @@ class FieldOverlayRoot extends Component<Props, State> {
                 <FieldImage2024 />
               </>
             )}
+
+
             {layers[ViewLayers.Grid] && <FieldGrid></FieldGrid>}
             {/* Waypoint mouse capture*/}
 
@@ -304,7 +306,6 @@ class FieldOverlayRoot extends Component<Props, State> {
                 </div>
               </Popover>
             )}
-
             {layers[ViewLayers.Waypoints] &&
               uiState.isNavbarWaypointSelected() && (
                 <circle
@@ -326,6 +327,43 @@ class FieldOverlayRoot extends Component<Props, State> {
             {layers[ViewLayers.Samples] && layers[ViewLayers.Trajectory] && (
               <FieldGeneratedWaypoints></FieldGeneratedWaypoints>
             )}
+                        {/* Display field zones */}
+                        {layers[ViewLayers.Zones] &&
+              doc.pathlist.activePath.params.constraints
+                .filter((c) => c.enabled)
+                .map((c) => {
+                  return (
+                    <FieldConstraintDisplayLayer
+                      points={doc.pathlist.activePath.params.waypoints}
+                      constraint={c as IConstraintStoreKeyed<ConstraintKey>}
+                      lineColor={c.selected ? "var(--select-yellow)":"transparent"}
+                      clickable= {c.selected || !(uiState.layers[ViewLayers.Waypoints] &&
+                      uiState.isNavbarWaypointSelected())}
+                    ></FieldConstraintDisplayLayer>
+                  );
+                })} 
+
+            {!layers[ViewLayers.Zones] && doc.isSidebarConstraintSelected && (
+              <FieldConstraintDisplayLayer
+                points={doc.pathlist.activePath.params.waypoints}
+                constraint={
+                  doc.selectedSidebarItem as IConstraintStoreKeyed<ConstraintKey>
+                }
+                lineColor="var(--select-yellow)"
+                clickable={true}
+              ></FieldConstraintDisplayLayer>
+            )}
+            {!doc.isSidebarConstraintSelected &&
+              doc.isSidebarConstraintHovered && (
+                <FieldConstraintDisplayLayer
+                  points={doc.pathlist.activePath.params.waypoints}
+                  constraint={
+                    doc.hoveredSidebarItem as IConstraintStoreKeyed<ConstraintKey>
+                  }
+                  lineColor="white"
+                  clickable={false}
+                ></FieldConstraintDisplayLayer>
+              )}
             <FieldEventMarkers></FieldEventMarkers>
             {layers[ViewLayers.Waypoints] &&
               doc.pathlist.activePath.params.waypoints
@@ -364,26 +402,7 @@ class FieldOverlayRoot extends Component<Props, State> {
             {eventMarkerSelected && (
               <FieldEventMarkerAddLayer></FieldEventMarkerAddLayer>
             )}
-            {doc.isSidebarConstraintSelected && (
-              <FieldConstraintDisplayLayer
-                points={doc.pathlist.activePath.params.waypoints}
-                constraint={
-                  doc.selectedSidebarItem as IConstraintStoreKeyed<ConstraintKey>
-                }
-                lineColor="var(--select-yellow)"
-              ></FieldConstraintDisplayLayer>
-            )}
 
-            {!doc.isSidebarConstraintSelected &&
-              doc.isSidebarConstraintHovered && (
-                <FieldConstraintDisplayLayer
-                  points={doc.pathlist.activePath.params.waypoints}
-                  constraint={
-                    doc.hoveredSidebarItem as IConstraintStoreKeyed<ConstraintKey>
-                  }
-                  lineColor="white"
-                ></FieldConstraintDisplayLayer>
-              )}
             {layers[ViewLayers.Trajectory] && (
               <InterpolatedRobot
                 timestamp={uiState.pathAnimationTimestamp}
diff --git a/src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx b/src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx
index 7400b3bf73..9d449d2436 100644
--- a/src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx
+++ b/src/components/field/svg/constraintDisplay/FieldConstraintDisplayLayer.tsx
@@ -12,12 +12,23 @@ import PointAtOverlay from "./PointAtOverlay";
 import KeepOutCircleOverlay from "./KeepOutCircleOverlay";
 import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
 import KeepInLaneOverlay from "./KeepInLaneOverlay";
+import { IConstraintDataStore } from "../../../../document/ConstraintDataStore";
 
 export type OverlayProps<K extends keyof ConstraintDataTypeMap> = {
   data: IConstraintStoreKeyed<K>;
   start: IHolonomicWaypointStore;
   end: IHolonomicWaypointStore;
   lineColor: string;
+  select: ()=>void;
+  clickable: boolean;
+};
+export type OverlayElementProps<K extends keyof ConstraintDataTypeMap> = {
+  data: IConstraintDataStore<K>;
+  start?: IHolonomicWaypointStore;
+  end?: IHolonomicWaypointStore;
+  selected: boolean;
+  select: ()=>void;
+  clickable: boolean;
 };
 const overlays = {
   PointAt: (props: OverlayProps<"PointAt">) => (
@@ -26,6 +37,9 @@ const overlays = {
       start={props.start}
       end={props.end}
       lineColor={props.lineColor}
+      selected={props.data.selected}
+      select={()=>{props.data.setSelected(true)}}
+      clickable={props.clickable}
     ></PointAtOverlay>
   ),
   KeepInCircle: (props: OverlayProps<"KeepInCircle">) => (
@@ -33,7 +47,9 @@ const overlays = {
       data={props.data.data}
       start={props.start}
       end={props.end}
-      lineColor={props.lineColor}
+      selected={props.data.selected}
+      select={()=>{props.data.setSelected(true)}}
+      clickable={props.clickable}
     ></KeepInCircleOverlay>
   ),
   KeepInRectangle: (props: OverlayProps<"KeepInRectangle">) => (
@@ -41,7 +57,9 @@ const overlays = {
       data={props.data.data}
       start={props.start}
       end={props.end}
-      lineColor={props.lineColor}
+      selected={props.data.selected}
+      select={()=>{props.data.setSelected(true)}}
+      clickable={props.clickable}
     ></KeepInRectangleOverlay>
   ),
   KeepInLane: (props: OverlayProps<"KeepInLane">) => (
@@ -49,6 +67,9 @@ const overlays = {
       data={props.data.data}
       start={props.start}
       end={props.end}
+      selected={props.data.selected}
+      select={()=>{props.data.setSelected(true)}}
+      clickable={props.clickable}
     ></KeepInLaneOverlay>
   ),
   KeepOutCircle: (props: OverlayProps<"KeepOutCircle">) => (
@@ -56,7 +77,9 @@ const overlays = {
       data={props.data.data}
       start={props.start}
       end={props.end}
-      lineColor={props.lineColor}
+      selected={props.data.selected}
+      select={()=>{props.data.setSelected(true)}}
+      clickable={props.clickable}
     ></KeepOutCircleOverlay>
   ),
   StopPoint: () => <></>,
@@ -70,6 +93,7 @@ type Props = {
   constraint?: IConstraintStoreKeyed<ConstraintKey>;
   points: IHolonomicWaypointStore[];
   lineColor: string;
+  clickable: boolean;
 };
 function FieldConstraintDisplayLayer(props: Props) {
   const constraint = props.constraint;
@@ -82,19 +106,20 @@ function FieldConstraintDisplayLayer(props: Props) {
     data: constraint,
     start: constraint.getStartWaypoint(props.points),
     end: constraint.getEndWaypoint(props.points),
-    lineColor: props.lineColor
+    lineColor: props.lineColor,
+    clickable: props.clickable
   };
   if (startIndex === undefined) {
     return <></>;
   }
   return (
-    <g>
+    <g key={props.constraint?.uuid ?? "undef"} style={{zIndex: constraint.selected ? "999" : undefined}}>
       <FieldConstraintRangeLayer
         points={doc.pathlist.activePath.params.waypoints}
         start={startIndex}
         end={endIndex}
         lineColor={props.lineColor}
-        id="display"
+        id={"display"+props.constraint?.uuid ?? "undef"}
       ></FieldConstraintRangeLayer>
       {overlays[constraint.data.type](
         // @ts-expect-error can't cast the constraint as the proper type.
diff --git a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx
index 416bb30d8c..a2d089f610 100644
--- a/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx
+++ b/src/components/field/svg/constraintDisplay/KeepInCircleOverlay.tsx
@@ -6,19 +6,19 @@ import {
   ConstraintKey,
   DataMap
 } from "../../../../document/ConstraintDefinitions";
-import { doc } from "../../../../document/DocumentManager";
+import { doc, uiState } from "../../../../document/DocumentManager";
 import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
+import { ViewLayers } from "../../../../document/UIData";
+import { OverlayElementProps } from "./FieldConstraintDisplayLayer";
 
 const STROKE = 0.1;
 const DOT = 0.1;
+const SELECT_COLOR = "var(--select-yellow)";
+const MOVABLE_COLOR = "green";
+const IMMOVABLE_COLOR = "darkseagreen";
 
-type Props<K extends ConstraintKey> = {
-  data: IConstraintDataStore<K>;
-  start?: IHolonomicWaypointStore;
-  end?: IHolonomicWaypointStore;
-  lineColor: string;
-};
-class KeepInCircleOverlay extends Component<Props<"KeepInCircle">, object> {
+class KeepInCircleOverlay extends Component<OverlayElementProps<"KeepInCircle">, object> {
+  id = crypto.randomUUID();
   rootRef: React.RefObject<SVGGElement> = React.createRef<SVGGElement>();
   componentDidMount() {
     if (this.rootRef.current) {
@@ -27,66 +27,79 @@ class KeepInCircleOverlay extends Component<Props<"KeepInCircle">, object> {
         .on("drag", (event) => this.dragPointTranslate(event))
         .on("start", () => {
           doc.history.startGroup(() => {});
+          this.props.select()
         })
         .on("end", (_event) => doc.history.stopGroup())
         .container(this.rootRef.current);
-      d3.select<SVGCircleElement, undefined>(`#dragTarget-keepInCircle`).call(
-        dragHandleDrag
-      );
       d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepInCircleDot`
+        `#dragTarget-keepInCircle` + this.id
+      ).call(dragHandleDrag);
+      d3.select<SVGCircleElement, undefined>(
+        `#dragTarget-keepInCircleDot` + this.id
       ).call(dragHandleDrag);
       const radiusHandleDrag = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => this.dragPointRadius(event))
         .on("start", () => {
           doc.history.startGroup(() => {});
+          this.props.select();
         })
         .on("end", (_event) => doc.history.stopGroup())
         .container(this.rootRef.current);
       d3.select<SVGCircleElement, undefined>(
-        `#dragRadiusTarget-keepInCircle`
+        `#dragRadiusTarget-keepInCircle` + this.id
       ).call(radiusHandleDrag);
     }
   }
 
   dragPointTranslate(event: any) {
-    this.props.data.x.set(this.props.data.serialize.props.x.val + event.dx);
-    this.props.data.y.set(this.props.data.serialize.props.y.val + event.dy);
+      this.props.data.x.set(this.props.data.serialize.props.x.val + event.dx);
+      this.props.data.y.set(this.props.data.serialize.props.y.val + event.dy);
   }
 
   dragPointRadius(event: any) {
-    const dx = event.x - this.props.data.serialize.props.x.val;
-    const dy = event.y - this.props.data.serialize.props.y.val;
-    const r = Math.sqrt(dx * dx + dy * dy);
+      const dx = event.x - this.props.data.serialize.props.x.val;
+      const dy = event.y - this.props.data.serialize.props.y.val;
+      const r = Math.sqrt(dx * dx + dy * dy);
 
-    this.props.data.r.set(r);
+      this.props.data.r.set(r);
   }
 
+  getColor() : string {
+    if (this.props.selected) return SELECT_COLOR;
+    if (this.props.clickable) return MOVABLE_COLOR;
+    return IMMOVABLE_COLOR;
+  }
   render() {
     const data = this.props.data.serialize as DataMap["KeepInCircle"];
     const x = data.props.x.val;
     const y = data.props.y.val;
     const r = data.props.r.val;
+    const color = this.getColor();
     return (
-      <g ref={this.rootRef}>
+      <g ref={this.rootRef} onClick={
+        () => {
+          if (this.props.clickable) this.props.select();
+        }}>
         {/* Main Circle */}
         <circle
           cx={x}
           cy={y}
           r={r - STROKE / 2}
-          fill={"green"}
+          fill={color}
           fillOpacity={0.1}
-          id="dragTarget-keepInCircle"
+          id={"dragTarget-keepInCircle" + this.id}
+          pointerEvents={"visibleStroke"}
         ></circle>
         {/* Center Dot */}
         <circle
           cx={x}
           cy={y}
           r={r < DOT * 2 ? 0.0 : DOT}
-          fill={"green"}
+          fill={color}
           fillOpacity={1.0}
-          id="dragTarget-keepInCircleDot"
+          id={"dragTarget-keepInCircleDot" + this.id}
+          pointerEvents={"visible"}
         ></circle>
         {/* Radius Handle */}
         <circle
@@ -95,10 +108,10 @@ class KeepInCircleOverlay extends Component<Props<"KeepInCircle">, object> {
           r={r - STROKE / 2}
           fill={"transparent"}
           pointerEvents={"visibleStroke"}
-          stroke={"green"}
+          stroke={color}
           strokeWidth={STROKE}
           strokeOpacity={1.0}
-          id="dragRadiusTarget-keepInCircle"
+          id={"dragRadiusTarget-keepInCircle" + this.id}
         ></circle>
       </g>
     );
diff --git a/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx
index d1fdf1e50c..18d458a856 100644
--- a/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx
+++ b/src/components/field/svg/constraintDisplay/KeepInLaneOverlay.tsx
@@ -7,17 +7,18 @@ import {
 import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
 import * as d3 from "d3";
 import { observer } from "mobx-react";
-import { doc } from "../../../../document/DocumentManager";
+import { doc, uiState } from "../../../../document/DocumentManager";
+import { ViewLayers } from "../../../../document/UIData";
+import { OverlayElementProps } from "./FieldConstraintDisplayLayer";
 
 const STROKE = 0.02;
 const DOT = 0.1;
+const SELECT_COLOR = "var(--select-yellow)";
+const MOVABLE_COLOR = "green";
+const IMMOVABLE_COLOR = "darkseagreen";
 
-type Props<K extends ConstraintKey> = {
-  data: IConstraintDataStore<K>;
-  start?: IHolonomicWaypointStore;
-  end?: IHolonomicWaypointStore;
-};
-class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
+class KeepInLaneOverlay extends Component<OverlayElementProps<"KeepInLane">, object> {
+  id = crypto.randomUUID();
   rootRef: React.RefObject<SVGGElement> = React.createRef<SVGGElement>();
   componentDidMount() {
     if (this.rootRef.current) {
@@ -26,16 +27,17 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
         .on("drag", (event) => this.dragPointTolerance(event))
         .on("start", () => {
           doc.history.startGroup(() => {});
+          this.props.select();
         })
         .on("end", (_event) => {
           doc.history.stopGroup();
         })
         .container(this.rootRef.current);
       d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepInLaneAbove`
+        `#dragTarget-keepInLaneAbove` + this.id
       ).call(dragHandleDrag);
       d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepInLaneBelow`
+        `#dragTarget-keepInLaneBelow` + this.id
       ).call(dragHandleDrag);
     }
   }
@@ -59,6 +61,13 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
       Math.hypot(dx, dy);
     data.tolerance.set(dist);
   }
+
+  getColor() : string {
+    if (this.props.selected) return SELECT_COLOR;
+    if (this.props.clickable) return MOVABLE_COLOR;
+    return IMMOVABLE_COLOR;
+  }
+
   render() {
     const data = this.props.data.serialize as DataMap["KeepInLane"];
     const tolerance = data.props.tolerance.val + STROKE / 2;
@@ -94,8 +103,12 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
       (endBelowX + startBelowX) / 2,
       (endBelowY + startBelowY) / 2
     ];
+    const color = this.getColor();
     return (
-      <g ref={this.rootRef}>
+      <g ref={this.rootRef} onClick={
+        () => {
+          if (this.props.clickable) this.props.select();
+        }}>
         {/* Lines */}
 
         <line
@@ -103,38 +116,40 @@ class KeepInLaneOverlay extends Component<Props<"KeepInLane">, object> {
           x2={endAboveX}
           y1={startAboveY}
           y2={endAboveY}
-          stroke="green"
+          stroke={color}
           strokeWidth={STROKE}
           strokeOpacity={1.0}
           id="line-keepInLaneAbove"
+          pointerEvents={"none"}
         ></line>
         <line
           x1={startBelowX}
           x2={endBelowX}
           y1={startBelowY}
           y2={endBelowY}
-          stroke="green"
+          stroke={color}
           strokeWidth={STROKE}
           strokeOpacity={1.0}
           id="line-keepInLaneBelow"
+          pointerEvents={"none"}
         ></line>
         <circle
           cx={midAboveX}
           cy={midAboveY}
           r={DOT}
-          fill={"green"}
+          fill={color}
           fillOpacity={1.0}
           pointerEvents={"visible"}
-          id="dragTarget-keepInLaneAbove"
+          id={"dragTarget-keepInLaneAbove" + this.id}
         ></circle>
         <circle
           cx={midBelowX}
           cy={midBelowY}
           r={DOT}
-          fill={"green"}
+          fill={color}
           fillOpacity={1.0}
           pointerEvents={"visible"}
-          id="dragTarget-keepInLaneBelow"
+          id={"dragTarget-keepInLaneBelow" + this.id}
         ></circle>
       </g>
     );
diff --git a/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx
index 8666c821a2..f95e3ad10d 100644
--- a/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx
+++ b/src/components/field/svg/constraintDisplay/KeepInRectangleOverlay.tsx
@@ -6,99 +6,82 @@ import {
   ConstraintKey,
   DataMap
 } from "../../../../document/ConstraintDefinitions";
-import { doc } from "../../../../document/DocumentManager";
+import { doc, uiState } from "../../../../document/DocumentManager";
 import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
+import { ViewLayers } from "../../../../document/UIData";
+import { OverlayElementProps } from "./FieldConstraintDisplayLayer";
 
 const STROKE = 0.1;
 const DOT = 0.1;
+const SELECT_COLOR = "var(--select-yellow)";
+const MOVABLE_COLOR = "green";
+const IMMOVABLE_COLOR = "darkseagreen";
 
-type Props<K extends ConstraintKey> = {
-  data: IConstraintDataStore<K>;
-  start?: IHolonomicWaypointStore;
-  end?: IHolonomicWaypointStore;
-  lineColor: string;
-};
 class KeepInRectangleOverlay extends Component<
-  Props<"KeepInRectangle">,
+  OverlayElementProps<"KeepInRectangle">,
   object
 > {
+  id = crypto.randomUUID();
   rootRef: React.RefObject<SVGGElement> = React.createRef<SVGGElement>();
   componentDidMount() {
     if (this.rootRef.current) {
+      const startDrag = (event: DragEvent) => {
+        doc.history.startGroup(() => { });
+        this.props.select();
+      };
+      const endDrag = () => {
+        this.fixWidthHeight();
+        doc.history.stopGroup();
+      };
       // Theres probably a better way to do this
       const dragHandleDrag = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => this.dragPointTranslate(event, false, false))
-        .on("start", () => {
-          doc.history.startGroup(() => {});
-        })
-        .on("end", (_event) => {
-          this.fixWidthHeight();
-          doc.history.stopGroup();
-        })
+        .on("start", startDrag)
+        .on("end", endDrag)
         .container(this.rootRef.current);
       d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepInRectangle`
+        `#dragTarget-keepInRectangle` + this.id
       ).call(dragHandleDrag);
 
       const dragHandleDragW = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => this.dragPointTranslate(event, true, false))
-        .on("start", () => {
-          doc.history.startGroup(() => {});
-        })
-        .on("end", (_event) => {
-          this.fixWidthHeight();
-          doc.history.stopGroup();
-        })
+        .on("start", startDrag)
+        .on("end", endDrag)
         .container(this.rootRef.current);
       d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepInRectangleW`
+        `#dragTarget-keepInRectangleW` + this.id
       ).call(dragHandleDragW);
 
       const dragHandleDragWH = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => this.dragPointTranslate(event, true, true))
-        .on("start", () => {
-          doc.history.startGroup(() => {});
-        })
-        .on("end", (_event) => {
-          this.fixWidthHeight();
-          doc.history.stopGroup();
-        })
+        .on("start", startDrag)
+        .on("end", endDrag)
         .container(this.rootRef.current);
       d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepInRectangleWH`
+        `#dragTarget-keepInRectangleWH` + this.id
       ).call(dragHandleDragWH);
 
       const dragHandleDragH = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => this.dragPointTranslate(event, false, true))
-        .on("start", () => {
-          doc.history.startGroup(() => {});
-        })
-        .on("end", (_event) => {
-          this.fixWidthHeight();
-          doc.history.stopGroup();
-        })
+        .on("start", startDrag)
+        .on("end", endDrag)
         .container(this.rootRef.current);
       d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepInRectangleH`
+        `#dragTarget-keepInRectangleH` + this.id
       ).call(dragHandleDragH);
 
       const dragHandleRegion = d3
-        .drag<SVGCircleElement, undefined>()
+        .drag<SVGRectElement, undefined>()
         .on("drag", (event) => this.dragRegionTranslate(event))
-        .on("start", () => {
-          doc.history.startGroup(() => {});
-        })
-        .on("end", (_event) => {
-          this.fixWidthHeight();
-          doc.history.stopGroup();
-        })
+        .on("start", startDrag)
+        .on("end", endDrag)
         .container(this.rootRef.current);
-      d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepInRectangleRegion`
+      d3.select<SVGRectElement, undefined>(
+        `#dragTarget-keepInRectangleRegion` + this.id
       ).call(dragHandleRegion);
     }
   }
@@ -124,7 +107,7 @@ class KeepInRectangleOverlay extends Component<
     if (this.props.data.serialize.props.w.val < 0.0) {
       this.props.data.x.set(
         this.props.data.serialize.props.x.val +
-          this.props.data.serialize.props.w.val
+        this.props.data.serialize.props.w.val
       );
       this.props.data.w.set(-this.props.data.serialize.props.w.val);
     }
@@ -132,29 +115,41 @@ class KeepInRectangleOverlay extends Component<
     if (this.props.data.serialize.props.h.val < 0.0) {
       this.props.data.y.set(
         this.props.data.serialize.props.y.val +
-          this.props.data.serialize.props.h.val
+        this.props.data.serialize.props.h.val
       );
       this.props.data.h.set(-this.props.data.serialize.props.h.val);
     }
   }
 
+  getColor(): string {
+    if (this.props.selected) return SELECT_COLOR;
+    if (this.props.clickable) return MOVABLE_COLOR;
+    return IMMOVABLE_COLOR;
+  }
   render() {
     const data = this.props.data.serialize as DataMap["KeepInRectangle"];
     const x = data.props.x.val;
     const y = data.props.y.val;
     const w = data.props.w.val;
     const h = data.props.h.val;
+    let color = this.getColor();
+    let movable = this.props.selected || this.props.clickable;
+    let visible = movable ? "visible" : "none";
+    let visibleStroke = movable ? "visibleStroke" : "none";
     return (
-      <g ref={this.rootRef}>
+      <g ref={this.rootRef} onClick={
+        (e) => {
+          if (this.props.clickable) { this.props.select(); }
+        }} >
         {/* Fill Rect*/}
         <rect
           x={w >= 0 ? x : x + w}
           y={h >= 0 ? y : y + h}
           width={Math.abs(w)}
           height={Math.abs(h)}
-          fill={"green"}
-          fillOpacity={0.1}
-          id="dragTarget-keepInRectangleRegion"
+          fill={color}
+          fillOpacity={0.05}
+          pointerEvents={"none"}
         ></rect>
         {/*Border Rect*/}
         <rect
@@ -163,44 +158,48 @@ class KeepInRectangleOverlay extends Component<
           width={Math.abs(w)}
           height={Math.abs(h)}
           fill={"transparent"}
-          pointerEvents={"visibleStroke"}
-          stroke={"green"}
+          pointerEvents={visibleStroke}
+          stroke={color}
           strokeWidth={STROKE}
           strokeOpacity={1.0}
-          id="dragTarget-keepInRectangleRegion"
+          id={"dragTarget-keepInRectangleRegion" + this.id}
         ></rect>
         {/* Corners */}
         <circle
           cx={x}
           cy={y}
           r={DOT}
-          fill={"green"}
+          fill={color}
           fillOpacity={1.0}
-          id="dragTarget-keepInRectangle"
+          pointerEvents={visible}
+          id={"dragTarget-keepInRectangle" + this.id}
         ></circle>
         <circle
           cx={x + w}
           cy={y}
           r={DOT}
-          fill={"green"}
+          fill={color}
           fillOpacity={1.0}
-          id="dragTarget-keepInRectangleW"
+          pointerEvents={visible}
+          id={"dragTarget-keepInRectangleW" + this.id}
         ></circle>
         <circle
           cx={x + w}
           cy={y + h}
           r={DOT}
-          fill={"green"}
+          fill={color}
           fillOpacity={1.0}
-          id="dragTarget-keepInRectangleWH"
+          pointerEvents={visible}
+          id={"dragTarget-keepInRectangleWH" + this.id}
         ></circle>
         <circle
           cx={x}
           cy={y + h}
           r={DOT}
-          fill={"green"}
+          fill={color}
           fillOpacity={1.0}
-          id="dragTarget-keepInRectangleH"
+          pointerEvents={visible}
+          id={"dragTarget-keepInRectangleH" + this.id}
         ></circle>
       </g>
     );
diff --git a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx
index c163c55386..3f3565431c 100644
--- a/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx
+++ b/src/components/field/svg/constraintDisplay/KeepOutCircleOverlay.tsx
@@ -6,19 +6,19 @@ import {
   ConstraintKey,
   DataMap
 } from "../../../../document/ConstraintDefinitions";
-import { doc } from "../../../../document/DocumentManager";
+import { doc, uiState } from "../../../../document/DocumentManager";
 import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
+import { ViewLayers } from "../../../../document/UIData";
+import { OverlayElementProps } from "./FieldConstraintDisplayLayer";
 
 const STROKE = 0.1;
 const DOT = 0.1;
+const SELECT_COLOR = "var(--select-yellow)";
+const MOVABLE_COLOR = "red";
+const IMMOVABLE_COLOR = "rosybrown";
 
-type Props<K extends ConstraintKey> = {
-  data: IConstraintDataStore<K>;
-  start?: IHolonomicWaypointStore;
-  end?: IHolonomicWaypointStore;
-  lineColor: string;
-};
-class KeepOutCircleOverlay extends Component<Props<"KeepOutCircle">, object> {
+class KeepOutCircleOverlay extends Component<OverlayElementProps<"KeepOutCircle">, object> {
+  id = crypto.randomUUID();
   rootRef: React.RefObject<SVGGElement> = React.createRef<SVGGElement>();
   componentDidMount() {
     if (this.rootRef.current) {
@@ -26,26 +26,28 @@ class KeepOutCircleOverlay extends Component<Props<"KeepOutCircle">, object> {
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => this.dragPointTranslate(event))
         .on("start", () => {
-          doc.history.startGroup(() => {});
+          doc.history.startGroup(() => { });
+          this.props.select();
         })
         .on("end", (_event) => doc.history.stopGroup())
         .container(this.rootRef.current);
-      d3.select<SVGCircleElement, undefined>(`#dragTarget-keepOutCircle`).call(
-        dragHandleDrag
-      );
       d3.select<SVGCircleElement, undefined>(
-        `#dragTarget-keepOutCircleDot`
+        `#dragTarget-keepOutCircle` + this.id
+      ).call(dragHandleDrag);
+      d3.select<SVGCircleElement, undefined>(
+        `#dragTarget-keepOutCircleDot` + this.id
       ).call(dragHandleDrag);
       const radiusHandleDrag = d3
         .drag<SVGCircleElement, undefined>()
         .on("drag", (event) => this.dragPointRadius(event))
         .on("start", () => {
-          doc.history.startGroup(() => {});
+          doc.history.startGroup(() => { });
+          this.props.select();
         })
         .on("end", (_event) => doc.history.stopGroup())
         .container(this.rootRef.current);
       d3.select<SVGCircleElement, undefined>(
-        `#dragRadiusTarget-keepOutCircle`
+        `#dragRadiusTarget-keepOutCircle` + this.id
       ).call(radiusHandleDrag);
     }
   }
@@ -63,30 +65,42 @@ class KeepOutCircleOverlay extends Component<Props<"KeepOutCircle">, object> {
     this.props.data.r.set(r);
   }
 
+  getColor(): string {
+    if (this.props.selected) return SELECT_COLOR;
+    if (this.props.clickable) return MOVABLE_COLOR;
+    return IMMOVABLE_COLOR;
+  }
+
   render() {
     const data = this.props.data.serialize as DataMap["KeepOutCircle"];
     const x = data.props.x.val;
     const y = data.props.y.val;
     const r = data.props.r.val;
+    let color = this.getColor();
     return (
-      <g ref={this.rootRef}>
+      <g ref={this.rootRef} onClick={
+        () => {
+          if (this.props.clickable) this.props.select();
+        }}>
         {/* Main Circle */}
         <circle
           cx={x}
           cy={y}
           r={r - STROKE / 2}
-          fill={"red"}
+          fill={color}
           fillOpacity={0.1}
-          id="dragTarget-keepOutCircle"
+          id={"dragTarget-keepOutCircle" + this.id}
+          pointerEvents={"none"}
         ></circle>
         {/* Center Dot */}
         <circle
           cx={x}
           cy={y}
           r={r < DOT * 2 ? 0.0 : DOT}
-          fill={"red"}
+          fill={color}
           fillOpacity={1.0}
-          id="dragTarget-keepOutCircleDot"
+          id={"dragTarget-keepOutCircleDot" + this.id}
+          pointerEvents={"visible"}
         ></circle>
         {/* Radius Handle */}
         <circle
@@ -95,10 +109,10 @@ class KeepOutCircleOverlay extends Component<Props<"KeepOutCircle">, object> {
           r={r - STROKE / 2}
           fill={"transparent"}
           pointerEvents={"visibleStroke"}
-          stroke={"red"}
+          stroke={color}
           strokeWidth={STROKE}
           strokeOpacity={1.0}
-          id="dragRadiusTarget-keepOutCircle"
+          id={"dragRadiusTarget-keepOutCircle" + this.id}
         ></circle>
       </g>
     );
diff --git a/src/components/field/svg/constraintDisplay/PointAtOverlay.tsx b/src/components/field/svg/constraintDisplay/PointAtOverlay.tsx
index e51b63902b..f5a2dde7ba 100644
--- a/src/components/field/svg/constraintDisplay/PointAtOverlay.tsx
+++ b/src/components/field/svg/constraintDisplay/PointAtOverlay.tsx
@@ -8,14 +8,9 @@ import {
 } from "../../../../document/ConstraintDefinitions";
 import { doc } from "../../../../document/DocumentManager";
 import { IHolonomicWaypointStore } from "../../../../document/HolonomicWaypointStore";
+import { OverlayElementProps } from "./FieldConstraintDisplayLayer";
 
-type Props<K extends ConstraintKey> = {
-  data: IConstraintDataStore<K>;
-  start?: IHolonomicWaypointStore;
-  end?: IHolonomicWaypointStore;
-  lineColor: string;
-};
-class PointAtOverlay extends Component<Props<"PointAt">, object> {
+class PointAtOverlay extends Component<OverlayElementProps<"PointAt"> & {lineColor: string}, object> {
   rootRef: React.RefObject<SVGGElement> = React.createRef<SVGGElement>();
   componentDidMount() {
     if (this.rootRef.current) {
@@ -24,6 +19,7 @@ class PointAtOverlay extends Component<Props<"PointAt">, object> {
         .on("drag", (event) => this.dragPointTranslate(event))
         .on("start", () => {
           doc.history.startGroup(() => {});
+          this.props.select();
         })
         .on("end", (_event) => doc.history.stopGroup())
         .container(this.rootRef.current);
@@ -33,21 +29,25 @@ class PointAtOverlay extends Component<Props<"PointAt">, object> {
     }
   }
   dragPointTranslate(event: any) {
-    this.props.data.x.set(event.x);
-    this.props.data.y.set(event.y);
+      this.props.data.x.set(event.x);
+      this.props.data.y.set(event.y);
   }
   render() {
     if (this.props.start === undefined) {
       return <></>;
     }
     const data = this.props.data.serialize as DataMap["PointAt"];
+    const lineColor = this.props.selected ? "var(--select-yellow)" : "white"
     return (
-      <g ref={this.rootRef}>
+      <g ref={this.rootRef} onClick={
+        () => {
+          if (this.props.clickable) this.props.select();
+        }}>
         <circle
           cx={data.props.x.val}
           cy={data.props.y.val}
           r={0.1}
-          stroke={this.props.lineColor}
+          stroke={lineColor}
           strokeWidth={0.02}
           fill="transparent"
         ></circle>
@@ -56,9 +56,10 @@ class PointAtOverlay extends Component<Props<"PointAt">, object> {
           cx={data.props.x.val}
           cy={data.props.y.val}
           r={0.2}
-          stroke={this.props.lineColor}
+          stroke={lineColor}
           strokeWidth={0.02}
           fill="transparent"
+          pointerEvents={"visible"}
         ></circle>
       </g>
     );
diff --git a/src/document/UIData.tsx b/src/document/UIData.tsx
index 61673817d0..2a2860229f 100644
--- a/src/document/UIData.tsx
+++ b/src/document/UIData.tsx
@@ -1,4 +1,5 @@
 import {
+  BorderOuter,
   Circle,
   CircleOutlined,
   CropFree,
@@ -148,6 +149,12 @@ export const ViewData = {
     name: "Focus",
     icon: <CropFree />,
     default: false
+  },
+  Zones: {
+    index: 6,
+    name: "Zones",
+    icon: <BorderOuter />,
+    default: true
   }
 };