diff --git a/src/App.jsx b/src/App.jsx
index 5f3df15..63babbd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,7 +15,6 @@ import { saveAs } from 'file-saver';
 // 🧠 Initial State & Helpers
 const initialNodes = [];
 const initialEdges = [];
-let nodeId = 1;
 
 const getColor = (type) => {
   switch (type) {
@@ -27,7 +26,7 @@ const getColor = (type) => {
 };
 
 // 🤖 AI Logic with Domino Effect Thinking (Updated: Using Puter AI API)
-const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef) => {
+const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef, nodeId) => {
   try {
     if (stopGenerationRef.current) return;
     const res = await axios.post(
@@ -64,7 +63,7 @@ Return only 3 outputs: one of each type.`
     const childTypes = ['positive', 'neutral', 'negative'];
 
     const newNodes = lines.map((line, idx) => {
-      const newId = `${nodeId++}`;
+      const newId = `${nodeId.current++}`;
       return {
         id: newId,
         data: { label: line.replace(/^\d+\.\s*/, '') },
@@ -96,7 +95,7 @@ Return only 3 outputs: one of each type.`
     // Recursively expand each child one level deep
     for (const n of newNodes) {
       if (stopGenerationRef.current) break;
-      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef);
+      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef, nodeId);
     }
 
   } catch (err) {
@@ -115,6 +114,7 @@ export default function App() {
   const [loading, setLoading] = useState(false);
   const stopGenerationRef = useRef(false);
   const reactFlowWrapper = useRef(null);
+  const nodeId = useRef(1);
 
   const handleExport = () => {
     if (reactFlowWrapper.current) {
@@ -126,12 +126,18 @@ export default function App() {
     }
   };
 
+  const handleClear = () => {
+    setNodes([]);
+    setEdges([]);
+    nodeId.current = 1;
+  };
+
   const handleSubmit = async () => {
     if (!prompt.trim()) return;
     setLoading(true);
     stopGenerationRef.current = false;
 
-    const rootId = `${nodeId++}`;
+    const rootId = `${nodeId.current++}`;
     const rootNode = {
       id: rootId,
       data: { label: prompt },
@@ -150,7 +156,7 @@ export default function App() {
     setNodes([rootNode]);
     setEdges([]);
 
-    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef, nodeId);
 
     setPrompt('');
     setLoading(false);
@@ -164,7 +170,7 @@ export default function App() {
   const onNodeClick = async (_event, node) => {
     stopGenerationRef.current = false;
     setLoading(true);
-    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef, nodeId);
     setLoading(false);
   };
 
@@ -246,6 +252,22 @@ export default function App() {
           >
             Export as PNG
           </button>
+          <button
+            onClick={handleClear}
+            disabled={loading || nodes.length === 0}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#f44336',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: loading || nodes.length === 0 ? 'not-allowed' : 'pointer',
+              opacity: loading || nodes.length === 0 ? 0.7 : 1,
+            }}
+          >
+            Clear
+          </button>
         </div>
       </div>
 
@@ -267,4 +289,4 @@ export default function App() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file