diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 63a8742dd..2b1bd2ce3 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -24,12 +24,15 @@ import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
 
-export const MenuBar = ({}: {}): JSX.Element => {
+export const MenuBar = ({ }: {}): JSX.Element => {
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setLockChat = useFlowStore((state) => state.setLockChat);
+  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
+  const revertBuiltStatusFromBuilding = useFlowStore((state) => state.revertBuiltStatusFromBuilding);
   const undo = useFlowsManagerStore((state) => state.undo);
   const redo = useFlowsManagerStore((state) => state.redo);
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
@@ -202,15 +205,37 @@ export const MenuBar = ({}: {}): JSX.Element => {
           side="bottom"
           styleClasses="cursor-default"
         >
-          <div className="flex cursor-default items-center gap-1.5 text-sm text-muted-foreground">
-            <IconComponent
-              name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
-              className={cn(
-                "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
-              )}
-            />
-            {printByBuildStatus()}
+          <div className="flex group transition-all cursor-default items-center gap-1.5 text-sm text-muted-foreground">
+            <div className="absolute flex transition-all cursor-default items-center gap-1.5 text-sm text-muted-foreground">
+              <IconComponent
+                name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
+                className={cn(
+                  "h-4 w-4",
+                  isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
+                  isBuilding ? "group-hover:opacity-0 transition-all" : ""
+                )}
+              />
+              <div className={isBuilding ? "group-hover:opacity-0 transition-all" : ""
+              }>
+                {printByBuildStatus()}
+              </div>
+            </div>
+            <button disabled={!isBuilding} onClick={_ => {
+              if (isBuilding) {
+                setIsBuilding(false);
+                revertBuiltStatusFromBuilding();
+                setLockChat(false);
+              }
+            }
+            } className={isBuilding ? "absolute opacity-0 group-hover:opacity-100 text-status-red flex gap-1.5 items-center transition-all " : "opacity-0"}>
+              <IconComponent
+                name="Square"
+                className="h-4 w-4"
+              />
+              <span>
+                Stop
+              </span>
+            </button>
           </div>
         </ShadTooltip>
       )}
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index ae3c7aba1..4ff0e6393 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -77,7 +77,8 @@ export default function IOModal({
 
   const buildFlow = useFlowStore((state) => state.buildFlow);
   const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
-  const [lockChat, setLockChat] = useState(false);
+  const lockChat = useFlowStore((state) => state.lockChat);
+  const setLockChat = useFlowStore((state) => state.setLockChat);
   const [chatValue, setChatValue] = useState("");
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);