diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 831a1286f..ba3b0e9ad 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -24,7 +24,7 @@ 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);
@@ -32,7 +32,9 @@ export const MenuBar = ({ }: {}): JSX.Element => {
   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 revertBuiltStatusFromBuilding = useFlowStore(
+    (state) => state.revertBuiltStatusFromBuilding,
+  );
   const undo = useFlowsManagerStore((state) => state.undo);
   const redo = useFlowsManagerStore((state) => state.redo);
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
@@ -205,8 +207,8 @@ export const MenuBar = ({ }: {}): JSX.Element => {
           side="bottom"
           styleClasses="cursor-default"
         >
-          <div className="flex transition-all cursor-default items-center gap-2 text-sm text-muted-foreground">
-            <div className="flex transition-all cursor-default items-center gap-1.5 text-sm text-muted-foreground">
+          <div className="flex cursor-default items-center gap-2 text-sm text-muted-foreground transition-all">
+            <div className="flex cursor-default items-center gap-1.5 text-sm text-muted-foreground transition-all">
               <IconComponent
                 name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
                 className={cn(
@@ -214,26 +216,26 @@ export const MenuBar = ({ }: {}): JSX.Element => {
                   isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
                 )}
               />
-              <div>
-                {printByBuildStatus()}
-              </div>
+              <div>{printByBuildStatus()}</div>
             </div>
-            <button disabled={!isBuilding} onClick={_ => {
-              if (isBuilding) {
-                setIsBuilding(false);
-                revertBuiltStatusFromBuilding();
-                setLockChat(false);
-                window.stop();
+            <button
+              disabled={!isBuilding}
+              onClick={(_) => {
+                if (isBuilding) {
+                  setIsBuilding(false);
+                  revertBuiltStatusFromBuilding();
+                  setLockChat(false);
+                  window.stop();
+                }
+              }}
+              className={
+                isBuilding
+                  ? "flex items-center gap-1.5 text-status-red opacity-100 transition-all"
+                  : "opacity-0"
               }
-            }
-            } className={isBuilding ? "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>
+            >
+              <IconComponent name="Square" className="h-4 w-4" />
+              <span>Stop</span>
             </button>
           </div>
         </ShadTooltip>