diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index 0f0a5e4f2722..74e942f49de0 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
@@ -55,6 +55,9 @@
                                 </WorkflowStorageConfiguration>
                             </b-dropdown-form>
                         </b-dropdown>
+                        <!-- waitingForRequest:{{ waitingForRequest }}<br> -->
+                        <!-- hasValidationErrors:{{ hasValidationErrors }}<br> -->
+                        <!-- !canRunOnHistory:{{ !canRunOnHistory }}<br> -->
                         <ButtonSpinner
                             id="run-workflow"
                             :wait="waitingForRequest"
@@ -65,7 +68,47 @@
                 </div>
             </div>
         </div>
-        <WorkflowRunName v-if="isConfigLoaded" :model="this.model" :embedded="false" />
+        
+
+
+
+            <div class="ui-portlet-section w-100">
+                <div
+                    class="portlet-header cursor-pointer"
+                    role="button"
+                    :tabindex="0"
+                    @keyup.enter="expandAnnotations = !expandAnnotations"
+                    @click="expandAnnotations = !expandAnnotations">
+                    <b class="portlet-operations portlet-title-text">
+                        <span v-localize class="font-weight-bold">About This Workflow</span>
+                    </b>
+                    <span v-b-tooltip.hover.bottom title="Collapse/Expand" variant="link" size="sm" class="float-right">
+                        <FontAwesomeIcon :icon="expandAnnotations ? 'fa fa-chevron-up' : 'fa fa-chevron-up'" fixed-width />
+                    </span>
+                </div>
+                <div class="portlet-content" :style="expandAnnotations ? 'display: none;' : ''">
+                    <!-- TODO confirm timezone consistency -->
+                    <!-- <UtcDate :date="model.runData.annotation.update_time" mode="elapsed" /> -->
+                    <!-- <UtcDate :date="invocation.update_time" mode="elapsed" /> -->
+                    <WorkflowAnnotation 
+                        v-if="true" 
+                        :workflow-id="model.workflowId"
+                        :update-time="model.runData.annotation.update_time"
+                        :history-id="model.historyId"
+                        :from-panel="false" 
+                        :target-history="'current'" />
+                    {{ model.runData.annotation.annotation }}
+                    <br>
+                    <StatelessTags
+                        :value="workflowTags"
+                        :disabled="true" />
+                </div>
+            </div>
+
+
+
+        
+
         <FormDisplay
             :inputs="formInputs"
             :allow-empty-value-on-required-input="true"
@@ -77,27 +120,34 @@
 </template>
 
 <script>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import ButtonSpinner from "components/Common/ButtonSpinner";
 import FormDisplay from "components/Form/FormDisplay";
 import { allowCachedJobs } from "components/Tool/utilities";
 import { isWorkflowInput } from "components/Workflow/constants";
-import { storeToRefs } from "pinia";
+import { mapActions,storeToRefs  } from "pinia";
 import { errorMessageAsString } from "utils/simple-error";
 import Vue from "vue";
 
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
+import { useWorkflowStore } from "@/stores/workflowStore";
 
 import { invokeWorkflow } from "./services";
-import WorkflowRunName from "./WorkflowRunName";
 import WorkflowStorageConfiguration from "./WorkflowStorageConfiguration";
 
+import WorkflowAnnotation from "../../Workflow/WorkflowAnnotation.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+
+
 export default {
     components: {
         ButtonSpinner,
         FormDisplay,
         WorkflowStorageConfiguration,
-        WorkflowRunName,
+        FontAwesomeIcon,
+        WorkflowAnnotation,
+        StatelessTags,
     },
     props: {
         model: {
@@ -138,6 +188,7 @@ export default {
             preferredObjectStoreId: null,
             preferredIntermediateObjectStoreId: null,
             waitingForRequest: false,
+            expandAnnotations: true,
         };
     },
     computed: {
@@ -182,6 +233,21 @@ export default {
         canRunOnHistory() {
             return this.canMutateCurrentHistory || this.sendToNewHistory;
         },
+        // workflowVersions() {
+        //     return this.getStoredWorkflowByInstanceId(this.workflowID);
+        // },
+        workflowTags() {
+            return this.model.runData.annotation.tags.map((t) => t.user_tname);
+            //TODO remove after confirming new structure:
+            // return {
+            //     id: props.model.runData.id,
+            //     name: props.model.runData.name,
+            //     owner: props.model.runData.owner,
+            //     tags: props.model.runData.annotation.tags.map((t: { user_tname: string }) => t.user_tname),
+            //     annotations: [props.model.runData.annotation.annotation],
+            //     update_time: props.model.runData.annotation.update_time,
+            // };
+        },
     },
     methods: {
         onValidation(validation) {
@@ -255,6 +321,7 @@ export default {
                 })
                 .finally(() => (this.waitingForRequest = false));
         },
+        ...mapActions(useWorkflowStore, ["getStoredWorkflowByInstanceId", "fetchWorkflowForInstanceId"]),
     },
 };
 </script>
diff --git a/client/src/components/Workflow/Run/WorkflowRunName.vue b/client/src/components/Workflow/Run/WorkflowRunName.vue
deleted file mode 100644
index 43c20b311343..000000000000
--- a/client/src/components/Workflow/Run/WorkflowRunName.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<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 { computed, ref } from "vue";
-
-import WorkflowCard from "@/components/Workflow/List/WorkflowCard.vue";
-
-library.add(faChevronDown, faChevronUp);
-
-const props = defineProps({
-    model: {
-        type: Object,
-        required: true,
-    },
-});
-
-const expandAnnotations = ref(true);
-
-const workflow = computed(() => {
-    return {
-        id: props.model.runData.id,
-        name: props.model.runData.name,
-        owner: props.model.runData.owner,
-        tags: props.model.runData.annotation.tags.map((t: { user_tname: string }) => t.user_tname),
-        annotations: [props.model.runData.annotation.annotation],
-        update_time: props.model.runData.annotation.update_time,
-    };
-});
-</script>
-
-<template>
-    <div class="ui-portlet-section w-100">
-        <div
-            class="portlet-header cursor-pointer"
-            role="button"
-            :tabindex="0"
-            @keyup.enter="expandAnnotations = !expandAnnotations"
-            @click="expandAnnotations = !expandAnnotations">
-            <b class="portlet-operations portlet-title-text">
-                <span v-localize class="font-weight-bold">About This Workflow</span>
-            </b>
-            <span v-b-tooltip.hover.bottom title="Collapse/Expand" variant="link" size="sm" class="float-right">
-                <FontAwesomeIcon :icon="expandAnnotations ? faChevronUp : faChevronDown" fixed-width />
-            </span>
-        </div>
-        <div class="portlet-content" :style="expandAnnotations ? 'display: none;' : ''">
-            <WorkflowCard
-                :workflow="workflow"
-                :published-view="true"
-                :grid-view="true"
-                :show-actions="false"
-                :class="'grid-view'" />
-        </div>
-    </div>
-</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts
index 6964145c03b6..fc3ec8c3ef71 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.test.ts
@@ -7,7 +7,7 @@ import { getLocalVue } from "tests/jest/helpers";
 import sampleInvocation from "@/components/Workflow/test/json/invocation.json";
 import { useUserStore } from "@/stores/userStore";
 
-import WorkflowInvocationHeader from "./WorkflowInvocationHeader.vue";
+import WorkflowNavigationTitle from "../Workflow/WorkflowNavigationTitle.vue";
 
 // Constants
 const WORKFLOW_OWNER = "test-user";
@@ -62,14 +62,14 @@ jest.mock("@/stores/workflowStore", () => {
 const localVue = getLocalVue();
 
 /**
- * Mounts the WorkflowInvocationHeader component with props/stores adjusted given the parameters
+ * Mounts the WorkflowNavigationTitle component with props/stores adjusted given the parameters
  * @param ownsWorkflow Whether the user owns the workflow associated with the invocation
  * @param hasReturnBtn Whether the component should have a return to invocations list button
  * @param unimportableWorkflow Whether the workflow import should fail
  * @returns The wrapper object
  */
-async function mountWorkflowInvocationHeader(ownsWorkflow = true, hasReturnBtn = false, unimportableWorkflow = false) {
-    const wrapper = shallowMount(WorkflowInvocationHeader as object, {
+async function mountWorkflowNavigationTitle(ownsWorkflow = true, hasReturnBtn = false, unimportableWorkflow = false) {
+    const wrapper = shallowMount(WorkflowNavigationTitle as object, {
         propsData: {
             invocation: {
                 ...sampleInvocation,
@@ -89,10 +89,10 @@ async function mountWorkflowInvocationHeader(ownsWorkflow = true, hasReturnBtn =
     return { wrapper };
 }
 
-describe("WorkflowInvocationHeader renders", () => {
+describe("WorkflowNavigationTitle renders", () => {
     // Included both cases in one test because these are always constant
     it("(always) the workflow name in header and run button in actions", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader();
+        const { wrapper } = await mountWorkflowNavigationTitle();
 
         const heading = wrapper.find(SELECTORS.INVOKED_WORKFLOW_HEADING);
         expect(heading.text()).toBe(`Invoked Workflow: "${SAMPLE_WORKFLOW.name}"`);
@@ -103,13 +103,13 @@ describe("WorkflowInvocationHeader renders", () => {
     });
 
     it("return to invocations list button if not from panel", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader(false, true);
+        const { wrapper } = await mountWorkflowNavigationTitle(false, true);
         const returnButton = wrapper.find(SELECTORS.RETURN_TO_INVOCATIONS_LIST_BUTTON);
         expect(returnButton.text()).toBe("Invocations List");
     });
 
     it("edit button if user owns the workflow", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader();
+        const { wrapper } = await mountWorkflowNavigationTitle();
         const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
         const editButton = actionsGroup.find(SELECTORS.EDIT_WORKFLOW_BUTTON);
         expect(editButton.attributes("to")).toBe(
@@ -118,16 +118,16 @@ describe("WorkflowInvocationHeader renders", () => {
     });
 
     it("import button instead if user does not own the workflow", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader(false);
+        const { wrapper } = await mountWorkflowNavigationTitle(false);
         const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
         const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
         expect(importButton.exists()).toBe(true);
     });
 });
 
-describe("Importing a workflow in WorkflowInvocationHeader", () => {
+describe("Importing a workflow in WorkflowNavigationTitle", () => {
     it("should show a confirmation dialog when the import is successful", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader(false);
+        const { wrapper } = await mountWorkflowNavigationTitle(false);
         const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
         const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
 
@@ -141,7 +141,7 @@ describe("Importing a workflow in WorkflowInvocationHeader", () => {
     });
 
     it("should show an error dialog when the import fails", async () => {
-        const { wrapper } = await mountWorkflowInvocationHeader(false, false, true);
+        const { wrapper } = await mountWorkflowNavigationTitle(false, false, true);
         const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
         const importButton = actionsGroup.find(SELECTORS.IMPORT_WORKFLOW_BUTTON);
 
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
deleted file mode 100644
index 93b47c32b4f5..000000000000
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<script setup lang="ts">
-import { faClock } from "@fortawesome/free-regular-svg-icons";
-import { faArrowLeft, faEdit, faHdd, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
-import { RouterLink } from "vue-router";
-
-import { isRegisteredUser } from "@/api";
-import type { WorkflowInvocationElementView } from "@/api/invocations";
-import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
-import { useUserStore } from "@/stores/userStore";
-import type { Workflow } from "@/stores/workflowStore";
-import localize from "@/utils/localization";
-import { errorMessageAsString } from "@/utils/simple-error";
-
-import { copyWorkflow } from "../Workflow/workflows.services";
-
-import AsyncButton from "../Common/AsyncButton.vue";
-import Heading from "../Common/Heading.vue";
-import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
-import UtcDate from "../UtcDate.vue";
-import WorkflowInvocationsCount from "../Workflow/WorkflowInvocationsCount.vue";
-import WorkflowRunButton from "../Workflow/WorkflowRunButton.vue";
-
-interface Props {
-    invocation: WorkflowInvocationElementView;
-    fromPanel?: boolean;
-}
-
-const props = defineProps<Props>();
-
-const { workflow } = useWorkflowInstance(props.invocation.workflow_id);
-
-const { currentUser, isAnonymous } = storeToRefs(useUserStore());
-const owned = computed(() => {
-    if (isRegisteredUser(currentUser.value) && workflow.value) {
-        return currentUser.value.username === workflow.value.owner;
-    } else {
-        return false;
-    }
-});
-
-const importErrorMessage = ref<string | null>(null);
-const importedWorkflow = ref<Workflow | null>(null);
-
-async function onImport() {
-    if (!workflow.value || !workflow.value.owner) {
-        return;
-    }
-    try {
-        const wf = await copyWorkflow(workflow.value.id, workflow.value.owner);
-        importedWorkflow.value = wf as unknown as Workflow;
-    } catch (error) {
-        importErrorMessage.value = errorMessageAsString(error, "Failed to import workflow");
-    }
-}
-
-function getWorkflowName(): string {
-    return workflow.value?.name || "...";
-}
-</script>
-
-<template>
-    <div>
-        <BAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
-            {{ importErrorMessage }}
-        </BAlert>
-        <BAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
-            <span>
-                Workflow <b>{{ importedWorkflow.name }}</b> imported successfully.
-            </span>
-            <RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
-            list.
-        </BAlert>
-        <div class="d-flex flex-gapx-1">
-            <Heading h1 separator inline truncate size="xl" class="flex-grow-1">
-                Invoked Workflow: "{{ getWorkflowName() }}"
-            </Heading>
-
-            <div v-if="!props.fromPanel">
-                <BButton
-                    v-b-tooltip.hover.noninteractive
-                    :title="localize('Return to Invocations List')"
-                    class="text-nowrap"
-                    size="sm"
-                    variant="outline-primary"
-                    to="/workflows/invocations">
-                    <FontAwesomeIcon :icon="faArrowLeft" class="mr-1" />
-                    <span v-localize>Invocations List</span>
-                </BButton>
-            </div>
-        </div>
-        <div class="py-2 pl-3 d-flex justify-content-between align-items-center">
-            <div>
-                <i>
-                    <FontAwesomeIcon :icon="faClock" class="mr-1" />invoked
-                    <UtcDate :date="props.invocation.update_time" mode="elapsed" />
-                </i>
-                <span class="d-flex flex-gapx-1 align-items-center">
-                    <FontAwesomeIcon :icon="faHdd" />History:
-                    <SwitchToHistoryLink :history-id="props.invocation.history_id" />
-                </span>
-            </div>
-            <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="workflow.version !== undefined" class="mb-1">
-                        <FontAwesomeIcon :icon="faSitemap" />
-                        Workflow Version: {{ workflow.version + 1 }}
-                    </span>
-                    <WorkflowInvocationsCount class="float-right" :workflow="workflow" />
-                </div>
-                <BButtonGroup vertical>
-                    <BButton
-                        v-if="owned"
-                        v-b-tooltip.hover.noninteractive.html
-                        :title="
-                            !workflow.deleted
-                                ? `<b>Edit</b><br>${getWorkflowName()}`
-                                : 'This workflow has been deleted.'
-                        "
-                        size="sm"
-                        variant="secondary"
-                        :disabled="workflow.deleted"
-                        :to="`/workflows/edit?id=${workflow.id}&version=${workflow.version}`">
-                        <FontAwesomeIcon :icon="faEdit" />
-                        <span v-localize>Edit</span>
-                    </BButton>
-                    <AsyncButton
-                        v-else
-                        v-b-tooltip.hover.noninteractive
-                        size="sm"
-                        :disabled="isAnonymous"
-                        :title="localize('Import this workflow')"
-                        :icon="faUpload"
-                        variant="outline-primary"
-                        :action="onImport">
-                        <span v-localize>Import</span>
-                    </AsyncButton>
-                    <WorkflowRunButton
-                        :id="workflow.id || ''"
-                        :title="
-                            !workflow.deleted
-                                ? `<b>Rerun</b><br>${getWorkflowName()}`
-                                : 'This workflow has been deleted.'
-                        "
-                        :disabled="workflow.deleted"
-                        full
-                        :version="workflow.version" />
-                </BButtonGroup>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index e035bc9b7dbe..808aa454428c 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -12,8 +12,9 @@ import { cancelWorkflowScheduling } from "./services";
 import { isTerminal, jobCount, runningCount } from "./util";
 
 import InvocationReport from "../Workflow/InvocationReport.vue";
+import WorkflowAnnotation from "../Workflow/WorkflowAnnotation.vue";
+import WorkflowNavigationTitle from "../Workflow/WorkflowNavigationTitle.vue";
 import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
-import WorkflowInvocationHeader from "./WorkflowInvocationHeader.vue";
 import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue";
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -24,11 +25,13 @@ interface Props {
     isSubworkflow?: boolean;
     isFullPage?: boolean;
     fromPanel?: boolean;
+    targetHistory: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     index: undefined,
     isSubworkflow: false,
+    targetHistory: "current",
 });
 
 const emit = defineEmits<{
@@ -145,7 +148,18 @@ function cancelWorkflowSchedulingLocal() {
 
 <template>
     <div v-if="invocation" class="d-flex flex-column w-100">
-        <WorkflowInvocationHeader v-if="props.isFullPage" :invocation="invocation" :from-panel="props.fromPanel" />
+        <WorkflowNavigationTitle v-if="props.isFullPage" :invocation="invocation" :from-panel="props.fromPanel" :target-history="props.targetHistory" />
+        <!-- invocation.history_id={{ invocation.history_id }}<br> -->
+        <!-- invocationId={{ invocationId }}<br> -->
+        <!-- targetHistory={{ props.targetHistory }}<br>
+        targetHistory={{ targetHistory }}<br> -->
+        <WorkflowAnnotation
+            v-if="props.isFullPage"
+            :workflow-id="invocation.workflow_id"
+            :update-time="invocation.update_time"
+            :history-id="invocation.history_id"
+            :from-panel="props.fromPanel"
+            :target-history="props.targetHistory" />
         <BTabs
             ref="invocationTabs"
             class="mt-1 d-flex flex-column overflow-auto"