diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/useRunGraph.ts b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/useRunGraph.ts
index cd321e340f..2b37ebe8a9 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/useRunGraph.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/useRunGraph.ts
@@ -19,6 +19,9 @@ export const useRunGraph = () => {
   const hasCredentials = useGraphStore(
     useShallow((state) => state.hasCredentials),
   );
+  const setIsGraphRunning = useGraphStore(
+    useShallow((state) => state.setIsGraphRunning),
+  );
   const [openRunInputDialog, setOpenRunInputDialog] = useState(false);
 
   const [{ flowID, flowVersion, flowExecutionID }, setQueryStates] =
@@ -38,6 +41,8 @@ export const useRunGraph = () => {
           });
         },
         onError: (error: any) => {
+          // Reset running state on error
+          setIsGraphRunning(false);
           toast({
             title: (error.detail as string) ?? "An unexpected error occurred.",
             description: "An unexpected error occurred.",
@@ -67,6 +72,8 @@ export const useRunGraph = () => {
     if (hasInputs() || hasCredentials()) {
       setOpenRunInputDialog(true);
     } else {
+      // Optimistically set running state immediately for responsive UI
+      setIsGraphRunning(true);
       await executeGraph({
         graphId: flowID ?? "",
         graphVersion: flowVersion || null,
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
index a1933dc15b..573385c74d 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
@@ -18,6 +18,7 @@ export const useRunInputDialog = ({
   const credentialsSchema = useGraphStore(
     (state) => state.credentialsInputSchema,
   );
+  const setIsGraphRunning = useGraphStore((state) => state.setIsGraphRunning);
 
   const [openCronSchedulerDialog, setOpenCronSchedulerDialog] = useState(false);
   const [inputValues, setInputValues] = useState<Record<string, any>>({});
@@ -41,6 +42,8 @@ export const useRunInputDialog = ({
           });
         },
         onError: (error) => {
+          // Reset running state on error
+          setIsGraphRunning(false);
           toast({
             title: (error.detail as string) ?? "An unexpected error occurred.",
             description: "An unexpected error occurred.",
@@ -78,6 +81,8 @@ export const useRunInputDialog = ({
       graphVersion: flowVersion || null,
       data: { inputs: inputValues, credentials_inputs: credentialValues },
     });
+    // Optimistically set running state immediately for responsive UI
+    setIsGraphRunning(true);
     setIsOpen(false);
   };
 
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx
index 1fb10f72a1..37417f632d 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx
@@ -107,6 +107,7 @@ export const Flow = () => {
           )}
         </ReactFlow>
       </div>
+      {/* TODO: Need to update it in future - also do not send executionId as prop - rather use useQueryState inside the component */}
       <FloatingReviewsPanel
         executionId={flowExecutionID || undefined}
         graphId={flowID || undefined}
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/RunningBackground.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/RunningBackground.tsx
index e59009c9e0..b3a23f9fba 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/RunningBackground.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/RunningBackground.tsx
@@ -21,7 +21,7 @@ export const RunningBackground = () => {
           borderWidth: "15px",
           borderStyle: "solid",
           borderColor: "transparent",
-          borderImage: "linear-gradient(to right, #BC82F3, #BC82F3) 1",
+          borderImage: "linear-gradient(to right, #D4A5F9, #D4A5F9) 1",
         }}
       ></div>
       <div
@@ -30,7 +30,7 @@ export const RunningBackground = () => {
           borderWidth: "10px",
           borderStyle: "solid",
           borderColor: "transparent",
-          borderImage: "linear-gradient(to right, #BC82F3, #BC82F3) 1",
+          borderImage: "linear-gradient(to right, #D4A5F9, #D4A5F9) 1",
         }}
       ></div>
       <div
@@ -39,7 +39,7 @@ export const RunningBackground = () => {
           borderWidth: "6px",
           borderStyle: "solid",
           borderColor: "transparent",
-          borderImage: "linear-gradient(to right, #BC82F3, #BC82F3) 1",
+          borderImage: "linear-gradient(to right, #D4A5F9, #D4A5F9) 1",
         }}
       ></div>
       <div
@@ -48,7 +48,7 @@ export const RunningBackground = () => {
           borderWidth: "6px",
           borderStyle: "solid",
           borderColor: "transparent",
-          borderImage: "linear-gradient(to right, #BC82F3, #BC82F3) 1",
+          borderImage: "linear-gradient(to right, #D4A5F9, #D4A5F9) 1",
         }}
       ></div>
     </div>
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts
index 6ac9856c5e..badb9784b8 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts
@@ -16,6 +16,7 @@ import { useGraphStore } from "../../../stores/graphStore";
 import { useReactFlow } from "@xyflow/react";
 import { useControlPanelStore } from "../../../stores/controlPanelStore";
 import { useHistoryStore } from "../../../stores/historyStore";
+import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus";
 
 export const useFlow = () => {
   const [isLocked, setIsLocked] = useState(false);
@@ -30,6 +31,9 @@ export const useFlow = () => {
   const setGraphSchemas = useGraphStore(
     useShallow((state) => state.setGraphSchemas),
   );
+  const setGraphExecutionStatus = useGraphStore(
+    useShallow((state) => state.setGraphExecutionStatus),
+  );
   const updateEdgeBeads = useEdgeStore(
     useShallow((state) => state.updateEdgeBeads),
   );
@@ -154,6 +158,13 @@ export const useFlow = () => {
     customNodes,
   ]);
 
+  // update graph execution status
+  useEffect(() => {
+    if (executionDetails) {
+      setGraphExecutionStatus(executionDetails.status as AgentExecutionStatus);
+    }
+  }, [executionDetails]);
+
   useEffect(() => {
     if (customNodes.length > 0 && graph?.links) {
       const timer = setTimeout(() => {
diff --git a/autogpt_platform/frontend/src/app/(platform)/build/stores/graphStore.ts b/autogpt_platform/frontend/src/app/(platform)/build/stores/graphStore.ts
index 5cb9d410ba..44142881a8 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/stores/graphStore.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/stores/graphStore.ts
@@ -5,6 +5,7 @@ interface GraphStore {
   graphExecutionStatus: AgentExecutionStatus | undefined;
   isGraphRunning: boolean;
   setGraphExecutionStatus: (status: AgentExecutionStatus | undefined) => void;
+  setIsGraphRunning: (isRunning: boolean) => void;
 
   inputSchema: Record<string, any> | null;
   credentialsInputSchema: Record<string, any> | null;
@@ -38,6 +39,10 @@ export const useGraphStore = create<GraphStore>((set, get) => ({
     });
   },
 
+  setIsGraphRunning: (isRunning: boolean) => {
+    set({ isGraphRunning: isRunning });
+  },
+
   setGraphSchemas: (inputSchema, credentialsInputSchema, outputSchema) =>
     set({ inputSchema, credentialsInputSchema, outputSchema }),