diff --git a/public/Tree-Traversal.png b/public/Tree-Traversal.png
new file mode 100644
index 0000000..73e2993
Binary files /dev/null and b/public/Tree-Traversal.png differ
diff --git a/src/App.jsx b/src/App.jsx
index 68f06cb..5cbaaa8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,6 +8,7 @@ import DSPage from "./pages/dataStructure/datastructurePage.jsx"
 import DynamicProgrammingPage from "./pages/dynamic-programming/DyanmicProgrammingPage.jsx";
 import Searchingpage from "./pages/searching/searchingPage";
 import RecursionPage from "./pages/Recursion/RecursionPage";
+import Treepage from "./pages/Tree/Treepage";
 import SlidingWindowPage from "./pages/sliding-window/SlidingWindowPage";
 function App() {
   return (
@@ -21,6 +22,7 @@ function App() {
         <Route path="/graph" element={<GraphPage />} />
         <Route path="/dynamic-programming" element={<DynamicProgrammingPage />} />
         <Route path="/recursion" element={<RecursionPage/>}/>
+        <Route path="/tree" element={<Treepage />} />
         <Route path="/sliding-window" element={<SlidingWindowPage/>}/>
       </Routes>
     </Router>
diff --git a/src/algorithms/Tree/treeTraversal.js b/src/algorithms/Tree/treeTraversal.js
new file mode 100644
index 0000000..8a2ebfb
--- /dev/null
+++ b/src/algorithms/Tree/treeTraversal.js
@@ -0,0 +1,278 @@
+function buildTreeFromLevelOrder(arr) {
+  if (!arr || arr.length === 0 || arr[0] === null) return null;
+  
+  const nodes = arr.map((val, idx) => 
+    val === null || val === -1 
+      ? null 
+      : { id: `n${idx}`, value: val, left: null, right: null }
+  );
+  const root = nodes[0];
+  if (!root) return null;
+  
+  const queue = [root];
+  let i = 1;
+  
+  while (queue.length > 0 && i < nodes.length) {
+    const current = queue.shift();
+    if (i < nodes.length && nodes[i] !== null) {
+      current.left = nodes[i];
+      queue.push(nodes[i]);
+    }
+    i++;
+    
+    if (i < nodes.length && nodes[i] !== null) {
+      current.right = nodes[i];
+      queue.push(nodes[i]);
+    }
+    i++;
+  }
+  return root;
+}
+function cloneTree(node) {
+  if (!node) return null;
+  return {
+    id: node.id,
+    value: node.value,
+    left: cloneTree(node.left),
+    right: cloneTree(node.right)
+  };
+}
+function getAllNodeIds(node) {
+  if (!node) return [];
+  return [node.id, ...getAllNodeIds(node.left), ...getAllNodeIds(node.right)];
+}
+
+//inorder
+export function* inorderTraversal(root) {
+  if (!root) {
+    yield {type: "error", message: "Tree is empty",  current: null, visited: [], path: [], subtree: "root" };
+    return;
+  }
+
+  const visited = [];
+  const path = [];
+  function* traverse(node) {
+    if (!node) return;
+    if (node.left) {
+      path.push(node.value);
+      yield {
+        type: "traverse_left",
+        message: `Moving to left subtree of ${node.value}`,
+        current: node.value, visited: [...visited], path: [...path], subtree: "left"
+      };
+      yield* traverse(node.left);
+      path.pop();
+    }
+    path.push(node.value);
+    visited.push(node.value);
+    yield {
+      type: "visit",
+      message: `Visiting ${node.value} (Inorder: Left → Root → Right)`,
+      current: node.value, visited: [...visited], path: [...path], subtree: "root"
+    };
+    if (node.right) {
+      yield {
+        type: "traverse_right",
+        message: `Moving to right subtree of ${node.value}`,
+        current: node.value, visited: [...visited], path: [...path], subtree: "root"
+      };
+      yield* traverse(node.right);
+    }
+    
+    path.pop();
+  }
+  yield* traverse(root);
+  
+  yield {
+    type: "complete",
+    message: `Inorder traversal complete: ${visited.join(" → ")}`,
+    current: null,  visited: visited, path: []
+  };
+}
+
+//preorder
+export function* preorderTraversal(root) {
+  if (!root) {
+    yield { type: "error", message: "Tree is empty", current: null, visited: [],  path: [] };
+    return;
+  }
+  const visited = [];
+  const path = [];
+  
+  function* traverse(node) {
+    if (!node) return;
+    path.push(node.value);
+    visited.push(node.value);
+    yield {
+      type: "visit",
+      message: `Visiting ${node.value} (Preorder: Root → Left → Right)`,
+      current: node.value,  visited: [...visited], path: [...path], subtree: "root"
+    };
+    if (node.left) {
+      yield {
+        type: "traverse_left",
+        message: `Moving to left subtree of ${node.value}`,
+        current: node.value, visited: [...visited],path: [...path]
+      };
+      yield* traverse(node.left);
+    }
+    
+    if (node.right) {
+      yield {
+        type: "traverse_right",
+        message: `Moving to right subtree of ${node.value}`,
+        current: node.value, visited: [...visited], path: [...path] };
+      yield* traverse(node.right);
+    }
+    path.pop();
+  }
+  
+  yield* traverse(root);
+  
+  yield { type: "complete", message: `Preorder traversal complete: ${visited.join(" → ")}`, current: null, visited: visited, path: []};
+}
+
+//postorder
+export function* postorderTraversal(root) {
+  if (!root) {
+    yield {  type: "error", message: "Tree is empty", current: null, visited: [], path: [] };
+    return;
+  }
+  const visited = [];
+  const path = [];
+  
+  function* traverse(node) {
+    if (!node) return;
+    path.push(node.value);
+    if (node.left) {
+      yield {
+        type: "traverse_left",
+        message: `Moving to left subtree of ${node.value}`,
+        current: node.value,
+        visited: [...visited],
+        path: [...path]
+      };
+      yield* traverse(node.left);
+    }
+    
+    if (node.right) {
+      yield {
+        type: "traverse_right",
+        message: `Moving to right subtree of ${node.value}`,
+        current: node.value,
+        visited: [...visited],
+        path: [...path]
+      };
+      yield* traverse(node.right);
+    }
+    visited.push(node.value);
+    yield {
+      type: "visit",
+      message: `Visiting ${node.value} (Postorder: Left → Right → Root)`,
+      current: node.value,
+      visited: [...visited],
+      path: [...path],
+      subtree: "root"
+    };
+    path.pop();
+  }
+  yield* traverse(root);
+  yield {
+    type: "complete",
+    message: `Postorder traversal complete: ${visited.join(" → ")}`,
+    current: null,
+    visited: visited,
+    path: []
+  };
+}
+export function* treeTraversalGenerator(treeData, traversalType = "all") {
+  const root = buildTreeFromLevelOrder(treeData);
+  if (!root) {
+    yield {
+      type: "error",
+      message: "Invalid tree data",
+      tree: null,
+      step: null
+    };
+    return;
+  }
+  if (traversalType === "all") {
+    const traversals = [
+      { name: "inorder", generator: inorderTraversal },
+      { name: "preorder", generator: preorderTraversal },
+      { name: "postorder", generator: postorderTraversal }
+    ];
+    const results = {
+      inorder: { visited: [], steps: [] },
+      preorder: { visited: [], steps: [] },
+      postorder: { visited: [], steps: [] }
+    };
+    for (const { name, generator } of traversals) {
+      for (const step of generator(cloneTree(root))) {
+        results[name].steps.push(step);
+        if (step.type === "complete") {
+          results[name].visited = step.visited;
+        }
+      }
+    }
+    yield {
+      type: "sync_step",
+      tree: cloneTree(root),
+      stepIndex: -1,
+      inorder: { type: "start", message: "Starting Inorder traversal", visited: [], path: [] },
+      preorder: { type: "start", message: "Starting Preorder traversal", visited: [], path: [] },
+      postorder: { type: "start", message: "Starting Postorder traversal", visited: [], path: [] }
+    };
+    const maxSteps = Math.max(
+      results.inorder.steps.length,
+      results.preorder.steps.length,
+      results.postorder.steps.length
+    );
+    for (let i = 0; i < maxSteps; i++) {
+      const step = {
+        type: "sync_step",
+        tree: cloneTree(root),
+        stepIndex: i,
+        inorder: results.inorder.steps[i] || results.inorder.steps[results.inorder.steps.length - 1] || null,
+        preorder: results.preorder.steps[i] || results.preorder.steps[results.preorder.steps.length - 1] || null,
+        postorder: results.postorder.steps[i] || results.postorder.steps[results.postorder.steps.length - 1] || null
+      };
+      yield step;
+    }
+    yield {
+      type: "complete",
+      tree: cloneTree(root),
+      inorder: results.inorder.visited,
+      preorder: results.preorder.visited,
+      postorder: results.postorder.visited,
+      message: `All traversals complete. Inorder: [${results.inorder.visited.join(", ")}], Preorder: [${results.preorder.visited.join(", ")}], Postorder: [${results.postorder.visited.join(", ")}]`
+    };
+  } else {
+    let generator;
+    if (traversalType === "inorder") {
+      generator = inorderTraversal;
+    } else if (traversalType === "preorder") {
+      generator = preorderTraversal;
+    } else if (traversalType === "postorder") {
+      generator = postorderTraversal;
+    } else {
+      yield {
+        type: "error",
+        message: "Invalid traversal type",
+        tree: null,
+        step: null
+      };
+      return;
+    }
+    for (const step of generator(cloneTree(root))) {
+      yield {
+        type: "single_step",
+        tree: cloneTree(root),
+        traversal: traversalType,
+        step: step
+      };
+    }
+  }
+}
+export { buildTreeFromLevelOrder, cloneTree, getAllNodeIds };
+
diff --git a/src/components/Tree/TreeTraversalVisualizer.jsx b/src/components/Tree/TreeTraversalVisualizer.jsx
new file mode 100644
index 0000000..6440e78
--- /dev/null
+++ b/src/components/Tree/TreeTraversalVisualizer.jsx
@@ -0,0 +1,296 @@
+import React, { useEffect, useRef, useState, useMemo } from "react";
+
+export default function TreeTraversalVisualizer({
+  tree = null,
+  currentStep = null,
+  traversalType = "all",
+  nodeSize = 60,
+  gapY = 100,
+  gapX = 80
+}) {
+  const containerRef = useRef(null);
+  const [layoutNodes, setLayoutNodes] = useState([]);
+  const [containerWidth, setContainerWidth] = useState(1000);
+  const [containerHeight, setContainerHeight] = useState(600);
+  const nodeIdMapRef = useRef(new WeakMap());
+  const nextIdRef = useRef(1);
+  const getNodeVizId = (node) => {
+    if (!node) return null;
+    if (node.id !== undefined && node.id !== null) return String(node.id);
+    const map = nodeIdMapRef.current;
+    if (map.has(node)) return map.get(node);
+    const id = `viz_${nextIdRef.current++}`;
+    map.set(node, id);
+    return id;
+  };
+  useEffect(() => {
+    if (!tree) {
+      setLayoutNodes([]);
+      return;
+    }
+
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (rect) {
+      setContainerWidth(rect.width || 1000);
+      setContainerHeight(rect.height || 600);
+    }
+
+    //tree height
+    function getTreeHeight(node) {
+      if (!node) return 0;
+      return 1 + Math.max(
+        getTreeHeight(node.left),
+        getTreeHeight(node.right)
+      );
+    }
+
+    const treeHeight = getTreeHeight(tree);
+    setContainerHeight(Math.max(treeHeight * gapY + 200, 400));
+    const layoutMap = new Map();
+    const usableWidth = Math.max(containerWidth - 100, 800);
+    const maxDepth = treeHeight - 1;
+    const baseSpacing = Math.max(80, gapX);
+    const inorderPositions = new Map();
+    let inorderIndex = 0;
+    
+    function assignInorderPositions(node) {
+      if (!node) return;
+      assignInorderPositions(node.left);
+      inorderPositions.set(node, inorderIndex++);
+      assignInorderPositions(node.right);
+    }
+    assignInorderPositions(tree);
+    
+    function assignPositions(node, depth) {
+      if (!node) return;
+      
+      const id = getNodeVizId(node);
+      const inorderPos = inorderPositions.get(node);
+      const totalNodes = inorderPositions.size;
+      
+      const spacing = usableWidth / (totalNodes + 1);
+      const x = 50 + spacing * (inorderPos + 1);
+      const y = depth * gapY + 80;
+      
+      layoutMap.set(id, { id,  value: node.value, rawNode: node, x, y, depth });
+      assignPositions(node.left, depth + 1);
+      assignPositions(node.right, depth + 1);
+    }
+    
+    assignPositions(tree, 0);
+    
+    const layoutArray = Array.from(layoutMap.values());
+    setLayoutNodes(layoutArray);
+  }, [tree, containerWidth, gapY, gapX, nodeSize]);
+
+  useEffect(() => {
+    const onResize = () => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (rect) {
+        setContainerWidth(rect.width || 1000);
+      }
+    };
+    window.addEventListener("resize", onResize);
+    onResize();
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  // Build edges
+  const edges = useMemo(() => {
+    if (!tree || !layoutNodes.length) return [];
+    const edgesArray = [];
+    const nodeMap = new Map(layoutNodes.map(n => [n.id, n]));
+    
+    function buildEdges(node) {
+      if (!node) return;
+      const fromId = getNodeVizId(node);
+      const fromNode = nodeMap.get(fromId);
+      
+      if (!fromNode) return;
+      if (node.left) {
+        const toId = getNodeVizId(node.left);
+        const toNode = nodeMap.get(toId);
+        if (toNode) {
+          edgesArray.push({ from: fromNode, to: toNode, side: "left" });
+        }
+        buildEdges(node.left);
+      }
+      if (node.right) {
+        const toId = getNodeVizId(node.right);
+        const toNode = nodeMap.get(toId);
+        if (toNode) {
+          edgesArray.push({ from: fromNode, to: toNode, side: "right" });
+        }
+        buildEdges(node.right);
+      }
+    }
+    buildEdges(tree);
+    return edgesArray;
+  }, [tree, layoutNodes]);
+
+  const getNodeClass = (nodeLayout) => {
+    if (!currentStep) {
+      return "bg-gray-700 text-white border-2 border-gray-600";
+    }
+    let step = null;
+    if (currentStep.type === "single_step" && currentStep.step) {
+      step = currentStep.step;
+    } else if (currentStep.step) {
+      step = currentStep.step;
+    } else {
+      step = currentStep;
+    }
+    if (!step) {
+      return "bg-gray-700 text-white border-2 border-gray-600";
+    }
+
+    const stepType = step.type;
+    const currentId = step.current;
+    const path = step.path || [];
+    const visited = step.visited || [];
+    const nodeValue = nodeLayout.rawNode?.value ?? nodeLayout.value;
+    const nodeValueStr = String(nodeValue);
+    const currentIdStr = currentId ? String(currentId) : null;
+    
+    if (currentIdStr && currentIdStr === nodeValueStr) {
+      if (stepType === "visit") {
+        return "bg-emerald-500 text-white border-4 border-emerald-300 ring-4 ring-emerald-400 ring-opacity-70 shadow-xl transform scale-110 z-20";
+      } else if (stepType === "traverse_left" || stepType === "traverse_right") {
+        return "bg-blue-500 text-white border-4 border-blue-300 ring-2 ring-blue-400 ring-opacity-60 z-10";
+      }
+    }
+    const pathMatches = path.some(p => String(p) === nodeValueStr);
+    if (pathMatches && stepType !== "visit" && (!currentIdStr || currentIdStr !== nodeValueStr)) {
+      return "bg-indigo-600 text-white border-2 border-indigo-400";
+    }
+    if (stepType === "visit" && visited && visited.length > 0 && visited.includes(nodeValue)) {
+      if (!currentIdStr || currentIdStr !== nodeValueStr) {
+        return "bg-violet-600 text-white border-2 border-violet-400 opacity-90";
+      }
+    }
+    return "bg-gray-700 text-white border-2 border-gray-600";
+  };
+
+  // Render node
+  const Node = ({ n }) => {
+    const cls = getNodeClass(n);
+    const radius = nodeSize / 2;
+
+    return (
+      <div
+        key={n.id}
+        className={`${cls} flex items-center justify-center rounded-full shadow-lg font-bold transition-all duration-500 ease-in-out cursor-default`}
+        style={{ position: "absolute", left: `${n.x - radius}px`, top: `${n.y - radius}px`, width: `${nodeSize}px`, height: `${nodeSize}px`, zIndex: 10, fontWeight: 700 }}>
+        <span className="text-base select-none drop-shadow-md">{String(n.value)}</span>
+      </div>
+    );
+  };
+  const SvgEdges = () => {
+    if (!layoutNodes.length) return null;
+    return (
+      <svg  className="absolute inset-0 pointer-events-none"  width={containerWidth} height={containerHeight} style={{ zIndex: 1 }}>
+        <defs>
+          <linearGradient id="edge-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#60a5fa" stopOpacity="0.6" />
+            <stop offset="100%" stopColor="#8b5cf6" stopOpacity="0.6" />
+          </linearGradient>
+          <linearGradient id="edge-active" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#10b981" stopOpacity="1" />
+            <stop offset="100%" stopColor="#34d399" stopOpacity="1" />
+          </linearGradient>
+        </defs>
+        {edges.map((e, i) => {
+          const x1 = e.from.x;
+          const y1 = e.from.y + nodeSize * 0.45;
+          const x2 = e.to.x;
+          const y2 = e.to.y - nodeSize * 0.45;
+
+          let step = null;
+          if (currentStep?.type === "single_step" && currentStep.step) step = currentStep.step;
+          else if (currentStep?.step) step = currentStep.step;
+          else step = currentStep;
+          
+          const path = step?.path || [];
+          const fromValue = e.from.rawNode?.value ?? e.from.value;
+          const toValue = e.to.rawNode?.value ?? e.to.value;
+          const isInPath = path.some(p => String(p) === String(fromValue)) && 
+                          path.some(p => String(p) === String(toValue));
+          const midX = (x1 + x2) / 2;
+          const controlY = Math.min(y1, y2) - 30;
+          const d = `M ${x1} ${y1} Q ${midX} ${controlY} ${x2} ${y2}`;
+
+          return (
+            <path
+              key={`${e.from.id}-${e.to.id}-${i}`}
+              d={d}
+              fill="none"
+              stroke={isInPath ? "url(#edge-active)" : "url(#edge-gradient)"}
+              strokeWidth={isInPath ? 3.5 : 2.5}
+              strokeDasharray={isInPath ? "0" : "5,5"}
+              style={{ 
+                transition: "all 0.6s ease",
+                filter: isInPath ? "drop-shadow(0 0 6px rgba(16, 185, 129, 0.6))" : "none"
+              }}
+            />
+          );
+        })}
+      </svg>
+    );
+  };
+
+  if (!tree) {
+    return (
+      <div className="flex items-center justify-center h-64 bg-gray-900/30 rounded-xl border-2 border-gray-700">
+        <div className="text-center">
+          <div className="text-4xl mb-3">🌳</div>
+          <div className="text-gray-400 font-medium">No tree data to visualize</div>
+        </div>
+      </div>
+    );
+  }
+  const getVisitedArray = () => {
+    if (!currentStep) return [];
+    let step = null;
+    if (currentStep.type === "single_step" && currentStep.step) step = currentStep.step;
+    else if (currentStep.step) step = currentStep.step;
+    else step = currentStep;
+    return step?.visited || [];
+  };
+  const visitedArray = getVisitedArray();
+  return (
+    <div className="w-full py-6">
+      <div
+        ref={containerRef}
+        className="relative w-full bg-gradient-to-br from-gray-900/80 to-gray-800/60 rounded-xl border-2 border-gray-700/80 overflow-hidden shadow-2xl backdrop-blur-sm mx-auto"
+        style={{ minHeight: `${containerHeight}px` }}>
+      <SvgEdges />
+      {layoutNodes.map((n) => (
+        <Node key={n.id} n={n} />
+      ))}
+      {visitedArray.length > 0 && (
+        <div className="absolute bottom-4 left-4 right-4 bg-gray-800/95 backdrop-blur-md rounded-lg p-4 border-2 border-gray-600 shadow-xl">
+          <div className="text-xs text-gray-400 mb-2 font-semibold uppercase tracking-wide">Traversal Sequence:</div>
+          <div className="flex flex-wrap gap-2 items-center">
+            {visitedArray.map((val, idx) => {
+              const isLast = idx === visitedArray.length - 1;
+              return (
+                <React.Fragment key={idx}>
+                  <span
+                    className={`px-3 py-1.5 rounded-md text-sm font-bold transition-all duration-300 ${
+                      isLast
+                        ? "bg-emerald-500 text-white scale-110 shadow-lg ring-2 ring-emerald-300"
+                        : "bg-violet-600 text-white shadow-md" }`} >
+                    {val}</span>
+                  {idx < visitedArray.length - 1 && (
+                    <span className="text-gray-500 font-bold">→</span>)}
+                </React.Fragment>
+              );
+            })}
+          </div>
+        </div>
+      )}
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx
index 318180d..f643a23 100644
--- a/src/pages/Homepage.jsx
+++ b/src/pages/Homepage.jsx
@@ -80,6 +80,15 @@ const sections = [
     link: "/dynamic-programming",
     flag: false,
   },
+  {
+    title: "Tree Traversal",
+    description:
+      "Visualize inorder, preorder, and postorder tree traversals step by step.",
+    phase: "Phase 2",
+    img: "/Tree-Traversal.png",
+    link: "/tree",
+    flag: false,
+  },
 ];
 
 const Homepage = () => {
diff --git a/src/pages/Tree/TreeTraversal.jsx b/src/pages/Tree/TreeTraversal.jsx
new file mode 100644
index 0000000..e3b2052
--- /dev/null
+++ b/src/pages/Tree/TreeTraversal.jsx
@@ -0,0 +1,303 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Toaster, toast } from "react-hot-toast";
+import { ArrowLeft, Play, Pause, StepForward, RotateCcw, TreePine } from "lucide-react";
+import TreeTraversalVisualizer from "../../components/Tree/TreeTraversalVisualizer";
+import { treeTraversalGenerator, buildTreeFromLevelOrder } from "../../algorithms/Tree/treeTraversal";
+
+export default function TreeTraversal() {
+  const [selectedTraversal, setSelectedTraversal] = useState("");
+  const [treeData, setTreeData] = useState([1, 2, 3, 4, 5, null, 6, 7]);
+  const [inputString, setInputString] = useState("1,2,3,4,5,-1,6,7");
+  const [speed, setSpeed] = useState(800);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentStep, setCurrentStep] = useState(null);
+  const [steps, setSteps] = useState([]);
+  const [stepIndex, setStepIndex] = useState(-1);
+  const [tree, setTree] = useState(null);
+  const [finalResult, setFinalResult] = useState([]);
+  const generatorRef = useRef(null);
+  const timerRef = useRef(null);
+  const stepsRef = useRef([]);
+
+  useEffect(() => {
+    const root = buildTreeFromLevelOrder(treeData);
+    setTree(root);
+    if (root && selectedTraversal) {
+      setSteps([]);
+      setStepIndex(-1);
+      setCurrentStep(null);
+      setIsPlaying(false);
+    }
+  }, [treeData, selectedTraversal]);
+
+  const handleInputChange = (e) => {
+    const value = e.target.value;
+    setInputString(value);
+    try {
+      const parsed = value
+        .split(",")
+        .map((p) =>
+          ["-1", "", "null"].includes(p.trim().toLowerCase())
+            ? null
+            : Number(p.trim())
+        );
+      setTreeData(parsed);
+      setSteps([]);
+      setStepIndex(-1);
+      setCurrentStep(null);
+      setIsPlaying(false);
+    } catch (err) {
+      console.error("Error parsing input:", err);
+    }
+  };
+
+  const loadDemo = () => {
+    const demo = [1, 2, 3, 4, 5, null, 6, 7, null, null, null, null, null, 8, 9];
+    setTreeData(demo);
+    setInputString("1,2,3,4,5,-1,6,7,-1,-1,-1,-1,-1,8,9");
+    setSteps([]);
+    setStepIndex(-1);
+    setCurrentStep(null);
+    setIsPlaying(false);
+  };
+
+  useEffect(() => {
+    if (!selectedTraversal || !tree) return;
+    setIsPlaying(false);
+    clearTimeout(timerRef.current);
+
+    const newSteps = [];
+    generatorRef.current = treeTraversalGenerator(treeData, selectedTraversal);
+    try {
+      for (const step of generatorRef.current) newSteps.push(step);
+      stepsRef.current = newSteps;
+      setSteps(newSteps);
+      setStepIndex(0);
+      setCurrentStep(newSteps[0] || null);
+
+      const lastStep = newSteps.at(-1);
+      const visited = lastStep?.step?.visited ?? [];
+      setFinalResult(visited);
+    } catch (error) {
+      console.error("Error generating steps:", error);
+      toast.error("Error generating traversal steps");
+    }
+  }, [selectedTraversal, treeData, tree]);
+
+  useEffect(() => {
+    if (isPlaying && stepIndex < steps.length - 1) {
+      timerRef.current = setTimeout(() => {
+        setStepIndex((prev) =>
+          prev + 1 < steps.length ? prev + 1 : steps.length - 1
+        );
+      }, speed);
+    } else if (stepIndex >= steps.length - 1) {
+      setIsPlaying(false);
+    }
+    return () => clearTimeout(timerRef.current);
+  }, [isPlaying, stepIndex, steps.length, speed]);
+
+  useEffect(() => {
+    if (stepIndex >= 0 && stepIndex < steps.length)
+      setCurrentStep(steps[stepIndex]);
+  }, [stepIndex, steps]);
+
+  const togglePlay = () => {
+    if (steps.length === 0) return;
+    if (stepIndex >= steps.length - 1) {
+      setStepIndex(0);
+      setIsPlaying(true);
+    } else setIsPlaying(!isPlaying);
+  };
+  const stepForward = () => {
+    if (stepIndex < steps.length - 1) {
+      setStepIndex((p) => p + 1);
+      setIsPlaying(false);
+    }
+  };
+  const stepBackward = () => {
+    if (stepIndex > 0) {
+      setStepIndex((p) => p - 1);
+      setIsPlaying(false);
+    }
+  };
+  const reset = () => {
+    setIsPlaying(false);
+    clearTimeout(timerRef.current);
+    setSteps([]);
+    setStepIndex(-1);
+    setCurrentStep(null);
+    setFinalResult([]);
+    setSelectedTraversal("");
+  };
+
+  const getTraversalDescription = (type) =>
+    type === "inorder"
+      ? "Left → Root → Right"
+      : type === "preorder"
+      ? "Root → Left → Right"
+      : "Left → Right → Root";
+
+  if (!selectedTraversal) {
+    return (
+      <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center px-6 py-10">
+        <TreePine className="w-16 h-16 text-white mb-5" />
+        <h1 className="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 via-white to-green-400 mb-4 text-center">
+          Tree Traversal Algorithms
+        </h1>
+        <p className="text-gray-400 max-w-2xl text-center mb-12">
+          Select a traversal method to visualize how it explores tree nodes —
+          simple, elegant, and interactive.
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl w-full">
+          {[
+            {
+              id: "inorder",
+              title: "Inorder Traversal",
+              desc: "Left → Root → Right",
+            },
+            {
+              id: "preorder",
+              title: "Preorder Traversal",
+              desc: "Root → Left → Right",
+            },
+            {
+              id: "postorder",
+              title: "Postorder Traversal",
+              desc: "Left → Right → Root",
+            },
+          ].map((t) => (
+            <div
+              key={t.id}
+              onClick={() => setSelectedTraversal(t.id)}
+              className={`relative bg-gray-700/80 backdrop-blur-md rounded-2xl p-6 text-center border border-gray-800 cursor-pointer transition-all duration-300 hover:scale-105`}
+            >
+              <div className="text-5xl mb-4">🌳</div>
+              <h3 className="text-xl font-bold text-white mb-2">{t.title}</h3>
+              <p className="text-gray-400 mb-4 text-sm font-medium">{t.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="w-full h-full bg-gray-800 text-white flex flex-col">
+      <Toaster position="top-center" />
+      {/* Control Bar */}
+      <div className="p-4 border-b border-gray-800 bg-gray-900/60 backdrop-blur-lg flex flex-wrap items-center gap-4 justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setSelectedTraversal("")}
+            className="flex items-center text-indigo-400 hover:text-indigo-300 text-sm font-semibold"
+          >
+            <ArrowLeft size={16} className="mr-1" /> Back
+          </button>
+          <input
+            value={inputString}
+            onChange={handleInputChange}
+            className="bg-gray-800 border border-gray-700 text-white px-3 py-2 rounded-lg text-sm w-48 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+          />
+          <button
+            onClick={loadDemo}
+            className="bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded-lg text-sm"
+          >
+            Demo
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {["inorder", "preorder", "postorder"].map((t) => (
+            <button
+              key={t}
+              onClick={() => setSelectedTraversal(t)}
+              className={`px-3 py-2 rounded-lg text-sm font-semibold transition-all ${
+                selectedTraversal === t
+                  ? "bg-blue-800 text-white shadow-md"
+                  : "bg-gray-800 hover:bg-gray-700 text-gray-300"
+              }`}
+            >
+              {t.charAt(0).toUpperCase() + t.slice(1)}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-3">
+          <label className="text-sm text-gray-400">Speed:</label>
+          <input  type="range"  min="200" max="2000" step="100" value={speed} onChange={(e) => setSpeed(Number(e.target.value))} className="accent-blue-500 w-24" />
+          <span className="text-xs text-gray-500">{speed}ms</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={togglePlay}
+            className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm"
+          >
+            {isPlaying ? <Pause size={16} /> : <Play size={16} />}
+            {isPlaying ? "Pause" : "Play"}
+          </button>
+          <button
+            onClick={stepForward}
+            className="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg"
+          >
+            <StepForward size={16} />
+          </button>
+          <button
+            onClick={stepBackward}
+            className="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg"
+          >
+            ←
+          </button>
+          <button
+            onClick={reset}
+            className="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg"
+          >
+            <RotateCcw size={16} />
+          </button>
+        </div>
+      </div>
+
+      <div className="p-6 flex justify-between items-center border-b border-gray-800 bg-gray-900/60 backdrop-blur-sm">
+        <div>
+          <h1 className="text-3xl font-bold">
+            {selectedTraversal.charAt(0).toUpperCase() +
+              selectedTraversal.slice(1)}{" "}
+            Traversal
+          </h1>
+          <p className="text-sm text-gray-400">
+            {getTraversalDescription(selectedTraversal)}
+          </p>
+        </div>
+        {finalResult.length > 0 && (
+          <div>
+            <h4 className="text-xs uppercase tracking-wider text-indigo-300 mb-1">
+              Final Sequence
+            </h4>
+            <div className="flex flex-wrap gap-2 font-mono text-indigo-200 text-base">
+              {finalResult.map((v, i) => (
+                <React.Fragment key={i}>
+                  <span className="bg-indigo-600/20 px-3 py-1 rounded-full border border-indigo-400/30">
+                    {v}
+                  </span>
+                  {i < finalResult.length - 1 && (
+                    <span className="text-indigo-400">→</span>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="flex-1 overflow-auto p-6 bg-gray-950">
+        {tree ? (
+          <TreeTraversalVisualizer
+            tree={tree}
+            currentStep={currentStep}
+            traversalType={selectedTraversal}
+          />
+        ) : (
+          <div className="text-gray-400 text-center mt-20">Loading Tree...</div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Tree/Treepage.jsx b/src/pages/Tree/Treepage.jsx
new file mode 100644
index 0000000..9df62e8
--- /dev/null
+++ b/src/pages/Tree/Treepage.jsx
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { TreePine } from "lucide-react";
+import TreeTraversal from "./TreeTraversal";
+
+export default function Treepage() {
+  const [selectedAlgo, setSelectedAlgo] = useState("");
+
+  const renderAlgorithm = () => {
+    switch (selectedAlgo) {
+      case "tree-traversal":
+        return <TreeTraversal />;
+      default:
+        return (
+          <div className="flex flex-col items-center justify-center text-center p-6 mt-24">
+            <div className="text-white border-2 p-[2px] rounded-2xl">
+              <div className="bg-gray-700 rounded-2xl px-10 py-12 shadow-2xl">
+                <div className="flex justify-center mb-4">
+                  <TreePine className="w-16 h-16 text-white" />
+                </div>
+                <h2 className="text-2xl font-extrabold text-white mb-2">
+                  Tree Algorithm Visualizer
+                </h2>
+                <p className="text-gray-400 mb-6 max-w-sm">
+                  Select a tree algorithm from the sidebar to begin
+                  visualization. Watch how nodes are traversed step by step!
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="flex h-screen bg-black text-white">
+      {/* Sidebar */}
+      <div className="w-64 bg-[#0f172a] p-6 border-r border-gray-800 flex-shrink-0">
+        <h2 className="text-xl font-bold mb-6 text-indigo-400 tracking-wide">
+          Tree Panel
+        </h2>
+        <label className="block mb-2 text-sm">Algorithm:</label>
+        <select
+          value={selectedAlgo}
+          onChange={(e) => setSelectedAlgo(e.target.value)}
+          className="w-full p-2 rounded bg-[#1e293b] text-white border border-gray-600 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+        >
+          <option value="">Select Algorithm</option>
+          <option value="tree-traversal">Tree Traversal</option>
+        </select>
+        <button
+          onClick={() => setSelectedAlgo("")}
+          className="w-full mt-4 py-2 bg-gray-700 hover:bg-gray-600 rounded transition font-medium"
+        >
+          Reset
+        </button>
+        <a href="/"  className="inline-block mt-10 text-indigo-400 hover:underline text-sm" >
+          ← Back to Home
+        </a>
+      </div>
+      <div className="flex-1 flex overflow-auto">
+        <div className="flex-1 min-w-[800px] min-h-full p-4 overflow-y-auto">
+          {renderAlgorithm()}
+        </div>
+      </div>
+    </div>
+  );
+}