diff --git a/code/assets/js/visual/Grid/index.js b/code/assets/js/visual/Grid/index.js
index a0bd844..9d46f3a 100644
--- a/code/assets/js/visual/Grid/index.js
+++ b/code/assets/js/visual/Grid/index.js
@@ -1,10 +1,10 @@
 import {
-	createEmptyBoard,
-	createBoard,
-	createStartNode,
-	createEndNode,
-	refreshBoard,
-	refreshEmptyBoard,
+  createEmptyBoard,
+  createBoard,
+  createStartNode,
+  createEndNode,
+  refreshBoard,
+  refreshEmptyBoard,
 } from "./createGrid.js";
 import { setWall } from "./createWalls.js";
 import { setObstacles } from "./generateObstacles.js";
@@ -13,10 +13,11 @@ import { bfs } from "../PathFindingAlgorithms/bfs.js";
 import { bfsIslands } from "../Islands/bfsIslands.js";
 import { dfsIslands } from "../Islands/dfsIslands.js";
 import { maxIsland } from "../Islands/largeIsland.js";
+import { findPaths } from "../PathFindingAlgorithms/findPaths.js";
 import {
-	bellmanFord,
-	relaxations,
-	bellmanStepsLength,
+  bellmanFord,
+  relaxations,
+  bellmanStepsLength,
 } from "../PathFindingAlgorithms/bellmanFord.js";
 
 // get dom elements
@@ -26,13 +27,16 @@ export const resetBtn = document.querySelector(".reset");
 const weightBtn = document.querySelector(".weight");
 const algoBtn = document.querySelector(".algo");
 export const startBtn = document.querySelector(".start");
+export const findNextPath = document.querySelector(".findNext");
 export const wallBtn = document.querySelector(".setWalls");
 export const speedSlider = document.querySelector(".speedSlider");
 const islandAlgoBtn = document.querySelector(".islandsAlgo");
 export const stepsContainer = document.querySelector(".notification");
 export const algorithmType = document.querySelector(".algorithm");
 export var manualStart = document.querySelector(".manual");
+
 manualStart.setAttribute("disabled", "true");
+findNextPath.setAttribute("disabled", "true");
 
 //global variables
 export var rowSize = 20;
@@ -45,7 +49,7 @@ export var mouseDown = false;
 export var weightType = weightBtn.options[weightBtn.selectedIndex].value;
 export var algorithm = algoBtn.options[algoBtn.selectedIndex].value;
 export var islandAlgo =
-	islandAlgoBtn.options[islandAlgoBtn.selectedIndex].value;
+  islandAlgoBtn.options[islandAlgoBtn.selectedIndex].value;
 
 //steps arrays
 export let bfsSteps = [];
@@ -53,42 +57,45 @@ export let dfsSteps = [];
 export let bellmanSteps = [];
 export let dijkstrasPath = [];
 export let bellmanFordPath = [];
+export let visitedPaths = [];
 
 //event listeners
 gridContainer.addEventListener("mousedown", () => {
-	mouseDown = true;
+  mouseDown = true;
 });
 gridContainer.addEventListener("mouseup", () => {
-	mouseDown = false;
+  mouseDown = false;
 });
 gridContainer.addEventListener("mouseover", () => {
-	setWall;
+  setWall;
 });
 wallBtn.addEventListener("click", setObstacles);
 
 islandAlgoBtn.addEventListener("change", () => {
-	window.location.reload();
+  window.location.reload();
 });
 
 //clear path after traversal
 export const clearPath = () => {
-	gridContainer.addEventListener("mousedown", setWall);
-	gridContainer.addEventListener("mouseup", setWall);
-	gridContainer.addEventListener("mouseover", setWall);
-	if (
-		algorithmType.classList.contains("bfs") ||
-		algorithmType.classList.contains("dfs") ||
-		algorithmType.classList.contains("numIslands") ||
-		algorithmType.classList.contains("maxIsland")
-	) {
-		refreshEmptyBoard();
-	} else if (
-		algorithmType.classList.contains("dijkstras") ||
-		algorithmType.classList.contains("bellman-ford")
-	) {
-		refreshBoard();
-	}
-	startBtn.style.visibility = "visible";
+  gridContainer.addEventListener("mousedown", setWall);
+  gridContainer.addEventListener("mouseup", setWall);
+  gridContainer.addEventListener("mouseover", setWall);
+  if (
+    algorithmType.classList.contains("bfs") ||
+    algorithmType.classList.contains("dfs") ||
+    algorithmType.classList.contains("numIslands") ||
+    algorithmType.classList.contains("maxIsland") ||
+    algorithmType.classList.contains("findPaths") ||
+    algorithmType.classList.contains("findPaths")
+  ) {
+    refreshEmptyBoard();
+  } else if (
+    algorithmType.classList.contains("dijkstras") ||
+    algorithmType.classList.contains("bellman-ford")
+  ) {
+    refreshBoard();
+  }
+  startBtn.style.visibility = "visible";
 };
 
 resetBtn.addEventListener("click", () => location.reload());
@@ -102,223 +109,247 @@ stepsContainer.append(stepsTitle);
 
 //log steps for algorithm
 export const notification = (row, col, erow, ecol, cost, prevCost) => {
-	var step = document.createElement("div");
-	step.classList.add("step");
-	var push = document.createElement("p");
-	var explore = document.createElement("p");
-	var costText = document.createElement("p");
-	if (algorithmType.classList.contains("bellman-ford")) {
-		if (bellmanSteps.length == 0) {
-			push.textContent = `Selected (${row}, ${col}) as path.`;
-		} else {
-			if (
-				bellmanSteps.length <=
-				bellmanStepsLength - bellmanStepsLength / relaxations
-			) {
-				push.textContent = `Relaxing (${row}, ${col}): current cost ${prevCost}, updated cost ${
-					cost || "inf"
-				}.`;
-				explore.textContent = `Processing (${erow}, ${ecol}).`;
-			} else {
-				push.textContent = `Pushed (${row}, ${col}) to dist[] array.`;
-				explore.textContent = `Exploring (${erow}, ${ecol}).`;
-			}
-		}
-	} else if (
-		algorithmType.classList.contains("dijkstras") ||
-		algorithmType.classList.contains("bfs")
-	) {
-		if (bfsSteps.length == 0) {
-			push.textContent = `Selected (${row}, ${col}) as path.`;
-		} else {
-			push.textContent = `Pushed (${row}, ${col}) to array.`;
-			explore.textContent = `Processing (${erow}, ${ecol}).`;
-			costText.textContent = `Cost from source is ${cost}`;
-		}
-	} else if (algorithmType.classList.contains("dfs")) {
-		if (row == erow && col == ecol) {
-			push.textContent = `Pushed (${erow}, ${ecol}) to stack.`;
-			explore.textContent = `Exploring (${erow}, ${ecol}).`;
-		} else {
-			push.textContent = `Popped (${row}, ${col}) from stack.`;
-		}
-	}
-	step.appendChild(push);
-	step.appendChild(explore);
-	step.appendChild(costText);
-	stepsContainer.append(step);
-	stepsContainer.scrollTop = stepsContainer.scrollHeight;
+  var step = document.createElement("div");
+  step.classList.add("step");
+  var push = document.createElement("p");
+  var explore = document.createElement("p");
+  var costText = document.createElement("p");
+  if (algorithmType.classList.contains("bellman-ford")) {
+    if (bellmanSteps.length == 0) {
+      push.textContent = `Selected (${row}, ${col}) as path.`;
+    } else {
+      if (
+        bellmanSteps.length <=
+        bellmanStepsLength - bellmanStepsLength / relaxations
+      ) {
+        push.textContent = `Relaxing (${row}, ${col}): current cost ${prevCost}, updated cost ${
+          cost || "inf"
+        }.`;
+        explore.textContent = `Processing (${erow}, ${ecol}).`;
+      } else {
+        push.textContent = `Pushed (${row}, ${col}) to dist[] array.`;
+        explore.textContent = `Exploring (${erow}, ${ecol}).`;
+      }
+    }
+  } else if (
+    algorithmType.classList.contains("dijkstras") ||
+    algorithmType.classList.contains("bfs") ||
+    algorithmType.classList.contains("findPaths")
+  ) {
+    if (bfsSteps.length == 0) {
+      push.textContent = `Selected (${row}, ${col}) as path.`;
+    } else {
+      push.textContent = `Pushed (${row}, ${col}) to array.`;
+      explore.textContent = `Processing (${erow}, ${ecol}).`;
+      costText.textContent = `Cost from source is ${cost}`;
+    }
+  } else if (algorithmType.classList.contains("dfs")) {
+    if (row == erow && col == ecol) {
+      push.textContent = `Pushed (${erow}, ${ecol}) to stack.`;
+      explore.textContent = `Exploring (${erow}, ${ecol}).`;
+    } else {
+      push.textContent = `Popped (${row}, ${col}) from stack.`;
+    }
+  }
+  step.appendChild(push);
+  step.appendChild(explore);
+  step.appendChild(costText);
+  stepsContainer.append(step);
+  stepsContainer.scrollTop = stepsContainer.scrollHeight;
 
-	step.addEventListener("click", () => {
-		let node = document.querySelector(`div[row='${row}'][col='${col}']`);
-		let node1 = document.querySelector(`div[row='${erow}'][col='${ecol}']`);
-		setTimeout(() => {
-			node.setAttribute("class", "pathColor");
-			node1.setAttribute("class", "pathColor");
-		}, 1000);
-		node1.setAttribute("class", "manualStep");
-		node.setAttribute("class", "chosenPath");
-	});
+  step.addEventListener("click", () => {
+    let node = document.querySelector(`div[row='${row}'][col='${col}']`);
+    let node1 = document.querySelector(`div[row='${erow}'][col='${ecol}']`);
+    setTimeout(() => {
+      node.setAttribute("class", "pathColor");
+      node1.setAttribute("class", "pathColor");
+    }, 1000);
+    node1.setAttribute("class", "manualStep");
+    node.setAttribute("class", "chosenPath");
+  });
 };
 
 // step by step visualization
 let isPath = true;
 export const stepper = (steps) => {
-	gridContainer.removeEventListener("mousedown", setWall);
-	gridContainer.removeEventListener("mouseover", setWall);
-	// wallBtn.setAttribute("disabled", true);
-	if (isPath) {
-		clearPath();
-		bellmanFordPath.splice(
-			0,
-			bellmanFordPath.length - bellmanFordPath.length / 5
-		);
-		startBtn.setAttribute("disabled", "true");
-		clearPathBtn.setAttribute("disabled", "true");
-		stepsContainer.classList.remove("notification");
-		stepsContainer.classList.add("show");
-		wallBtn.setAttribute("disabled", "true");
-		isPath = false;
-	}
-	if (steps.length == 0) {
-		if (
-			algorithmType.classList.contains("dijkstras") ||
-			algorithmType.classList.contains("bfs")
-		) {
-			if (dijkstrasPath.length == 0) {
-				alert("Steps completed!");
-			} else {
-				//draw path
-				var pcol = dijkstrasPath[0][0];
-				var prow = dijkstrasPath[0][1];
-				setTimeout(() => {
-					node.setAttribute("class", "pathColor");
-				}, 1000);
-				node.setAttribute("class", "chosenPath");
-				notification(pcol, prow, 0, 0);
-				dijkstrasPath.shift();
-			}
-		} else if (algorithmType.classList.contains("bellman-ford")) {
-			if (bellmanFordPath.length == 0) {
-				alert("Bellman ford steps completed!");
-			} else {
-				//draw path
-				var pcol = bellmanFordPath[0][0];
-				var prow = bellmanFordPath[0][1];
-				let node = document.querySelector(
-					`div[row='${pcol}'][col='${prow}']`
-				);
-				node.setAttribute("class", "chosenPath");
-				notification(pcol, prow, 0, 0);
-				bellmanFordPath.shift();
-			}
-		} else {
-			alert("Completed Steps");
-		}
-	} else {
-		var cr = steps[0][0];
-		var cc = steps[0][1];
-		var cost = steps[0][2];
-		var er = steps[0][3];
-		var ec = steps[0][4];
-		let node = document.querySelector(`div[row='${cr}'][col='${cc}']`);
-		setTimeout(() => {
-			node.setAttribute("class", "pathColor");
-		}, 1000);
-		node.setAttribute("class", "chosenPath");
-		//relaxation for bellman ford nodes
-		let prevCost = node.innerHTML;
-		node.innerHTML = cost || "inf";
-		notification(cr, cc, er, ec, cost, prevCost);
-		steps.shift();
-	}
+  gridContainer.removeEventListener("mousedown", setWall);
+  gridContainer.removeEventListener("mouseover", setWall);
+  // wallBtn.setAttribute("disabled", true);
+  if (isPath) {
+    clearPath();
+    bellmanFordPath.splice(
+      0,
+      bellmanFordPath.length - bellmanFordPath.length / 5
+    );
+    startBtn.setAttribute("disabled", "true");
+    clearPathBtn.setAttribute("disabled", "true");
+    stepsContainer.classList.remove("notification");
+    stepsContainer.classList.add("show");
+    wallBtn.setAttribute("disabled", "true");
+    isPath = false;
+  }
+  if (steps.length == 0) {
+    if (
+      algorithmType.classList.contains("dijkstras") ||
+      algorithmType.classList.contains("bfs")
+    ) {
+      if (dijkstrasPath.length == 0) {
+        alert("Steps completed!");
+      } else {
+        //draw path
+        var pcol = dijkstrasPath[0][0];
+        var prow = dijkstrasPath[0][1];
+        setTimeout(() => {
+          node.setAttribute("class", "pathColor");
+        }, 1000);
+        node.setAttribute("class", "chosenPath");
+        notification(pcol, prow, 0, 0);
+        dijkstrasPath.shift();
+      }
+    } else if (algorithmType.classList.contains("bellman-ford")) {
+      if (bellmanFordPath.length == 0) {
+        alert("Bellman ford steps completed!");
+      } else {
+        //draw path
+        var pcol = bellmanFordPath[0][0];
+        var prow = bellmanFordPath[0][1];
+        let node = document.querySelector(`div[row='${pcol}'][col='${prow}']`);
+        node.setAttribute("class", "chosenPath");
+        notification(pcol, prow, 0, 0);
+        bellmanFordPath.shift();
+      }
+    } else {
+      alert("Completed Steps");
+    }
+  } else {
+    var cr = steps[0][0];
+    var cc = steps[0][1];
+    var cost = steps[0][2];
+    var er = steps[0][3];
+    var ec = steps[0][4];
+    let node = document.querySelector(`div[row='${cr}'][col='${cc}']`);
+    setTimeout(() => {
+      node.setAttribute("class", "pathColor");
+    }, 1000);
+    node.setAttribute("class", "chosenPath");
+    //relaxation for bellman ford nodes
+    let prevCost = node.innerHTML;
+    node.innerHTML = cost || "inf";
+    notification(cr, cc, er, ec, cost, prevCost);
+    steps.shift();
+  }
+};
+
+const findNextPathFunc = (nodes) => {
+  let startNextRow = nodes.slice(-1)[0][0];
+  let startNextCol = nodes.slice(-1)[0][1];
+  let node = document.querySelector(
+    `div[row='${startNextRow}'][col='${startNextCol}']`
+  );
+  nodes.pop();
+  clearPath();
+  dfs(startRow, startCol, endRow, endCol);
+  if (parseInt(node.getAttribute("wall")) == 0) {
+    node.setAttribute("wall", 1);
+  }
 };
 
 //run normal visualization
 const startVisualization = () => {
-	if (algorithmType.classList.contains("bfs")) {
-		bfs(startRow, startCol, endRow, endCol);
-		manualStart.addEventListener("click", () => {
-			stepper(bfsSteps);
-		});
-	} else if (algorithmType.classList.contains("dfs")) {
-		dfs(startRow, startCol, endRow, endCol);
-		manualStart.addEventListener("click", () => {
-			stepper(dfsSteps);
-		});
-	} else if (algorithmType.classList.contains("dijkstras")) {
-		bfs(startRow, startCol, endRow, endCol);
-		manualStart.addEventListener("click", () => {
-			stepper(bfsSteps);
-		});
-	} else if (algorithmType.classList.contains("bellman-ford")) {
-		bellmanFord(startRow, startCol, endRow, endCol);
-		manualStart.addEventListener("click", () => {
-			stepper(bellmanSteps);
-		});
-	} else if (algorithmType.classList.contains("numIslands")) {
-		if (islandAlgo === "bfs") {
-			bfsIslands();
-		} else if (islandAlgo === "dfs") {
-			dfsIslands();
-		}
-	} else if (algorithmType.classList.contains("maxIsland")) {
-		maxIsland();
-	}
+  if (algorithmType.classList.contains("bfs")) {
+    bfs(startRow, startCol, endRow, endCol);
+    manualStart.addEventListener("click", () => {
+      stepper(bfsSteps);
+    });
+  } else if (algorithmType.classList.contains("dfs")) {
+    dfs(startRow, startCol, endRow, endCol);
+    manualStart.addEventListener("click", () => {
+      stepper(dfsSteps);
+    });
+  } else if (algorithmType.classList.contains("dijkstras")) {
+    bfs(startRow, startCol, endRow, endCol);
+    manualStart.addEventListener("click", () => {
+      stepper(bfsSteps);
+    });
+  } else if (algorithmType.classList.contains("bellman-ford")) {
+    bellmanFord(startRow, startCol, endRow, endCol);
+    manualStart.addEventListener("click", () => {
+      stepper(bellmanSteps);
+    });
+  } else if (algorithmType.classList.contains("numIslands")) {
+    if (islandAlgo === "bfs") {
+      bfsIslands();
+    } else if (islandAlgo === "dfs") {
+      dfsIslands();
+    }
+  } else if (algorithmType.classList.contains("maxIsland")) {
+    maxIsland();
+  } else if (algorithmType.classList.contains("findPaths")) {
+    findPaths(startRow, startCol, endRow, endCol);
+    findNextPath.addEventListener("click", () => {
+      findNextPathFunc(visitedPaths);
+    });
+    // manualStart.addEventListener("click", () => {
+    //   stepper(dfsSteps);
+    // });
+  }
 };
 startBtn.addEventListener("click", startVisualization);
+// findNextPath.addEventListener("click");
 
 //Initialize board
 window.onload = () => {
-	gridContainer.addEventListener("mousedown", setWall);
-	gridContainer.addEventListener("mouseup", setWall);
-	gridContainer.addEventListener("mouseover", setWall);
-	if (
-		algorithmType.classList.contains("bfs") ||
-		algorithmType.classList.contains("dfs") ||
-		algorithmType.classList.contains("numIslands") ||
-		algorithmType.classList.contains("maxIsland")
-	) {
-		createEmptyBoard();
-	} else if (
-		algorithmType.classList.contains("dijkstras") ||
-		algorithmType.classList.contains("bellman-ford")
-	) {
-		createBoard();
-	}
-	if (
-		algorithmType.classList.contains("bfs") ||
-		algorithmType.classList.contains("dfs") ||
-		algorithmType.classList.contains("dijkstras") ||
-		algorithmType.classList.contains("bellman-ford")
-	) {
-		createStartNode(startRow, startCol);
-		createEndNode(endRow, endCol);
-	} else if (
-		algorithmType.classList.contains("numIslands") ||
-		algorithmType.classList.contains("maxIslands")
-	) {
-		if (islandAlgo === "bfs") {
-			createStartNode(0, 0);
-			createEndNode(19, 39);
-			document
-				.querySelector(`div[row='${0}'][col='${0}']`)
-				.classList.add("islandsPathNode");
-			document
-				.querySelector(`div[row='${19}'][col='${39}']`)
-				.classList.add("islandsPathNode");
-		} else if (
-			islandAlgo === "dfs" ||
-			algorithmType.classList.contains("maxIslands")
-		) {
-			createStartNode(0, 0);
-			createEndNode(0, 1);
-			document
-				.querySelector(`div[row='${0}'][col='${0}']`)
-				.classList.add("islandsPathNode");
-			document
-				.querySelector(`div[row='${0}'][col='${1}']`)
-				.classList.add("islandsPathNode");
-		}
-	}
+  gridContainer.addEventListener("mousedown", setWall);
+  gridContainer.addEventListener("mouseup", setWall);
+  gridContainer.addEventListener("mouseover", setWall);
+  if (
+    algorithmType.classList.contains("bfs") ||
+    algorithmType.classList.contains("dfs") ||
+    algorithmType.classList.contains("numIslands") ||
+    algorithmType.classList.contains("maxIsland") ||
+    algorithmType.classList.contains("findPaths")
+  ) {
+    createEmptyBoard();
+  } else if (
+    algorithmType.classList.contains("dijkstras") ||
+    algorithmType.classList.contains("bellman-ford")
+  ) {
+    createBoard();
+  }
+  if (
+    algorithmType.classList.contains("bfs") ||
+    algorithmType.classList.contains("dfs") ||
+    algorithmType.classList.contains("dijkstras") ||
+    algorithmType.classList.contains("bellman-ford") ||
+    algorithmType.classList.contains("findPaths")
+  ) {
+    createStartNode(startRow, startCol);
+    createEndNode(endRow, endCol);
+  } else if (
+    algorithmType.classList.contains("numIslands") ||
+    algorithmType.classList.contains("maxIslands")
+  ) {
+    if (islandAlgo === "bfs") {
+      createStartNode(0, 0);
+      createEndNode(19, 39);
+      document
+        .querySelector(`div[row='${0}'][col='${0}']`)
+        .classList.add("islandsPathNode");
+      document
+        .querySelector(`div[row='${19}'][col='${39}']`)
+        .classList.add("islandsPathNode");
+    } else if (
+      islandAlgo === "dfs" ||
+      algorithmType.classList.contains("maxIslands")
+    ) {
+      createStartNode(0, 0);
+      createEndNode(0, 1);
+      document
+        .querySelector(`div[row='${0}'][col='${0}']`)
+        .classList.add("islandsPathNode");
+      document
+        .querySelector(`div[row='${0}'][col='${1}']`)
+        .classList.add("islandsPathNode");
+    }
+  }
 };
diff --git a/code/assets/js/visual/PathFindingAlgorithms/dfs.js b/code/assets/js/visual/PathFindingAlgorithms/dfs.js
index b859b31..c885655 100644
--- a/code/assets/js/visual/PathFindingAlgorithms/dfs.js
+++ b/code/assets/js/visual/PathFindingAlgorithms/dfs.js
@@ -1,13 +1,13 @@
 import { setWall } from "../Grid/createWalls.js";
 import {
-	rowSize,
-	colSize,
-	manualStart,
-	dfsSteps,
-	startBtn,
-	clearPathBtn,
-	wallBtn,
-	gridContainer,
+  rowSize,
+  colSize,
+  manualStart,
+  dfsSteps,
+  startBtn,
+  clearPathBtn,
+  wallBtn,
+  gridContainer,
 } from "../Grid/index.js";
 
 let speedSlider = document.querySelector(".speedSlider");
@@ -16,110 +16,110 @@ let bool = false;
 let count = 1;
 
 //check edge cases
-const checker = (row, col) => {
-	if (row >= 0 && col >= 0 && row < rowSize && col < colSize) return true;
-	return false;
+export const checker = (row, col) => {
+  if (row >= 0 && col >= 0 && row < rowSize && col < colSize) return true;
+  return false;
 };
 
 // visualize algorithm
-const changeColor = (node, cost) => {
-	setTimeout(() => {
-		node.setAttribute("class", "chosenPath");
-		node.innerHTML = cost;
-	}, cost * time);
-	// draw path blue
-	setTimeout(() => {
-		node.setAttribute("class", "pathColor");
-	}, cost * time + 100);
-	//draw path green
-	setTimeout(() => {
-		node.setAttribute("class", "chosenPath");
-	}, cost * time + 1000);
+export const changeColor = (node, cost) => {
+  setTimeout(() => {
+    node.setAttribute("class", "chosenPath");
+    node.innerHTML = cost;
+  }, cost * time);
+  // draw path blue
+  setTimeout(() => {
+    node.setAttribute("class", "pathColor");
+  }, cost * time + 100);
+  //draw path green
+  setTimeout(() => {
+    node.setAttribute("class", "chosenPath");
+  }, cost * time + 1000);
 };
 
 //traverse grid
 const traverse = (node, visited, cost, endNode) => {
-	let row = parseInt(node.getAttribute("row"));
-	let col = parseInt(node.getAttribute("col"));
-	if (bool || node == endNode) {
-		bool = true;
-		return;
-	}
+  let row = parseInt(node.getAttribute("row"));
+  let col = parseInt(node.getAttribute("col"));
+  if (bool || node == endNode) {
+    bool = true;
+    return;
+  }
 
-	let wall = parseInt(node.getAttribute("wall"));
-	if (wall == 1) return;
+  let wall = parseInt(node.getAttribute("wall"));
+  if (wall == 1) return;
 
-	visited.push(node);
-	dfsSteps.push([row, col, cost, row, col]);
-	changeColor(node, cost);
+  visited.push(node);
+  dfsSteps.push([row, col, cost, row, col]);
+  changeColor(node, cost);
 
-	// Check all sides of a node
-	let cr = row,
-		cc = col;
+  // Check all sides of a node
+  let cr = row,
+    cc = col;
 
-	if (checker(cr + 1, cc)) {
-		let child = document.querySelector(`div[row="${cr + 1}"][col="${cc}"]`);
-		if (!visited.includes(child)) {
-			traverse(child, visited, cost + 1, endNode);
-			count++;
-		} else {
-			dfsSteps.push([row, col, cost, cr + 1, cc]);
-		}
-	}
-	if (checker(cr, cc + 1)) {
-		let child = document.querySelector(`div[row="${cr}"][col="${cc + 1}"]`);
-		if (!visited.includes(child)) {
-			traverse(child, visited, cost + 1, endNode);
-			count++;
-		} else {
-			dfsSteps.push([row, col, cost, cr, cc + 1]);
-		}
-	}
-	if (checker(cr - 1, cc)) {
-		let child = document.querySelector(`div[row="${cr - 1}"][col="${cc}"]`);
-		if (!visited.includes(child)) {
-			traverse(child, visited, cost + 1, endNode);
-			count++;
-		} else {
-			dfsSteps.push([row, col, cost, cr - 1, cc]);
-		}
-	}
-	if (checker(cr, cc - 1)) {
-		let child = document.querySelector(`div[row="${cr}"][col="${cc - 1}"]`);
-		if (!visited.includes(child)) {
-			traverse(child, visited, cost + 1, endNode);
-			count++;
-		} else {
-			dfsSteps.push([row, col, cost, cr, cc - 1]);
-		}
-	}
+  if (checker(cr + 1, cc)) {
+    let child = document.querySelector(`div[row="${cr + 1}"][col="${cc}"]`);
+    if (!visited.includes(child)) {
+      traverse(child, visited, cost + 1, endNode);
+      count++;
+    } else {
+      dfsSteps.push([row, col, cost, cr + 1, cc]);
+    }
+  }
+  if (checker(cr, cc + 1)) {
+    let child = document.querySelector(`div[row="${cr}"][col="${cc + 1}"]`);
+    if (!visited.includes(child)) {
+      traverse(child, visited, cost + 1, endNode);
+      count++;
+    } else {
+      dfsSteps.push([row, col, cost, cr, cc + 1]);
+    }
+  }
+  if (checker(cr - 1, cc)) {
+    let child = document.querySelector(`div[row="${cr - 1}"][col="${cc}"]`);
+    if (!visited.includes(child)) {
+      traverse(child, visited, cost + 1, endNode);
+      count++;
+    } else {
+      dfsSteps.push([row, col, cost, cr - 1, cc]);
+    }
+  }
+  if (checker(cr, cc - 1)) {
+    let child = document.querySelector(`div[row="${cr}"][col="${cc - 1}"]`);
+    if (!visited.includes(child)) {
+      traverse(child, visited, cost + 1, endNode);
+      count++;
+    } else {
+      dfsSteps.push([row, col, cost, cr, cc - 1]);
+    }
+  }
 };
 
 //depth first search algorithm
 export const dfs = (x1 = 0, y1 = 0, x2 = rowSize - 1, y2 = colSize - 1) => {
-	time = speedSlider.value;
-	time = 40 + (time - 1) * -2;
-	gridContainer.removeEventListener("mousedown", setWall);
-	gridContainer.removeEventListener("mouseover", setWall);
-	let startNode = document.querySelector(`div[row='${x1}'][col='${y1}']`);
-	let endNode = document.querySelector(`div[row='${x2}'][col='${y2}']`);
+  time = speedSlider.value;
+  time = 40 + (time - 1) * -2;
+  gridContainer.removeEventListener("mousedown", setWall);
+  gridContainer.removeEventListener("mouseover", setWall);
+  let startNode = document.querySelector(`div[row='${x1}'][col='${y1}']`);
+  let endNode = document.querySelector(`div[row='${x2}'][col='${y2}']`);
 
-	//disable start and clear path buttons
-	startBtn.setAttribute("disabled", "true");
-	clearPathBtn.setAttribute("disabled", "true");
-	wallBtn.setAttribute("disabled", "true");
+  //disable start and clear path buttons
+  startBtn.setAttribute("disabled", "true");
+  clearPathBtn.setAttribute("disabled", "true");
+  wallBtn.setAttribute("disabled", "true");
 
-	let visited = [];
-	let cost = 1;
-	bool = false;
+  let visited = [];
+  let cost = 1;
+  bool = false;
 
-	traverse(startNode, visited, cost, endNode);
+  traverse(startNode, visited, cost, endNode);
 
-	// re-enable disabled buttons
-	setTimeout(() => {
-		startBtn.removeAttribute("disabled");
-		clearPathBtn.removeAttribute("disabled");
-		manualStart.removeAttribute("disabled");
-		wallBtn.removeAttribute("disabled");
-	}, count * time + 100);
+  // re-enable disabled buttons
+  setTimeout(() => {
+    startBtn.removeAttribute("disabled");
+    clearPathBtn.removeAttribute("disabled");
+    manualStart.removeAttribute("disabled");
+    wallBtn.removeAttribute("disabled");
+  }, count * time + 100);
 };
diff --git a/code/assets/js/visual/PathFindingAlgorithms/findPaths.js b/code/assets/js/visual/PathFindingAlgorithms/findPaths.js
new file mode 100644
index 0000000..42aeebd
--- /dev/null
+++ b/code/assets/js/visual/PathFindingAlgorithms/findPaths.js
@@ -0,0 +1,113 @@
+import { setWall } from "../Grid/createWalls.js";
+import {
+  rowSize,
+  colSize,
+  manualStart,
+  dfsSteps,
+  visitedPaths,
+  startBtn,
+  clearPathBtn,
+  wallBtn,
+  gridContainer,
+  findNextPath,
+} from "../Grid/index.js";
+import { changeColor, checker } from "./dfs.js";
+
+let speedSlider = document.querySelector(".speedSlider");
+let time = speedSlider.value;
+let bool = false;
+let count = 1;
+
+//traverse grid
+const traverse = (node, visited, cost, endNode) => {
+  let row = parseInt(node.getAttribute("row"));
+  let col = parseInt(node.getAttribute("col"));
+  if (bool || node == endNode) {
+    bool = true;
+    return;
+  }
+
+  let wall = parseInt(node.getAttribute("wall"));
+  if (wall == 1) return;
+
+  visited.push(node);
+  visitedPaths.push([row, col]);
+  dfsSteps.push([row, col, cost, row, col]);
+  changeColor(node, cost);
+
+  // Check all sides of a node
+  let cr = row,
+    cc = col;
+
+  if (checker(cr + 1, cc)) {
+    let child = document.querySelector(`div[row="${cr + 1}"][col="${cc}"]`);
+    if (!visited.includes(child)) {
+      traverse(child, visited, cost + 1, endNode);
+      count++;
+    } else {
+      dfsSteps.push([row, col, cost, cr + 1, cc]);
+    }
+  }
+  if (checker(cr, cc + 1)) {
+    let child = document.querySelector(`div[row="${cr}"][col="${cc + 1}"]`);
+    if (!visited.includes(child)) {
+      traverse(child, visited, cost + 1, endNode);
+      count++;
+    } else {
+      dfsSteps.push([row, col, cost, cr, cc + 1]);
+    }
+  }
+  if (checker(cr - 1, cc)) {
+    let child = document.querySelector(`div[row="${cr - 1}"][col="${cc}"]`);
+    if (!visited.includes(child)) {
+      traverse(child, visited, cost + 1, endNode);
+      count++;
+    } else {
+      dfsSteps.push([row, col, cost, cr - 1, cc]);
+    }
+  }
+  if (checker(cr, cc - 1)) {
+    let child = document.querySelector(`div[row="${cr}"][col="${cc - 1}"]`);
+    if (!visited.includes(child)) {
+      traverse(child, visited, cost + 1, endNode);
+      count++;
+    } else {
+      dfsSteps.push([row, col, cost, cr, cc - 1]);
+    }
+  }
+};
+
+//depth first search algorithm
+export const findPaths = (
+  x1 = 0,
+  y1 = 0,
+  x2 = rowSize - 1,
+  y2 = colSize - 1
+) => {
+  time = speedSlider.value;
+  time = 40 + (time - 1) * -2;
+  gridContainer.removeEventListener("mousedown", setWall);
+  gridContainer.removeEventListener("mouseover", setWall);
+  let startNode = document.querySelector(`div[row='${x1}'][col='${y1}']`);
+  let endNode = document.querySelector(`div[row='${x2}'][col='${y2}']`);
+
+  //disable start and clear path buttons
+  startBtn.setAttribute("disabled", "true");
+  clearPathBtn.setAttribute("disabled", "true");
+  wallBtn.setAttribute("disabled", "true");
+
+  let visited = [];
+  let cost = 1;
+  bool = false;
+
+  traverse(startNode, visited, cost, endNode);
+
+  // re-enable disabled buttons
+  setTimeout(() => {
+    startBtn.removeAttribute("disabled");
+    clearPathBtn.removeAttribute("disabled");
+    manualStart.removeAttribute("disabled");
+    findNextPath.removeAttribute("disabled");
+    wallBtn.removeAttribute("disabled");
+  }, count * time + 100);
+};
diff --git a/code/dfs-visual.html b/code/dfs-visual.html
index 28da8d2..263dc66 100644
--- a/code/dfs-visual.html
+++ b/code/dfs-visual.html
@@ -1,249 +1,320 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="depth first search path finding algorithm"
+    />
+    <meta
+      name="keywords"
+      content="depth first search, depth first algorithm, depth first traversal, path finding, graph algorithms, algorithms, visualization, visual, graphs, graph traversal, traversal"
+    />
+    <meta name="author" content="lumunge" />
+    <meta name="HandheldFriendly" content="True" />
+    <meta
+      property="og:site_name"
+      content="OpenGenus IQ: Computing Expertise &amp; Legacy"
+    />
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="DFS Visualization" />
+    <meta
+      property="og:description"
+      content="depth first search visualization,data structures and algorithms visualization, path finding algorithms, graph algorithms visualization, visual, graphs, graph traversal, traversal"
+    />
+    <meta
+      property="og:url"
+      content="https://iq.opengenus.org/algorithm-visualization/"
+    />
+    <meta
+      property="article:published_time"
+      content="2021-12-08T10:39:05.000Z"
+    />
+    <meta property="article:modified_time" content="2021-12-08T19:39:45.000Z" />
+    <meta property="article:tag" content="Algorithms" />
+    <meta property="article:tag" content="Data Structures" />
+    <meta property="article:tag" content="Visualization" />
+    <meta
+      property="article:publisher"
+      content="https://www.facebook.com/opengenus"
+    />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Visualization" />
+    <meta
+      name="twitter:description"
+      content="A visualization of depth first search, depth first graph traversal."
+    />
+    <meta
+      name="twitter:url"
+      content="https://iq.opengenus.org/algorithm-visualization/"
+    />
+    <meta name="twitter:label1" content="Written by" />
+    <meta name="twitter:data1" content="Erick Lumunge" />
+    <meta name="twitter:label2" content="Filed under" />
+    <meta
+      name="twitter:data2"
+      content="Visualization, Algorithms, Data Structures"
+    />
+    <meta name="twitter:site" content="@OpenGenus" />
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="./assets/images/fav1.ico"
+    />
+    <link rel="stylesheet" href="./assets/css/visual/index.css" />
+    <link rel="stylesheet" href="./assets/css/visual/pathFinding.css" />
+    <title>Depth first search path finding algorithm.</title>
+  </head>
 
-<head>
-	<meta charset="UTF-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<meta name="description" content="depth first search path finding algorithm">
-	<meta name="keywords"
-		content="depth first search, depth first algorithm, depth first traversal, path finding, graph algorithms, algorithms, visualization, visual, graphs, graph traversal, traversal">
-	<meta name="author" content="lumunge">
-	<meta name="HandheldFriendly" content="True" />
-	<meta property="og:site_name" content="OpenGenus IQ: Computing Expertise &amp; Legacy" />
-	<meta property="og:type" content="article" />
-	<meta property="og:title" content="DFS Visualization" />
-	<meta property="og:description"
-		content="depth first search visualization,data structures and algorithms visualization, path finding algorithms, graph algorithms visualization, visual, graphs, graph traversal, traversal" />
-	<meta property="og:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
-	<meta property="article:published_time" content="2021-12-08T10:39:05.000Z" />
-	<meta property="article:modified_time" content="2021-12-08T19:39:45.000Z" />
-	<meta property="article:tag" content="Algorithms" />
-	<meta property="article:tag" content="Data Structures" />
-	<meta property="article:tag" content="Visualization" />
-	<meta property="article:publisher" content="https://www.facebook.com/opengenus" />
-	<meta name="twitter:card" content="summary" />
-	<meta name="twitter:title" content="Visualization" />
-	<meta name="twitter:description" content="A visualization of depth first search, depth first graph traversal." />
-	<meta name="twitter:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
-	<meta name="twitter:label1" content="Written by" />
-	<meta name="twitter:data1" content="Erick Lumunge" />
-	<meta name="twitter:label2" content="Filed under" />
-	<meta name="twitter:data2" content="Visualization, Algorithms, Data Structures" />
-	<meta name="twitter:site" content="@OpenGenus" />
-	<link rel="shortcut icon" type="image/png" href="./assets/images/fav1.ico" />
-	<link rel="stylesheet" href="./assets/css/visual/index.css">
-	<link rel="stylesheet" href="./assets/css/visual/pathFinding.css">
-	<title>Depth first search path finding algorithm.</title>
-</head>
-
-<body>
-	<div class="menu">
-		<div class="nav">
-			<div class="logo">
-				<a href="">OpenGenus Visuals</a>
-			</div>
-			<div class="nav-links">
-				<a href="/bfs-visual">bfs</a>
-				<a href="/dfs-visual">dfs</a>
-				<a href="/dijkstra-visual">dijkstra’s</a>
-				<a href="/bellman-ford-visual">bellman-ford's</a>
-				<a href="/islands-visual">num islands</a>
-				<a href="/max-Island-visual">max island</a>
-			</div>
-		</div>
-		<div class="hamburger">
-			<span class="bar"></span>
-			<span class="bar"></span>
-			<span class="bar"></span>
-		</div>
-	</div>
-	<header>
-		<div class="heading">
-			<h2 class="algorithm dfs">Depth first search visualization</h2>
-		</div>
-		<div class="controlsContainer">
-			<div class="visualControls">
-				<div class="visualSpeed">
-					<p>Speed</p>
-					<input type="range" min="1" max="20" value="10" class="speedSlider" />
-				</div>
-				<div class="obstacles">
-					<p>Obstacles</p>
-					<div class="obstaclesElements">
-						<input type="range" min="1" value="50" class="obstacleSlider" />
-						&nbsp;
-						<button class="setWalls btn">walls</button>
-					</div>
-				</div>
-				<div class="controlBtns">
-					<button class="start btn">start</button>
-					<button class="manual btn">manual</button>
-					<button class="clearPath btn">clear path</button>
-					<button class="reset btn">reload</button>
-					<select style="display: none;" class="islandsAlgo">
-						<option></option>
-					</select>
-				</div>
-				<div class="tutorialContainer">
-					<span><img class="info" src="./assets/images/icons8-info-60.png" alt=""></span>
-					<div class="tutorialContent">
-						<h4>Controls</h4>
-						<p><span>Speed</span> - increase or decrease the speed of the visualization</p>
-						<p><span>Obstacles-</span> - create walls/obstacles, on a map these can be buildings or
-							structures which hinder a path. You can adjust the number of obstacles generated per click.
-							<br /> - You can also click on the grid cells to create
-							obstacles.
-						</p>
-						<p><span>Start</span> - After adjusting the speed and creating obstacles, you can now start the
-							visualization to see the workings of the algorithm.</p>
-						<p><span>Manual</span> - After running the visualization normally you can run it manually to see
-							how the shortest path was obtained. After the click you can proceed with pressing enter key.
-						</p>
-						<p><span>Clear Path</span> - After visualizing, you may opt to clear the path and add more
-							obstacles.</p>
-						<p><span>Speed</span> - If the grid becomes to cluttered you can reload it and repeat the above
-							steps.</p>
-					</div>
-				</div>
-			</div>
-			<!-- not displayed -->
-			<div class="hide">
-				<select class="algo">
-					<option value=""></option>
-				</select>
-				<select class="weight">
-					<option value=""></option>
-				</select>
-			</div>
-		</div>
-	</header>
-	<main>
-		<div class="visualizationContainer">
-			<div id="gridContainer"></div>
-			<div class="notification"></div>
-			<div class="tutorials">
-				<div class="tutorial">
-					<div class="emptyPath"></div>&nbsp;
-					<div>This is an empty path without any walls, you can click is to add obstacles/walls.</div>
-				</div>
-				<div class="tutorial">
-					<div class="stedimg"><span class="txt">A</span></div>&nbsp;
-					<div>Start Node -> this is the starting point(source),
-						search for a path starts here.</div>
-				</div>
-				<div class="tutorial">
-					<div class="stedimg"><span class="txt">B</span></div>&nbsp;
-					<div>End Node -> where the search stops when a path to destination has been found</div>
-				</div>
-				<div class="tutorial">
-					<div class="obstacle"></div>&nbsp;
-					<div>These act as obstacles, walls. On a real map these may be buildings or structures that may
-						block
-						a shorter path to a destination.</div>
-				</div>
-				<div class="tutorial">
-					<div class="selectedPath"><span class="txt">7</span></div>&nbsp;
-					<div>After the algorithm is complete, we have arrived at the destination, now the shortest path is
-						highlighted in green with the cost of path written written in black inside the path.</div>
-				</div>
-			</div>
-			<div class="algoInfo">
-				<div>
-					<div class="infoHeading">
-						<h3 class="title">Depth first traversal.</h3>
-					</div>
-					<div class="description">
-						<p>
-							This algorithm starts its search at the root and
-							explores one of its children's subtree and then moves
-							on to the next child's subtree and etcetera <br />
-							The idea used is to go as deep into the graph as
-							possible and backtrack once we reach a vertex with
-							unvisited neighbors. <br />
-							That is, start search at one vertex, after visiting
-							the vertex, perform dfs for each unvisited adjacent
-							vertex. In this way we visit all vertices reachable
-							from the starting vertex. <br />
-							We use a <b><em>stack</em></b> data structure.
-						</p>
-					</div>
-					<div class="algo-steps">
-						<p class="subtitle">Algorithm</p>
-						<p>
-							1. Mark the current node as visited(initially
-							current node is the root node).
-						</p>
-						<p>
-							2. Check if current node is the end node, If so,
-							then return it.
-						</p>
-						<p>
-							3. Iterate over children nodes of current node,
-							and do the following:
-						</p>
-						<p class="nest1">
-							1. Check if a child node is not visited.
-						</p>
-						<p class="nest1">
-							2.If so, then, mark it as visited.
-						</p>
-						<p class="nest1">
-							3. Go to it's sub graph recursively until you
-							find the end node(In other words, do the same
-							steps here passing the child node as the current
-							node in the next recursive call).
-						</p>
-						<p class="nest1">
-							4. If the child node has the end node in this
-							sub graph, then, return it.
-						</p>
-						<p>
-							4. If end node is not found, then end node is
-							not in the graph!
-						</p>
-					</div>
-					<div class="complexity">
-						<p class="subtitle">Computational complexity</p>
-						This algorithm takes <b><em>O(V + E)</em></b> where v is the number of
-						vertices and e is the number of edges.
-					</div>
-					<div class="applications">
-						<p class="subtitle">Applications</p>
-						<ul>
-							<li>topological sorting.</li>
-							<li>bipartite graph testing.</li>
-							<li>finding strongly connected components.</li>
-							<li>
-								solving puzzles that can only have one
-								solution.
-							</li>
-							<li>detecting cycles in a graph.</li>
-						</ul>
-					</div>
-					<div class="reference">
-						<p>References</p>
-						<a href="https://iq.opengenus.org/bfs-graph-traversal/">dfs</a>
-					</div>
-				</div>
-			</div>
-		</div>
-	</main>
-	<footer>
-		<div class="copy">
-			<p>OpenGenus IQ ©
-				<script>document.write(/\d{4}/.exec(Date())[0])</script> All rights reserved ™ [email: <a
-					href="mailto:team@opengenus.org">team@opengenus.org]</a>
-			</p>
-		</div>
-		<div class="links">
-			<span><a href="https://iq.opengenus.org/"> Top Posts </a></span>
-			<span><a href="https://www.linkedin.com/company/opengenus"> LinkedIn</a></span>
-			<span><a href="https://twitter.com/OpenGenus"> Twitter</a></span>
-		</div>
-	</footer>
-	<script src="./assets/js/common/index.js"></script>
-	<script type="module" src="./assets/js/visual/Grid/index.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <div class="menu">
+      <div class="nav">
+        <div class="logo">
+          <a href="">OpenGenus Visuals</a>
+        </div>
+        <div class="nav-links">
+          <a href="/bfs-visual">bfs</a>
+          <a href="/dfs-visual">dfs</a>
+          <a href="/dijkstra-visual">dijkstra’s</a>
+          <a href="/bellman-ford-visual">bellman-ford's</a>
+          <a href="/islands-visual">num islands</a>
+          <a href="/max-Island-visual">max island</a>
+        </div>
+      </div>
+      <div class="hamburger">
+        <span class="bar"></span>
+        <span class="bar"></span>
+        <span class="bar"></span>
+      </div>
+    </div>
+    <header>
+      <div class="heading">
+        <h2 class="algorithm dfs">Depth first search visualization</h2>
+      </div>
+      <div class="controlsContainer">
+        <div class="visualControls">
+          <div class="visualSpeed">
+            <p>Speed</p>
+            <input
+              type="range"
+              min="1"
+              max="20"
+              value="10"
+              class="speedSlider"
+            />
+          </div>
+          <div class="obstacles">
+            <p>Obstacles</p>
+            <div class="obstaclesElements">
+              <input type="range" min="1" value="50" class="obstacleSlider" />
+              &nbsp;
+              <button class="setWalls btn">walls</button>
+            </div>
+          </div>
+          <div class="controlBtns">
+            <button class="start btn">start</button>
+            <button class="findNext btn">find next</button>
+            <button class="manual btn">manual</button>
+            <button class="clearPath btn">clear path</button>
+            <button class="reset btn">reload</button>
+            <select style="display: none" class="islandsAlgo">
+              <option></option>
+            </select>
+          </div>
+          <div class="tutorialContainer">
+            <span
+              ><img
+                class="info"
+                src="./assets/images/icons8-info-60.png"
+                alt=""
+            /></span>
+            <div class="tutorialContent">
+              <h4>Controls</h4>
+              <p>
+                <span>Speed</span> - increase or decrease the speed of the
+                visualization
+              </p>
+              <p>
+                <span>Obstacles-</span> - create walls/obstacles, on a map these
+                can be buildings or structures which hinder a path. You can
+                adjust the number of obstacles generated per click. <br />
+                - You can also click on the grid cells to create obstacles.
+              </p>
+              <p>
+                <span>Start</span> - After adjusting the speed and creating
+                obstacles, you can now start the visualization to see the
+                workings of the algorithm.
+              </p>
+              <p>
+                <span>Manual</span> - After running the visualization normally
+                you can run it manually to see how the shortest path was
+                obtained. After the click you can proceed with pressing enter
+                key.
+              </p>
+              <p>
+                <span>Clear Path</span> - After visualizing, you may opt to
+                clear the path and add more obstacles.
+              </p>
+              <p>
+                <span>Speed</span> - If the grid becomes to cluttered you can
+                reload it and repeat the above steps.
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- not displayed -->
+        <div class="hide">
+          <select class="algo">
+            <option value=""></option>
+          </select>
+          <select class="weight">
+            <option value=""></option>
+          </select>
+        </div>
+      </div>
+    </header>
+    <main>
+      <div class="visualizationContainer">
+        <div id="gridContainer"></div>
+        <div class="notification"></div>
+        <div class="tutorials">
+          <div class="tutorial">
+            <div class="emptyPath"></div>
+            &nbsp;
+            <div>
+              This is an empty path without any walls, you can click is to add
+              obstacles/walls.
+            </div>
+          </div>
+          <div class="tutorial">
+            <div class="stedimg"><span class="txt">A</span></div>
+            &nbsp;
+            <div>
+              Start Node -> this is the starting point(source), search for a
+              path starts here.
+            </div>
+          </div>
+          <div class="tutorial">
+            <div class="stedimg"><span class="txt">B</span></div>
+            &nbsp;
+            <div>
+              End Node -> where the search stops when a path to destination has
+              been found
+            </div>
+          </div>
+          <div class="tutorial">
+            <div class="obstacle"></div>
+            &nbsp;
+            <div>
+              These act as obstacles, walls. On a real map these may be
+              buildings or structures that may block a shorter path to a
+              destination.
+            </div>
+          </div>
+          <div class="tutorial">
+            <div class="selectedPath"><span class="txt">7</span></div>
+            &nbsp;
+            <div>
+              After the algorithm is complete, we have arrived at the
+              destination, now the shortest path is highlighted in green with
+              the cost of path written written in black inside the path.
+            </div>
+          </div>
+        </div>
+        <div class="algoInfo">
+          <div>
+            <div class="infoHeading">
+              <h3 class="title">Depth first traversal.</h3>
+            </div>
+            <div class="description">
+              <p>
+                This algorithm starts its search at the root and explores one of
+                its children's subtree and then moves on to the next child's
+                subtree and etcetera <br />
+                The idea used is to go as deep into the graph as possible and
+                backtrack once we reach a vertex with unvisited neighbors.
+                <br />
+                That is, start search at one vertex, after visiting the vertex,
+                perform dfs for each unvisited adjacent vertex. In this way we
+                visit all vertices reachable from the starting vertex. <br />
+                We use a <b><em>stack</em></b> data structure.
+              </p>
+            </div>
+            <div class="algo-steps">
+              <p class="subtitle">Algorithm</p>
+              <p>
+                1. Mark the current node as visited(initially current node is
+                the root node).
+              </p>
+              <p>
+                2. Check if current node is the end node, If so, then return it.
+              </p>
+              <p>
+                3. Iterate over children nodes of current node, and do the
+                following:
+              </p>
+              <p class="nest1">1. Check if a child node is not visited.</p>
+              <p class="nest1">2.If so, then, mark it as visited.</p>
+              <p class="nest1">
+                3. Go to it's sub graph recursively until you find the end
+                node(In other words, do the same steps here passing the child
+                node as the current node in the next recursive call).
+              </p>
+              <p class="nest1">
+                4. If the child node has the end node in this sub graph, then,
+                return it.
+              </p>
+              <p>
+                4. If end node is not found, then end node is not in the graph!
+              </p>
+            </div>
+            <div class="complexity">
+              <p class="subtitle">Computational complexity</p>
+              This algorithm takes <b><em>O(V + E)</em></b> where v is the
+              number of vertices and e is the number of edges.
+            </div>
+            <div class="applications">
+              <p class="subtitle">Applications</p>
+              <ul>
+                <li>topological sorting.</li>
+                <li>bipartite graph testing.</li>
+                <li>finding strongly connected components.</li>
+                <li>solving puzzles that can only have one solution.</li>
+                <li>detecting cycles in a graph.</li>
+              </ul>
+            </div>
+            <div class="reference">
+              <p>References</p>
+              <a href="https://iq.opengenus.org/bfs-graph-traversal/">dfs</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <div class="copy">
+        <p>
+          OpenGenus IQ ©
+          <script>
+            document.write(/\d{4}/.exec(Date())[0]);
+          </script>
+          All rights reserved ™ [email:
+          <a href="mailto:team@opengenus.org">team@opengenus.org]</a>
+        </p>
+      </div>
+      <div class="links">
+        <span><a href="https://iq.opengenus.org/"> Top Posts </a></span>
+        <span
+          ><a href="https://www.linkedin.com/company/opengenus">
+            LinkedIn</a
+          ></span
+        >
+        <span><a href="https://twitter.com/OpenGenus"> Twitter</a></span>
+      </div>
+    </footer>
+    <script src="./assets/js/common/index.js"></script>
+    <script type="module" src="./assets/js/visual/Grid/index.js"></script>
+  </body>
+</html>
diff --git a/code/dijkstra-visual.html b/code/dijkstra-visual.html
index 19caa80..57959cb 100644
--- a/code/dijkstra-visual.html
+++ b/code/dijkstra-visual.html
@@ -15,7 +15,7 @@
     <meta property="og:title" content="Dijkstras Shortest Path Algorithm Visualization" />
     <meta property="og:description"
         content="data structures and algorithms visualization, dijkstra's path shortest path algorithm visualization, path finding algorithms, graph algorithms visualization, visual, graphs, graph traversal, traversal" />
-    <meta property="og:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
+    <meta property="og:url" content="https://iq.opengenus.org/algorithm-visualization/" />
     <meta property="article:published_time" content="2021-12-08T10:39:05.000Z" />
     <meta property="article:modified_time" content="2021-12-08T19:39:45.000Z" />
     <meta property="article:tag" content="Algorithms" />
@@ -26,7 +26,7 @@
     <meta name="twitter:title" content="Visualization" />
     <meta name="twitter:description"
         content="A visualization of dijkastra's shortest path algorithm, graph algorithms, path finding" />
-    <meta name="twitter:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
+    <meta name="twitter:url" content="https://iq.opengenus.org/algorithm-visualization/" />
     <meta name="twitter:label1" content="Written by" />
     <meta name="twitter:data1" content="Erick Lumunge" />
     <meta name="twitter:label2" content="Filed under" />
diff --git a/code/find-paths.html b/code/find-paths.html
new file mode 100644
index 0000000..058fbf8
--- /dev/null
+++ b/code/find-paths.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="description" content="depth first search path finding algorithm">
+	<meta name="keywords"
+		content="depth first search, finding all paths, depth first algorithm, depth first traversal, path finding, graph algorithms, algorithms, visualization, visual, graphs, graph traversal, traversal">
+	<meta name="author" content="lumunge">
+	<meta name="HandheldFriendly" content="True" />
+	<meta property="og:site_name" content="OpenGenus IQ: Computing Expertise &amp; Legacy" />
+	<meta property="og:type" content="article" />
+	<meta property="og:title" content="Find paths between two vertices DFS Visualization" />
+	<meta property="og:description"
+		content="find all paths from source to destination depth first search visualization,data structures and algorithms visualization, path finding algorithms, graph algorithms visualization, visual, graphs, graph traversal, traversal" />
+	<meta property="og:url" content="https://iq.opengenus.org/algorithm-visualization/" />
+	<meta property="article:published_time" content="2021-12-08T10:39:05.000Z" />
+	<meta property="article:modified_time" content="2021-12-08T19:39:45.000Z" />
+	<meta property="article:tag" content="Algorithms" />
+	<meta property="article:tag" content="Data Structures" />
+	<meta property="article:tag" content="Visualization" />
+	<meta property="article:publisher" content="https://www.facebook.com/opengenus" />
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content="Visualization" />
+	<meta name="twitter:description" content="A visualization for finding all paths from source to destination using depth first search algorithm." />
+	<meta name="twitter:url" content="https://iq.opengenus.org/algorithm-visualization/" />
+	<meta name="twitter:label1" content="Written by" />
+	<meta name="twitter:data1" content="Erick Lumunge" />
+	<meta name="twitter:label2" content="Filed under" />
+	<meta name="twitter:data2" content="Visualization, Algorithms, Data Structures" />
+	<meta name="twitter:site" content="@OpenGenus" />
+	<link rel="shortcut icon" type="image/png" href="./assets/images/fav1.ico" />
+	<link rel="stylesheet" href="./assets/css/visual/index.css">
+	<link rel="stylesheet" href="./assets/css/visual/pathFinding.css">
+	<title>Finding all paths between two vertices in a graph.</title>
+</head>
+
+<body>
+	<div class="menu">
+		<div class="nav">
+			<div class="logo">
+				<a href="">OpenGenus Visuals</a>
+			</div>
+			<div class="nav-links">
+				<a href="/bfs-visual">bfs</a>
+				<a href="/dfs-visual">dfs</a>
+				<a href="/dijkstra-visual">dijkstra’s</a>
+				<a href="/bellman-ford-visual">bellman-ford's</a>
+				<a href="/islands-visual">num islands</a>
+				<a href="/max-Island-visual">max island</a>
+                <a href="/find-paths">max island</a>
+			</div>
+		</div>
+		<div class="hamburger">
+			<span class="bar"></span>
+			<span class="bar"></span>
+			<span class="bar"></span>
+		</div>
+	</div>
+	<header>
+		<div class="heading">
+			<h2 class="algorithm findPaths">Find all paths between two vertices - dpeth first search visualization</h2>
+		</div>
+		<div class="controlsContainer">
+			<div class="visualControls">
+				<div class="visualSpeed">
+					<p>Speed</p>
+					<input type="range" min="1" max="20" value="10" class="speedSlider" />
+				</div>
+				<div class="obstacles">
+					<p>Obstacles</p>
+					<div class="obstaclesElements">
+						<input type="range" min="1" value="50" class="obstacleSlider" />
+						&nbsp;
+						<button class="setWalls btn">walls</button>
+					</div>
+				</div>
+				<div class="controlBtns">
+					<button class="start btn">start</button>
+					<button class="findNext btn">find next</button>
+					<button class="manual btn">manual</button>
+					<button class="clearPath btn">clear path</button>
+					<button class="reset btn">reload</button>
+					<select style="display: none;" class="islandsAlgo">
+						<option></option>
+					</select>
+				</div>
+				<div class="tutorialContainer">
+					<span><img class="info" src="./assets/images/icons8-info-60.png" alt=""></span>
+					<div class="tutorialContent">
+						<h4>Controls</h4>
+						<p><span>Speed</span> - increase or decrease the speed of the visualization</p>
+						<p><span>Obstacles-</span> - create walls/obstacles, on a map these can be buildings or
+							structures which hinder a path. You can adjust the number of obstacles generated per click.
+							<br /> - You can also click on the grid cells to create
+							obstacles.
+						</p>
+						<p><span>Start</span> - After adjusting the speed and creating obstacles, you can now start the
+							visualization to see the workings of the algorithm.</p>
+						<p><span>Manual</span> - After running the visualization normally you can run it manually to see
+							how the shortest path was obtained. After the click you can proceed with pressing enter key.
+						</p>
+						<p><span>Clear Path</span> - After visualizing, you may opt to clear the path and add more
+							obstacles.</p>
+						<p><span>Speed</span> - If the grid becomes to cluttered you can reload it and repeat the above
+							steps.</p>
+					</div>
+				</div>
+			</div>
+			<!-- not displayed -->
+			<div class="hide">
+				<select class="algo">
+					<option value=""></option>
+				</select>
+				<select class="weight">
+					<option value=""></option>
+				</select>
+			</div>
+		</div>
+	</header>
+	<main>
+		<div class="visualizationContainer">
+			<div id="gridContainer"></div>
+			<div class="notification"></div>
+			<div class="tutorials">
+				<div class="tutorial">
+					<div class="emptyPath"></div>&nbsp;
+					<div>This is an empty path without any walls, you can click is to add obstacles/walls.</div>
+				</div>
+				<div class="tutorial">
+					<div class="stedimg"><span class="txt">A</span></div>&nbsp;
+					<div>Start Node -> this is the starting point(source),
+						search for a path starts here.</div>
+				</div>
+				<div class="tutorial">
+					<div class="stedimg"><span class="txt">B</span></div>&nbsp;
+					<div>End Node -> where the search stops when a path to destination has been found</div>
+				</div>
+				<div class="tutorial">
+					<div class="obstacle"></div>&nbsp;
+					<div>These act as obstacles, walls. On a real map these may be buildings or structures that may
+						block
+						a shorter path to a destination.</div>
+				</div>
+				<div class="tutorial">
+					<div class="selectedPath"><span class="txt">7</span></div>&nbsp;
+					<div>After the algorithm is complete, we have arrived at the destination, now the shortest path is
+						highlighted in green with the cost of path written written in black inside the path.</div>
+				</div>
+			</div>
+			<div class="algoInfo">
+				<div>
+					<div class="infoHeading">
+						<h3 class="title">Depth first traversal.</h3>
+					</div>
+					<div class="description">
+						<p>
+							This algorithm starts its search at the root and
+							explores one of its children's subtree and then moves
+							on to the next child's subtree and etcetera <br />
+							The idea used is to go as deep into the graph as
+							possible and backtrack once we reach a vertex with
+							unvisited neighbors. <br />
+							That is, start search at one vertex, after visiting
+							the vertex, perform dfs for each unvisited adjacent
+							vertex. In this way we visit all vertices reachable
+							from the starting vertex. <br />
+							We use a <b><em>stack</em></b> data structure.
+						</p>
+					</div>
+					<div class="algo-steps">
+						<p class="subtitle">Algorithm</p>
+						<p>
+							1. Mark the current node as visited(initially
+							current node is the root node).
+						</p>
+						<p>
+							2. Check if current node is the end node, If so,
+							then return it.
+						</p>
+						<p>
+							3. Iterate over children nodes of current node,
+							and do the following:
+						</p>
+						<p class="nest1">
+							1. Check if a child node is not visited.
+						</p>
+						<p class="nest1">
+							2.If so, then, mark it as visited.
+						</p>
+						<p class="nest1">
+							3. Go to it's sub graph recursively until you
+							find the end node(In other words, do the same
+							steps here passing the child node as the current
+							node in the next recursive call).
+						</p>
+						<p class="nest1">
+							4. If the child node has the end node in this
+							sub graph, then, return it.
+						</p>
+						<p>
+							4. If end node is not found, then end node is
+							not in the graph!
+						</p>
+					</div>
+					<div class="complexity">
+						<p class="subtitle">Computational complexity</p>
+						This algorithm takes <b><em>O(V + E)</em></b> where v is the number of
+						vertices and e is the number of edges.
+					</div>
+					<div class="applications">
+						<p class="subtitle">Applications</p>
+						<ul>
+							<li>topological sorting.</li>
+							<li>bipartite graph testing.</li>
+							<li>finding strongly connected components.</li>
+							<li>
+								solving puzzles that can only have one
+								solution.
+							</li>
+							<li>detecting cycles in a graph.</li>
+						</ul>
+					</div>
+					<div class="reference">
+						<p>References</p>
+						<a href="https://iq.opengenus.org/bfs-graph-traversal/">dfs</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+	<footer>
+		<div class="copy">
+			<p>OpenGenus IQ ©
+				<script>document.write(/\d{4}/.exec(Date())[0])</script> All rights reserved ™ [email: <a
+					href="mailto:team@opengenus.org">team@opengenus.org]</a>
+			</p>
+		</div>
+		<div class="links">
+			<span><a href="https://iq.opengenus.org/"> Top Posts </a></span>
+			<span><a href="https://www.linkedin.com/company/opengenus"> LinkedIn</a></span>
+			<span><a href="https://twitter.com/OpenGenus"> Twitter</a></span>
+		</div>
+	</footer>
+	<script src="./assets/js/common/index.js"></script>
+	<script type="module" src="./assets/js/visual/Grid/index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index a59dff3..437bdbf 100644
--- a/code/index.html
+++ b/code/index.html
@@ -15,7 +15,7 @@
 	<meta property="og:title" content="BFS Visualization" />
 	<meta property="og:description"
 		content="data structures and algorithms visualization, path finding algorithms, graph algorithms visualization, visual, graphs, graph traversal, traversal" />
-	<meta property="og:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
+	<meta property="og:url" content="https://iq.opengenus.org/algorithm-visualization/" />
 	<meta property="article:published_time" content="2021-12-08T10:39:05.000Z" />
 	<meta property="article:modified_time" content="2021-12-08T19:39:45.000Z" />
 	<meta property="article:tag" content="Algorithms" />
@@ -25,7 +25,7 @@
 	<meta name="twitter:card" content="summary" />
 	<meta name="twitter:title" content="Visualization" />
 	<meta name="twitter:description" content="A visualization of commong algorithms and algorithmkc problems." />
-	<meta name="twitter:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
+	<meta name="twitter:url" content="https://iq.opengenus.org/algorithm-visualization/" />
 	<meta name="twitter:label1" content="Written by" />
 	<meta name="twitter:data1" content="Erick Lumunge" />
 	<meta name="twitter:label2" content="Filed under" />
diff --git a/code/islands-visual.html b/code/islands-visual.html
index 81a24eb..cded7c4 100644
--- a/code/islands-visual.html
+++ b/code/islands-visual.html
@@ -15,7 +15,7 @@
 	<meta property="og:title" content="Number of islands visualization" />
 	<meta property="og:description"
 		content="data structures and algorithms visualization, number of islands visualization, count islands on a graph, path finding algorithms, graph algorithms visualization, visual, graphs, graph traversal, traversal" />
-	<meta property="og:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
+	<meta property="og:url" content="https://iq.opengenus.org/algorithm-visualization/" />
 	<meta property="article:published_time" content="2021-12-08T10:39:05.000Z" />
 	<meta property="article:modified_time" content="2021-12-08T19:39:45.000Z" />
 	<meta property="article:tag" content="Algorithms" />
@@ -25,7 +25,7 @@
 	<meta name="twitter:card" content="summary" />
 	<meta name="twitter:title" content="Visualization" />
 	<meta name="twitter:description" content="Number of islands algorithm visualization, counting islands on a graph" />
-	<meta name="twitter:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
+	<meta name="twitter:url" content="https://iq.opengenus.org/algorithm-visualization/" />
 	<meta name="twitter:label1" content="Written by" />
 	<meta name="twitter:data1" content="Erick Lumunge" />
 	<meta name="twitter:label2" content="Filed under" />
diff --git a/code/max-Island-visual.html b/code/max-Island-visual.html
index eddb9a3..a0243ea 100644
--- a/code/max-Island-visual.html
+++ b/code/max-Island-visual.html
@@ -15,7 +15,7 @@
     <meta property="og:title" content="Making a large island visualization." />
     <meta property="og:description"
         content="data structures and algorithms visualization, path finding algorithms, graph algorithms visualization, visual, graphs, graph traversal, traversal" />
-    <meta property="og:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
+    <meta property="og:url" content="https://iq.opengenus.org/algorithm-visualization/" />
     <meta property="article:published_time" content="2021-12-08T10:39:05.000Z" />
     <meta property="article:modified_time" content="2021-12-08T19:39:45.000Z" />
     <meta property="article:tag" content="Algorithms" />
@@ -26,7 +26,7 @@
     <meta name="twitter:title" content="Visualization" />
     <meta name="twitter:description"
         content="A visualization of making a large island given smaller islands by connecting neighboring islands to achive a maximum size." />
-    <meta name="twitter:url" content="https://iq.opengenus.org/algorithm-siaualization/" />
+    <meta name="twitter:url" content="https://iq.opengenus.org/algorithm-visualization/" />
     <meta name="twitter:label1" content="Written by" />
     <meta name="twitter:data1" content="Erick Lumunge" />
     <meta name="twitter:label2" content="Filed under" />