diff --git a/client/src/components/MiningAreasPanel.jsx b/client/src/components/MiningAreasPanel.jsx
index f748bfd..8c2c9b3 100644
--- a/client/src/components/MiningAreasPanel.jsx
+++ b/client/src/components/MiningAreasPanel.jsx
@@ -6,6 +6,7 @@ export default function MiningAreasPanel({ turtles, selectedTurtle, apiUrl }) {
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [newArea, setNewArea] = useState({
     areaName: '',
+    color: '#4a8c2a',
     startX: '',
     startY: '',
     startZ: '',
@@ -66,6 +67,7 @@ export default function MiningAreasPanel({ turtles, selectedTurtle, apiUrl }) {
           endX: Number(newArea.endX),
           endY: Number(newArea.endY),
           endZ: Number(newArea.endZ),
+          color: newArea.color,
           status: 'planned'
         })
       });