diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 9ecd1ab..3602d30 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -411,6 +411,9 @@ <h2 data-i18n="interactive-graph-visualizer">Interactive Graph Visualizer</h2>
       </p>
       <div class="button-container">
         <!-- BFS Button -->
+        <button (click)="startBFS()">
+          {{ isBFSRunning ? 'Stop BFS' : 'Start BFS' }}
+        </button>
         <button class="algo-button" (click)="startBFS()">Start BFS</button>
         <div *ngIf="showBFSGif" class="gif-container">
           <img
@@ -420,6 +423,9 @@ <h2 data-i18n="interactive-graph-visualizer">Interactive Graph Visualizer</h2>
         </div>
 
         <!-- DFS Button -->
+        <button (click)="startDFS()">
+          {{ isDFSRunning ? 'Stop DFS' : 'Start DFS' }}
+        </button>
         <button class="algo-button" (click)="startDFS()">Start DFS</button>
         <div *ngIf="showDFSGif" class="gif-container">
           <img
@@ -429,6 +435,9 @@ <h2 data-i18n="interactive-graph-visualizer">Interactive Graph Visualizer</h2>
         </div>
 
         <!-- Dijkstra Button -->
+        <button (click)="startDijkstra()">
+          {{ isDijkstraRunning ? 'Stop Dijkstra' : 'Start Dijkstra' }}
+        </button>
         <button class="algo-button" (click)="startDijkstra()">Start Dijkstra</button>
         <div *ngIf="showDijkstraGif" class="gif-container">
           <img
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 79a8a35..ae8a171 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -13,8 +13,11 @@ export class HeaderComponent implements AfterViewInit, OnDestroy {
   private resizeListener: (() => void) | null = null; // Initialize as null
   activeTab: string = 'dfs'; // Default tab is 'dfs'
   showBFSGif: boolean = false; // Default for BFS visualization
+  isBFSRunning: boolean = false;
   showDFSGif: boolean = false; // Default for DFS visualization
+  isDFSRunning: boolean =false; 
   showDijkstraGif: boolean = false; // Default for Dijkstra visualization
+  isDijkstraRunning: boolean = false; 
 
   setActiveTab(tab: string) {
     this.activeTab = tab;
@@ -52,17 +55,20 @@ export class HeaderComponent implements AfterViewInit, OnDestroy {
   }
 
   startBFS() {
-    this.showBFSGif = !this.showBFSGif; // Toggle the visibility
+    this.isBFSRunning = !this.isBFSRunning; // Toggle the BFS state on/off
+    this.showBFSGif = this.isBFSRunning; // Toggle the visibility
     console.log('BFS Started: ', this.showBFSGif); // Debugging
   }
 
   startDFS() {
-    this.showDFSGif = !this.showDFSGif; // Toggle the visibility
+    this.isDFSRunning = !this.isDFSRunning; // Toggle the DFS state on/off
+    this.showDFSGif = this.isDFSRunning; // Toggle the visibility
     console.log('DFS Started: ', this.showDFSGif); // Debugging
   }
 
   startDijkstra() {
-    this.showDijkstraGif = !this.showDijkstraGif; // Toggle the visibility
+    this.isDijkstraRunning = !this.isDijkstraRunning; // Toggle the Dijkstra state on/off
+    this.showDijkstraGif = this.isDijkstraRunning; // Toggle the visibility
     console.log('Dijkstra Started: ', this.showDijkstraGif); // Debugging
   }
 }