diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
index 190e8d23fdb3..79941f3395f7 100644
--- a/client/src/components/Panels/Buttons/FavoritesButton.vue
+++ b/client/src/components/Panels/Buttons/FavoritesButton.vue
@@ -14,13 +14,12 @@ library.add(faStar, faRegStar);
 
 interface Props {
     value?: boolean;
-    modelValue?: boolean;
     query?: string;
 }
 
 const props = defineProps<Props>();
 
-const currentValue = computed(() => props.value ?? props.modelValue ?? false);
+const currentValue = computed(() => props.value ?? false);
 const toggle = ref(false);
 
 watchImmediate(
@@ -30,7 +29,7 @@ watchImmediate(
 
 const emit = defineEmits<{
     (e: "change", toggled: boolean): void;
-    (e: "update:modelValue", toggled: boolean): void;
+    (e: "input", toggled: boolean): void;
 }>();
 
 const { isAnonymous } = storeToRefs(useUserStore());
@@ -58,7 +57,7 @@ watch(
 
 function toggleFavorites() {
     toggle.value = !toggle.value;
-    emit("update:modelValue", toggle.value);
+    emit("input", toggle.value);
     emit("change", toggle.value);
 }
 </script>
diff --git a/client/src/components/Workflow/List/WorkflowCard.vue b/client/src/components/Workflow/List/WorkflowCard.vue
index f06481a74d2e..fc52c07a030b 100644
--- a/client/src/components/Workflow/List/WorkflowCard.vue
+++ b/client/src/components/Workflow/List/WorkflowCard.vue
@@ -3,7 +3,7 @@ import { faEdit, faPen, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BLink } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 
 import { copyWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
 import { Toast } from "@/composables/toast";
@@ -15,8 +15,6 @@ import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import WorkflowActions from "@/components/Workflow/List/WorkflowActions.vue";
 import WorkflowActionsExtend from "@/components/Workflow/List/WorkflowActionsExtend.vue";
 import WorkflowIndicators from "@/components/Workflow/List/WorkflowIndicators.vue";
-import WorkflowRename from "@/components/Workflow/List/WorkflowRename.vue";
-import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
 import WorkflowInvocationsCount from "@/components/Workflow/WorkflowInvocationsCount.vue";
 import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
 
@@ -37,17 +35,16 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
     (e: "tagClick", tag: string): void;
-    (e: "refreshList", overlayLoading?: boolean, b?: boolean): void;
+    (e: "refreshList", overlayLoading?: boolean, silent?: boolean): void;
     (e: "updateFilter", key: string, value: any): void;
+    (e: "rename", id: string, name: string): void;
+    (e: "preview", id: string): void;
 }>();
 
 const userStore = useUserStore();
 
 const { isAnonymous } = storeToRefs(userStore);
 
-const showRename = ref(false);
-const showPreview = ref(false);
-
 const workflow = computed(() => props.workflow);
 
 const shared = computed(() => {
@@ -96,15 +93,6 @@ async function onImport() {
     Toast.success("Workflow imported successfully");
 }
 
-function onRenameClose() {
-    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 });
@@ -139,8 +127,7 @@ async function onTagClick(tag: string) {
                     <WorkflowActions
                         :workflow="workflow"
                         :published="publishedView"
-                        @refreshList="emit('refreshList', true)"
-                        @toggleShowPreview="toggleShowPreview" />
+                        @refreshList="emit('refreshList', true)" />
                 </div>
 
                 <span class="workflow-name font-weight-bold">
@@ -148,9 +135,9 @@ async function onTagClick(tag: string) {
                         v-b-tooltip.hover.noninteractive
                         class="workflow-name-preview"
                         title="Preview Workflow"
-                        @click.stop.prevent="toggleShowPreview(true)"
-                        >{{ workflow.name }}</BLink
-                    >
+                        @click.stop.prevent="emit('preview', props.workflow.id)">
+                        {{ workflow.name }}
+                    </BLink>
                     <BButton
                         v-if="!shared && !workflow.deleted"
                         v-b-tooltip.hover.noninteractive
@@ -159,7 +146,7 @@ async function onTagClick(tag: string) {
                         variant="link"
                         size="sm"
                         title="Rename"
-                        @click="showRename = !showRename">
+                        @click="emit('rename', props.workflow.id, props.workflow.name)">
                         <FontAwesomeIcon :icon="faPen" fixed-width />
                     </BButton>
                 </span>
@@ -221,37 +208,10 @@ async function onTagClick(tag: string) {
                     </div>
                 </div>
             </div>
-
-            <WorkflowRename
-                v-if="!isAnonymous && !shared && !workflow.deleted"
-                :id="workflow.id"
-                :show="showRename"
-                :name="workflow.name"
-                @close="onRenameClose" />
-
-            <BModal
-                v-model="showPreview"
-                ok-only
-                size="xl"
-                hide-header
-                dialog-class="workflow-card-preview-modal w-auto"
-                centered>
-                <WorkflowPublished v-if="showPreview" :id="workflow.id" quick-view />
-            </BModal>
         </div>
     </div>
 </template>
 
-<style lang="scss">
-.workflow-card-preview-modal {
-    max-width: min(1400px, calc(100% - 200px));
-
-    .modal-content {
-        height: min(800px, calc(100vh - 80px));
-    }
-}
-</style>
-
 <style scoped lang="scss">
 @import "theme/blue.scss";
 @import "breakpoints.scss";
diff --git a/client/src/components/Workflow/List/WorkflowCardList.vue b/client/src/components/Workflow/List/WorkflowCardList.vue
new file mode 100644
index 000000000000..74e913d444f8
--- /dev/null
+++ b/client/src/components/Workflow/List/WorkflowCardList.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { BModal } from "bootstrap-vue";
+import { reactive, ref } from "vue";
+
+import type { Workflow } from "@/components/Workflow/workflows.services";
+
+import WorkflowCard from "./WorkflowCard.vue";
+import WorkflowRename from "./WorkflowRename.vue";
+import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
+
+interface Props {
+    workflows: Workflow[];
+    gridView?: boolean;
+    hideRuns?: boolean;
+    filterable?: boolean;
+    publishedView?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "tagClick", tag: string): void;
+    (e: "refreshList", overlayLoading?: boolean, silent?: boolean): void;
+    (e: "updateFilter", key: string, value: any): void;
+}>();
+
+const modalOptions = reactive({
+    rename: {
+        id: "",
+        name: "",
+    },
+    preview: {
+        id: "",
+    },
+});
+
+const showRename = ref(false);
+
+function onRenameClose() {
+    showRename.value = false;
+    emit("refreshList", true);
+}
+
+function onRename(id: string, name: string) {
+    modalOptions.rename.id = id;
+    modalOptions.rename.name = name;
+    showRename.value = true;
+}
+
+const showPreview = ref(false);
+
+function onPreview(id: string) {
+    modalOptions.preview.id = id;
+    showPreview.value = true;
+}
+</script>
+
+<template>
+    <div class="workflow-card-list" :class="{ grid: props.gridView }">
+        <WorkflowCard
+            v-for="workflow in props.workflows"
+            :key="workflow.id"
+            :workflow="workflow"
+            :grid-view="props.gridView"
+            :hide-runs="props.hideRuns"
+            :filterable="props.filterable"
+            :published-view="props.publishedView"
+            class="workflow-card"
+            @tagClick="(...args) => emit('tagClick', ...args)"
+            @refreshList="(...args) => emit('refreshList', ...args)"
+            @updateFilter="(...args) => emit('updateFilter', ...args)"
+            @rename="onRename"
+            @preview="onPreview">
+        </WorkflowCard>
+
+        <WorkflowRename
+            :id="modalOptions.rename.id"
+            :show="showRename"
+            :name="modalOptions.rename.name"
+            @close="onRenameClose" />
+
+        <BModal
+            v-model="showPreview"
+            ok-only
+            size="xl"
+            hide-header
+            dialog-class="workflow-card-preview-modal w-auto"
+            centered>
+            <WorkflowPublished v-if="showPreview" :id="modalOptions.preview.id" quick-view />
+        </BModal>
+    </div>
+</template>
+
+<style lang="scss">
+.workflow-card-preview-modal {
+    max-width: min(1400px, calc(100% - 200px));
+
+    .modal-content {
+        height: min(800px, calc(100vh - 80px));
+    }
+}
+</style>
+
+<style scoped lang="scss">
+@import "breakpoints.scss";
+
+.workflow-card-list {
+    container: card-list / inline-size;
+    display: flex;
+    flex-wrap: wrap;
+
+    .workflow-card {
+        width: 100%;
+    }
+
+    &.grid .workflow-card {
+        width: calc(100% / 3);
+
+        @container card-list (max-width: #{$breakpoint-xl}) {
+            width: calc(100% / 2);
+        }
+
+        @container card-list (max-width: #{$breakpoint-sm}) {
+            width: 100%;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index 882fe5b31232..1a917b130b37 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -12,12 +12,12 @@ import { loadWorkflows } from "@/components/Workflow/workflows.services";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 
+import WorkflowCardList from "./WorkflowCardList.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 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/List/WorkflowCard.vue";
 import WorkflowListActions from "@/components/Workflow/List/WorkflowListActions.vue";
 
 library.add(faStar, faTrash);
@@ -308,20 +308,11 @@ onMounted(() => {
             </BAlert>
         </span>
 
-        <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"
+        <BOverlay v-else id="workflow-cards" :show="overlay" rounded="sm" class="cards-list mt-2">
+            <WorkflowCardList
+                :workflows="workflowsLoaded"
                 :published-view="published"
                 :grid-view="view === 'grid'"
-                :class="view === 'grid' ? 'grid-view' : 'list-view'"
                 @refreshList="load"
                 @tagClick="(tag) => updateFilterValue('tag', `'${tag}'`)"
                 @updateFilter="updateFilterValue" />
@@ -361,32 +352,13 @@ onMounted(() => {
     }
 
     .cards-list {
-        container: card-list / inline-size;
         scroll-behavior: smooth;
         min-height: 150px;
+        display: flex;
+        flex-direction: column;
 
         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);
-            }
-        }
-
-        @container card-list (max-width: #{$breakpoint-sm}) {
-            .grid-view {
-                width: 100%;
-            }
-        }
     }
 }
 </style>