diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 7f12bc1545aa..345be2ad2178 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -19,7 +19,6 @@ import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import SettingsPanel from "@/components/Panels/SettingsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
-import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 
 const { config, isConfigLoaded } = useConfig();
 
@@ -151,7 +150,7 @@ function onToggleSidebar(toggle: string) {
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['tools', 'workflows', 'visualizations'].includes(activity.id)"
+                                v-else-if="['tools', 'visualizations'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -193,7 +192,6 @@ function onToggleSidebar(toggle: string) {
         </div>
         <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
             <ToolPanel v-if="isActiveSideBar('tools')" />
-            <WorkflowPanel v-else-if="isActiveSideBar('workflows')" />
             <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
             <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
             <SettingsPanel v-else-if="isActiveSideBar('settings')" />
diff --git a/client/src/components/Common/AsyncButton.vue b/client/src/components/Common/AsyncButton.vue
index 2d6ccd4881e7..75265c6f2dad 100644
--- a/client/src/components/Common/AsyncButton.vue
+++ b/client/src/components/Common/AsyncButton.vue
@@ -3,39 +3,36 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { ref } from "vue";
 
-const loading = ref(false);
+interface Props {
+    icon: string | object;
+    title?: string;
+    disabled?: boolean;
+    loadingTitle?: string;
+    size?: "sm" | "md" | "lg";
+    action: () => Promise<void>;
+
+    variant?:
+        | "outline-primary"
+        | "primary"
+        | "secondary"
+        | "success"
+        | "danger"
+        | "warning"
+        | "info"
+        | "light"
+        | "dark"
+        | "link";
+}
 
-const props = defineProps({
-    icon: {
-        type: String,
-        required: true,
-    },
-    title: {
-        type: String,
-        required: false,
-        default: "",
-    },
-    action: {
-        type: Function,
-        required: true,
-    },
-    size: {
-        type: String,
-        required: false,
-        default: "md",
-    },
-    variant: {
-        type: String,
-        required: false,
-        default: "link",
-    },
-    disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-    },
+const props = withDefaults(defineProps<Props>(), {
+    title: "",
+    size: "md",
+    variant: "link",
+    loadingTitle: "Loading...",
 });
 
+const loading = ref(false);
+
 async function onClick() {
     loading.value = true;
     await props.action();
@@ -51,8 +48,8 @@ async function onClick() {
         :variant="variant"
         :disabled="loading || disabled"
         @click="onClick">
-        <span v-if="loading" class="loading-icon fa fa-spinner fa-spin" title="loading"></span>
-        <FontAwesomeIcon v-else :icon="props.icon" @click="onClick" />
+        <span v-if="loading" class="loading-icon fa fa-spinner fa-spin" :title="loadingTitle" />
+        <FontAwesomeIcon v-else :icon="props.icon" fixed-width />
         <slot></slot>
     </BButton>
 </template>
diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
new file mode 100644
index 000000000000..e2e16cce18e1
--- /dev/null
+++ b/client/src/components/Common/ListHeader.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDown, faAngleUp, faBars, faGripVertical } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import { useUserStore } from "@/stores/userStore";
+
+library.add(faAngleDown, faAngleUp, faBars, faGripVertical);
+
+type ListView = "grid" | "list";
+type SortBy = "create_time" | "update_time" | "name";
+
+interface Props {
+    showViewToggle?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+    showViewToggle: false,
+});
+
+const userStore = useUserStore();
+
+const sortDesc = ref(true);
+const sortBy = ref<SortBy>("update_time");
+const listViewMode = computed<ListView>(() => (userStore.preferredListViewMode as ListView) || "grid");
+
+function onSort(newSortBy: SortBy) {
+    if (sortBy.value === newSortBy) {
+        sortDesc.value = !sortDesc.value;
+    } else {
+        sortBy.value = newSortBy;
+    }
+}
+
+function onToggleView(newView: ListView) {
+    userStore.setPreferredListViewMode(newView);
+}
+
+defineExpose({
+    sortBy,
+    sortDesc,
+    listViewMode,
+});
+</script>
+
+<template>
+    <div class="list-header">
+        <div class="list-header-filters">
+            Sort by:
+            <BButtonGroup>
+                <BButton
+                    id="sortby-name"
+                    v-b-tooltip.hover
+                    size="sm"
+                    :title="sortDesc ? 'Sort by name ascending' : 'Sort by name descending'"
+                    :pressed="sortBy === 'name'"
+                    variant="outline-primary"
+                    @click="onSort('name')">
+                    <FontAwesomeIcon v-show="sortBy === 'name'" :icon="sortDesc ? faAngleDown : faAngleUp" />
+                    Name
+                </BButton>
+
+                <BButton
+                    id="sortby-update-time"
+                    v-b-tooltip.hover
+                    size="sm"
+                    :title="sortDesc ? 'Sort by update time ascending' : 'Sort by update time descending'"
+                    :pressed="sortBy === 'update_time'"
+                    variant="outline-primary"
+                    @click="onSort('update_time')">
+                    <FontAwesomeIcon v-show="sortBy === 'update_time'" :icon="sortDesc ? faAngleDown : faAngleUp" />
+                    Update time
+                </BButton>
+            </BButtonGroup>
+
+            <slot name="extra-filter" />
+        </div>
+
+        <div v-if="showViewToggle">
+            Display:
+            <BButtonGroup>
+                <BButton
+                    id="view-grid"
+                    v-b-tooltip
+                    title="Grid view"
+                    size="sm"
+                    :pressed="listViewMode === 'grid'"
+                    variant="outline-primary"
+                    @click="onToggleView('grid')">
+                    <FontAwesomeIcon :icon="faGripVertical" />
+                </BButton>
+
+                <BButton
+                    id="view-list"
+                    v-b-tooltip
+                    title="List view"
+                    size="sm"
+                    :pressed="listViewMode === 'list'"
+                    variant="outline-primary"
+                    @click="onToggleView('list')">
+                    <FontAwesomeIcon :icon="faBars" />
+                </BButton>
+            </BButtonGroup>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .list-header-filters {
+        display: flex;
+        gap: 0.25rem;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+}
+</style>
diff --git a/client/src/components/Common/LoginRequired.vue b/client/src/components/Common/LoginRequired.vue
new file mode 100644
index 000000000000..c96c9b091491
--- /dev/null
+++ b/client/src/components/Common/LoginRequired.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { BPopover } from "bootstrap-vue";
+
+import { useUserStore } from "@/stores/userStore";
+import { withPrefix } from "@/utils/redirect";
+
+defineProps<{
+    title: string;
+    target: string;
+}>();
+
+const userStore = useUserStore();
+</script>
+
+<template>
+    <BPopover v-if="userStore.isAnonymous" :target="target" triggers="hover focus" placement="bottom">
+        <template v-slot:title> {{ title }} </template>
+        Please <a :href="withPrefix('/login')">log in or register</a> to use this feature.
+    </BPopover>
+</template>
diff --git a/client/src/components/Common/TextSummary.vue b/client/src/components/Common/TextSummary.vue
index 277a46e07007..9f0ba44c566d 100644
--- a/client/src/components/Common/TextSummary.vue
+++ b/client/src/components/Common/TextSummary.vue
@@ -2,63 +2,39 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
-const props = defineProps({
-    description: {
-        type: String,
-        required: true,
-    },
-    showDetails: {
-        type: Boolean,
-        default: false,
-    },
-    maxLength: {
-        type: Number,
-        default: 150,
-    },
-});
+library.add(faChevronUp, faChevronDown);
 
-const emit = defineEmits<{
-    (e: "update:show-details", showDetails: boolean): void;
-}>();
+interface Props {
+    maxLength?: number;
+    description: string;
+}
 
-const propShowDetails = computed({
-    get: () => {
-        return props.showDetails;
-    },
-    set: (val) => {
-        emit("update:show-details", val);
-    },
+const props = withDefaults(defineProps<Props>(), {
+    maxLength: 150,
 });
 
-library.add(faChevronUp, faChevronDown);
-const collapsedEnableIcon = "fas fa-chevron-down";
-const collapsedDisableIcon = "fas fa-chevron-up";
-
-// summarized length
-const x = Math.round(props.maxLength - props.maxLength / 2);
+const showDetails = ref(false);
 
-const summary = computed(() => props.description.length > props.maxLength);
+const textTooLong = computed(() => props.description.length > props.maxLength);
 const text = computed(() =>
-    props.description.length > props.maxLength ? props.description.slice(0, x) : props.description
+    textTooLong.value && !showDetails.value
+        ? props.description.slice(0, Math.round(props.maxLength - props.maxLength / 2)) + "..."
+        : props.description
 );
 </script>
 
 <template>
     <div>
         {{ text }}
-        <span v-if="summary">
-            <a
-                v-if="!propShowDetails"
-                class="text-summary-expand"
-                href="javascript:void(0)"
-                @click.stop="propShowDetails = true">
-                ... <FontAwesomeIcon :icon="collapsedEnableIcon" />
-            </a>
-            <a v-else href="javascript:void(0)" @click.stop="propShowDetails = false">
-                ... <FontAwesomeIcon :icon="collapsedDisableIcon" />
-            </a>
+        <span
+            v-if="textTooLong"
+            v-b-tooltip.hover
+            class="info-icon cursor-pointer"
+            :title="textTooLong ? 'Show more' : 'Show less'"
+            @click="showDetails = !showDetails">
+            <FontAwesomeIcon :icon="showDetails ? 'chevron-up' : 'chevron-down'" />
         </span>
     </div>
 </template>
diff --git a/client/src/components/Panels/WorkflowPanel.vue b/client/src/components/Panels/WorkflowPanel.vue
deleted file mode 100644
index bef5d682603d..000000000000
--- a/client/src/components/Panels/WorkflowPanel.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faGlobe, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
-
-import { helpHtml, WorkflowFilters } from "@/components/Workflow/WorkflowFilters";
-import { useUserStore } from "@/stores/userStore";
-import { withPrefix } from "@/utils/redirect";
-
-import FilterMenu from "@/components/Common/FilterMenu.vue";
-
-const router = useRouter();
-
-// @ts-ignore bad library types
-library.add(faUpload, faGlobe);
-
-const isAnonymous = computed(() => useUserStore().isAnonymous);
-
-function onSearch(filters: Record<string, string | boolean>, filterText?: string, query?: string) {
-    const path = "/workflows/list";
-    const routerParams = query ? { path, query: { query } } : { path };
-    router.push(routerParams);
-}
-
-function userTitle(title: string) {
-    if (isAnonymous.value == true) {
-        return `Log in to ${title}`;
-    } else {
-        return title;
-    }
-}
-</script>
-
-<template>
-    <div class="unified-panel" aria-labelledby="workflowbox-heading">
-        <div unselectable="on">
-            <div class="unified-panel-header-inner">
-                <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-localize class="m-1 h-sm">Workflows</h2>
-                    <b-button-group>
-                        <b-button
-                            v-b-tooltip.bottom.hover
-                            data-description="create new workflow"
-                            size="sm"
-                            variant="link"
-                            :title="userTitle('Create new workflow')"
-                            :disabled="isAnonymous"
-                            @click="$router.push('/workflows/edit')">
-                            <Icon fixed-width icon="plus" />
-                        </b-button>
-                        <b-button
-                            v-b-tooltip.bottom.hover
-                            data-description="import workflow"
-                            size="sm"
-                            variant="link"
-                            :title="userTitle('Import workflow')"
-                            :disabled="isAnonymous"
-                            @click="$router.push('/workflows/import')">
-                            <FontAwesomeIcon icon="upload" />
-                        </b-button>
-                        <b-button
-                            v-b-tooltip.bottom.hover
-                            data-description="published workflows"
-                            size="sm"
-                            variant="link"
-                            title="Published workflows"
-                            @click="$router.push('/workflows/list_published')">
-                            <FontAwesomeIcon icon="fa-globe" />
-                        </b-button>
-                    </b-button-group>
-                </nav>
-            </div>
-        </div>
-        <div class="unified-panel-controls">
-            <div v-if="isAnonymous">
-                <b-badge class="alert-info w-100">
-                    Please <a :href="withPrefix('/login')">log in or register</a> to create workflows.
-                </b-badge>
-            </div>
-            <FilterMenu
-                v-else
-                name="Workflows"
-                :filter-class="WorkflowFilters"
-                has-help
-                menu-type="standalone"
-                @on-search="onSearch">
-                <template v-slot:menu-help-text>
-                    <div v-html="helpHtml"></div>
-                </template>
-            </FilterMenu>
-        </div>
-    </div>
-</template>
diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
index 6cd518e8bb73..3a07de33a790 100644
--- a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -9,7 +9,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faChevronUp, faPlus, faTags, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { useElementBounding } from "@vueuse/core";
+import { useElementBounding, whenever } from "@vueuse/core";
 import { computed, nextTick, ref, watch } from "vue";
 // @ts-ignore missing types
 import Vue2Teleport from "vue2-teleport";
@@ -254,6 +254,11 @@ watch(
         bounds.update();
     }
 );
+
+whenever(isOpen, async () => {
+    await nextTick();
+    bounds.update();
+});
 </script>
 
 <template>
@@ -414,6 +419,8 @@ watch(
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 
+    background-color: $white;
+
     .headless-multiselect__option {
         padding: 0.4rem 0.5rem;
         display: inline-block;
diff --git a/client/src/components/Workflow/InvocationsList.test.js b/client/src/components/Workflow/InvocationsList.test.js
index 9799dbbb17c3..389035e52c31 100644
--- a/client/src/components/Workflow/InvocationsList.test.js
+++ b/client/src/components/Workflow/InvocationsList.test.js
@@ -6,20 +6,16 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import { getLocalVue } from "tests/jest/helpers";
-import VueRouter from "vue-router";
 
 import InvocationsList from "./InvocationsList";
 import mockInvocationData from "./test/json/invocation.json";
 
 const localVue = getLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
 
 const pinia = createTestingPinia();
 describe("InvocationsList.vue", () => {
     let axiosMock;
     let wrapper;
-    let $router;
 
     beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
@@ -138,6 +134,9 @@ describe("InvocationsList.vue", () => {
             axiosMock
                 .onGet("/api/invocations", { params: { limit: 50, offset: 0, include_terminal: false } })
                 .reply(200, [mockInvocationData], { total_matches: "1" });
+            const mockRouter = {
+                push: jest.fn(),
+            };
             const propsData = {
                 ownerGrid: false,
                 loading: false,
@@ -164,9 +163,10 @@ describe("InvocationsList.vue", () => {
                 },
                 localVue,
                 pinia,
-                router,
+                mocks: {
+                    $router: mockRouter,
+                },
             });
-            $router = wrapper.vm.$router;
         });
 
         it("renders one row", async () => {
@@ -202,10 +202,9 @@ describe("InvocationsList.vue", () => {
         });
 
         it("calls executeWorkflow", async () => {
-            const mockMethod = jest.fn();
-            $router.push = mockMethod;
-            await wrapper.find(".workflow-run").trigger("click");
-            expect(mockMethod).toHaveBeenCalledWith("/workflows/run?id=workflowId");
+            await wrapper.find('[data-workflow-run="workflowId"').trigger("click");
+            expect(wrapper.vm.$router.push).toHaveBeenCalledTimes(1);
+            expect(wrapper.vm.$router.push).toHaveBeenCalledWith("/workflows/run?id=workflowId");
         });
 
         it("should not render pager", async () => {
diff --git a/client/src/components/Workflow/Published/WorkflowInformation.vue b/client/src/components/Workflow/Published/WorkflowInformation.vue
index f923021b5782..7ced76b94df7 100644
--- a/client/src/components/Workflow/Published/WorkflowInformation.vue
+++ b/client/src/components/Workflow/Published/WorkflowInformation.vue
@@ -31,7 +31,7 @@ const gravatarSource = computed(
     () => `https://secure.gravatar.com/avatar/${props.workflowInfo?.email_hash}?d=identicon`
 );
 
-const publishedByUser = computed(() => `/workflows/list_published?f-username=${props.workflowInfo?.owner}`);
+const publishedByUser = computed(() => `/workflows/list_published?owner=${props.workflowInfo?.owner}`);
 </script>
 
 <template>
diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
new file mode 100644
index 000000000000..fe3fce8c7f53
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
+import {
+    faCaretDown,
+    faExternalLinkAlt,
+    faEye,
+    faFileExport,
+    faStar,
+    faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { computed, type ComputedRef } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { getGalaxyInstance } from "@/app";
+import { deleteWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+
+library.add(faCaretDown, faExternalLinkAlt, faEye, faFileExport, farStar, faStar, faTrash);
+
+interface Props {
+    workflow: any;
+    menu?: boolean;
+    published?: boolean;
+    buttonSize?: "sm" | "md" | "lg";
+}
+
+type BaseAction = {
+    condition?: boolean;
+    class?: string;
+    title: string;
+    tooltip?: string;
+    icon: any;
+    href?: string;
+    target?: "_blank";
+    size: "sm" | "md" | "lg";
+    component: "async" | "button";
+    variant: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+    onClick?: () => Promise<void> | void;
+};
+
+interface AAction extends BaseAction {
+    component: "async";
+    action: () => Promise<void>;
+}
+
+interface BAction extends BaseAction {
+    component: "button";
+    href?: string;
+    onClick?: () => Promise<void> | void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    buttonSize: "sm",
+});
+
+const emit = defineEmits<{
+    (e: "refreshList", a?: boolean): void;
+    (e: "toggleShowPreview", a?: boolean): void;
+}>();
+
+const router = useRouter();
+const userStore = useUserStore();
+const { confirm } = useConfirmDialog();
+
+const shared = computed(() => {
+    if (userStore.currentUser) {
+        return userStore.currentUser.username !== props.workflow.owner;
+    } else {
+        return false;
+    }
+});
+const sourceType = computed(() => {
+    if (props.workflow.source_metadata?.url) {
+        return "url";
+    } else if (props.workflow.source_metadata?.trs_server) {
+        return `trs_${props.workflow.source_metadata?.trs_server}`;
+    } else {
+        return "";
+    }
+});
+
+function onExport() {
+    router.push(`/workflows/export?id=${props.workflow.id}`);
+}
+
+async function onToggleBookmark(checked: boolean) {
+    await updateWorkflow(props.workflow.id, {
+        show_in_tool_panel: checked,
+    });
+    emit("refreshList", true);
+    Toast.info(`Workflow ${checked ? "added to" : "removed from"} bookmarks`);
+    if (checked) {
+        getGalaxyInstance().config.stored_workflow_menu_entries.push({
+            id: props.workflow.id,
+            name: props.workflow.name,
+        });
+    } else {
+        const indexToRemove = getGalaxyInstance().config.stored_workflow_menu_entries.findIndex(
+            (w: any) => w.id === props.workflow.id
+        );
+        getGalaxyInstance().config.stored_workflow_menu_entries.splice(indexToRemove, 1);
+    }
+}
+
+async function onDelete() {
+    const confirmed = await confirm("Are you sure you want to delete this workflow?", {
+        title: "Delete workflow",
+        okTitle: "Delete",
+        okVariant: "danger",
+    });
+
+    if (confirmed) {
+        await deleteWorkflow(props.workflow.id);
+        emit("refreshList", true);
+        Toast.info("Workflow deleted");
+    }
+}
+
+const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
+    return [
+        {
+            condition: !shared.value && !props.workflow.show_in_tool_panel,
+            class: "workflow-bookmark-button-add",
+            component: "async",
+            title: "Add bookmarks",
+            tooltip: "Add to bookmarks. This workflow will appear in the left tool panel.",
+            icon: farStar,
+            size: props.buttonSize,
+            variant: "link",
+            action: () => onToggleBookmark(true),
+        },
+        {
+            condition: !shared.value && props.workflow.show_in_tool_panel,
+            class: "workflow-bookmark-button-remove",
+            component: "async",
+            title: "Remove bookmark",
+            tooltip: "Remove bookmark",
+            icon: faStar,
+            size: props.buttonSize,
+            variant: "link",
+            action: () => onToggleBookmark(false),
+        },
+        {
+            condition: true,
+            class: "workflow-view-button",
+            component: "button",
+            title: "View workflow",
+            tooltip: "View workflow",
+            icon: faEye,
+            size: props.buttonSize,
+            variant: "link",
+            onClick: () => emit("toggleShowPreview", true),
+        },
+    ];
+});
+
+const menuActions: ComputedRef<BAction[]> = computed(() => {
+    return [
+        {
+            condition: !shared.value && !props.workflow.deleted,
+            class: "workflow-delete-button",
+            component: "button",
+            title: "Delete workflow",
+            tooltip: "Delete workflow",
+            icon: faTrash,
+            size: props.buttonSize,
+            variant: "link",
+            onClick: () => onDelete(),
+        },
+        {
+            condition: sourceType.value.includes("trs"),
+            class: "source-trs-button",
+            component: "button",
+            title: `View on ${props.workflow.source_metadata?.trs_server}`,
+            href: `https://dockstore.org/workflows${props.workflow?.source_metadata?.trs_tool_id?.slice(9)}`,
+            target: "_blank",
+            icon: faExternalLinkAlt,
+            size: props.buttonSize,
+            variant: "link",
+        },
+        {
+            condition: sourceType.value == "url",
+            class: "workflow-view-external-link-button",
+            component: "button",
+            title: "View external link",
+            href: props.workflow.source_metadata?.url,
+            target: "_blank",
+            icon: faExternalLinkAlt,
+            size: props.buttonSize,
+            variant: "link",
+        },
+        {
+            condition: !props.workflow.deleted,
+            class: "workflow-export-button",
+            component: "button",
+            title: "Export",
+            icon: faFileExport,
+            size: props.buttonSize,
+            variant: "link",
+            onClick: () => onExport(),
+        },
+    ];
+});
+</script>
+
+<template>
+    <div class="workflow-actions">
+        <div v-for="action in actions" :key="action.class">
+            <AsyncButton
+                v-if="action.condition && action.component === 'async'"
+                v-b-tooltip.hover
+                :class="action.class"
+                class="inline-icon-button mr-1"
+                :variant="action.variant"
+                :size="action.size"
+                :title="action.tooltip"
+                :icon="action.icon"
+                :action="action.action" />
+
+            <BButton
+                v-else-if="action.condition && action.component === 'button'"
+                v-b-tooltip.hover
+                :class="action.class"
+                class="inline-icon-button mr-1"
+                :variant="action.variant"
+                :size="action.size"
+                :title="action.tooltip"
+                :href="action.href"
+                @click="action.onClick">
+                <FontAwesomeIcon :icon="action.icon" fixed-width />
+            </BButton>
+        </div>
+
+        <BDropdown
+            v-b-tooltip.top
+            :data-workflow-actions-dropdown="workflow.id"
+            right
+            no-caret
+            class="workflow-actions-dropdown show-in-card"
+            toggle-class="inline-icon-button"
+            title="Workflow actions"
+            variant="link">
+            <template v-slot:button-content>
+                <FontAwesomeIcon :icon="faCaretDown" fixed-width />
+            </template>
+
+            <BDropdownItem
+                v-for="action in menuActions.filter((a) => a.condition).reverse()"
+                :key="action.class"
+                :class="action.class"
+                :href="action.href ?? undefined"
+                :title="action.title"
+                :target="action.target"
+                @click="action.onClick?.()">
+                <FontAwesomeIcon :icon="action.icon" fixed-width />
+                <span>{{ action.title }}</span>
+            </BDropdownItem>
+        </BDropdown>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.workflow-actions {
+    display: flex;
+    align-items: center;
+}
+</style>
diff --git a/client/src/components/Workflow/WorkflowActionsExtend.vue b/client/src/components/Workflow/WorkflowActionsExtend.vue
new file mode 100644
index 000000000000..d5f823dd5004
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowActionsExtend.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
+import {
+    faCaretDown,
+    faCopy,
+    faDownload,
+    faFileExport,
+    faShareAlt,
+    faStar,
+    faTrashRestore,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { copyWorkflow, undeleteWorkflow } from "@/components/Workflow/workflows.services";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+import { withPrefix } from "@/utils/redirect";
+
+library.add(faCaretDown, faCopy, faDownload, faFileExport, faShareAlt, farStar, faStar, faTrashRestore);
+
+interface Props {
+    workflow: any;
+    menu?: boolean;
+    published?: boolean;
+    buttonSize?: "sm" | "md" | "lg";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    buttonSize: "sm",
+});
+
+const emit = defineEmits<{
+    (e: "refreshList", a?: boolean): void;
+}>();
+
+const router = useRouter();
+const userStore = useUserStore();
+const { confirm } = useConfirmDialog();
+const { isAnonymous } = storeToRefs(useUserStore());
+
+const downloadUrl = computed(() => {
+    return withPrefix(`/api/workflows/${props.workflow.id}/download?format=json-download`);
+});
+const shared = computed(() => {
+    if (userStore.currentUser) {
+        return userStore.currentUser.username !== props.workflow.owner;
+    } else {
+        return false;
+    }
+});
+
+function onShare() {
+    router.push(`/workflows/sharing?id=${props.workflow.id}`);
+}
+
+async function onCopy() {
+    const confirmed = await confirm("Are you sure you want to make a copy of this workflow?", "Copy workflow");
+
+    if (confirmed) {
+        await copyWorkflow(props.workflow.id, props.workflow.owner);
+        emit("refreshList", true);
+        Toast.success("Workflow copied");
+    }
+}
+
+async function onRestore() {
+    const confirmed = await confirm("Are you sure you want to restore this workflow?", "Restore workflow");
+
+    if (confirmed) {
+        await undeleteWorkflow(props.workflow.id);
+        emit("refreshList", true);
+        Toast.info("Workflow restored");
+    }
+}
+</script>
+
+<template>
+    <div class="workflow-actions-extend flex-gapx-1">
+        <BButtonGroup>
+            <BButton
+                v-if="!isAnonymous && !shared && !workflow.deleted"
+                id="workflow-copy-button"
+                v-b-tooltip.hover.noninteractive
+                :size="buttonSize"
+                title="Copy"
+                variant="outline-primary"
+                @click="onCopy">
+                <FontAwesomeIcon :icon="faCopy" fixed-width />
+                <span class="compact-view">Copy</span>
+            </BButton>
+
+            <BButton
+                v-if="!workflow.deleted"
+                id="workflow-download-button"
+                v-b-tooltip.hover.noninteractive
+                :size="buttonSize"
+                title="Download workflow in .ga format"
+                variant="outline-primary"
+                :href="downloadUrl">
+                <FontAwesomeIcon :icon="faDownload" fixed-width />
+                <span class="compact-view">Download</span>
+            </BButton>
+
+            <BButton
+                v-if="!shared && !workflow.deleted"
+                id="workflow-share-button"
+                v-b-tooltip.hover.noninteractive
+                :size="buttonSize"
+                title="Share"
+                variant="outline-primary"
+                @click="onShare">
+                <FontAwesomeIcon :icon="faShareAlt" fixed-width />
+                <span class="compact-view">Share</span>
+            </BButton>
+
+            <BButton
+                v-if="workflow.deleted"
+                id="restore-button"
+                v-b-tooltip.hover.noninteractive
+                :size="buttonSize"
+                title="Restore"
+                variant="outline-primary"
+                @click="onRestore">
+                <FontAwesomeIcon :icon="faTrashRestore" fixed-width />
+                <span class="compact-view">Restore</span>
+            </BButton>
+        </BButtonGroup>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "breakpoints.scss";
+
+.workflow-actions-extend {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+
+    @container (max-width: #{$breakpoint-md}) {
+        .compact-view {
+            display: none;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/WorkflowBookmark.vue b/client/src/components/Workflow/WorkflowBookmark.vue
deleted file mode 100644
index 0a58b0028f40..000000000000
--- a/client/src/components/Workflow/WorkflowBookmark.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <BLink v-b-tooltip.hover :title="title" class="workflow-bookmark-link" @click="onClick">
-        <FontAwesomeIcon v-if="checked" :icon="['fas', 'star']" />
-        <FontAwesomeIcon v-else :icon="['far', 'star']" />
-    </BLink>
-</template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
-import { faStar } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BLink, VBTooltip } from "bootstrap-vue";
-
-library.add(faStar, farStar);
-
-const CHECKED_DESCRIPTION = "Remove bookmark";
-const UNCHECKED_DESCRIPTION = "Add a bookmark. This workflow will appear in the left tool panel.";
-
-export default {
-    components: {
-        BLink,
-        FontAwesomeIcon,
-    },
-    directives: {
-        VBTooltip,
-    },
-    props: {
-        checked: {
-            type: Boolean,
-            required: true,
-        },
-    },
-    computed: {
-        title() {
-            return this.checked ? CHECKED_DESCRIPTION : UNCHECKED_DESCRIPTION;
-        },
-    },
-    methods: {
-        onClick() {
-            this.$emit("bookmark", !this.checked);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
new file mode 100644
index 000000000000..a8d73b0e97bd
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faEdit, faEye, faPen, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { copyWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+import TextSummary from "@/components/Common/TextSummary.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
+import WorkflowActionsExtend from "@/components/Workflow/WorkflowActionsExtend.vue";
+import WorkflowIndicators from "@/components/Workflow/WorkflowIndicators.vue";
+import WorkflowInvocationsCount from "@/components/Workflow/WorkflowInvocationsCount.vue";
+import WorkflowQuickView from "@/components/Workflow/WorkflowQuickView.vue";
+import WorkflowRename from "@/components/Workflow/WorkflowRename.vue";
+import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
+
+library.add(faEdit, faEye, faPen, faUpload);
+
+interface Props {
+    workflow: any;
+    gridView?: boolean;
+    publishedView?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    gridView: false,
+    publishedView: false,
+});
+
+const emit = defineEmits<{
+    (e: "refreshList", a?: boolean, b?: boolean): void;
+    (e: "tagClick", a: string): void;
+}>();
+
+const router = useRouter();
+const userStore = useUserStore();
+
+const showRename = ref(false);
+const showPreview = ref(false);
+
+const workflow = computed(() => props.workflow);
+const shared = computed(() => {
+    if (userStore.currentUser) {
+        return userStore.currentUser.username !== workflow.value.owner;
+    } else {
+        return false;
+    }
+});
+const description = computed(() => {
+    if (workflow.value.annotations && workflow.value.annotations.length > 0) {
+        return workflow.value.annotations[0].trim();
+    } else {
+        return null;
+    }
+});
+
+function onEdit() {
+    router.push(`/workflows/edit?id=${workflow.value.id}`);
+}
+
+async function onImport() {
+    await copyWorkflow(workflow.value.id, workflow.value.owner);
+    Toast.success("Workflow imported successfully");
+}
+
+function onRenameClose(e: any) {
+    showRename.value = false;
+    emit("refreshList", true);
+}
+
+function toggleShowPreview(val: boolean = false) {
+    showPreview.value = val;
+}
+
+async function onTagsUpdate(tags: string[]) {
+    workflow.value.tags = tags;
+    await updateWorkflow(workflow.value.id, { tags });
+    emit("refreshList", true, true);
+}
+
+async function onTagClick(tag: string) {
+    emit("tagClick", tag);
+}
+</script>
+
+<template>
+    <div class="workflow-card" :data-workflow-id="workflow.id">
+        <div
+            class="workflow-card-container"
+            :class="{
+                'workflow-shared': workflow.published,
+            }">
+            <div>
+                <div class="d-flex justify-content-between align-items-center mb-1">
+                    <div>
+                        <WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
+
+                        <span class="workflow-name font-weight-bold">
+                            {{ workflow.name }}
+                            <BButton
+                                v-if="!shared && !workflow.deleted"
+                                v-b-tooltip.hover
+                                :data-workflow-rename="workflow.id"
+                                class="inline-icon-button workflow-rename"
+                                variant="link"
+                                size="sm"
+                                title="Rename"
+                                @click="showRename = !showRename">
+                                <FontAwesomeIcon :icon="faPen" fixed-width />
+                            </BButton>
+                        </span>
+                    </div>
+
+                    <div class="workflow-count-actions">
+                        <WorkflowInvocationsCount class="mx-1" :workflow="workflow" />
+
+                        <WorkflowActions
+                            :workflow="workflow"
+                            :published="publishedView"
+                            @refreshList="emit('refreshList', true)"
+                            @toggleShowPreview="toggleShowPreview" />
+                    </div>
+                </div>
+
+                <TextSummary
+                    v-if="description"
+                    class="my-1"
+                    :description="description"
+                    :max-length="gridView ? 100 : 250" />
+            </div>
+
+            <div class="workflow-card-footer">
+                <div class="workflow-card-tags">
+                    <StatelessTags
+                        clickable
+                        :value="workflow.tags"
+                        :disabled="workflow.deleted"
+                        :max-visible-tags="gridView ? 2 : 8"
+                        @input="onTagsUpdate($event)"
+                        @tag-click="onTagClick($event)" />
+                </div>
+
+                <div class="workflow-card-actions">
+                    <WorkflowActionsExtend
+                        :workflow="workflow"
+                        :published="publishedView"
+                        @refreshList="emit('refreshList', true)" />
+
+                    <div class="workflow-edit-run-buttons">
+                        <BButton
+                            v-if="!shared"
+                            v-b-tooltip.hover
+                            :disabled="workflow.deleted"
+                            size="sm"
+                            class="workflow-edit-button"
+                            :title="
+                                workflow.deleted
+                                    ? 'You cannot edit a deleted workflow. Restore it first.'
+                                    : 'Edit workflow'
+                            "
+                            variant="outline-primary"
+                            @click="onEdit">
+                            <FontAwesomeIcon :icon="faEdit" fixed-width />
+                            Edit
+                        </BButton>
+
+                        <AsyncButton
+                            v-else
+                            v-b-tooltip.hover
+                            size="sm"
+                            title="Import this workflow to edit"
+                            :icon="faUpload"
+                            variant="outline-primary"
+                            :action="onImport">
+                            Import
+                        </AsyncButton>
+
+                        <WorkflowRunButton :id="workflow.id" />
+                    </div>
+                </div>
+            </div>
+
+            <WorkflowRename
+                v-if="!shared && !workflow.deleted"
+                :id="workflow.id"
+                :show="showRename"
+                :name="workflow.name"
+                @close="onRenameClose" />
+
+            <BModal
+                v-model="showPreview"
+                ok-only
+                size="xl"
+                hide-header
+                modal-class="workflow-preview-modal"
+                dialog-class="workflow-preview-modal w-auto"
+                centered>
+                <WorkflowQuickView :id="workflow.id" :show="showPreview" @ok="toggleShowPreview(false)" />
+            </BModal>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+@import "breakpoints.scss";
+
+.workflow-card {
+    container: workflow-card / inline-size;
+    padding: 0 0.25rem 0.5rem 0.25rem;
+
+    .workflow-rename {
+        opacity: 0;
+    }
+
+    &:hover,
+    &:focus-within {
+        .workflow-rename {
+            opacity: 1;
+        }
+    }
+
+    .workflow-card-container {
+        height: 100%;
+        display: flex;
+        gap: 0.5rem;
+        flex-direction: column;
+        justify-content: space-between;
+        border: 1px solid $brand-secondary;
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+
+        .workflow-count-actions {
+            display: flex;
+            align-self: baseline;
+            align-items: center;
+            flex-direction: row;
+        }
+
+        .text-summary {
+            height: inherit;
+        }
+
+        .workflow-name {
+            font-size: 1rem;
+            font-weight: bold;
+        }
+
+        .workflow-preview-modal {
+            min-width: max-content;
+        }
+
+        .workflow-card-actions {
+            display: flex;
+            gap: 0.25rem;
+            margin-top: 0.25rem;
+            align-items: center;
+            justify-content: end;
+        }
+
+        .workflow-card-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: end;
+        }
+
+        .workflow-card-tags {
+            max-width: 60%;
+        }
+
+        @container workflow-card (max-width: #{$breakpoint-sm}) {
+            .workflow-card-footer {
+                display: inline-block;
+            }
+
+            .workflow-card-tags {
+                max-width: 100%;
+            }
+        }
+
+        @container workflow-card (max-width: #{$breakpoint-sm}) {
+            .workflow-card-actions {
+                justify-content: space-between;
+            }
+        }
+
+        @container workflow-card (min-width: #{$breakpoint-sm}, max-width: #{$breakpoint-md}) {
+            .workflow-card-actions {
+                justify-content: end;
+            }
+        }
+    }
+
+    .workflow-shared {
+        border-left: 0.25rem solid $brand-primary;
+    }
+
+    @container workflow-card (max-width: #{$breakpoint-md}) {
+        .hide-in-card {
+            display: none !important;
+        }
+
+        .show-in-card {
+            display: inline-block !important;
+        }
+
+        .workflow-count-actions {
+            align-items: baseline;
+            justify-content: end;
+        }
+    }
+
+    @container workflow-card (min-width: #{$breakpoint-md}) {
+        .workflow-count-actions {
+            align-items: end;
+            flex-direction: column-reverse;
+        }
+
+        .hide-in-card {
+            display: inline-block !important;
+        }
+
+        .show-in-card {
+            display: none !important;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/WorkflowCreate.vue b/client/src/components/Workflow/WorkflowCreate.vue
new file mode 100644
index 000000000000..f207e9617a49
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowCreate.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { type AxiosError } from "axios";
+import { BFormInput } from "bootstrap-vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { createWorkflow } from "@/components/Workflow/workflows.services";
+import { Toast } from "@/composables/toast";
+
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+import Heading from "@/components/Common/Heading.vue";
+
+library.add(faCheck);
+
+interface Pros {
+    showHeading: boolean;
+}
+
+defineProps<Pros>();
+
+const router = useRouter();
+
+const workflowAnnotation = ref("");
+const workflowName = ref("Unnamed workflow");
+const workflowNameInput = ref<HTMLInputElement | null>(null);
+
+async function onCreate() {
+    try {
+        const data = await createWorkflow(workflowName.value, workflowAnnotation.value);
+
+        Toast.success(data.message);
+
+        router.push(`/workflows/edit?id=${data.id}`);
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        Toast.error(error.response?.data.err_msg ?? "Failed to create workflow");
+    }
+}
+</script>
+
+<template>
+    <div>
+        <Heading v-if="!showHeading" h1 separator size="xl">Create workflow</Heading>
+
+        <label for="workflow-name-input" class="font-weight-bold"> Workflow name </label>
+        <BFormInput
+            id="workflow-name-input"
+            ref="workflowNameInput"
+            v-model="workflowName"
+            class="mb-2"
+            type="text"
+            placeholder="Enter workflow name"
+            description="Workflow name"
+            @keyup.enter="() => onCreate()" />
+
+        <label for="workflow-annotation-input" class="font-weight-bold"> Workflow annotation </label>
+        <BFormInput
+            id="workflow-annotation-input"
+            v-model="workflowAnnotation"
+            class="mb-2"
+            type="text"
+            placeholder="Enter workflow annotation">
+        </BFormInput>
+
+        <div class="float-right">
+            <AsyncButton
+                variant="primary"
+                :icon="faCheck"
+                title="Create workflow"
+                :disabled="workflowName.length === 0"
+                :action="() => onCreate()">
+                Create
+            </AsyncButton>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Workflow/WorkflowDropdown.test.js b/client/src/components/Workflow/WorkflowDropdown.test.js
deleted file mode 100644
index 374127218fc2..000000000000
--- a/client/src/components/Workflow/WorkflowDropdown.test.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import { mount } from "@vue/test-utils";
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import flushPromises from "flush-promises";
-import { createPinia, PiniaVuePlugin } from "pinia";
-import { useUserStore } from "stores/userStore";
-import { getLocalVue } from "tests/jest/helpers";
-import { ROOT_COMPONENT } from "utils/navigation";
-
-import WorkflowDropdown from "./WorkflowDropdown";
-
-const localVue = getLocalVue(true);
-localVue.use(PiniaVuePlugin);
-
-const TEST_WORKFLOW_NAME = "my workflow";
-const TEST_WORKFLOW_DESCRIPTION = "my cool workflow description";
-const TEST_WORKFLOW_ID = "workflowid123";
-const TEST_WORKFLOW_OWNER = "test";
-
-const descriptionlessWorkflow = {
-    name: TEST_WORKFLOW_NAME,
-    id: TEST_WORKFLOW_ID,
-    owner: TEST_WORKFLOW_OWNER,
-};
-const basicWorkflow = { description: TEST_WORKFLOW_DESCRIPTION, ...descriptionlessWorkflow };
-const sharedWorkflow = { shared: true, ...basicWorkflow };
-
-describe("WorkflowDropdown.vue", () => {
-    let wrapper;
-    let propsData;
-
-    function initWrapperForWorkflow(workflow, isAnonymous = true) {
-        propsData = {
-            root: "/root/",
-            workflow: workflow,
-        };
-        wrapper = mount(WorkflowDropdown, {
-            propsData,
-            localVue,
-            pinia: createPinia(),
-        });
-        if (!isAnonymous) {
-            const userStore = useUserStore();
-            userStore.currentUser = { email: "my@email", id: 1 };
-        }
-    }
-
-    function workflowOptions() {
-        return wrapper.findAll(".dropdown-menu .dropdown-item");
-    }
-
-    describe("for workflows owned by user", () => {
-        beforeEach(async () => {
-            initWrapperForWorkflow(basicWorkflow);
-        });
-
-        it("should not display source metadata if not present", async () => {
-            expect(wrapper.find(ROOT_COMPONENT.workflows.trs_icon.selector).exists()).toBeFalsy();
-            expect(wrapper.find(ROOT_COMPONENT.workflows.external_link.selector).exists()).toBeFalsy();
-        });
-
-        it("should display name and description", async () => {
-            expect(wrapper.find(".workflow-dropdown-name").text()).toBe(TEST_WORKFLOW_NAME);
-            expect(wrapper.find(".workflow-dropdown-description").text()).toBe(TEST_WORKFLOW_DESCRIPTION);
-        });
-
-        it("should provide all owner workflow options", () => {
-            expect(workflowOptions().length).toBeGreaterThan(2);
-        });
-    });
-
-    describe("workflows without annotations", () => {
-        beforeEach(async () => {
-            initWrapperForWorkflow(descriptionlessWorkflow);
-        });
-
-        it("should display name but not description", async () => {
-            expect(wrapper.find(".workflow-dropdown-name").text()).toBe(TEST_WORKFLOW_NAME);
-            expect(wrapper.find(".workflow-dropdown-description").exists()).toBeFalsy();
-        });
-    });
-
-    describe("for shared workflows", () => {
-        beforeEach(async () => {
-            initWrapperForWorkflow(sharedWorkflow);
-        });
-
-        it("should provide a specific options to anon users", () => {
-            expect(workflowOptions().length).toBe(2);
-            expect(workflowOptions().at(0).text()).toBeLocalizationOf("Download");
-            expect(workflowOptions().at(1).text()).toBeLocalizationOf("View");
-        });
-    });
-
-    describe("for shared workflows", () => {
-        beforeEach(async () => {
-            initWrapperForWorkflow(sharedWorkflow, false);
-        });
-
-        it("should provide a specific options to logged in users", () => {
-            expect(workflowOptions().length).toBe(3);
-            expect(workflowOptions().at(0).text()).toBeLocalizationOf("Copy");
-            expect(workflowOptions().at(1).text()).toBeLocalizationOf("Download");
-            expect(workflowOptions().at(2).text()).toBeLocalizationOf("View");
-        });
-    });
-
-    describe("workflow clicking workflow deletion", () => {
-        let axiosMock;
-
-        async function mountAndDelete() {
-            initWrapperForWorkflow(basicWorkflow);
-            await wrapper.vm.onDelete();
-            await flushPromises();
-        }
-
-        beforeEach(async () => {
-            axiosMock = new MockAdapter(axios);
-            axiosMock.onDelete("/api/workflows/workflowid123").reply(202, "deleted...");
-            axiosMock.onPost("/api/workflows/workflowid123/undelete").reply(204, "restored...");
-        });
-
-        afterEach(() => {
-            axiosMock.restore();
-        });
-
-        it("should fire deletion API request upon remove action", async () => {
-            await mountAndDelete();
-            const emitted = wrapper.emitted();
-            expect(emitted["onRemove"][0][0]).toEqual(TEST_WORKFLOW_ID);
-            expect(emitted["onSuccess"][0][0]).toEqual("deleted...");
-        });
-
-        it("should restore previously deleted workflows", async () => {
-            await mountAndDelete();
-            const emitted = wrapper.emitted();
-            expect(emitted["onRemove"][0][0]).toEqual(TEST_WORKFLOW_ID);
-            expect(emitted["onSuccess"][0][0]).toEqual("deleted...");
-            await wrapper.vm.onRestore();
-            await flushPromises();
-            expect(emitted["onRestore"][0][0]).toEqual(TEST_WORKFLOW_ID);
-            expect(emitted["onSuccess"][1][0]).toEqual("restored...");
-        });
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowDropdown.vue b/client/src/components/Workflow/WorkflowDropdown.vue
deleted file mode 100644
index d308a1aea524..000000000000
--- a/client/src/components/Workflow/WorkflowDropdown.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-    <div>
-        <b-link
-            aria-expanded="false"
-            class="workflow-dropdown font-weight-bold"
-            data-toggle="dropdown"
-            :data-workflow-dropdown="workflow.id"
-            draggable
-            @dragstart="onDragStart"
-            @dragend="onDragEnd">
-            <Icon icon="caret-down" class="fa-lg" />
-            <span class="workflow-dropdown-name">{{ workflow.name }}</span>
-            <span
-                v-if="sourceType.includes('trs')"
-                v-b-tooltip.hover
-                aria-haspopup="true"
-                :title="getWorkflowTooltip(sourceType, workflow)">
-                <Icon fixed-width icon="check" class="mr-1 workflow-trs-icon" />
-            </span>
-            <span
-                v-if="sourceType == 'url'"
-                v-b-tooltip.hover
-                aria-haspopup="true"
-                :title="getWorkflowTooltip(sourceType, workflow)">
-                <Icon fixed-width icon="link" class="mr-1 workflow-external-link" />
-            </span>
-        </b-link>
-        <p v-if="workflow.description" class="workflow-dropdown-description">
-            <TextSummary :description="workflow.description" :show-details.sync="showDetails" />
-        </p>
-        <div class="dropdown-menu" aria-labelledby="workflow-dropdown">
-            <a
-                v-if="!readOnly && !isDeleted"
-                class="dropdown-item"
-                href="#"
-                @keypress="$router.push(urlEdit)"
-                @click.prevent="$router.push(urlEdit)">
-                <Icon fixed-width icon="edit" class="mr-1" />
-                <span v-localize>Edit</span>
-            </a>
-            <a v-if="!isDeleted && !isAnonymous" class="dropdown-item" href="#" @click.prevent="onCopy">
-                <Icon fixed-width icon="copy" class="mr-1" />
-                <span v-localize>Copy</span>
-            </a>
-            <a
-                v-if="!readOnly && !isDeleted"
-                class="dropdown-item"
-                href="#"
-                @keypress="$router.push(urlInvocations)"
-                @click.prevent="$router.push(urlInvocations)">
-                <Icon fixed-width icon="sitemap" class="fa-rotate-270 mr-1" />
-                <span v-localize>Invocations</span>
-            </a>
-            <a v-if="!isDeleted" class="dropdown-item" :href="urlDownload">
-                <Icon fixed-width icon="download" class="mr-1" />
-                <span v-localize>Download</span>
-            </a>
-            <a v-if="!readOnly && !isDeleted" class="dropdown-item" href="#" @click.prevent="onRename">
-                <Icon fixed-width icon="signature" class="mr-1" />
-                <span v-localize>Rename</span>
-            </a>
-            <a
-                v-if="!readOnly && !isDeleted"
-                class="dropdown-item"
-                href="#"
-                @keypress="$router.push(urlShare)"
-                @click.prevent="$router.push(urlShare)">
-                <Icon fixed-width icon="share-alt" class="mr-1" />
-                <span v-localize>Share</span>
-            </a>
-            <a v-if="!readOnly && !isDeleted" class="dropdown-item" :href="urlExport">
-                <Icon fixed-width icon="file-export" class="mr-1" />
-                <span v-localize>Export</span>
-            </a>
-            <a v-if="!isDeleted" class="dropdown-item" :href="urlView">
-                <Icon fixed-width icon="eye" class="mr-1" />
-                <span v-localize>View</span>
-            </a>
-            <a v-if="sourceLabel && !isDeleted" class="dropdown-item" target="_blank" :href="sourceUrl">
-                <Icon fixed-width icon="external-link-alt" class="mr-1" />
-                <span v-localize>{{ sourceLabel }}</span>
-            </a>
-            <a v-if="!readOnly && !isDeleted" class="dropdown-item" href="#" @click.prevent="onDelete">
-                <Icon fixed-width icon="trash" class="mr-1" />
-                <span v-localize>Delete</span>
-            </a>
-            <a v-if="isDeleted" class="dropdown-item" href="#" @click.prevent="onRestore">
-                <Icon fixed-width icon="trash-restore" class="mr-1" />
-                <span v-localize>Restore</span>
-            </a>
-        </div>
-    </div>
-</template>
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faEdit, faSignature, faTimes } from "@fortawesome/free-solid-svg-icons";
-import TextSummary from "components/Common/TextSummary";
-import { mapState } from "pinia";
-import { withPrefix } from "utils/redirect";
-
-import { useUserStore } from "@/stores/userStore";
-import { clearDrag, setDrag } from "@/utils/setDrag.js";
-
-import { Services } from "./services";
-
-library.add(faCaretDown);
-library.add(faSignature);
-library.add(faTimes);
-library.add(faEdit);
-
-export default {
-    components: {
-        TextSummary,
-    },
-    props: {
-        workflow: { type: Object, required: true },
-        detailsShowing: { type: Boolean, default: false },
-    },
-    computed: {
-        ...mapState(useUserStore, ["isAnonymous"]),
-        showDetails: {
-            get() {
-                return this.detailsShowing;
-            },
-            set() {
-                this.$emit("toggleDetails");
-            },
-        },
-        urlEdit() {
-            return `/workflows/edit?id=${this.workflow.id}`;
-        },
-        urlDownload() {
-            return withPrefix(`/api/workflows/${this.workflow.id}/download?format=json-download`);
-        },
-        urlShare() {
-            return `/workflows/sharing?id=${this.workflow.id}`;
-        },
-        urlExport() {
-            return withPrefix(`/workflows/export?id=${this.workflow.id}`);
-        },
-        urlView() {
-            return withPrefix(`/published/workflow?id=${this.workflow.id}`);
-        },
-        urlInvocations() {
-            return `/workflows/${this.workflow.id}/invocations`;
-        },
-        urlViewShared() {
-            return withPrefix(
-                `/workflow/display_by_username_and_slug?username=${this.workflow.owner}&slug=${encodeURIComponent(
-                    this.workflow.slug
-                )}`
-            );
-        },
-        readOnly() {
-            return !!this.workflow.shared;
-        },
-        isDeleted() {
-            return this.workflow.deleted;
-        },
-        sourceUrl() {
-            if (this.workflow.source_metadata?.url) {
-                return this.workflow.source_metadata.url;
-            } else if (this.workflow.source_metadata?.trs_server) {
-                if (this.workflow.source_metadata?.trs_server == "dockstore") {
-                    return `https://dockstore.org/workflows${this.workflow.source_metadata.trs_tool_id.slice(9)}`;
-                } else {
-                    // TODO: add WorkflowHub
-                    return null;
-                }
-            } else {
-                return null;
-            }
-        },
-        sourceLabel() {
-            if (this.workflow.source_metadata?.url) {
-                return "View external link";
-            } else if (this.workflow.source_metadata?.trs_server == "dockstore") {
-                return "View on Dockstore";
-            } else {
-                // TODO: add WorkflowHub
-                return null;
-            }
-        },
-        sourceType() {
-            if (this.workflow.source_metadata?.url) {
-                return "url";
-            } else if (this.workflow.source_metadata?.trs_server) {
-                return `trs_${this.workflow.source_metadata?.trs_server}`;
-            } else {
-                return "";
-            }
-        },
-    },
-    created() {
-        this.services = new Services();
-    },
-    methods: {
-        onCopy: function () {
-            this.services
-                .copyWorkflow(this.workflow)
-                .then((newWorkflow) => {
-                    this.$emit("onAdd", newWorkflow);
-                    this.$emit(
-                        "onSuccess",
-                        `Successfully copied workflow '${this.workflow.name}' to '${newWorkflow.name}'.`
-                    );
-                })
-                .catch((error) => {
-                    this.$emit("onError", error);
-                });
-        },
-        onDelete: function () {
-            const id = this.workflow.id;
-            this.services
-                .deleteWorkflow(id)
-                .then((message) => {
-                    this.$emit("onRemove", id);
-                    this.$emit("onSuccess", message);
-                })
-                .catch((error) => {
-                    this.$emit("onError", error);
-                });
-        },
-        onDragStart: function (evt) {
-            setDrag(evt, this.workflow);
-        },
-        onDragEnd: function () {
-            clearDrag();
-        },
-        onRename: function () {
-            const id = this.workflow.id;
-            const name = this.workflow.name;
-            const newName = window.prompt(`Enter a new name for workflow '${name}'`, name);
-            if (newName) {
-                const data = { name: newName };
-                this.services
-                    .updateWorkflow(id, data)
-                    .then(() => {
-                        this.$emit("onUpdate", id, data);
-                        this.$emit("onSuccess", `Successfully changed name of workflow '${name}' to '${newName}'.`);
-                    })
-                    .catch((error) => {
-                        this.$emit("onError", error);
-                    });
-            }
-        },
-        onRestore: function () {
-            const id = this.workflow.id;
-            this.services
-                .undeleteWorkflow(id)
-                .then((message) => {
-                    this.$emit("onRestore", id);
-                    this.$emit("onSuccess", message);
-                })
-                .catch((error) => {
-                    this.$emit("onError", error);
-                });
-        },
-        getWorkflowTooltip: function (sourceType, workflow) {
-            let tooltip = "";
-            if (sourceType.includes("trs")) {
-                tooltip = `Imported from TRS ID (version: ${workflow.source_metadata.trs_version_id})`;
-            } else if (sourceType == "url") {
-                tooltip = `Imported from ${workflow.source_metadata.url}`;
-            }
-            return tooltip;
-        },
-    },
-};
-</script>
-
-<style scoped>
-.workflow-trs-icon {
-    color: green;
-}
-</style>
diff --git a/client/src/components/Workflow/WorkflowIndexActions.test.js b/client/src/components/Workflow/WorkflowIndexActions.test.js
deleted file mode 100644
index 9704a168c3db..000000000000
--- a/client/src/components/Workflow/WorkflowIndexActions.test.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import "jest-location-mock";
-
-import { createTestingPinia } from "@pinia/testing";
-import { shallowMount } from "@vue/test-utils";
-import { PiniaVuePlugin } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
-import { ROOT_COMPONENT } from "utils/navigation";
-import VueRouter from "vue-router";
-
-import WorkflowIndexActions from "./WorkflowIndexActions";
-
-const localVue = getLocalVue(true);
-localVue.use(VueRouter);
-localVue.use(PiniaVuePlugin);
-
-const router = new VueRouter();
-
-function getCurrentPath($router) {
-    return $router.history.current.path;
-}
-
-describe("WorkflowIndexActions", () => {
-    let wrapper;
-    let $router;
-
-    beforeEach(async () => {
-        wrapper = shallowMount(WorkflowIndexActions, {
-            localVue,
-            router,
-            pinia: createTestingPinia(),
-        });
-        $router = wrapper.vm.$router;
-    });
-
-    describe("naviation", () => {
-        it("should create a workflow when create is clicked", async () => {
-            await wrapper.find(ROOT_COMPONENT.workflows.new_button.selector).trigger("click");
-            expect(getCurrentPath($router)).toBe("/workflows/edit");
-        });
-
-        it("should import a workflow when create is clicked", async () => {
-            await wrapper.find(ROOT_COMPONENT.workflows.import_button.selector).trigger("click");
-            expect(getCurrentPath($router)).toBe("/workflows/import");
-        });
-
-        it("should localize button text", async () => {
-            expect(wrapper.find(ROOT_COMPONENT.workflows.new_button.selector).text()).toBeLocalizationOf("Create");
-            expect(wrapper.find(ROOT_COMPONENT.workflows.import_button.selector).text()).toBeLocalizationOf("Import");
-        });
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowIndexActions.vue b/client/src/components/Workflow/WorkflowIndexActions.vue
deleted file mode 100644
index c067b483dcf7..000000000000
--- a/client/src/components/Workflow/WorkflowIndexActions.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <span>
-        <BButton
-            id="workflow-create"
-            v-b-tooltip.hover
-            aria-haspopup="true"
-            :title="createTitle"
-            :disabled="isAnonymous"
-            class="m-1"
-            @click="navigateToCreate">
-            <FontAwesomeIcon icon="plus" />
-            {{ "Create" | localize }}
-        </BButton>
-        <BButton
-            id="workflow-import"
-            v-b-tooltip.hover
-            aria-haspopup="true"
-            :title="importTitle"
-            :disabled="isAnonymous"
-            class="m-1"
-            @click="navigateToImport">
-            <FontAwesomeIcon icon="upload" />
-            {{ "Import" | localize }}
-        </BButton>
-    </span>
-</template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton } from "bootstrap-vue";
-import { mapState } from "pinia";
-
-import { useUserStore } from "@/stores/userStore";
-
-library.add(faPlus, faUpload);
-
-export default {
-    components: {
-        BButton,
-        FontAwesomeIcon,
-    },
-    computed: {
-        ...mapState(useUserStore, ["isAnonymous"]),
-        createTitle() {
-            return this.isAnonymous ? "Please log in or register to use this feature" : "Create a new workflow";
-        },
-        importTitle() {
-            return this.isAnonymous
-                ? "Please log in or register to use this feature"
-                : "Import a workflow from URL or registry";
-        },
-    },
-    methods: {
-        navigateToCreate: function () {
-            this.$router.push("/workflows/edit");
-        },
-        navigateToImport: function () {
-            this.$router.push("/workflows/import");
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
new file mode 100644
index 000000000000..e0f5bcbb2edc
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faGlobe, faLink, faShieldAlt, faUser, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge, BButton } from "bootstrap-vue";
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+import { copy } from "@/utils/clipboard";
+
+import UtcDate from "@/components/UtcDate.vue";
+
+library.add(faShieldAlt, faLink, faGlobe, faUsers, faUser);
+
+interface Props {
+    workflow: any;
+    publishedView: boolean;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+const userStore = useUserStore();
+
+const publishedTitle = computed(() => {
+    if (userStore.currentUser?.username === props.workflow.owner) {
+        return "Published by you. Click to view all published workflows by you";
+    } else {
+        return `Published by '${props.workflow.owner}'. Click to view all published workflows by '${props.workflow.owner}'`;
+    }
+});
+const shared = computed(() => {
+    if (userStore.currentUser) {
+        return userStore.currentUser.username !== props.workflow.owner;
+    } else {
+        return false;
+    }
+});
+const sourceType = computed(() => {
+    if (props.workflow.source_metadata?.url) {
+        return "url";
+    } else if (props.workflow.source_metadata?.trs_server) {
+        return `trs_${props.workflow.source_metadata?.trs_server}`;
+    } else {
+        return "";
+    }
+});
+const sourceTitle = computed(() => {
+    if (sourceType.value.includes("trs")) {
+        return `Imported from TRS ID (version: ${props.workflow.source_metadata.trs_version_id}). Click to copy ID`;
+    } else if (sourceType.value == "url") {
+        return `Imported from ${props.workflow.source_metadata.url}. Click to copy link`;
+    } else {
+        return `Imported from ${props.workflow.source_type}`;
+    }
+});
+
+function onCopyLink() {
+    if (sourceType.value == "url") {
+        copy(props.workflow.source_metadata.url);
+        Toast.success("URL copied");
+    } else if (sourceType.value.includes("trs")) {
+        copy(props.workflow.source_metadata.trs_tool_id);
+        Toast.success("TRS ID copied");
+    }
+}
+
+function onViewMySharedByUser() {
+    router.push(`/workflows/list_shared_with_me?owner=${props.workflow.owner}`);
+}
+
+function onViewUserPublished() {
+    router.push(`/workflows/list_published?owner=${props.workflow.owner}`);
+}
+</script>
+
+<template>
+    <div>
+        <BButton
+            v-if="workflow.published"
+            v-b-tooltip
+            size="sm"
+            class="workflow-published-icon inline-icon-button"
+            to="/workflows/list_published"
+            title="Published workflow. Click to view all published workflows">
+            <FontAwesomeIcon :icon="faGlobe" fixed-width />
+        </BButton>
+
+        <BButton
+            v-if="sourceType.includes('trs')"
+            v-b-tooltip
+            size="sm"
+            class="workflow-trs-icon inline-icon-button"
+            :title="sourceTitle">
+            <FontAwesomeIcon :icon="faShieldAlt" fixed-width @click="onCopyLink" />
+        </BButton>
+
+        <BButton
+            v-if="sourceType == 'url'"
+            v-b-tooltip
+            size="sm"
+            class="workflow-external-link inline-icon-button"
+            :title="sourceTitle">
+            <FontAwesomeIcon :icon="faLink" fixed-width @click="onCopyLink" />
+        </BButton>
+
+        <span class="mr-1">
+            <small>
+                edited
+                <UtcDate :date="workflow.update_time" mode="elapsed" />
+            </small>
+        </span>
+
+        <BBadge
+            v-if="shared && !publishedView"
+            v-b-tooltip
+            class="outline-badge cursor-pointer mx-1"
+            :title="`'${workflow.owner}' shared this workflow with you. Click to view all workflows shared with you by '${workflow.owner}'`"
+            @click="onViewMySharedByUser">
+            <FontAwesomeIcon :icon="faUsers" size="sm" fixed-width />
+            <span class="font-weight-bold"> {{ workflow.owner }} </span>
+        </BBadge>
+
+        <BBadge
+            v-if="publishedView"
+            v-b-tooltip
+            class="outline-badge cursor-pointer mx-1"
+            :title="publishedTitle"
+            @click="onViewUserPublished">
+            <FontAwesomeIcon :icon="faUser" size="sm" fixed-width />
+            <span class="font-weight-bold"> {{ workflow.owner }} </span>
+        </BBadge>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.workflow-badge {
+    background: $brand-secondary;
+    color: $brand-primary;
+    border: 1px solid $brand-primary;
+
+    &:hover {
+        color: $brand-secondary;
+        background: $brand-primary;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
new file mode 100644
index 000000000000..16c150ab605e
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faClock, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useRouter } from "vue-router/composables";
+
+import localize from "@/utils/localization";
+
+library.add(faClock, faSitemap);
+
+interface Props {
+    workflow: any;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+
+function onInvocations() {
+    router.push(`/workflows/${props.workflow.id}/invocations`);
+}
+</script>
+
+<template>
+    <div class="workflow-invocations-count d-flex align-items-center flex-gapx-1">
+        <BButton
+            v-b-tooltip.hover
+            :title="localize('View workflow invocations')"
+            class="inline-icon-button"
+            variant="link"
+            size="sm"
+            @click="onInvocations">
+            <FontAwesomeIcon :icon="faSitemap" fixed-width />
+        </BButton>
+    </div>
+</template>
diff --git a/client/src/components/Workflow/WorkflowList.test.js b/client/src/components/Workflow/WorkflowList.test.js
deleted file mode 100644
index 4b07236eb091..000000000000
--- a/client/src/components/Workflow/WorkflowList.test.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import { createTestingPinia } from "@pinia/testing";
-import { mount } from "@vue/test-utils";
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { formatDistanceToNow, parseISO } from "date-fns";
-import flushPromises from "flush-promises";
-import { PiniaVuePlugin } from "pinia";
-import { getLocalVue, wait } from "tests/jest/helpers";
-import { computed } from "vue";
-
-import { useUserTagsStore } from "@/stores/userTagsStore";
-
-import Tag from "../TagsMultiselect/Tag";
-import Workflows from "../Workflow/WorkflowList";
-
-const localVue = getLocalVue();
-localVue.use(PiniaVuePlugin);
-
-const autocompleteTags = ["#named_user_tags", "abc", "my_tag"];
-jest.mock("@/stores/userTagsStore");
-useUserTagsStore.mockReturnValue({
-    userTags: computed(() => autocompleteTags),
-    addLocalTag: jest.fn(),
-});
-
-jest.mock("app");
-
-const sampleLongAnnotation =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\
-    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\
-    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,\
-    sunt in culpa qui officia deserunt mollit anim id est laborum.";
-
-const mockWorkflowsData = [
-    {
-        id: "5f1915bcf9f35612",
-        update_time: "2021-01-04T17:40:58.604118",
-        create_time: "2021-01-04T17:40:58.407793",
-        name: "workflow name",
-        tags: ["tagmoo", "tagcow"],
-        annotations: [sampleLongAnnotation],
-        published: true,
-        show_in_tool_panel: true,
-        owner: "test",
-    },
-];
-
-const defaultApiParams = {
-    limit: 20,
-    offset: 0,
-    skip_step_counts: true,
-    sort_by: "update_time",
-    sort_desc: true,
-};
-
-const debounceDelay = 500; // in ms - see FilterMenu.props.debounceDelay
-
-describe("WorkflowList.vue", () => {
-    let axiosMock;
-    let wrapper;
-
-    beforeEach(async () => {
-        axiosMock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-        axiosMock.restore();
-    });
-
-    describe(" with empty workflow list", () => {
-        beforeEach(async () => {
-            axiosMock.onAny().reply(200, [], { total_matches: "0" });
-            const propsData = {};
-            wrapper = mount(Workflows, {
-                propsData,
-                localVue,
-                pinia: createTestingPinia(),
-                stubs: {
-                    icon: { template: "<div></div>" },
-                },
-            });
-        });
-
-        it("no invocations message should be shown when not loading", async () => {
-            expect(wrapper.find("#no-workflows").exists()).toBe(true);
-        });
-    });
-
-    describe(" with server error", () => {
-        beforeEach(async () => {
-            axiosMock
-                .onGet("/api/workflows", { params: { search: "", ...defaultApiParams } })
-                .reply(403, { err_msg: "this is a problem" });
-            const propsData = {};
-            wrapper = mount(Workflows, {
-                propsData,
-                localVue,
-                pinia: createTestingPinia(),
-                stubs: {
-                    icon: { template: "<div></div>" },
-                },
-            });
-            flushPromises();
-        });
-
-        it("renders error message", async () => {
-            expect(wrapper.find(".index-grid-message").text()).toContain("this is a problem");
-        });
-    });
-
-    describe(" with single workflow", () => {
-        function findSearchBar(wrapper) {
-            return wrapper.find("[data-description='filter text input']");
-        }
-
-        beforeEach(async () => {
-            axiosMock
-                .onGet("/api/workflows", { params: { search: "", ...defaultApiParams } })
-                .reply(200, mockWorkflowsData, { total_matches: "1" });
-            const propsData = {
-                inputDebounceDelay: 0,
-            };
-            wrapper = mount(Workflows, {
-                propsData,
-                localVue,
-                pinia: createTestingPinia(),
-                stubs: {
-                    icon: { template: "<div></div>" },
-                },
-            });
-            flushPromises();
-        });
-
-        it("no workflows message is gone", async () => {
-            expect(wrapper.find("#no-workflows").exists()).toBe(false);
-        });
-
-        it("renders one row", async () => {
-            let rows = wrapper.findAll("tbody > tr").wrappers;
-            expect(rows.length).toBe(1);
-            const row = rows[0];
-            const columns = row.findAll("td");
-            expect(columns.at(0).text()).toContain("workflow name");
-            expect(columns.at(1).text()).toContain("tagmoo");
-            expect(columns.at(1).text()).toContain("tagcow");
-            expect(columns.at(2).text()).toBe(
-                formatDistanceToNow(parseISO(`${mockWorkflowsData[0].update_time}Z`), { addSuffix: true })
-            );
-            expect(columns.at(2).text()).toBe(
-                formatDistanceToNow(parseISO(`${mockWorkflowsData[0].update_time}Z`), { addSuffix: true })
-            );
-            expect(row.find(".sharing-indicator-published").exists()).toBe(true);
-
-            // test expand summary button for longer annotations
-            const annotationHead = sampleLongAnnotation.substr(0, 75);
-            const annotationTail = sampleLongAnnotation.substr(sampleLongAnnotation.length - 50);
-            expect(columns.at(0).text()).toContain(annotationHead);
-            expect(columns.at(0).text()).not.toContain(annotationTail);
-            expect(columns.at(0).find("a > .fa-chevron-down").exists()).toBe(true);
-            // click Down Arrow: full annotation should be visible in a b-card
-            await columns.at(0).find("a.text-summary-expand").trigger("click");
-            expect(columns.at(0).find("a > .fa-chevron-down").exists()).toBe(false);
-            rows = wrapper.findAll("tbody > tr").wrappers;
-            expect(rows.length).toBe(3);
-            const descriptionCard = rows[2].find("td");
-            expect(descriptionCard.text()).toContain(annotationTail);
-            expect(columns.at(0).find("a > .fa-chevron-up").exists()).toBe(true);
-        });
-
-        it("starts with an empty filter", async () => {
-            expect(findSearchBar(wrapper).element.value).toBe("");
-        });
-
-        it("fetched filtered results when search filter is used", async () => {
-            await findSearchBar(wrapper).setValue("mytext");
-            expect(findSearchBar(wrapper).element.value).toBe("mytext");
-            await wait(debounceDelay);
-            expect(wrapper.vm.filterText).toBe("mytext");
-        });
-
-        it("update filter when a tag is clicked", async () => {
-            const tags = wrapper.findAllComponents(Tag).wrappers;
-            expect(tags.length).toBe(2);
-            tags[0].trigger("click");
-            flushPromises();
-            expect(wrapper.vm.filterText).toBe("tag:'tagmoo'");
-        });
-
-        it("update filter when a tag is clicked only happens on first click", async () => {
-            const tags = wrapper.findAllComponents(Tag).wrappers;
-            expect(tags.length).toBe(2);
-            tags[0].trigger("click");
-            tags[0].trigger("click");
-            tags[0].trigger("click");
-            flushPromises();
-            expect(wrapper.vm.filterText).toBe("tag:'tagmoo'");
-        });
-
-        it("update filter when published icon is clicked", async () => {
-            const rows = wrapper.findAll("tbody > tr").wrappers;
-            const row = rows[0];
-            row.find(".sharing-indicator-published").trigger("click");
-            flushPromises();
-            expect(wrapper.vm.filterText).toBe("is:published");
-        });
-
-        it("update filter when shared with me icon is clicked", async () => {
-            const rows = wrapper.findAll("tbody > tr").wrappers;
-            const row = rows[0];
-            row.find(".fa-share-alt").trigger("click");
-            flushPromises();
-            expect(wrapper.vm.filterText).toBe("is:shared_with_me");
-        });
-    });
-
-    describe("published grid", () => {
-        beforeEach(async () => {
-            axiosMock
-                .onGet("/api/workflows", {
-                    params: {
-                        search: "is:published",
-                        show_published: true,
-                        show_shared: false,
-                        ...defaultApiParams,
-                    },
-                })
-                .reply(200, mockWorkflowsData, { total_matches: "1" });
-            const propsData = {
-                inputDebounceDelay: 0,
-                published: true,
-            };
-            wrapper = mount(Workflows, {
-                propsData,
-                localVue,
-                pinia: createTestingPinia(),
-                stubs: {
-                    icon: { template: "<div></div>" },
-                },
-            });
-            flushPromises();
-        });
-
-        it("should be error free", async () => {
-            const errorDiv = wrapper.find(".index-grid-message");
-            expect(errorDiv.text()).toBeFalsy();
-        });
-
-        it("renders one row", async () => {
-            const rows = wrapper.findAll("tbody > tr").wrappers;
-            expect(rows.length).toBe(1);
-            const row = rows[0];
-            const columns = row.findAll("td");
-            expect(columns.at(0).text()).toContain("workflow name");
-            expect(columns.at(1).text()).toContain("tagmoo");
-            expect(columns.at(1).text()).toContain("tagcow");
-            expect(columns.at(2).text()).toBe(
-                formatDistanceToNow(parseISO(`${mockWorkflowsData[0].update_time}Z`), { addSuffix: true })
-            );
-            expect(columns.at(2).text()).toBe(
-                formatDistanceToNow(parseISO(`${mockWorkflowsData[0].update_time}Z`), { addSuffix: true })
-            );
-        });
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowList.test.ts b/client/src/components/Workflow/WorkflowList.test.ts
new file mode 100644
index 000000000000..6d98ef33714d
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowList.test.ts
@@ -0,0 +1,110 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { setActivePinia } from "pinia";
+
+import { mockFetcher } from "@/api/schema/__mocks__";
+import { useUserStore } from "@/stores/userStore";
+
+import { generateRandomWorkflowList } from "./testUtils";
+
+import WorkflowList from "./WorkflowList.vue";
+
+jest.mock("@/api/schema");
+
+const localVue = getLocalVue();
+
+const FAKE_USER_ID = "fake_user_id";
+const FAKE_USERNAME = "fake_username";
+const FAKE_USER_EMAIL = "fake_user_email";
+const FAKE_USER = {
+    id: FAKE_USER_ID,
+    email: FAKE_USER_EMAIL,
+    tags_used: [],
+    isAnonymous: false,
+    username: FAKE_USERNAME,
+    total_disk_usage: 0,
+};
+
+async function mountWorkflowList() {
+    const pinia = createTestingPinia();
+    setActivePinia(pinia);
+
+    const mockRouter = {
+        push: jest.fn(),
+        currentRoute: {
+            query: {},
+        },
+    };
+
+    const wrapper = mount(WorkflowList as object, {
+        localVue,
+        pinia,
+        mocks: {
+            $router: mockRouter,
+        },
+    });
+
+    const userStore = useUserStore();
+    userStore.currentUser = FAKE_USER;
+
+    await flushPromises();
+
+    return wrapper;
+}
+
+describe("WorkflowList", () => {
+    afterEach(() => {
+        mockFetcher.clearMocks();
+    });
+
+    it("render empty workflow list", async () => {
+        mockFetcher.path("/api/workflows").method("get").mock({ data: [] });
+
+        const wrapper = await mountWorkflowList();
+
+        expect(wrapper.findAll(".workflow-card")).toHaveLength(0);
+        expect(wrapper.find("#workflow-list-empty").exists()).toBe(true);
+    });
+
+    it("render workflow list", async () => {
+        const FAKE_WORKFLOWS = generateRandomWorkflowList(FAKE_USERNAME, 10);
+
+        mockFetcher.path("/api/workflows").method("get").mock({ data: FAKE_WORKFLOWS });
+
+        const wrapper = await mountWorkflowList();
+
+        expect(wrapper.findAll(".workflow-card")).toHaveLength(10);
+        expect(wrapper.find("#workflow-list-empty").exists()).toBe(false);
+
+        const nonDeletedWorkflows = FAKE_WORKFLOWS.filter((w) => !w.deleted);
+        expect(wrapper.findAll(".workflow-card")).toHaveLength(nonDeletedWorkflows.length);
+    });
+
+    it("toggle show deleted workflows", async () => {
+        const FAKE_WORKFLOWS = generateRandomWorkflowList(FAKE_USERNAME, 10);
+        FAKE_WORKFLOWS.forEach((w) => (w.deleted = true));
+
+        mockFetcher.path("/api/workflows").method("get").mock({ data: FAKE_WORKFLOWS });
+
+        const wrapper = await mountWorkflowList();
+
+        expect((wrapper.find("#workflow-list-filter input").element as HTMLInputElement).value).toBe("");
+
+        const showDeletedButton = wrapper.find("#show-deleted");
+        expect(showDeletedButton.exists()).toBe(true);
+        showDeletedButton.trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        expect((wrapper.find("#workflow-list-filter input").element as HTMLInputElement).value).toBe("is:deleted");
+
+        expect(showDeletedButton.exists()).toBe(true);
+        showDeletedButton.trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        expect((wrapper.find("#workflow-list-filter input").element as HTMLInputElement).value).toBe("");
+    });
+});
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 10e1244d5ef0..9877cd8105ab 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -1,290 +1,390 @@
-<template>
-    <div class="workflows-list" aria-labelledby="workflows-title">
-        <h1 id="workflows-title" class="mb-3 h-lg">
-            {{ title }}
-        </h1>
-        <b-alert class="index-grid-message" :variant="messageVariant" :show="showMessage">{{ message }}</b-alert>
-        <b-alert class="index-grid-message" dismissible :variant="importStatus" :show="Boolean(importMessage)">
-            {{ importMessage }}
-        </b-alert>
-        <b-row class="mb-3">
-            <b-col cols="6" class="m-1">
-                <FilterMenu
-                    :name="title"
-                    :placeholder="titleSearch"
-                    :filter-class="filterClass"
-                    :filter-text.sync="filterText"
-                    :loading="loading"
-                    :show-advanced.sync="showAdvanced"
-                    has-help
-                    @on-backend-filter="onSearch">
-                    <template v-slot:menu-help-text>
-                        <div v-html="helpHtml"></div>
-                    </template>
-                </FilterMenu>
-            </b-col>
-            <b-col>
-                <WorkflowIndexActions :root="root" class="float-right"></WorkflowIndexActions>
-            </b-col>
-        </b-row>
-        <b-table v-model="workflowItemsModel" v-bind="{ ...defaultTableAttrs, ...indexTableAttrs }">
-            <template v-slot:empty>
-                <loading-span v-if="loading" message="Loading workflows" />
-                <b-alert v-else id="no-workflows" variant="info" show>
-                    <div v-if="filterText !== ''">
-                        No matching entries found for: <span class="font-weight-bold">{{ filterText }}</span
-                        >.
-                    </div>
-                    <div v-else>No workflows found. You may create or import new workflows.</div>
-                </b-alert>
-            </template>
-            <template v-slot:cell(name)="row">
-                <WorkflowDropdown
-                    :workflow="row.item"
-                    :details-showing="row.detailsShowing"
-                    @onAdd="onAdd"
-                    @onRemove="onRemove"
-                    @onUpdate="onUpdate"
-                    @onSuccess="onSuccess"
-                    @onError="onError"
-                    @onRestore="onRestore"
-                    @toggleDetails="row.toggleDetails" />
-            </template>
-            <template v-slot:cell(tags)="row">
-                <StatelessTags
-                    clickable
-                    :value="row.item.tags"
-                    :disabled="row.item.deleted || published"
-                    @input="(tags) => onTags(tags, row.index)"
-                    @tag-click="(tag) => applyFilter('tag', tag, true)" />
-            </template>
-            <template v-slot:cell(published)="row">
-                <SharingIndicators
-                    v-if="!row.item.deleted"
-                    :object="row.item"
-                    @filter="(filter) => applyFilter(filter, true)" />
-                <div v-else>&#8212;</div>
-            </template>
-            <template v-slot:cell(show_in_tool_panel)="row">
-                <WorkflowBookmark
-                    v-if="!row.item.deleted"
-                    :checked="row.item.show_in_tool_panel"
-                    @bookmark="(checked) => bookmarkWorkflow(row.item.id, checked)" />
-                <div v-else>&#8212;</div>
-            </template>
-            <template v-slot:cell(update_time)="data">
-                <UtcDate :date="data.value" mode="elapsed" />
-            </template>
-            <template v-slot:cell(owner)="data">
-                <a class="workflow-filter-link-owner" href="#" @click="applyFilter('user', data.value, true)">
-                    {{ data.value }}
-                </a>
-            </template>
-            <template v-slot:cell(execute)="row">
-                <WorkflowRunButton v-if="!row.item.deleted" :id="row.item.id" :root="root" />
-                <div v-else>&#8212;</div>
-            </template>
-            <template v-slot:row-details="data">
-                <b-card>
-                    <p class="workflow-dropdown-description">{{ data.item.description }}</p>
-                </b-card>
-            </template>
-        </b-table>
-        <b-pagination
-            v-show="rows >= perPage"
-            v-model="currentPage"
-            class="gx-workflows-grid-pager"
-            v-bind="paginationAttrs"></b-pagination>
-    </div>
-</template>
-<script>
-import { getGalaxyInstance } from "app";
-import SharingIndicators from "components/Indices/SharingIndicators";
-import { storedWorkflowsProvider } from "components/providers/StoredWorkflowsProvider";
-import UtcDate from "components/UtcDate";
-import { getAppRoot } from "onload/loadConfig";
-import _l from "utils/localization";
-
-import paginationMixin from "./paginationMixin";
-import { Services } from "./services";
-import WorkflowBookmark from "./WorkflowBookmark";
-import WorkflowDropdown from "./WorkflowDropdown";
-import { helpHtml, PublishedWorkflowFilters, WorkflowFilters } from "./WorkflowFilters";
-import WorkflowIndexActions from "./WorkflowIndexActions";
-
-import WorkflowRunButton from "./WorkflowRunButton.vue";
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faStar, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BNav, BNavItem, BOverlay, BPagination } from "bootstrap-vue";
+import { filter } from "underscore";
+import { computed, type ComputedRef, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { loadWorkflows } from "@/components/Workflow/workflows.services";
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+import Filtering, { contains, equals, expandNameTag, toBool, type ValidFilter } from "@/utils/filtering";
+
 import FilterMenu from "@/components/Common/FilterMenu.vue";
-import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
-
-const NAME_FIELD = { key: "name", label: _l("Name"), sortable: true };
-const TAGS_FIELD = { key: "tags", label: _l("Tags"), sortable: false, thStyle: { width: "20%" } };
-const UPDATED_FIELD = { label: _l("Updated"), key: "update_time", sortable: true, thStyle: { width: "15%" } };
-const SHARING_FIELD = { label: _l("Sharing"), key: "published", sortable: false, thStyle: { width: "10%" } };
-const BOOKMARKED_FIELD = {
-    label: _l("Bookmarked"),
-    key: "show_in_tool_panel",
-    sortable: false,
-    thStyle: { width: "10%" },
-};
-const EXECUTE_FIELD = { key: "execute", label: "Run", thStyle: { width: "10%" } };
-const OWNER_FIELD = { key: "owner", label: _l("Owner"), sortable: false, thStyle: { width: "15%" } };
-
-const PERSONAL_FIELDS = [NAME_FIELD, TAGS_FIELD, UPDATED_FIELD, SHARING_FIELD, BOOKMARKED_FIELD, EXECUTE_FIELD];
-const PUBLISHED_FIELDS = [NAME_FIELD, TAGS_FIELD, UPDATED_FIELD, OWNER_FIELD, EXECUTE_FIELD];
-
-export default {
-    components: {
-        FilterMenu,
-        UtcDate,
-        StatelessTags,
-        WorkflowDropdown,
-        WorkflowBookmark,
-        WorkflowIndexActions,
-        SharingIndicators,
-        WorkflowRunButton,
-    },
-    mixins: [paginationMixin],
-    props: {
-        inputDebounceDelay: {
-            type: Number,
-            default: 500,
-        },
-        importMessage: {
-            type: String,
-            default: null,
-        },
-        importStatus: {
-            type: String,
-            default: "success",
+import Heading from "@/components/Common/Heading.vue";
+import ListHeader from "@/components/Common/ListHeader.vue";
+import LoginRequired from "@/components/Common/LoginRequired.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import WorkflowCard from "@/components/Workflow/WorkflowCard.vue";
+import WorkflowListActions from "@/components/Workflow/WorkflowListActions.vue";
+
+library.add(faStar, faTrash);
+
+const helpHtml = `<div>
+<p>This input can be used to filter the workflows displayed.</p>
+
+<p>
+    Text entered here will be searched against workflow names and workflow
+    tags. Additionally, advanced filtering tags can be used to refine the
+    search more precisely. Filtering tags are of the form
+    <code>&lt;tag_name&gt;:&lt;tag_value&gt;</code> or
+    <code>&lt;tag_name&gt;:'&lt;tag_value&gt;'</code>. For instance to
+    search just for RNAseq in the workflow name,
+    <code>name:rnsseq</code> can be used. Notice by default the search is
+    not case-sensitive. If the quoted version of tag is used, the search is
+    case sensitive and only full matches will be returned. So
+    <code>name:'RNAseq'</code> would show only workflows named exactly
+    <code>RNAseq</code>.
+</p>
+
+<p>The available filtering tags are:</p>
+<dl>
+    <dt><code>name</code></dt>
+    <dd>
+        Shows workflows with the given sequence of characters in their names.
+    </dd>
+    <dt><code>tag</code></dt>
+    <dd>
+        Shows workflows with the given workflow tag. You may also click
+        on a tag to filter on that tag directly.
+    </dd>
+</dl>
+</div>`;
+
+type ListView = "grid" | "list";
+type WorkflowsList = Record<string, never>[];
+
+interface Props {
+    activeList?: "my" | "shared_with_me" | "published";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    activeList: "my",
+});
+
+const router = useRouter();
+const userStore = useUserStore();
+
+const limit = ref(24);
+const offset = ref(0);
+const loading = ref(true);
+const overlay = ref(false);
+const filterText = ref("");
+const totalWorkflows = ref(0);
+const showAdvanced = ref(false);
+const showBookmarked = ref(false);
+const listHeader = ref<any>(null);
+const advancedFiltering = ref<any>(null);
+const workflowsLoaded = ref<WorkflowsList>([]);
+
+const validFilters: ComputedRef<Record<string, ValidFilter<string | boolean | undefined>>> = computed(() => {
+    return {
+        name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+        tag: {
+            placeholder: "tag",
+            type: "MultiTags",
+            handler: contains("tags", "tag", expandNameTag),
+            menuItem: true,
         },
-        published: {
-            // Render the published workflows version of this grid.
+        deleted: {
+            placeholder: "Filter on deleted workflows",
             type: Boolean,
-            default: false,
-        },
-        query: {
-            type: String,
-            required: false,
-            default: "",
-        },
-    },
-    data() {
-        const fields = this.published ? PUBLISHED_FIELDS : PERSONAL_FIELDS;
-        const filterClass = this.published ? PublishedWorkflowFilters : WorkflowFilters;
-        return {
-            tableId: "workflow-table",
-            fields: fields,
-            filterClass: filterClass,
-            filterText: this.query,
-            searchQuery: this.published ? "is:published" : this.query,
-            titleSearch: _l("search workflows"),
-            workflowItemsModel: [],
-            helpHtml: helpHtml,
-            perPage: this.rowsPerPage(this.defaultPerPage || 20),
-            dataProvider: storedWorkflowsProvider,
-            defaultTableAttrs: {
-                "sort-by": "update_time",
-                "sort-desc": true,
-                "no-sort-reset": "",
-                fields: fields,
-            },
-            showAdvanced: false,
-        };
-    },
-    computed: {
-        dataProviderParameters() {
-            const extraParams = {
-                search: this.searchQuery,
-                skip_step_counts: true,
-            };
-            if (this.published) {
-                extraParams.show_published = true;
-                extraParams.show_shared = false;
-            }
-            return extraParams;
+            handler: equals("deleted", "deleted", toBool),
+            menuItem: false,
         },
-        title() {
-            return this.published ? _l(`Published Workflows`) : _l(`Workflows`);
-        },
-    },
-    created() {
-        this.root = getAppRoot();
-        this.services = new Services();
-    },
-    methods: {
-        decorateData(item) {
-            this.services._addAttributes(item);
-        },
-        bookmarkWorkflow: function (id, checked) {
-            const data = {
-                show_in_tool_panel: checked,
-            };
-            this.services
-                .updateWorkflow(id, data)
-                .then(({ id, name }) => {
-                    if (checked) {
-                        getGalaxyInstance().config.stored_workflow_menu_entries.push({ id: id, name: name });
-                    } else {
-                        const indexToRemove = getGalaxyInstance().config.stored_workflow_menu_entries.findIndex(
-                            (workflow) => workflow.id === id
-                        );
-                        getGalaxyInstance().config.stored_workflow_menu_entries.splice(indexToRemove, 1);
-                    }
-
-                    this.items.find((workflow) => {
-                        if (workflow.id === id) {
-                            workflow.show_in_tool_panel = checked;
-                            return true;
-                        }
-                    });
-                })
-                .catch((error) => {
-                    this.onError(error);
-                });
-        },
-        onTags: function (tags, index) {
-            const workflow = this.workflowItemsModel[index];
-            workflow.tags = tags;
-            this.services
-                .updateWorkflow(workflow.id, {
-                    tags: workflow.tags,
-                })
-                .catch((error) => {
-                    this.onError(error);
-                });
-            this.$emit("input", workflow.tags);
-        },
-        onAdd: function (workflow) {
-            if (this.currentPage == 1) {
-                this.refresh();
-            } else {
-                this.currentPage = 1;
-            }
-        },
-        onRemove: function (id) {
-            this.refresh();
-        },
-        onUpdate: function (id, data) {
-            this.refresh();
-        },
-        onRestore: function (id) {
-            this.refresh();
-        },
-        onSearch(searchQuery) {
-            this.searchQuery = searchQuery;
-            // clear out the query param if the filter text is cleared
-            if (searchQuery == "" && searchQuery !== this.query) {
-                this.$router.push("/workflows/list");
+    };
+});
+
+const WorkflowFilters = new Filtering(validFilters.value);
+
+const searchPlaceHolder = computed(() => {
+    let placeHolder = "Search my workflows";
+
+    if (published.value) {
+        placeHolder = "Search published workflows";
+    } else if (sharedWithMe.value) {
+        placeHolder = "Search workflows shared with me";
+    }
+
+    placeHolder += " by name or use the advanced filtering options";
+
+    return placeHolder;
+});
+
+const published = computed(() => props.activeList === "published");
+const sharedWithMe = computed(() => props.activeList === "shared_with_me");
+const showDeleted = computed(() => filterText.value.includes("is:deleted"));
+const currentPage = computed(() => Math.floor(offset.value / limit.value) + 1);
+const view = computed(() => (userStore.preferredListViewMode as ListView) || "grid");
+const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) ?? true);
+const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "update_time");
+const noItems = computed(() => !loading.value && workflowsLoaded.value.length === 0 && !filterText.value);
+const noResults = computed(() => !loading.value && workflowsLoaded.value.length === 0 && filterText.value);
+
+function updateFilter(newVal: string) {
+    advancedFiltering.value.updateFilter(newVal.trim());
+}
+
+function onTagClick(tag: string) {
+    if (filterText.value.includes(tag)) {
+        filterText.value = filterText.value.replace(`tag:'${tag}'`, "").trim();
+    } else {
+        filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", `'${tag}'`);
+    }
+}
+
+function onToggleDeleted() {
+    if (!showDeleted.value) {
+        filterText.value = `${filterText.value} is:deleted`.trim();
+    } else {
+        filterText.value = filterText.value.replace("is:deleted", "").trim();
+    }
+}
+
+function onToggleBookmarked() {
+    showBookmarked.value = !showBookmarked.value;
+}
+
+async function load(overlayLoading = false, silent = false) {
+    if (!silent) {
+        if (overlayLoading) {
+            overlay.value = true;
+        } else {
+            loading.value = true;
+        }
+    }
+
+    let search = filterText.value;
+
+    if (published.value) {
+        search += " is:published";
+    }
+
+    if (sharedWithMe.value) {
+        search += " is:shared_with_me";
+    }
+
+    try {
+        const { data, headers } = await loadWorkflows({
+            sortBy: sortBy.value,
+            sortDesc: sortDesc.value,
+            limit: limit.value,
+            offset: offset.value,
+            filterText: search?.trim(),
+            showPublished: published.value,
+            skipStepCounts: true,
+        });
+
+        let filteredWorkflows = showBookmarked.value
+            ? filter(data, (workflow: any) => workflow.show_in_tool_panel)
+            : data;
+
+        if (props.activeList === "my") {
+            filteredWorkflows = filter(filteredWorkflows, (w: any) => w.owner === userStore.currentUser?.username);
+        }
+
+        workflowsLoaded.value = filteredWorkflows;
+
+        if (showBookmarked.value) {
+            totalWorkflows.value = filteredWorkflows.length;
+        } else {
+            totalWorkflows.value = parseInt(headers.get("Total_matches") || "0", 10) || 0;
+        }
+    } catch (e) {
+        Toast.error(`Failed to load workflows: ${e}`);
+    } finally {
+        overlay.value = false;
+        loading.value = false;
+    }
+}
+
+async function onPageChange(page: number) {
+    offset.value = (page - 1) * limit.value;
+    await load(true);
+}
+
+watch([filterText, sortBy, sortDesc, showBookmarked], async () => {
+    offset.value = 0;
+    await load(true);
+});
+
+onMounted(() => {
+    if (router.currentRoute.query.owner) {
+        filterText.value = `${filterText.value} user:${router.currentRoute.query.owner}`.trim();
+    }
+    load();
+});
+</script>
+
+<template>
+    <div id="workflows-list" class="workflows-list">
+        <div id="workflows-list-header" class="workflows-list-header mb-2">
+            <div class="d-flex">
+                <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Workflows</Heading>
+
+                <WorkflowListActions />
+            </div>
+
+            <BNav pills justified class="mb-2">
+                <BNavItem id="my" :active="activeList === 'my'" :disabled="userStore.isAnonymous" to="/workflows/list">
+                    My workflows
+                    <LoginRequired v-if="userStore.isAnonymous" target="my" title="Manage your workflows" />
+                </BNavItem>
+
+                <BNavItem
+                    id="shared-with-me"
+                    :active="sharedWithMe"
+                    :disabled="userStore.isAnonymous"
+                    to="/workflows/list_shared_with_me">
+                    Workflows shared with me
+                    <LoginRequired v-if="userStore.isAnonymous" target="shared-with-me" title="Manage your workflows" />
+                </BNavItem>
+
+                <BNavItem id="published" :active="published" to="/workflows/list_published">
+                    Public workflows
+                </BNavItem>
+            </BNav>
+
+            <FilterMenu
+                id="workflow-list-filter"
+                name="workflows"
+                class="mb-2"
+                :filter-class="WorkflowFilters"
+                :filter-text.sync="filterText"
+                :loading="loading || overlay"
+                has-help
+                :placeholder="searchPlaceHolder"
+                :show-advanced.sync="showAdvanced"
+                @updateFilter="updateFilter">
+                <template v-slot:menu-help-text>
+                    <div v-html="helpHtml"></div>
+                </template>
+            </FilterMenu>
+
+            <ListHeader ref="listHeader" show-view-toggle>
+                <template v-slot:extra-filter>
+                    <div v-if="activeList === 'my'">
+                        Filter:
+                        <BButton
+                            id="show-deleted"
+                            v-b-tooltip.hover
+                            size="sm"
+                            :title="!showDeleted ? 'Show deleted workflows' : 'Hide deleted workflows'"
+                            :pressed="showDeleted"
+                            variant="outline-primary"
+                            @click="onToggleDeleted">
+                            <FontAwesomeIcon :icon="faTrash" fixed-width />
+                            Show deleted
+                        </BButton>
+
+                        <BButton
+                            id="show-bookmarked"
+                            v-b-tooltip.hover
+                            size="sm"
+                            :title="!showBookmarked ? 'Show bookmarked workflows' : 'Hide bookmarked workflows'"
+                            :pressed="showBookmarked"
+                            variant="outline-primary"
+                            @click="onToggleBookmarked">
+                            <FontAwesomeIcon :icon="faStar" fixed-width />
+                            Show bookmarked
+                        </BButton>
+                    </div>
+                </template>
+            </ListHeader>
+        </div>
+
+        <BAlert v-if="loading" variant="info" show>
+            <LoadingSpan message="Loading workflows..." />
+        </BAlert>
+
+        <BAlert v-if="!loading && !overlay && noItems" id="workflow-list-empty" variant="info" show>
+            No workflows found. You may create or import new workflows using the buttons above.
+        </BAlert>
+
+        <BAlert v-else-if="!loading && !overlay && noResults" id="no-workflow-found" variant="info" show>
+            No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
+        </BAlert>
+
+        <BOverlay
+            v-else
+            id="workflow-cards"
+            :show="overlay"
+            rounded="sm"
+            class="cards-list mt-2"
+            :class="view === 'grid' ? 'd-flex flex-wrap' : ''">
+            <WorkflowCard
+                v-for="w in workflowsLoaded"
+                :key="w.id"
+                :workflow="w"
+                :published-view="published"
+                :grid-view="view === 'grid'"
+                :class="view === 'grid' ? 'grid-view' : 'list-view'"
+                @refreshList="load"
+                @tagClick="onTagClick" />
+
+            <BPagination
+                v-if="!loading && totalWorkflows > limit"
+                class="mt-2 w-100"
+                :value="currentPage"
+                :total-rows="totalWorkflows"
+                :per-page="limit"
+                align="center"
+                first-number
+                last-number
+                @change="onPageChange" />
+        </BOverlay>
+    </div>
+</template>
+
+<style lang="scss">
+@import "scss/mixins.scss";
+@import "breakpoints.scss";
+
+.workflows-list {
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .workflow-total {
+        display: grid;
+        text-align: center;
+        margin-top: 1rem;
+    }
+
+    .workflows-list-header {
+        top: 0;
+        z-index: 100;
+    }
+
+    .cards-list {
+        container: card-list / inline-size;
+        scroll-behavior: smooth;
+        min-height: 150px;
+
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .list-view {
+            width: 100%;
+        }
+
+        .grid-view {
+            width: calc(100% / 3);
+        }
+
+        @container card-list (max-width: #{$breakpoint-xl}) {
+            .grid-view {
+                width: calc(100% / 2);
             }
-            this.refresh();
-        },
-        applyFilter(filter, value, quoted = false) {
-            if (quoted) {
-                this.filterText = this.filterClass.setFilterValue(this.filterText, filter, `'${value}'`);
-            } else {
-                this.filterText = this.filterClass.setFilterValue(this.filterText, filter, value);
+        }
+
+        @container card-list (max-width: #{$breakpoint-sm}) {
+            .grid-view {
+                width: 100%;
             }
-        },
-    },
-};
-</script>
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/WorkflowListActions.vue b/client/src/components/Workflow/WorkflowListActions.vue
new file mode 100644
index 000000000000..1c03e3c31ca9
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowListActions.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { useRouter } from "vue-router/composables";
+
+library.add(faPlus, faUpload);
+
+const router = useRouter();
+
+function navigateToImport() {
+    router.push("/workflows/import");
+}
+
+function navigateToOldCreate() {
+    router.push("/workflows/edit");
+}
+</script>
+
+<template>
+    <div id="workflow-list-actions" class="d-flex justify-content-between">
+        <div>
+            <BButton
+                id="workflow-create"
+                v-b-tooltip.hover
+                size="sm"
+                title="Create new workflow"
+                variant="outline-primary"
+                @click="navigateToOldCreate">
+                <FontAwesomeIcon :icon="faPlus" />
+                Create
+            </BButton>
+
+            <BButton
+                id="workflow-import"
+                v-b-tooltip.hover
+                size="sm"
+                title="Import workflow from URL or file"
+                variant="outline-primary"
+                @click="navigateToImport">
+                <FontAwesomeIcon :icon="faUpload" />
+                Import
+            </BButton>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Workflow/WorkflowQuickView.vue b/client/src/components/Workflow/WorkflowQuickView.vue
new file mode 100644
index 000000000000..70955b91a0d8
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowQuickView.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { type AxiosError } from "axios";
+import { BAlert, BCard } from "bootstrap-vue";
+import { ref, watch } from "vue";
+
+import { fromSimple } from "@/components/Workflow/Editor/modules/model";
+import { getWorkflowFull, getWorkflowInfo } from "@/components/Workflow/workflows.services";
+import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { provideScopedWorkflowStores } from "@/composables/workflowStores";
+import type { Workflow } from "@/stores/workflowStore";
+import { assertDefined } from "@/utils/assertions";
+
+import Heading from "@/components/Common/Heading.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
+import WorkflowInformation from "@/components/Workflow/Published/WorkflowInformation.vue";
+import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
+
+const props = defineProps<{
+    id: string;
+}>();
+
+const { datatypesMapper } = useDatatypesMapper();
+
+const { stateStore } = provideScopedWorkflowStores(props.id);
+
+stateStore.scale = 0.75;
+
+const loading = ref(true);
+const errored = ref(false);
+const errorMessage = ref("");
+const workflow = ref<Workflow | null>(null);
+const workflowInfo = ref<
+    | {
+          name: string;
+          [key: string]: unknown;
+          license?: string;
+          tags?: string[];
+          update_time: string;
+      }
+    | undefined
+>();
+
+watch(
+    () => props.id,
+    async (id) => {
+        workflowInfo.value = undefined;
+        loading.value = true;
+        errored.value = false;
+        errorMessage.value = "";
+
+        try {
+            const [workflowInfoData, fullWorkflow] = await Promise.all([getWorkflowInfo(id), getWorkflowFull(id)]);
+
+            assertDefined(workflowInfoData.name);
+
+            workflowInfo.value = workflowInfoData;
+            workflow.value = fullWorkflow;
+
+            fromSimple(props.id, fullWorkflow);
+        } catch (e) {
+            const error = e as AxiosError<{ err_msg?: string }>;
+
+            if (error.response?.data.err_msg) {
+                errorMessage.value = error.response.data.err_msg;
+            }
+
+            errored.value = true;
+        } finally {
+            loading.value = false;
+        }
+    },
+    {
+        immediate: true,
+    }
+);
+</script>
+
+<template>
+    <div class="workflow-quick-view">
+        <div v-if="loading" class="w-100">
+            <BAlert class="w-100" show variant="info">
+                <LoadingSpan message="Loading workflow preview" />
+            </BAlert>
+        </div>
+
+        <div v-else class="workflow-preview-container">
+            <div class="w-100">
+                <span class="d-flex mb-2">
+                    <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0"> Workflow Preview </Heading>
+
+                    <WorkflowRunButton :id="props.id" full />
+                </span>
+            </div>
+
+            <div class="d-flex w-100">
+                <div v-if="errored" class="w-100">
+                    <BAlert v-if="errorMessage" show variant="danger">
+                        Failed to load workflow:
+                        {{ errorMessage }}
+                    </BAlert>
+
+                    <BAlert v-else show variant="danger"> Unknown Error </BAlert>
+                </div>
+
+                <div v-else-if="!loading && workflowInfo" class="workflow-preview d-flex flex-column">
+                    <BCard class="workflow-graph">
+                        <WorkflowGraph
+                            v-if="workflow && datatypesMapper"
+                            :steps="workflow.steps"
+                            :datatypes-mapper="datatypesMapper"
+                            readonly />
+                    </BCard>
+                </div>
+
+                <div v-if="!loading && !errored && workflowInfo" class="pl-2">
+                    <WorkflowInformation :workflow-info="workflowInfo" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "breakpoints.scss";
+
+.workflow-quick-view {
+    .workflow-preview-container {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+    }
+
+    .workflow-preview {
+        flex-grow: 1;
+
+        display: flex;
+        flex-grow: 1;
+        gap: 1rem;
+        height: 100%;
+
+        .workflow-graph {
+            flex-grow: 1;
+            min-width: 500px;
+        }
+
+        &:deep(.workflow-information) {
+            max-width: 500px;
+            height: 100%;
+        }
+    }
+
+    @media only screen and (max-width: $breakpoint-xl) {
+        flex-direction: column;
+        height: unset;
+
+        .workflow-preview {
+            height: 450px;
+        }
+
+        &:deep(.workflow-information) {
+            max-width: unset;
+            height: unset;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/WorkflowRename.vue b/client/src/components/Workflow/WorkflowRename.vue
new file mode 100644
index 000000000000..1f9253bc8bd2
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowRename.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { BForm, BFormInput, BModal } from "bootstrap-vue";
+import { ref } from "vue";
+
+import { updateWorkflow } from "@/components/Workflow/workflows.services";
+import { Toast } from "@/composables/toast";
+import localize from "@/utils/localization";
+
+import Heading from "@/components/Common/Heading.vue";
+
+interface Props {
+    id: string;
+    name: string;
+    show: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "close"): void;
+    (e: "onRename", name: string): void;
+}>();
+
+const nameModel = ref(props.name);
+const workflowNameInput = ref<HTMLInputElement | null>(null);
+
+async function onRename(newName: string) {
+    try {
+        await updateWorkflow(props.id, { name: newName });
+        Toast.success("Workflow renamed");
+    } catch (e) {
+        Toast.error("Failed to rename workflow");
+    } finally {
+        emit("close");
+    }
+}
+</script>
+
+<template>
+    <BModal
+        :visible="show"
+        :ok-disabled="!nameModel"
+        :ok-title="localize('Rename')"
+        @ok="onRename(nameModel)"
+        @hide="$emit('close')">
+        <template v-slot:modal-title>
+            <Heading h2 inline size="sm"> Rename workflow: {{ localize(name) }}</Heading>
+        </template>
+
+        <BForm @submit.prevent="onRename(nameModel)">
+            <BFormInput
+                id="workflow-name-input"
+                ref="workflowNameInput"
+                v-model="nameModel"
+                type="text"
+                placeholder="Enter new name" />
+        </BForm>
+    </BModal>
+</template>
diff --git a/client/src/components/Workflow/WorkflowRunButton.test.js b/client/src/components/Workflow/WorkflowRunButton.test.js
deleted file mode 100644
index 97ac7ddcdcfc..000000000000
--- a/client/src/components/Workflow/WorkflowRunButton.test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import "jest-location-mock";
-
-import { shallowMount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-import { ROOT_COMPONENT } from "utils/navigation";
-
-import WorkflowRunButton from "./WorkflowRunButton";
-
-const localVue = getLocalVue(true);
-const WORKFLOW_ID = "workflow_id123";
-
-describe("WorkflowRunButton.vue", () => {
-    let wrapper;
-
-    beforeEach(async () => {
-        const propsData = {
-            root: "/root/",
-            id: WORKFLOW_ID,
-        };
-        wrapper = shallowMount(WorkflowRunButton, {
-            propsData,
-            localVue,
-        });
-    });
-
-    it("should localize title text", async () => {
-        const selector = ROOT_COMPONENT.workflows.run_button({ id: WORKFLOW_ID }).selector;
-        expect(wrapper.find(selector).attributes("title")).toBeLocalizationOf("Run workflow");
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowRunButton.test.ts b/client/src/components/Workflow/WorkflowRunButton.test.ts
new file mode 100644
index 000000000000..8672154e1b01
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowRunButton.test.ts
@@ -0,0 +1,47 @@
+import { shallowMount } from "@vue/test-utils";
+import { getLocalVue } from "tests/jest/helpers";
+
+import { generateRandomString } from "./testUtils";
+
+import WorkflowRunButton from "./WorkflowRunButton.vue";
+
+const localVue = getLocalVue();
+
+const WORKFLOW_ID = generateRandomString();
+const WORKFLOW_RUN_BUTTON_SELECTOR = `[data-workflow-run="${WORKFLOW_ID}"]`;
+
+async function mountWorkflowRunButton(props?: { id: string; full?: boolean }) {
+    const mockRouter = {
+        push: jest.fn(),
+    };
+
+    const wrapper = shallowMount(WorkflowRunButton as object, {
+        propsData: { ...props },
+        localVue,
+        mocks: {
+            $router: mockRouter,
+        },
+    });
+
+    return { wrapper };
+}
+
+describe("WorkflowRunButton.vue", () => {
+    it("should render button with icon", async () => {
+        const { wrapper } = await mountWorkflowRunButton({ id: WORKFLOW_ID });
+
+        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).exists()).toBeTruthy();
+        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).attributes("title")).toBe("Run workflow");
+        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).text()).toBe("");
+    });
+
+    it("should redirect to workflow run page", async () => {
+        const { wrapper } = await mountWorkflowRunButton({ id: WORKFLOW_ID });
+
+        await wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).trigger("click");
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.$router.push).toHaveBeenCalledTimes(1);
+        expect(wrapper.vm.$router.push).toHaveBeenCalledWith(`/workflows/run?id=${WORKFLOW_ID}`);
+    });
+});
diff --git a/client/src/components/Workflow/WorkflowRunButton.vue b/client/src/components/Workflow/WorkflowRunButton.vue
index 26e40e8fe949..fb1b20ff219d 100644
--- a/client/src/components/Workflow/WorkflowRunButton.vue
+++ b/client/src/components/Workflow/WorkflowRunButton.vue
@@ -1,41 +1,36 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlay } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { useRouter } from "vue-router/composables";
+
+library.add(faPlay);
+
+interface Props {
+    id: string;
+    full?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+
+function ExecuteWorkflow() {
+    router.push(`/workflows/run?id=${props.id}`);
+}
+</script>
+
 <template>
     <BButton
-        v-b-tooltip.hover.bottom
-        :title="title | localize"
+        id="workflow-run-button"
+        v-b-tooltip.hover.top
+        title="Run workflow"
         :data-workflow-run="id"
-        class="workflow-run btn-sm btn-primary fa fa-play"
-        @click.stop="executeWorkflow" />
+        variant="primary"
+        size="sm"
+        @click.stop="ExecuteWorkflow">
+        <FontAwesomeIcon :icon="faPlay" />
+        <span v-if="full" v-localize>Run</span>
+    </BButton>
 </template>
-
-<script>
-import { BButton, VBTooltip } from "bootstrap-vue";
-
-export default {
-    components: {
-        BButton,
-    },
-    directives: {
-        VBTooltip,
-    },
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        root: {
-            type: String,
-            required: true,
-        },
-    },
-    computed: {
-        title() {
-            return "Run workflow";
-        },
-    },
-    methods: {
-        executeWorkflow() {
-            this.$router.push(`/workflows/run?id=${this.id}`);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Workflow/redirectPath.ts b/client/src/components/Workflow/redirectPath.ts
index 4bf9dfd79e23..1cc3db96a6e2 100644
--- a/client/src/components/Workflow/redirectPath.ts
+++ b/client/src/components/Workflow/redirectPath.ts
@@ -1,9 +1,6 @@
 import type { RawLocation } from "vue-router";
 
-const statusMap = new Map([
-    ["error", "danger"],
-    ["success", "success"],
-]);
+import { Toast } from "@/composables/toast";
 
 export function getRedirectOnImportPath(
     response: { id?: string; message?: string; status?: string },
@@ -12,12 +9,14 @@ export function getRedirectOnImportPath(
     if (isRunFormRedirect) {
         return { path: "/workflows/run", query: { id: response.id } };
     } else {
+        if (response.status === "error") {
+            Toast.error(response.message ?? "Import Failed");
+        } else {
+            Toast.success(response.message ?? "Import Successful");
+        }
+
         return {
             path: "/workflows/list",
-            query: {
-                message: response.message ?? "Import Successful",
-                status: statusMap.get(response.status ?? "") ?? "success",
-            },
         };
     }
 }
diff --git a/client/src/components/Workflow/testUtils.ts b/client/src/components/Workflow/testUtils.ts
new file mode 100644
index 000000000000..2d766649b4be
--- /dev/null
+++ b/client/src/components/Workflow/testUtils.ts
@@ -0,0 +1,39 @@
+interface Workflow {
+    id: string;
+    name: string;
+    owner: string;
+    tags: string[];
+    deleted: boolean;
+    published: boolean;
+    description: string;
+    create_time: string;
+    update_time: string;
+    annotations: string[];
+    show_in_tool_panel: boolean;
+    latest_workflow_uuid: string;
+}
+
+export function generateRandomString() {
+    return Math.random().toString(36).substring(7) as string;
+}
+
+export function generateRandomWorkflow(owner: string): Workflow {
+    return {
+        id: "workflow-" + Math.floor(Math.random() * 1000000),
+        name: generateRandomString(),
+        owner: owner,
+        tags: Array.from({ length: Math.floor(Math.random() * 10) }, () => generateRandomString()),
+        deleted: false,
+        published: Math.random() > 0.5,
+        description: generateRandomString(),
+        create_time: new Date(Date.now() + 1).toISOString(),
+        update_time: new Date(Date.now() + 2).toISOString(),
+        annotations: Array.from({ length: Math.floor(Math.random() * 2) }, () => generateRandomString()),
+        show_in_tool_panel: Math.random() > 0.5,
+        latest_workflow_uuid: generateRandomString(),
+    };
+}
+
+export function generateRandomWorkflowList(owner: string, count: number): Workflow[] {
+    return Array.from({ length: count }, () => generateRandomWorkflow(owner));
+}
diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
new file mode 100644
index 000000000000..775d6d193d59
--- /dev/null
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -0,0 +1,88 @@
+import axios from "axios";
+
+import { fetcher } from "@/api/schema";
+import { useUserStore } from "@/stores/userStore";
+import { withPrefix } from "@/utils/redirect";
+
+type SortBy = "create_time" | "update_time" | "name";
+
+type Workflow = Record<string, never>;
+
+interface LoadWorkflowsOptions {
+    sortBy: SortBy;
+    sortDesc: boolean;
+    limit: number;
+    offset: number;
+    filterText: string;
+    showPublished: boolean;
+    skipStepCounts: boolean;
+}
+
+const getWorkflows = fetcher.path("/api/workflows").method("get").create();
+export async function loadWorkflows({
+    sortBy = "update_time",
+    sortDesc = true,
+    limit = 20,
+    offset = 0,
+    filterText = "",
+    showPublished = false,
+    skipStepCounts = true,
+}: LoadWorkflowsOptions): Promise<{ data: Workflow[]; headers: Headers }> {
+    const { data, headers } = await getWorkflows({
+        sort_by: sortBy,
+        sort_desc: sortDesc,
+        limit,
+        offset,
+        search: filterText,
+        show_published: showPublished,
+        skip_step_counts: skipStepCounts,
+    });
+    return { data, headers };
+}
+
+export async function updateWorkflow(id: string, changes: object): Promise<Workflow> {
+    const { data } = await axios.put(withPrefix(`/api/workflows/${id}`), changes);
+    return data;
+}
+
+export async function copyWorkflow(id: string, currentOwner: string): Promise<Workflow> {
+    const { data: workflowData } = await axios.get(withPrefix(`/api/workflows/${id}/download`));
+
+    workflowData.name = `Copy of ${workflowData.name}`;
+    const currentUsername = useUserStore().currentUser?.username;
+
+    if (currentUsername !== currentOwner) {
+        workflowData.name += ` shared by user ${currentOwner}`;
+    }
+
+    const { data } = await axios.post(withPrefix("/api/workflows"), { workflow: workflowData });
+    return data;
+}
+
+export async function deleteWorkflow(id: string): Promise<Workflow> {
+    const { data } = await axios.delete(withPrefix(`/api/workflows/${id}`));
+    return data;
+}
+
+export async function undeleteWorkflow(id: string): Promise<Workflow> {
+    const { data } = await axios.post(withPrefix(`/api/workflows/${id}/undelete`));
+    return data;
+}
+
+export async function createWorkflow(workflowName: string, workflowAnnotation: string) {
+    const { data } = await axios.put(withPrefix("/workflow/create"), {
+        workflow_name: workflowName,
+        workflow_annotation: workflowAnnotation,
+    });
+    return data;
+}
+
+export async function getWorkflowFull(workflowId: string) {
+    const { data } = await axios.get(withPrefix(`/workflow/load_workflow?_=true&id=${workflowId}`));
+    return data;
+}
+
+export async function getWorkflowInfo(workflowId: string) {
+    const { data } = await axios.get(withPrefix(`/api/workflows/${workflowId}`));
+    return data;
+}
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index e8312f3814c0..21ff320e7ce1 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -46,6 +46,7 @@ import TrsSearch from "components/Workflow/Import/TrsSearch";
 import InvocationReport from "components/Workflow/InvocationReport";
 import StoredWorkflowInvocations from "components/Workflow/StoredWorkflowInvocations";
 import UserInvocations from "components/Workflow/UserInvocations";
+import WorkflowCreate from "components/Workflow/WorkflowCreate";
 import WorkflowExport from "components/Workflow/WorkflowExport";
 import WorkflowImport from "components/Workflow/WorkflowImport";
 import WorkflowList from "components/Workflow/WorkflowList";
@@ -500,15 +501,8 @@ export function getRouter(Galaxy) {
                     },
                     {
                         path: "workflows/create",
-                        component: FormGeneric,
-                        props: {
-                            url: "/workflow/create",
-                            redirect: "/workflows/edit",
-                            active_tab: "workflow",
-                            submitTitle: "Create",
-                            submitIcon: "fa-check",
-                            cancelRedirect: "/workflows/list",
-                        },
+                        component: WorkflowCreate,
+                        redirect: redirectAnon(),
                     },
                     {
                         path: "workflows/export",
@@ -532,21 +526,26 @@ export function getRouter(Galaxy) {
                             invocationId: route.query.id,
                         }),
                     },
+                    {
+                        path: "workflows/list",
+                        component: WorkflowList,
+                        redirect: redirectAnon(),
+                    },
                     {
                         path: "workflows/list_published",
                         component: WorkflowList,
                         props: (route) => ({
-                            published: true,
+                            activeList: "published",
+                            query: { ...route.query },
                         }),
                     },
                     {
-                        path: "workflows/list",
+                        path: "workflows/list_shared_with_me",
                         component: WorkflowList,
                         redirect: redirectAnon(),
                         props: (route) => ({
-                            importMessage: route.query["message"],
-                            importStatus: route.query["status"],
-                            query: route.query["query"],
+                            activeList: "shared_with_me",
+                            query: { ...route.query },
                         }),
                     },
                     {
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 63b9032ba9b9..e5296255d9ac 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -19,10 +19,12 @@ export interface User extends QuotaUsageResponse {
     tags_used: string[];
     isAnonymous: false;
     is_admin?: boolean;
+    username?: string;
 }
 
 export interface AnonymousUser {
     isAnonymous: true;
+    username?: string;
     is_admin?: false;
 }
 
@@ -33,6 +35,8 @@ interface Preferences {
     favorites: { tools: string[] };
 }
 
+type ListViewMode = "grid" | "list";
+
 export const useUserStore = defineStore("userStore", () => {
     const currentUser = ref<User | AnonymousUser | null>(null);
     const currentPreferences = ref<Preferences | null>(null);
@@ -40,6 +44,7 @@ export const useUserStore = defineStore("userStore", () => {
     // explicitly pass current User, because userStore might not exist yet
     const toggledSideBar = useUserLocalStorage("user-store-toggled-side-bar", "tools", currentUser);
     const showActivityBar = useUserLocalStorage("user-store-show-activity-bar", false, currentUser);
+    const preferredListViewMode = useUserLocalStorage("user-store-preferred-list-view-mode", "grid", currentUser);
 
     let loadPromise: Promise<void> | null = null;
 
@@ -126,6 +131,10 @@ export const useUserStore = defineStore("userStore", () => {
         }
     }
 
+    function setPreferredListViewMode(view: ListViewMode) {
+        preferredListViewMode.value = view;
+    }
+
     function toggleActivityBar() {
         showActivityBar.value = !showActivityBar.value;
     }
@@ -146,9 +155,11 @@ export const useUserStore = defineStore("userStore", () => {
         currentFavorites,
         showActivityBar,
         toggledSideBar,
+        preferredListViewMode,
         loadUser,
         setCurrentUser,
         setCurrentTheme,
+        setPreferredListViewMode,
         addFavoriteTool,
         removeFavoriteTool,
         toggleActivityBar,
diff --git a/client/src/style/scss/breakpoints.scss b/client/src/style/scss/breakpoints.scss
new file mode 100644
index 000000000000..641b39ff9d2b
--- /dev/null
+++ b/client/src/style/scss/breakpoints.scss
@@ -0,0 +1,5 @@
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+$breakpoint-xxl: 1400px;
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 35501d175c55..ec436450cb75 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -459,6 +459,17 @@ $ui-margin-horizontal-large: $margin-v * 2;
     }
 }
 
+.outline-badge {
+    border: 1px solid $brand-primary;
+    color: $brand-primary;
+    background-color: transparent;
+
+    &:hover {
+        background-color: $brand-primary !important;
+        color: white !important;
+    }
+}
+
 .card-container {
     padding: 0.7rem;
     margin-bottom: 0.5rem;
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index f4c3af41393e..48274bf58083 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -125,7 +125,7 @@ export function getOperatorForAlias(alias: Alias): Operator {
     return operatorForAlias[alias];
 }
 
-type HandlerReturn<T> = {
+export type HandlerReturn<T> = {
     attribute: string;
     converter?: Converter<T>;
     query: string;
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 70af6d07d63f..88975e457fb6 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -18,6 +18,10 @@ _:  # global stuff
     right_panel_collapse: '.collapse-button.right'
     by_attribute: '${scope} [${name}="${value}"]'
 
+    confirm_button:
+      type: xpath
+      selector: '//button[contains(text(), "${name}")]'
+
   messages:
     selectors:
       all: '[class*="alert"]'
@@ -582,6 +586,7 @@ tool_form:
 
 workflows:
   selectors:
+    shared_with_me_tab: '#shared-with-me'
     new_button: '#workflow-create'
     import_button: '#workflow-import'
     save_button: '#workflow-save-button'
@@ -591,8 +596,12 @@ workflows:
     advanced_search_name_input: '#workflows-advanced-filter-name'
     advanced_search_tag_input: '#workflows-advanced-filter-tag .stateless-tags'
     advanced_search_submit: '#workflows-advanced-filter-submit'
-    workflow_table: "#workflow-table"
     workflow_rows: "#workflow-table > tbody > tr:not(.b-table-empty-row, [style*='display: none'])"
+    workflows_list: '#workflows-list'
+    workflows_list_empty: '#workflow-list-empty'
+    workflow_not_found_message: '#no-workflow-found'
+    workflow_card: '.workflow-card'
+    workflow_cards: '#workflow-cards'
     external_link: '.workflow-external-link'
     trs_icon: '.workflow-trs-icon'
     pager: '.gx-workflows-grid-pager'
@@ -602,9 +611,19 @@ workflows:
     pager_page_last: '.gx-workflows-grid-pager .gx-grid-pager-last button'
     pager_page_previous: '.gx-workflows-grid-pager .gx-grid-pager-prev button'
     pager_page_active: '.gx-workflows-grid-pager .gx-grid-pager-page.active button'
-    dropdown: '[data-workflow-dropdown*="${id}"]'
-    run_button: '[data-workflow-run*="${id}"]'
-    bookmark_link: '.workflow-bookmark-link'
+    dropdown: '[data-workflow-actions-dropdown="${id}"]'
+    share_button: '#workflow-share-button'
+    download_button: '#workflow-download-button'
+    run_button: '[data-workflow-run]'
+    edit_button: '.workflow-edit-button'
+    rename_input: '#workflow-name-input'
+    workflow_drop_down: '[data-workflow-actions-dropdown]'
+    delete_button: '.workflow-delete-button'
+    view_button: '.workflow-view-button'
+    workflow_preview_container: '.workflow-preview-container'
+    workflow_preview_information: '.workflow-information'
+    view_external_link: ".workflow-view-external-link-button"
+    bookmark_link: '.workflow-bookmark-button-${action}'
     import_file: '.workflow-import-file'
     import_trs_search: '.workflow-import-trs-search'
     import_trs_id: '.workflow-import-trs-id'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index b16bd8e9ba71..f5a250853ecb 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1397,18 +1397,20 @@ def workflow_index_open(self):
         self.home()
         self.click_masthead_workflow()
 
-    def workflow_index_table_elements(self):
-        workflows = self.components.workflows
-        workflows.workflow_table.wait_for_visible()
-        return workflows.workflow_rows.all()
+    def workflow_shared_with_me_open(self):
+        self.workflow_index_open()
+        self.components.workflows.shared_with_me_tab.wait_for_and_click()
+
+    def workflow_card_elements(self):
+        self.components.workflows.workflow_cards.wait_for_visible()
+        return self.components.workflows.workflow_card.all()
 
-    def workflow_index_table_row(self, workflow_index=0):
-        self.components.workflows.workflow_rows.wait_for_element_count_of_at_least(workflow_index + 1)
-        return self.workflow_index_table_elements()[workflow_index]
+    def workflow_card_element(self, workflow_index=0):
+        return self.workflow_card_elements()[workflow_index]
 
     @retry_during_transitions
     def workflow_index_column_text(self, column_index, workflow_index=0):
-        row_element = self.workflow_index_table_row(workflow_index=workflow_index)
+        row_element = self.workflow_card_element(workflow_index=workflow_index)
         columns = row_element.find_elements(By.CSS_SELECTOR, "td")
         return columns[column_index].text
 
@@ -1431,25 +1433,24 @@ def workflow_index_search_for(self, search_term=None):
     def workflow_index_click_import(self):
         return self.components.workflows.import_button.wait_for_and_click()
 
-    def workflow_index_rename(self, new_name, workflow_index=0):
-        self.workflow_index_click_option("Rename", workflow_index=workflow_index)
-        alert = self.driver.switch_to.alert
-        alert.send_keys(new_name)
-        alert.accept()
-        self.components.workflows.workflow_with_name(workflow_name=new_name).wait_for_visible()
+    def workflow_rename(self, new_name, workflow_index=0):
+        workflow = self.workflow_card_element(workflow_index=workflow_index)
+        workflow.find_element(By.CSS_SELECTOR, "[data-workflow-rename]").click()
+        self.components.workflows.rename_input.wait_for_visible().clear()
+        self.components.workflows.rename_input.wait_for_and_send_keys(new_name)
+        self.components.workflows.rename_input.wait_for_and_send_keys(self.keys.ENTER)
 
-    @retry_during_transitions
-    def workflow_index_name(self, workflow_index=0):
-        """Get workflow name for workflow_index'th row."""
-        row_element = self.workflow_index_table_row(workflow_index=workflow_index)
-        workflow_button = row_element.find_element(By.CSS_SELECTOR, ".workflow-dropdown")
-        return workflow_button.text
+    def workflow_delete_by_name(self, name):
+        self.workflow_index_search_for(name)
+        self.components.workflows.workflow_drop_down.wait_for_and_click()
+        self.components.workflows.delete_button.wait_for_and_click()
+        self.sleep_for(self.wait_types.UX_RENDER)
+        self.components._.confirm_button(name="Delete").wait_for_and_click()
 
     @retry_during_transitions
-    def workflow_click_option(self, workflow_selector, workflow_index=0):
-        workflow_row = self.workflow_index_table_row(workflow_index=workflow_index)
-        workflow_button = workflow_row.find_element(By.CSS_SELECTOR, workflow_selector)
-        workflow_button.click()
+    def workflow_index_name(self, workflow_index=0):
+        workflow = self.workflow_card_element(workflow_index=workflow_index)
+        return workflow.find_element(By.CSS_SELECTOR, ".workflow-name").text
 
     def select_dropdown_item(self, option_title):
         menu_element = self.wait_for_selector_visible(".dropdown-menu.show")
@@ -1459,15 +1460,16 @@ def select_dropdown_item(self, option_title):
                 menu_option.click()
                 return True
 
-    def workflow_index_click_option(self, option_title, workflow_index=0):
-        self.workflow_click_option(".workflow-dropdown", workflow_index)
-        if not self.select_dropdown_item(option_title):
-            raise AssertionError(f"Failed to find workflow action option with title [{option_title}]")
+    def workflow_share_click(self):
+        self.components.workflows.share_button.wait_for_and_click()
+
+    def workflow_index_view_external_link(self, workflow_index=0):
+        self.components.workflows.workflow_drop_down.wait_for_and_click()
+        self.components.workflows.view_external_link.wait_for_and_click()
 
     def workflow_index_click_tag_display(self, workflow_index=0):
-        workflow_row_element = self.workflow_index_table_row(workflow_index)
-        tag_display = workflow_row_element.find_element(By.CSS_SELECTOR, ".stateless-tags")
-        tag_display.click()
+        workflow_element = self.workflow_card_element(workflow_index=workflow_index)
+        workflow_element.find_element(By.CSS_SELECTOR, ".stateless-tags .headless-multiselect .toggle-button").click()
 
     def workflow_index_add_tag(self, tag: str, workflow_index: int = 0):
         self.workflow_index_click_tag_display(workflow_index=workflow_index)
@@ -1483,7 +1485,7 @@ def workflow_index_tags(self, workflow_index=0):
 
     @retry_during_transitions
     def workflow_index_tag_elements(self, workflow_index=0):
-        workflow_row_element = self.workflow_index_table_row(workflow_index)
+        workflow_row_element = self.workflow_card_element(workflow_index)
         tag_display = workflow_row_element.find_element(By.CSS_SELECTOR, ".stateless-tags")
         tag_spans = tag_display.find_elements(By.CSS_SELECTOR, ".tag")
         return tag_spans
@@ -1518,11 +1520,12 @@ def tagging_add(self, tags, auto_closes=True, parent_selector=""):
 
             tag_area.send_keys(tag)
             self.send_enter(tag_area)
+        self.send_escape(tag_area)
 
     def workflow_run_with_name(self, name: str):
         self.workflow_index_open()
         self.workflow_index_search_for(name)
-        self.workflow_click_option(".workflow-run")
+        self.components.workflows.run_button.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_RENDER)
 
     def workflow_run_specify_inputs(self, inputs: Dict[str, Any]):
diff --git a/lib/galaxy/webapps/galaxy/buildapp.py b/lib/galaxy/webapps/galaxy/buildapp.py
index 511ae3f6f6c9..2ff3ea8c2e1e 100644
--- a/lib/galaxy/webapps/galaxy/buildapp.py
+++ b/lib/galaxy/webapps/galaxy/buildapp.py
@@ -263,6 +263,7 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/jobs/{job_id}/view")
     webapp.add_client_route("/workflows/list")
     webapp.add_client_route("/workflows/list_published")
+    webapp.add_client_route("/workflows/list_shared_with_me")
     webapp.add_client_route("/workflows/edit")
     webapp.add_client_route("/workflows/export")
     webapp.add_client_route("/workflows/create")
diff --git a/lib/galaxy_test/selenium/framework.py b/lib/galaxy_test/selenium/framework.py
index 7fc13f447204..5b919286dbc3 100644
--- a/lib/galaxy_test/selenium/framework.py
+++ b/lib/galaxy_test/selenium/framework.py
@@ -587,7 +587,8 @@ def assert_item_hid_text(self, hid):
 class UsesWorkflowAssertions(NavigatesGalaxyMixin):
     @retry_assertion_during_transitions
     def _assert_showing_n_workflows(self, n):
-        if (actual_count := len(self.workflow_index_table_elements())) != n:
+        actual_count = len(self.workflow_card_elements())
+        if actual_count != n:
             message = f"Expected {n} workflows to be displayed, based on DOM found {actual_count} workflow rows."
             raise AssertionError(message)
 
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index d8bdd2c34018..f50377591006 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -115,7 +115,7 @@ def test_optional_select_data_field(self):
         editor = self.components.workflow_editor
         workflow_id = self.workflow_populator.upload_yaml_workflow(WORKFLOW_SELECT_FROM_OPTIONAL_DATASET)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         node = editor.node._(label="select_from_dataset_optional")
         node.title.wait_for_and_click()
@@ -492,7 +492,7 @@ def test_editor_tool_upgrade(self):
             exact_tools=True,
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         editor.node._(label="multiple_versions").wait_for_and_click()
         editor.tool_version_button.wait_for_and_click()
@@ -516,7 +516,7 @@ def test_editor_tool_upgrade_message(self):
         workflow_populator = self.workflow_populator
         workflow_populator.upload_yaml_workflow(WORKFLOW_WITH_OLD_TOOL_VERSION, exact_tools=True)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.assert_modal_has_text("Using version '0.2' instead of version '0.0.1'")
         self.screenshot("workflow_editor_tool_upgrade")
         self.components.workflow_editor.modal_button_continue.wait_for_and_click()
@@ -543,7 +543,7 @@ def test_editor_subworkflow_tool_upgrade_message(self):
         outer_workflow["steps"]["nested_workflow"]["run"] = embedded_workflow
         workflow_populator.upload_yaml_workflow(json.dumps(outer_workflow), exact_tools=True)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_modal_has_text("Using version '0.2' instead of version '0.0.1'")
         self.assert_modal_has_text("parameter 'inttest': an integer or workflow parameter is required")
@@ -681,7 +681,7 @@ def test_edit_subworkflow(self):
     def test_editor_duplicate_node(self):
         workflow_id = self.workflow_populator.upload_yaml_workflow(WORKFLOW_SIMPLE_CAT_TWICE)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         cat_node = editor.node._(label="first_cat")
         cat_node.wait_for_and_click()
@@ -741,7 +741,7 @@ def setup_subworkflow(self):
         """
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         editor.canvas_body.wait_for_visible()
         editor.tool_menu.wait_for_visible()
@@ -864,7 +864,7 @@ def test_editor_invalid_tool_state(self):
         workflow_populator = self.workflow_populator
         workflow_populator.upload_yaml_workflow(WORKFLOW_WITH_INVALID_STATE, exact_tools=True)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.assert_modal_has_text("Using version '0.2' instead of version '0.0.1'")
         self.assert_modal_has_text("Using default: '1'")
         self.screenshot("workflow_editor_invalid_state")
@@ -885,7 +885,7 @@ def test_missing_tools(self):
 """
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.assert_modal_has_text("Tool is not installed")
         self.screenshot("workflow_editor_missing_tool")
 
@@ -906,14 +906,14 @@ def assert_workflow_bookmarked_status(target_status):
         self.wait_for_selector_absent_or_hidden(self.modal_body_selector())
         self.components.masthead.workflow.wait_for_and_click()
 
-        self.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
         self.sleep_for(self.wait_types.UX_RENDER)
-        self.components.workflows.bookmark_link.wait_for_and_click()
+        self.components.workflows.bookmark_link(action="add").wait_for_and_click()
         self.components.masthead.workflow.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_TRANSITION)
 
         # search for bookmark in tools menu
         self.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
+        self.sleep_for(self.wait_types.UX_RENDER)
         assert_workflow_bookmarked_status(True)
 
     def tab_to(self, accessible_name, direction="forward"):
@@ -1402,7 +1402,7 @@ def assert_input_not_mapped(self, sink):
     def workflow_index_open_with_name(self, name):
         self.workflow_index_open()
         self.workflow_index_search_for(name)
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
 
     def workflow_upload_yaml_with_random_name(self, content):
         workflow_populator = self.workflow_populator
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index 235eff452d83..7ce0aac51245 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -18,11 +18,11 @@ def test_import_from_url(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
 
-        table_elements = self.workflow_index_table_elements()
-        assert len(table_elements) == 1
+        workflow_cards = self.workflow_card_elements()
+        assert len(workflow_cards) == 1
 
-        new_workflow = table_elements[0].find_element(By.CSS_SELECTOR, ".workflow-dropdown")
-        assert "TestWorkflow1 (imported from URL)" in new_workflow.text, new_workflow.text
+        first_workflow_card = workflow_cards[0].find_element(By.CSS_SELECTOR, ".workflow-name")
+        assert "TestWorkflow1 (imported from URL)" in first_workflow_card.text, first_workflow_card.text
 
     @selenium_test
     def test_import_accessibility(self):
@@ -41,37 +41,23 @@ def test_import_accessibility(self):
     def test_view(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_click_option("View external link")
+        self.workflow_index_view_external_link()
         self.driver.switch_to.window(self.driver.window_handles[1])
         assert self.driver.current_url == EXAMPLE_WORKFLOW_URL_1
         self.driver.close()
         self.driver.switch_to.window(self.driver.window_handles[0])
         self.components.workflows.external_link.wait_for_visible()
-        # font-awesome title handling broken... https://github.com/FortAwesome/vue-fontawesome/issues/63
-        # title_element = external_link_icon.find_element(By.TAG_NAME, "title")
-        # assert EXAMPLE_WORKFLOW_URL_1 in title_element.text
-        self.workflow_index_click_option("View")
-        workflow_show = self.components.workflow_show
 
-        @retry_assertion_during_transitions
-        def check_title():
-            title_item = self.components.workflow_show.title.wait_for_visible()
-            assert "TestWorkflow1" in title_item.text
-
-        check_title()
-        # Since the workflow view now uses the workflow editor, axe violations need to be fixed there first
-        # TODO: fix axe violations in workflow editor
-        # workflow_show._.assert_no_axe_violations_with_impact_of_at_least("moderate")
-        import_link = workflow_show.import_link.wait_for_visible()
-        assert "Import Workflow" in import_link.get_attribute("title")
-        self.screenshot("workflow_manage_view")
-        # TODO: Test display of steps...
+        self.components.workflows.view_button.wait_for_and_click()
+
+        workflow_preview = self.components.workflows.workflow_preview_container.wait_for_visible()
+        assert "TestWorkflow1" in workflow_preview.text
 
     @selenium_test
     def test_rename(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("CoolNewName")
+        self.workflow_rename("CoolNewName")
 
         @retry_assertion_during_transitions
         def check_name():
@@ -83,7 +69,7 @@ def check_name():
     @selenium_test
     def test_workflow_index_accessibility(self):
         self.workflow_index_open()
-        index_table = self.components.workflows.workflow_table
+        index_table = self.components.workflows.workflows_list
         # The selenium_test decorator will check for critical axe violations,
         # this test will be more rigorous but test only a specific component.
         index_table.assert_no_axe_violations_with_impact_of_at_least("critical")
@@ -94,7 +80,7 @@ def test_download(self):
         self._workflow_import_from_url()
         # TODO: fill this test out - getting downloaded files in general through Selenium is a bit tough,
         # going through the motions though should catch a couple potential problems.
-        self.workflow_index_click_option("Download")
+        self.components.workflows.download_button.wait_for_and_click()
 
     @selenium_test
     def test_tagging(self):
@@ -116,16 +102,19 @@ def test_tag_filtering(self):
         self._workflow_import_from_url()
         self.workflow_index_add_tag("mytag")
         self._workflow_import_from_url()
+        self.workflow_index_open()
         self.workflow_index_add_tag("mytag")
         self._workflow_import_from_url()
+        self.workflow_index_open()
         self.workflow_index_add_tag("mytaglonger")
         self._workflow_import_from_url()
+        self.workflow_index_open()
 
         self.workflow_index_search_for("mytag")
         self._assert_showing_n_workflows(3)
         self.screenshot("workflow_manage_search_by_tag_freetext")
         self.workflow_index_search_for("thisisnotatag")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
 
         self.workflow_index_search_for()
         self._assert_showing_n_workflows(4)
@@ -142,12 +131,12 @@ def test_tag_filtering(self):
     def test_index_search(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("searchforthis")
+        self.workflow_rename("searchforthis")
         self._assert_showing_n_workflows(1)
         self.screenshot("workflow_manage_search")
 
         self.workflow_index_search_for("doesnotmatch")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
 
         self.workflow_index_search_for()
         self._assert_showing_n_workflows(1)
@@ -159,11 +148,11 @@ def test_index_search(self):
     def test_index_search_filters(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("searchforthis")
+        self.workflow_rename("searchforthis")
         self._assert_showing_n_workflows(1)
 
         self.workflow_index_search_for("name:doesnotmatch")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
         self.screenshot("workflow_manage_search_no_matches")
 
         self.workflow_index_search_for()
@@ -178,14 +167,14 @@ def test_index_search_filters(self):
         self.screenshot("workflow_manage_search_name_alias")
 
         self.workflow_index_search_for("n:doesnotmatch")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
         self.screenshot("workflow_manage_search_name_alias")
 
     @selenium_test
     def test_index_advanced_search(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("searchforthis")
+        self.workflow_rename("searchforthis")
         self._assert_showing_n_workflows(1)
 
         self.workflow_index_add_tag("mytag")
@@ -211,50 +200,16 @@ def test_index_advanced_search(self):
         self.components.workflows.advanced_search_submit.wait_for_and_click()
         curr_value = self.workflow_index_get_current_filter()
         assert curr_value == "tag:'mytag' tag:'DNEtag'", curr_value
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
 
     @selenium_test
     def test_workflow_delete(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("fordelete")
+        self.workflow_rename("fordelete")
         self._assert_showing_n_workflows(1)
-        self.workflow_index_click_option("Delete")
-        self._assert_showing_n_workflows(0)
+        self.workflow_delete_by_name("fordelete")
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
 
         self.workflow_index_open()
-        self._assert_showing_n_workflows(0)
-
-    @selenium_test
-    def test_pagination(self):
-        self.workflow_index_open()
-        self._workflow_import_from_url()
-        self.workflow_index_open()
-        self._workflow_import_from_url()
-        self.workflow_index_open()
-        self._workflow_import_from_url()
-        self.workflow_index_open()
-        self._workflow_import_from_url()
-        self.workflow_index_open()
-
-        self._assert_showing_n_workflows(4)
-
-        # by default the pager only appears when there are too many workflows
-        # for one page - so verify it is absent and then swap to showing just
-        # one workflow per page.
-        workflows = self.components.workflows
-        workflows.pager.wait_for_absent_or_hidden()
-        self.re_get_with_query_params("rows_per_page=1")
-        self._assert_showing_n_workflows(1)
-        self.screenshot("workflows_paginated_first_page")
-        self._assert_current_page_is(workflows, 1)
-        self._next_page(workflows)
-        self._assert_current_page_is(workflows, 2)
-        self.screenshot("workflows_paginated_next_page")
-        self._previous_page(workflows)
-        self._assert_current_page_is(workflows, 1)
-        self._last_page(workflows)
-        self._assert_current_page_is(workflows, 4)
-        self.screenshot("workflows_paginated_last_page")
-        self._first_page(workflows)
-        self._assert_current_page_is(workflows, 1)
+        self.components.workflows.workflows_list_empty.wait_for_visible()
diff --git a/lib/galaxy_test/selenium/test_workflow_sharing.py b/lib/galaxy_test/selenium/test_workflow_sharing.py
index 81793a35d6a3..bd93e14f004f 100644
--- a/lib/galaxy_test/selenium/test_workflow_sharing.py
+++ b/lib/galaxy_test/selenium/test_workflow_sharing.py
@@ -40,7 +40,7 @@ class TestWorkflowSharing(SeleniumTestCase, UsesWorkflowAssertions):
     def test_sharing_workflow_by_email(self):
         _, user2_email = self.setup_two_users_with_one_shared_workflow(screenshot=True)
         self.submit_login(user2_email)
-        self.workflow_index_open()
+        self.workflow_shared_with_me_open()
         # refine this to restrict checking for that workflow so published workflow don't break this test
         self._assert_showing_n_workflows(1)
         self.screenshot("workflow_shared_workflow")
@@ -49,8 +49,8 @@ def test_sharing_workflow_by_email(self):
     def test_sharing_workflow_by_id(self):
         _, user2_email = self.setup_two_users_with_one_shared_workflow(share_by_id=True)
         self.submit_login(user2_email)
-        self.workflow_index_open()
         # refine this to restrict checking for that workflow so published workflow don't break this test
+        self.workflow_shared_with_me_open()
         self._assert_showing_n_workflows(1)
 
     @selenium_test
@@ -60,7 +60,7 @@ def test_unsharing_workflow(self):
         self.workflow_index_open()
         # refine this to restrict checking for that workflow so published workflow don't break this test
         self._assert_showing_n_workflows(1)
-        self.workflow_index_click_option("Share")
+        self.workflow_share_click()
 
         sharing = self.components.histories.sharing
         self.share_unshare_with_user(sharing, user2_email)
@@ -69,7 +69,7 @@ def test_unsharing_workflow(self):
         self.workflow_index_open()
         # refine this to restrict checking for that workflow so published workflow don't break this test
         self._assert_showing_n_workflows(1)
-        self.workflow_index_click_option("Share")
+        self.workflow_share_click()
 
         self.share_ensure_by_user_available(sharing)
         unshare_user_button = sharing.unshare_with_user_button(email=user2_email)
@@ -78,7 +78,7 @@ def test_unsharing_workflow(self):
         self.logout_if_needed()
         self.submit_login(user2_email)
         self.workflow_index_open()
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflows_list_empty.wait_for_visible()
 
     @selenium_test
     def test_sharing_with_invalid_user(self):
@@ -143,4 +143,4 @@ def _share_workflow_with_user(self, user_id=None, user_email=None, assert_valid=
     def _import_workflow_open_sharing(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_click_option("Share")
+        self.workflow_share_click()
diff --git a/test/integration_selenium/test_trs_import.py b/test/integration_selenium/test_trs_import.py
index 0b5d5be293f3..7d6f4395227a 100644
--- a/test/integration_selenium/test_trs_import.py
+++ b/test/integration_selenium/test_trs_import.py
@@ -50,7 +50,7 @@ def trs_config_dir(cls):
 
     def assert_workflow_imported(self, name):
         self.workflow_index_search_for(name)
-        assert len(self.workflow_index_table_elements()) == 1, f"workflow ${name} not imported"
+        assert len(self.workflow_card_elements()) == 1, f"workflow ${name} not imported"
 
     def test_import_workflow_by_url_dockstore(self):
         import_url = f"workflows/trs_import?trs_server=dockstore.org&trs_version={TRS_VERSION_DOCKSTORE}&trs_id=%23{TRS_ID_DOCKSTORE}"
@@ -63,7 +63,7 @@ def test_import_workflow_by_url_workflowhub(self):
     def _import_workflow_by_url(self, import_url):
         full_url = self.build_url(import_url)
         self.driver.get(full_url)
-        self.components.workflows.workflow_table.wait_for_visible()
+        self.components.workflows.workflow_cards.wait_for_visible()
         self.assert_workflow_imported(WORKFLOW_NAME)
 
     def test_import_by_search_dockstore(self):
diff --git a/test/integration_selenium/test_workflow_repository_tool_update.py b/test/integration_selenium/test_workflow_repository_tool_update.py
index db046e39c691..b81f6935beb4 100644
--- a/test/integration_selenium/test_workflow_repository_tool_update.py
+++ b/test/integration_selenium/test_workflow_repository_tool_update.py
@@ -36,7 +36,7 @@ def test_tool_shed_tool_update_in_workflow_editor(self):
             exact_tools=True,
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         editor.node._(label="compose_text_param").wait_for_and_click()
         editor.tool_version_button.wait_for_and_click()
@@ -65,7 +65,7 @@ def test_tool_shed_unmatched_version_upgrade(self):
         """
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.assert_modal_has_text("Using version '0.1.1' instead of version '0.0.0'")
         self.screenshot("workflow_editor_tool_repository_upgrade")
         self.components.workflow_editor.modal_button_continue.wait_for_and_click()