diff --git a/client-nuxt/components/WorkflowItemGroups.vue b/client-nuxt/components/WorkflowItemGroups.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c5e7a7a0e163cae2dff2686d34c2f573e7f9e34
--- /dev/null
+++ b/client-nuxt/components/WorkflowItemGroups.vue
@@ -0,0 +1,85 @@
+<template>
+  <v-item-group>
+    <v-container fluid>
+      <v-row>
+        <v-col
+          v-for="workflow in workflows"
+          :key="workflow.id"
+          cols="12"
+          md="4"
+        >
+          <v-item v-slot="{ active, toggle }">
+            <v-card
+              class="d-flex flex-column"
+              @click="
+                toggle($event)
+                selectWorkflow(workflow)
+              "
+            >
+              <v-toolbar elevation="2">
+                <v-toolbar-title class="text-h5">
+                  {{ workflow.name }} </v-toolbar-title
+                ><v-spacer></v-spacer>
+                <v-chip
+                  v-for="tag in workflow.tags"
+                  :key="tag"
+                  color="secondary"
+                >
+                  {{ tag }}</v-chip
+                >
+              </v-toolbar>
+              <v-card-text color="transparent">
+                {{ workflow.annotation }}
+              </v-card-text>
+              <v-divider></v-divider>
+              <v-list dense>
+                <v-subheader>Steps</v-subheader>
+                <template v-for="step in workflow.steps">
+                  <v-list-item v-if="step.tool_id" :key="step.id" dense>
+                    <v-list-item-content>
+                      <v-list-item-title
+                        ><span class="text--disabled">{{ step.id }}. </span>
+                        {{ getToolName(step.tool_id) }}
+                      </v-list-item-title>
+                    </v-list-item-content>
+                    <v-chip x-small>{{ step.tool_version }}</v-chip>
+                  </v-list-item>
+                </template>
+              </v-list>
+              <v-fade-transition>
+                <v-overlay v-if="active" absolute color="primary" opacity="0.2">
+                  <v-icon x-large color="accent darken-1"
+                    >mdi-check-bold</v-icon
+                  >
+                </v-overlay>
+              </v-fade-transition>
+            </v-card>
+          </v-item>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-item-group>
+</template>
+<script>
+export default {
+  model: {
+    prop: 'selectedWorkflow',
+    event: 'selection',
+  },
+  props: {
+    selectedWorklow: { type: Object, default: () => ({}) },
+    workflows: { type: Array, default: () => [] },
+  },
+  methods: {
+    getToolName(toolId) {
+      return toolId.split('/').slice(-2, -1).toString()
+    },
+    getActiveColor(isActive) {
+      return isActive ? 'primary' : 'transparent'
+    },
+    selectWorkflow(workflow) {
+      this.$emit('selection', workflow)
+    },
+  },
+}
+</script>