diff --git a/app/searching/[algorithm]/page.tsx b/app/searching/[algorithm]/page.tsx
index ad572bb..ddc51d4 100644
--- a/app/searching/[algorithm]/page.tsx
+++ b/app/searching/[algorithm]/page.tsx
@@ -31,8 +31,8 @@ export default function SearchingAlgorithmPage() {
 
       dispatch({ type: "SET_TARGET", payload: target });
 
-      // Need to delay this slightly to ensure the target is set
-      setTimeout(() => {
+      // Generate visualization if not already generated OR if algorithm changed
+      if (!state.visualizationData || algorithmKey !== state.algorithm) {
         const algorithmFunction = getAlgorithmByName(algorithmKey);
         if (algorithmFunction) {
           try {
@@ -43,9 +43,16 @@ export default function SearchingAlgorithmPage() {
             console.error("Error generating visualization:", error);
           }
         }
-      }, 0);
+      }
     }
-  }, [algorithmKey, dispatch]);
+  }, [
+    algorithmKey,
+    dispatch,
+    state.algorithm,
+    state.data,
+    state.visualizationData,
+    state.target,
+  ]);
 
   if (!algorithmInfo) {
     return (
diff --git a/app/sorting/[algorithm]/page.tsx b/app/sorting/[algorithm]/page.tsx
index f52ab9a..7e8710a 100644
--- a/app/sorting/[algorithm]/page.tsx
+++ b/app/sorting/[algorithm]/page.tsx
@@ -20,16 +20,25 @@ export default function AlgorithmPage() {
 
   // Set the current algorithm and generate visualization
   useEffect(() => {
-    if (algorithmKey && algorithmKey !== state.algorithm) {
+    if (algorithmKey) {
       dispatch({ type: "SET_ALGORITHM", payload: algorithmKey });
 
-      const algorithmFunction = getAlgorithmByName(algorithmKey);
-      if (algorithmFunction) {
-        const viz = algorithmFunction(state.data);
-        dispatch({ type: "GENERATE_VISUALIZATION", payload: viz });
+      // Generate visualization if not already generated OR if algorithm changed
+      if (!state.visualizationData || algorithmKey !== state.algorithm) {
+        const algorithmFunction = getAlgorithmByName(algorithmKey);
+        if (algorithmFunction) {
+          const viz = algorithmFunction(state.data);
+          dispatch({ type: "GENERATE_VISUALIZATION", payload: viz });
+        }
       }
     }
-  }, [algorithmKey, dispatch, state.algorithm, state.data]);
+  }, [
+    algorithmKey,
+    dispatch,
+    state.algorithm,
+    state.data,
+    state.visualizationData,
+  ]);
 
   if (!algorithmInfo) {
     return (
diff --git a/components/visualizer/AlgorithmVisualizer.tsx b/components/visualizer/AlgorithmVisualizer.tsx
index e43a08a..716dc47 100644
--- a/components/visualizer/AlgorithmVisualizer.tsx
+++ b/components/visualizer/AlgorithmVisualizer.tsx
@@ -84,7 +84,8 @@ export default function AlgorithmVisualizer() {
     );
   }
 
-  const isSearchAlgorithm = algorithm.includes("search");
+  const isSearchAlgorithm = algorithm.toLowerCase().includes("search");
+  console.log(algorithm, isSearchAlgorithm);
 
   return (
     <div className="space-y-8">
diff --git a/components/visualizer/SearchVisualization.tsx b/components/visualizer/SearchVisualization.tsx
index 7a1c44a..13a36d1 100644
--- a/components/visualizer/SearchVisualization.tsx
+++ b/components/visualizer/SearchVisualization.tsx
@@ -13,9 +13,9 @@ export default function SearchVisualization({
   return (
     <div className="flex flex-col items-center space-y-8 w-full p-6 bg-white">
       <div className="flex items-center space-x-2 mb-4">
-        <div className="font-medium">Searching for value:</div>
+        <div className="font-medium text-gray-600">Searching for value:</div>
         <div className="text-lg font-bold text-purple-600">{target}</div>
-        <div className="font-medium ml-4">
+        <div className="font-medium ml-4 text-gray-600">
           Status:
           <span
             className={`ml-2 font-bold ${