diff --git a/client/src/components/Workflow/Editor/NodeInvocationText.vue b/client/src/components/Workflow/Editor/NodeInvocationText.vue
index acc3dd31f555..e9e92f2a7b9c 100644
--- a/client/src/components/Workflow/Editor/NodeInvocationText.vue
+++ b/client/src/components/Workflow/Editor/NodeInvocationText.vue
@@ -2,16 +2,11 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import { isWorkflowInput } from "@/components/Workflow/constants";
-import { type GraphStep, iconClasses } from "@/composables/useInvocationGraph";
+import { type GraphStep, iconClasses, statePlaceholders } from "@/composables/useInvocationGraph";
 
 const props = defineProps<{
     invocationStep: GraphStep;
 }>();
-
-const statePlaceholders: Record<string, string> = {
-    ok: "successful",
-    error: "failed",
-};
 </script>
 <template>
     <div class="p-1 unselectable">
diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
index 987782991e20..ce65ef1a6e12 100644
--- a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -9,27 +9,21 @@ import {
     faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { useElementBounding } from "@vueuse/core";
 import { BAlert, BButton, BCard, BCardBody, BCardHeader } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import type { WorkflowInvocationElementView } from "@/api/invocations";
-import { JobProvider } from "@/components/providers";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { useInvocationGraph } from "@/composables/useInvocationGraph";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import type { Workflow } from "@/stores/workflowStore";
-import { withPrefix } from "@/utils/redirect";
 
-import WorkflowInvocationSteps from "./WorkflowInvocationSteps.vue";
 import Heading from "@/components/Common/Heading.vue";
-import ExternalLink from "@/components/ExternalLink.vue";
-import JobInformation from "@/components/JobInformation/JobInformation.vue";
-import JobParameters from "@/components/JobParameters/JobParameters.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
+import WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
+import WorkflowInvocationStepHeader from "@/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue";
 
 library.add(faArrowDown, faChevronDown, faChevronUp, faSignInAlt, faSitemap, faTimes);
 
@@ -70,11 +64,9 @@ const loadingGraph = ref(true);
 const initialLoading = ref(true);
 const errored = ref(false);
 const errorMessage = ref("");
-const showingJobId = ref<string | undefined>(undefined);
 const pollTimeout = ref<any>(null);
-const hideGraph = ref(false);
-const jobCard = ref<BCard | null>(null);
-const loadedJobInfo = ref<HTMLDivElement | null>(null);
+const stepCard = ref<BCard | null>(null);
+const loadedJobInfo = ref<typeof WorkflowInvocationStep | null>(null);
 
 const invocationRef = computed(() => props.invocation);
 
@@ -125,34 +117,20 @@ watch(
     { immediate: true }
 );
 
-// when the graph is hidden/visible, reset the active node and showingJobId
-watch(
-    () => hideGraph.value,
-    () => {
-        showingJobId.value = undefined;
-        activeNodeId.value = null;
-    }
-);
-
 // scroll to the job card when it is loaded (only on invocation route)
+// TODO: Maybe do not do this on first load...
 if (props.isFullPage) {
     watch(
         () => loadedJobInfo.value,
         async (jobInfo) => {
             if (jobInfo) {
-                scrollJobToView();
+                scrollStepToView();
             }
         },
         { immediate: true }
     );
 }
 
-// properties for handling the flex-draggable steps panel
-const invocationContainer = ref<HTMLDivElement | null>(null);
-const { width: containerWidth } = useElementBounding(invocationContainer);
-const minWidth = computed(() => containerWidth.value * 0.3);
-const maxWidth = computed(() => 0.7 * containerWidth.value);
-
 onUnmounted(() => {
     clearTimeout(pollTimeout.value);
 });
@@ -196,17 +174,9 @@ async function pollInvocationGraph() {
     }
 }
 
-function scrollJobToView() {
-    const jobCardHeader = jobCard.value?.querySelector(".card-header");
-    jobCardHeader?.scrollIntoView({ behavior: "smooth", block: "start" });
-}
-
-function toggleActiveStep(stepId: number) {
-    if (activeNodeId.value === stepId) {
-        activeNodeId.value = null;
-    } else {
-        activeNodeId.value = stepId;
-    }
+function scrollStepToView() {
+    const stepCardHeader = stepCard.value?.querySelector(".card-header");
+    stepCardHeader?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 </script>
 
@@ -222,8 +192,8 @@ function toggleActiveStep(stepId: number) {
             <BAlert v-else show variant="danger"> Unknown Error </BAlert>
         </div>
         <div v-else-if="steps && datatypesMapper">
-            <div ref="invocationContainer" class="d-flex">
-                <div v-if="!hideGraph" class="position-relative w-100">
+            <div class="d-flex">
+                <div class="position-relative w-100">
                     <BCard no-body>
                         <WorkflowGraph
                             :steps="steps"
@@ -235,91 +205,42 @@ function toggleActiveStep(stepId: number) {
                             is-invocation
                             readonly />
                     </BCard>
-                    <BButton
-                        class="position-absolute text-decoration-none m-2"
-                        style="top: 0; right: 0"
-                        data-description="hide invocation graph"
-                        size="sm"
-                        @click="hideGraph = true">
-                        <FontAwesomeIcon :icon="faTimes" class="mr-1" />
-                        <span v-localize>Hide Graph</span>
-                    </BButton>
                 </div>
-                <BButton
-                    v-else
-                    v-b-tooltip.noninteractive.hover.right="'Show Graph'"
-                    size="sm"
-                    class="p-0"
-                    style="width: min-content"
-                    @click="hideGraph = false">
-                    <FontAwesomeIcon :icon="faSitemap" />
-                    <div v-localize>Show Graph</div>
-                </BButton>
-                <component
-                    :is="!hideGraph ? FlexPanel : 'div'"
-                    v-if="containerWidth"
-                    side="right"
-                    :collapsible="false"
-                    class="ml-2"
-                    :class="{ 'w-100': hideGraph }"
-                    :min-width="minWidth"
-                    :max-width="maxWidth"
-                    :default-width="containerWidth * 0.4">
-                    <WorkflowInvocationSteps
-                        class="graph-steps-aside"
-                        :class="{ 'steps-fixed-height': !hideGraph }"
-                        :steps="steps"
-                        :store-id="storeId"
-                        :invocation="invocationRef"
-                        :workflow="props.workflow"
-                        :is-full-page="props.isFullPage"
-                        :hide-graph="hideGraph"
-                        :showing-job-id="showingJobId || ''"
-                        :active-node-id="activeNodeId !== null ? activeNodeId : undefined"
-                        @update:showing-job-id="(jobId) => (showingJobId = jobId)"
-                        @focus-on-step="toggleActiveStep" />
-                </component>
             </div>
-            <BCard v-if="!hideGraph" ref="jobCard" class="mt-1" no-body>
-                <BCardHeader class="d-flex justify-content-between align-items-center">
-                    <Heading inline size="md">
-                        <span v-if="showingJobId">
-                            Showing Job Details for
-                            <ExternalLink :href="withPrefix(`/jobs/${showingJobId}/view`)">
-                                <code>{{ showingJobId }}</code>
-                            </ExternalLink>
-                        </span>
-                        <span v-else>No Job Selected</span>
+            <BCard ref="stepCard" class="mt-1" no-body>
+                <BCardHeader
+                    class="d-flex justify-content-between align-items-center"
+                    :class="activeNodeId ? steps[activeNodeId]?.headerClass : ''">
+                    <Heading inline size="md" class="w-100 mr-2">
+                        <WorkflowInvocationStepHeader
+                            v-if="activeNodeId !== null"
+                            class="w-100"
+                            :workflow-step="props.workflow.steps[activeNodeId]"
+                            :graph-step="steps[activeNodeId]"
+                            :invocation-step="props.invocation.steps[activeNodeId]" />
+                        <span v-else>No Step Selected</span>
                     </Heading>
-                    <div>
-                        <BButton
-                            v-if="showingJobId"
-                            v-b-tooltip.hover.noninteractive
-                            title="Scroll to Job"
-                            @click="scrollJobToView()">
+                    <div class="d-flex">
+                        <BButton v-if="activeNodeId !== null" title="Scroll to Step" @click="scrollStepToView()">
                             <FontAwesomeIcon :icon="faArrowDown" />
                         </BButton>
-                        <BButton
-                            v-if="showingJobId"
-                            v-b-tooltip.hover.noninteractive
-                            title="Hide Job"
-                            @click="showingJobId = undefined">
+                        <BButton v-if="activeNodeId !== null" title="Hide Step" @click="activeNodeId = null">
                             <FontAwesomeIcon :icon="faTimes" />
                         </BButton>
                     </div>
                 </BCardHeader>
                 <BCardBody>
-                    <JobProvider v-if="showingJobId" :id="showingJobId" v-slot="{ item, loading }">
-                        <BAlert v-if="loading" show>
-                            <LoadingSpan message="Loading Job Information" />
-                        </BAlert>
-                        <div v-else ref="loadedJobInfo">
-                            <JobInformation v-if="item" :job_id="item.id" />
-                            <p></p>
-                            <JobParameters v-if="item" :job-id="item.id" :include-title="false" />
-                        </div>
-                    </JobProvider>
-                    <BAlert v-else show>Select a job from a step in the invocation to view its details here.</BAlert>
+                    <WorkflowInvocationStep
+                        v-if="activeNodeId !== null"
+                        ref="loadedJobInfo"
+                        :key="activeNodeId"
+                        :invocation="props.invocation"
+                        :workflow="props.workflow"
+                        :workflow-step="props.workflow.steps[activeNodeId]"
+                        in-graph-view
+                        :graph-step="steps[activeNodeId]"
+                        expanded />
+                    <BAlert v-else show>Click on a step in the invocation to view its details here.</BAlert>
                 </BCardBody>
             </BCard>
         </div>
diff --git a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
index febb69008e06..a1b441773494 100644
--- a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
+++ b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
@@ -2,11 +2,12 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
 import type { WorkflowInvocationElementView } from "@/api/invocations";
 import { isWorkflowInput } from "@/components/Workflow/constants";
-import type { GraphStep } from "@/composables/useInvocationGraph";
+import { useInvocationStore } from "@/stores/invocationStore";
 import type { Workflow } from "@/stores/workflowStore";
 
 import WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
@@ -14,8 +15,6 @@ import WorkflowInvocationStep from "@/components/WorkflowInvocationState/Workflo
 library.add(faChevronDown, faChevronUp, faSignInAlt);
 
 interface Props {
-    /** The steps for the invocation graph */
-    steps: { [index: string]: GraphStep };
     /** The store id for the invocation graph */
     storeId: string;
     /** The invocation to display */
@@ -42,6 +41,10 @@ const props = withDefaults(defineProps<Props>(), {
     activeNodeId: undefined,
 });
 
+const invocationStore = useInvocationStore();
+const { graphStepsByStoreId } = storeToRefs(invocationStore);
+const graphSteps = computed(() => graphStepsByStoreId.value[props.storeId]);
+
 const stepsDiv = ref<HTMLDivElement>();
 const expandInvocationInputs = ref(false);
 
@@ -79,7 +82,7 @@ function showJob(jobId: string | undefined) {
 </script>
 
 <template>
-    <div ref="stepsDiv" class="d-flex flex-column w-100">
+    <div v-if="graphSteps" ref="stepsDiv" class="d-flex flex-column w-100">
         <!-- Input Steps grouped in a separate portlet -->
         <div v-if="workflowInputSteps.length > 1" class="ui-portlet-section w-100">
             <div
@@ -106,7 +109,7 @@ function showJob(jobId: string | undefined) {
                     :workflow="props.workflow"
                     :workflow-step="step"
                     :in-graph-view="!props.hideGraph"
-                    :graph-step="steps[step.id]"
+                    :graph-step="graphSteps[step.id]"
                     :expanded="props.hideGraph ? undefined : props.activeNodeId === step.id"
                     :showing-job-id="props.showingJobId"
                     @show-job="showJob"
@@ -122,7 +125,7 @@ function showJob(jobId: string | undefined) {
             :workflow="props.workflow"
             :workflow-step="step"
             :in-graph-view="!props.hideGraph"
-            :graph-step="steps[step.id]"
+            :graph-step="graphSteps[step.id]"
             :expanded="props.hideGraph ? undefined : props.activeNodeId === step.id"
             :showing-job-id="props.showingJobId"
             @show-job="showJob"
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
index e5f192867512..dbb86bc1f2be 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
@@ -3,8 +3,8 @@ import { BAlert, BButton } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { type InvocationJobsSummary, type InvocationStep, type WorkflowInvocationElementView } from "@/api/invocations";
-import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { getRootFromIndexLink } from "@/onload";
+import type { Workflow } from "@/stores/workflowStore";
 import { withPrefix } from "@/utils/redirect";
 
 import {
@@ -34,14 +34,13 @@ interface Props {
     jobStatesSummary: InvocationJobsSummary;
     index?: number;
     isSubworkflow?: boolean;
+    workflow?: Workflow;
 }
 
 const props = defineProps<Props>();
 
 const generatePdfTooltip = "Generate PDF report for this workflow invocation";
 
-const { workflow } = useWorkflowInstance(props.invocation?.workflow_id ?? "");
-
 const invocationId = computed<string | undefined>(() => props.invocation?.id);
 
 const indexStr = computed(() => {
@@ -227,11 +226,11 @@ function onCancel() {
         </div>
         <!-- An invocation has been loaded, display the graph -->
         <div v-if="invocation">
-            <div v-if="workflow && !isSubworkflow">
+            <div v-if="props.workflow && !isSubworkflow">
                 <InvocationGraph
                     class="mt-1"
                     :invocation="invocation"
-                    :workflow="workflow"
+                    :workflow="props.workflow"
                     :is-terminal="invocationAndJobTerminal"
                     :is-scheduled="invocationSchedulingTerminal"
                     :is-full-page="isFullPage"
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 603c51236c34..07d2d65f26d5 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -6,10 +6,9 @@ import { BAlert, BButton, BButtonGroup, BTab, BTabs } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { type InvocationJobsSummary, type WorkflowInvocationElementView } from "@/api/invocations";
-import type { StoredWorkflowDetailed } from "@/api/workflows";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { useInvocationStore } from "@/stores/invocationStore";
-import { useWorkflowStore } from "@/stores/workflowStore";
 import localize from "@/utils/localization";
 
 import { cancelWorkflowScheduling } from "./services";
@@ -18,6 +17,7 @@ import { isTerminal, jobCount, runningCount } from "./util";
 import Heading from "../Common/Heading.vue";
 import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
 import UtcDate from "../UtcDate.vue";
+import WorkflowInvocationSteps from "../Workflow/Invocation/Graph/WorkflowInvocationSteps.vue";
 import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
 import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue";
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
@@ -100,10 +100,18 @@ const invocationStateSuccess = computed(() => {
     );
 });
 
-const workflowStore = useWorkflowStore();
+const workflow = computed(() => {
+    if (invocation.value) {
+        const { workflow: wf } = useWorkflowInstance(invocation.value.workflow_id);
+        return wf.value;
+    } else {
+        return undefined;
+    }
+});
+
+const storeId = computed(() => (invocation.value ? `invocation-${invocation.value.id}` : undefined));
 
-const isDeletedWorkflow = computed(() => getWorkflow()?.deleted === true);
-const workflowVersion = computed(() => getWorkflow()?.version);
+const isDeletedWorkflow = computed(() => workflow.value?.deleted === true);
 
 onMounted(() => {
     pollStepStatesUntilTerminal();
@@ -136,31 +144,13 @@ function onCancel() {
 function cancelWorkflowSchedulingLocal() {
     cancelWorkflowScheduling(props.invocationId).then(onCancel).catch(onError);
 }
-
-function getWorkflow() {
-    return invocation.value?.workflow_id
-        ? (workflowStore.getStoredWorkflowByInstanceId(
-              invocation.value?.workflow_id
-          ) as unknown as StoredWorkflowDetailed)
-        : undefined;
-}
-
-function getWorkflowId() {
-    return invocation.value?.workflow_id
-        ? workflowStore.getStoredWorkflowIdByInstanceId(invocation.value?.workflow_id)
-        : undefined;
-}
-
-function getWorkflowName() {
-    return workflowStore.getStoredWorkflowNameByInstanceId(invocation.value?.workflow_id);
-}
 </script>
 
 <template>
     <div v-if="invocation" class="d-flex flex-column w-100">
         <div v-if="props.isFullPage" class="d-flex flex-gapx-1">
             <Heading h1 separator inline truncate size="xl" class="flex-grow-1">
-                Invoked Workflow: "{{ getWorkflowName() }}"
+                Invoked Workflow: "{{ workflow ? workflow.name : "..." }}"
             </Heading>
 
             <div v-if="!props.fromPanel">
@@ -187,39 +177,35 @@ function getWorkflowName() {
                     <SwitchToHistoryLink :history-id="invocation.history_id" />
                 </span>
             </div>
-            <div v-if="getWorkflow()" class="d-flex flex-gapx-1 align-items-center">
+            <div v-if="workflow" class="d-flex flex-gapx-1 align-items-center">
                 <div class="d-flex flex-column align-items-end mr-2">
-                    <span v-if="workflowVersion !== undefined" class="mb-1">
+                    <span class="mb-1">
                         <FontAwesomeIcon :icon="faSitemap" />
-                        Workflow Version: {{ workflowVersion + 1 }}
+                        Workflow Version: {{ workflow.version + 1 }}
                     </span>
-                    <WorkflowInvocationsCount class="float-right" :workflow="getWorkflow()" />
+                    <WorkflowInvocationsCount class="float-right" :workflow="workflow" />
                 </div>
                 <BButtonGroup vertical>
                     <BButton
                         v-b-tooltip.hover.noninteractive.html
                         :title="
-                            !isDeletedWorkflow
-                                ? `<b>Edit</b><br>${getWorkflowName()}`
-                                : 'This workflow has been deleted.'
+                            !isDeletedWorkflow ? `<b>Edit</b><br>${workflow.name}` : 'This workflow has been deleted.'
                         "
                         size="sm"
                         variant="secondary"
                         :disabled="isDeletedWorkflow"
-                        :to="`/workflows/edit?id=${getWorkflowId()}&version=${workflowVersion}`">
+                        :to="`/workflows/edit?id=${workflow.id}&version=${workflow.version}`">
                         <FontAwesomeIcon :icon="faEdit" />
                         <span v-localize>Edit</span>
                     </BButton>
                     <WorkflowRunButton
-                        :id="getWorkflowId() || ''"
+                        :id="workflow.id"
                         :title="
-                            !isDeletedWorkflow
-                                ? `<b>Rerun</b><br>${getWorkflowName()}`
-                                : 'This workflow has been deleted.'
+                            !isDeletedWorkflow ? `<b>Rerun</b><br>${workflow.name}` : 'This workflow has been deleted.'
                         "
                         :disabled="isDeletedWorkflow"
                         full
-                        :version="workflowVersion" />
+                        :version="workflow.version" />
                 </BButtonGroup>
             </div>
         </div>
@@ -229,8 +215,10 @@ function getWorkflowName() {
             :content-class="['overflow-auto', isScrollable ? 'pr-2' : '']">
             <BTab key="0" title="Overview" active>
                 <WorkflowInvocationOverview
+                    v-if="workflow && invocation"
                     class="invocation-overview"
                     :invocation="invocation"
+                    :workflow="workflow"
                     :index="index"
                     :is-full-page="props.isFullPage"
                     :invocation-and-job-terminal="invocationAndJobTerminal"
@@ -239,6 +227,15 @@ function getWorkflowName() {
                     :is-subworkflow="isSubworkflow"
                     @invocation-cancelled="cancelWorkflowSchedulingLocal" />
             </BTab>
+            <BTab title="Steps" lazy>
+                <WorkflowInvocationSteps
+                    v-if="workflow && invocation"
+                    :invocation="invocation"
+                    :workflow="workflow"
+                    :store-id="storeId"
+                    :is-full-page="props.isFullPage"
+                    :showing-job-id="''" />
+            </BTab>
             <WorkflowInvocationInputOutputTabs :invocation="invocation" />
             <!-- <BTab title="Workflow Overview">
                 <p>TODO: Insert readonly version of workflow editor here</p>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index 243c44d428d1..449b3dedf26a 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -1,30 +1,20 @@
 <template>
     <div class="d-flex" :data-step="workflowStep.id">
-        <div class="ui-portlet-section" style="width: 100%">
+        <div :class="{ 'ui-portlet-section': !inGraphView }" style="width: 100%">
             <div
+                v-if="!inGraphView"
                 class="portlet-header portlet-operations cursor-pointer"
                 :class="graphStep?.headerClass"
                 role="button"
                 tabindex="0"
                 @keyup.enter="toggleStep"
                 @click="toggleStep">
-                <span :id="`step-icon-${workflowStep.id}`">
-                    <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStepType" />
-                </span>
-                <ToolLinkPopover :target="`step-icon-${workflowStep.id}`" v-bind="toolProps(workflowStep.id)" />
-                <span class="portlet-title-text">
-                    <u class="step-title">
-                        <WorkflowStepTitle v-bind="titleProps(workflowStep.id)" />
-                    </u>
-                </span>
-                <span class="float-right">
-                    <FontAwesomeIcon
-                        v-if="graphStep?.headerIcon"
-                        class="mr-1"
-                        :icon="graphStep.headerIcon"
-                        :spin="graphStep.headerIconSpin" />
-                    <FontAwesomeIcon :icon="computedExpanded ? 'fa-chevron-up' : 'fa-chevron-down'" />
-                </span>
+                <WorkflowInvocationStepHeader
+                    :workflow-step="workflowStep"
+                    :graph-step="graphStep"
+                    :invocation-step="step"
+                    can-expand
+                    :expanded="computedExpanded" />
             </div>
             <div v-if="computedExpanded" class="portlet-content">
                 <InvocationStepProvider
@@ -118,34 +108,27 @@
     </div>
 </template>
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import LoadingSpan from "components/LoadingSpan";
 import { InvocationStepProvider } from "components/providers";
-import ToolLinkPopover from "components/Tool/ToolLinkPopover";
 import { mapActions, mapState } from "pinia";
 import { useToolStore } from "stores/toolStore";
 import { useWorkflowStore } from "stores/workflowStore";
 
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
-import WorkflowStepIcon from "./WorkflowStepIcon";
 import WorkflowStepTitle from "./WorkflowStepTitle";
 
-library.add(faChevronUp, faChevronDown);
+import WorkflowInvocationStepHeader from "./WorkflowInvocationStepHeader.vue";
 
 export default {
     components: {
         LoadingSpan,
-        FontAwesomeIcon,
         JobStep,
         ParameterStep,
         InvocationStepProvider,
         GenericHistoryItem,
-        ToolLinkPopover,
-        WorkflowStepIcon,
+        WorkflowInvocationStepHeader,
         WorkflowStepTitle,
         WorkflowInvocationState: () => import("components/WorkflowInvocationState/WorkflowInvocationState"),
     },
@@ -220,13 +203,6 @@ export default {
         toggleStep() {
             this.computedExpanded = !this.computedExpanded;
         },
-        toolProps(stepIndex) {
-            const workflowStep = this.workflow.steps[stepIndex];
-            return {
-                toolId: workflowStep.tool_id,
-                toolVersion: workflowStep.tool_version,
-            };
-        },
         titleProps(stepIndex) {
             const invocationStep = this.invocation.steps[stepIndex];
             const workflowStep = this.workflow.steps[stepIndex];
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue
new file mode 100644
index 000000000000..fb679602cce9
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import type { InvocationStep } from "@/api/invocations";
+import { type GraphStep, statePlaceholders } from "@/composables/useInvocationGraph";
+import type { Step } from "@/stores/workflowStepStore";
+
+import ToolLinkPopover from "../Tool/ToolLinkPopover.vue";
+import WorkflowStepIcon from "./WorkflowStepIcon.vue";
+import WorkflowStepTitle from "./WorkflowStepTitle.vue";
+
+library.add(faChevronDown, faChevronUp);
+
+interface Props {
+    workflowStep: Step;
+    graphStep?: GraphStep;
+    invocationStep?: InvocationStep;
+    canExpand?: boolean;
+    expanded?: boolean;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <div class="d-flex justify-content-between">
+        <div>
+            <span :id="`step-icon-${props.workflowStep.id}`">
+                <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStep.type" />
+            </span>
+            <ToolLinkPopover
+                :target="`step-icon-${props.workflowStep.id}`"
+                :tool-id="props.workflowStep.tool_id"
+                :tool-version="props.workflowStep.tool_version" />
+            <span class="portlet-title-text">
+                <u class="step-title">
+                    <WorkflowStepTitle
+                        :step-index="props.workflowStep.id"
+                        :step-label="props.invocationStep?.workflow_step_label"
+                        :step-type="props.workflowStep.type"
+                        :step-tool-id="props.workflowStep.tool_id"
+                        :step-subworkflow-id="props.workflowStep.workflow_id" />
+                </u>
+            </span>
+        </div>
+        <span v-if="props.graphStep?.headerIcon">
+            <i v-if="props.graphStep.state" class="mr-1">
+                {{ statePlaceholders[props.graphStep.state] || props.graphStep.state }}
+            </i>
+            <FontAwesomeIcon class="mr-1" :icon="props.graphStep.headerIcon" :spin="props.graphStep.headerIconSpin" />
+            <FontAwesomeIcon v-if="props.canExpand" :icon="props.expanded ? faChevronUp : faChevronDown" />
+        </span>
+    </div>
+</template>
diff --git a/client/src/composables/useInvocationGraph.ts b/client/src/composables/useInvocationGraph.ts
index 59a07fc0e7dd..a7400edabf51 100644
--- a/client/src/composables/useInvocationGraph.ts
+++ b/client/src/composables/useInvocationGraph.ts
@@ -8,12 +8,14 @@ import {
     faSpinner,
     faTrash,
 } from "@fortawesome/free-solid-svg-icons";
+import { storeToRefs } from "pinia";
 import Vue, { computed, type Ref, ref } from "vue";
 
 import { stepJobsSummaryFetcher, type StepJobSummary, type WorkflowInvocationElementView } from "@/api/invocations";
 import { isWorkflowInput } from "@/components/Workflow/constants";
 import { fromSimple } from "@/components/Workflow/Editor/modules/model";
 import { getWorkflowFull } from "@/components/Workflow/workflows.services";
+import { useInvocationStore } from "@/stores/invocationStore";
 import { type Step } from "@/stores/workflowStepStore";
 import { type Workflow } from "@/stores/workflowStore";
 import { rethrowSimple } from "@/utils/simple-error";
@@ -56,6 +58,11 @@ export const iconClasses: Record<string, { icon: IconDefinition; spin?: boolean;
     skipped: { icon: faForward, class: "text-warning" },
 };
 
+export const statePlaceholders: Record<string, string> = {
+    ok: "successful",
+    error: "failed",
+};
+
 /** Only one job needs to be in one of these states for the graph step to be in that state */
 const SINGLE_INSTANCE_STATES = ["error", "running", "paused"];
 /** All jobs need to be in one of these states for the graph step to be in that state */
@@ -75,6 +82,9 @@ export function useInvocationGraph(
     const steps = ref<{ [index: string]: GraphStep }>({});
     const storeId = computed(() => `invocation-${invocation.value.id}`);
 
+    const invocationStore = useInvocationStore();
+    const { graphStepsByStoreId } = storeToRefs(invocationStore);
+
     /** The full invocation mapped onto the original workflow */
     const invocationGraph = ref<InvocationGraph | null>(null);
 
@@ -209,6 +219,10 @@ export function useInvocationGraph(
 
                 // update the invocation graph steps object
                 Vue.set(steps.value, i, graphStepFromWfStep);
+
+                // update the invocation store's graph steps object
+                // TODO: Find a better way of doing this, instead of setting the steps object every step
+                Vue.set(graphStepsByStoreId.value, storeId.value, steps.value);
             }
 
             invocationGraph.value!.steps = { ...steps.value };
diff --git a/client/src/stores/invocationStore.ts b/client/src/stores/invocationStore.ts
index ceac2109f459..93b7bda4bf90 100644
--- a/client/src/stores/invocationStore.ts
+++ b/client/src/stores/invocationStore.ts
@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
 import {
     fetchInvocationDetails,
@@ -9,8 +10,13 @@ import {
     type WorkflowInvocationStep,
 } from "@/api/invocations";
 import { useKeyedCache } from "@/composables/keyedCache";
+import type { GraphStep } from "@/composables/useInvocationGraph";
+
+type GraphSteps = { [index: string]: GraphStep };
 
 export const useInvocationStore = defineStore("invocationStore", () => {
+    const graphStepsByStoreId = ref<{ [index: string]: GraphSteps }>({});
+
     const { getItemById: getInvocationById, fetchItemById: fetchInvocationForId } =
         useKeyedCache<WorkflowInvocation>(fetchInvocationDetails);
 
@@ -27,5 +33,6 @@ export const useInvocationStore = defineStore("invocationStore", () => {
         fetchInvocationJobsSummaryForId,
         getInvocationStepById,
         fetchInvocationStepById,
+        graphStepsByStoreId,
     };
 });
diff --git a/client/src/stores/workflowStepStore.ts b/client/src/stores/workflowStepStore.ts
index 30a5f80cba00..da4c9173d903 100644
--- a/client/src/stores/workflowStepStore.ts
+++ b/client/src/stores/workflowStepStore.ts
@@ -100,12 +100,14 @@ export interface NewStep {
     outputs: Array<OutputTerminalSource>;
     position?: StepPosition;
     post_job_actions?: PostJobActions;
+    tool_id?: string;
     tool_state: Record<string, unknown>;
     tool_version?: string;
     tooltip?: string | null;
     type: "tool" | "data_input" | "data_collection_input" | "subworkflow" | "parameter_input" | "pause";
     uuid?: string;
     when?: string | null;
+    workflow_id?: string;
     workflow_outputs?: WorkflowOutput[];
 }
 
diff --git a/client/src/stores/workflowStore.ts b/client/src/stores/workflowStore.ts
index 686e8009c148..68bd366722d6 100644
--- a/client/src/stores/workflowStore.ts
+++ b/client/src/stores/workflowStore.ts
@@ -2,6 +2,7 @@ import axios from "axios";
 import { defineStore } from "pinia";
 import { computed, ref, set } from "vue";
 
+// import type { StoredWorkflowDetailed } from "@/api/workflows"; // TODO: use this instead of locally defined type
 import { getAppRoot } from "@/onload/loadConfig";
 import { type Steps } from "@/stores/workflowStepStore";
 
@@ -12,6 +13,7 @@ export interface Workflow {
     step_count?: number;
     latest_id?: string;
     version: number;
+    deleted: boolean;
 }
 
 export const useWorkflowStore = defineStore("workflowStore", () => {