src/features/cameras/components/CameraGrid.tsx

@@ -39,6 +39,13 @@ const CameraGrid = () => {
         tabIndex={tabIndex}
         setTabIndex={setTabIndex}
         paintedCells={paintedCellsRef}
+        onAddRegion={() => {
+          setRegions((prev) => [...prev, { name: `Region ${prev.length + 1}`, brushColour: "#ffffff" }]);
+        }}
+        OnRemoveRegion={() => {
+          setRegions((prev) => prev.filter((_, i) => i !== selectedRegionIndex));
+          setSelectedRegionIndex((prev) => (prev > 0 ? prev - 1 : 0));
+        }}
       />
       <PlatePatch />
     </div>

src/features/cameras/components/CameraSettings/CameraSettings.tsx

@@ -15,6 +15,8 @@ type CameraSettingsProps = {
   setTabIndex: (tabIndex: number) => void;
   tabIndex: number;
   paintedCells: RefObject<Map<string, PaintedCell>>;
+  onAddRegion: () => void;
+  OnRemoveRegion: () => void;
 };
 
 const CameraSettings = ({
@@ -27,6 +29,8 @@ const CameraSettings = ({
   tabIndex,
   setTabIndex,
   paintedCells,
+  onAddRegion,
+  OnRemoveRegion,
 }: CameraSettingsProps) => {
   return (
     <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
@@ -50,6 +54,8 @@ const CameraSettings = ({
             mode={mode}
             onSelectMode={onSelectMode}
             paintedCells={paintedCells}
+            onAddRegion={onAddRegion}
+            OnRemoveRegion={OnRemoveRegion}
           />
         </TabPanel>
         <TabPanel>

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -10,6 +10,8 @@ type RegionSelectorProps = {
   mode: string;
   onSelectMode: (mode: string) => void;
   paintedCells: RefObject<Map<string, PaintedCell>>;
+  onAddRegion: () => void;
+  OnRemoveRegion: () => void;
 };
 
 const RegionSelector = ({
@@ -20,16 +22,26 @@ const RegionSelector = ({
   mode,
   onSelectMode,
   paintedCells,
+  onAddRegion,
+  OnRemoveRegion,
 }: RegionSelectorProps) => {
   const handleChange = (e: { target: { value: string } }) => {
     onSelectMode(e.target.value);
   };
 
+  const handleAddClick = () => {
+    onAddRegion();
+  };
+
   const handleResetClick = () => {
     const map = paintedCells.current;
     map.clear();
   };
 
+  const handleRemoveClick = () => {
+    OnRemoveRegion();
+  };
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
@@ -102,6 +114,14 @@ const RegionSelector = ({
             );
           })}
         </>
+        <div className=" mx-auto flex flex-row gap-4  mt-4">
+          <button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddClick}>
+            Add Region
+          </button>
+          <button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
+            Remove Region
+          </button>
+        </div>
       </div>
 
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">