diff --git a/ui/src/components/code/segments/Task.vue b/ui/src/components/code/segments/Task.vue
index d106dcc0c95..59a4d95077e 100644
--- a/ui/src/components/code/segments/Task.vue
+++ b/ui/src/components/code/segments/Task.vue
@@ -10,22 +10,19 @@
         :is="lastBreadcumb.component.type"
         v-bind="lastBreadcumb.component.props"
         v-on="lastBreadcumb.component.listeners"
+        :model-value="lastBreadcumb.component.props.modelValue"
         @update:model-value="validateTask"
     />
 
     <template v-if="yaml">
-        <div class="d-flex justify-content-between">
-            <div class="d-flex align-items-center">
-                <!-- TODO: Properly handle validation errors -->
-                <ValidationError v-if="false" :errors link />
-            </div>
-
-            <Save
-                @click="saveTask"
-                :what="route.query.section?.toString()"
-                class="w-100 mt-3"
-            />
-        </div>
+        <!-- TODO: Improve the validation for single tasks -->
+        <ValidationError v-if="false" :errors link />
+
+        <Save
+            @click="saveTask"
+            :what="route.query.section?.toString()"
+            class="w-100 mt-3"
+        />
     </template>
 </template>
 
diff --git a/ui/src/components/flows/tasks/OneOfContent.vue b/ui/src/components/flows/tasks/OneOfContent.vue
new file mode 100644
index 00000000000..b60ec313c6a
--- /dev/null
+++ b/ui/src/components/flows/tasks/OneOfContent.vue
@@ -0,0 +1,97 @@
+<template>
+    <el-form-item>
+        <el-select :model-value="selectedSchema" @update:model-value="onSelect">
+            <el-option
+                v-for="schema in schemaOptions"
+                :key="schema.label"
+                :label="schema.label"
+                :value="schema.value"
+            />
+        </el-select>
+    </el-form-item>
+    <el-form label-position="top" v-if="selectedSchema">
+        <component
+            :is="`task-${getType(currentSchema)}`"
+            v-if="currentSchema"
+            :model-value="modelValue"
+            @update:model-value="onInput"
+            :schema="currentSchema"
+            :definitions="definitions"
+        />
+    </el-form>
+</template>
+
+<script>
+    import Task from "./Task";
+    import {mapState} from "vuex";
+
+    export default {
+        mixins: [Task],
+        data() {
+            return {
+                isOpen: false,
+                schemas: [],
+                selectedSchema: undefined,
+            };
+        },
+        created() {
+            this.schemas = this.schema?.oneOf ?? [];
+
+            const schema = this.schemaOptions.find(
+                (sch) => sch.id === this.modelValue.type,
+            );
+            this.onSelect(schema.value);
+        // }
+        },
+        methods: {
+            onSelect(value) {
+                this.selectedSchema = value;
+                // Set up default values
+                if (
+                    this.currentSchema?.properties &&
+                    this.modelValue === undefined
+                ) {
+                    const defaultValues = {};
+                    for (let prop in this.currentSchema.properties) {
+                        if (
+                            this.currentSchema.properties[prop].$required &&
+                            this.currentSchema.properties[prop].default
+                        ) {
+                            defaultValues[prop] =
+                                this.currentSchema.properties[prop].default;
+                        }
+                    }
+                    this.onInput(defaultValues);
+                }
+            },
+        },
+        computed: {
+            ...mapState("code", ["breadcrumbs"]),
+
+            currentSchema() {
+                return (
+                    this.definitions[this.selectedSchema] ??
+                    this.schemaByType[this.selectedSchema]
+                );
+            },
+            schemaByType() {
+                return this.schemas.reduce((acc, schema) => {
+                    acc[schema.type] = schema;
+                    return acc;
+                }, {});
+            },
+            schemaOptions() {
+                return this.schemas.map((schema) => {
+                    const label = schema.$ref
+                        ? schema.$ref.split("/").pop()
+                        : schema.type;
+                    return {
+                        label: label.capitalize(),
+                        value: label,
+                        id: label.split(".").pop().toLowerCase(),
+                    };
+                });
+            },
+        },
+    };
+</script>
diff --git a/ui/src/components/flows/tasks/TaskOneOf.vue b/ui/src/components/flows/tasks/TaskOneOf.vue
index 07eedcdce48..2a6cb2612f3 100644
--- a/ui/src/components/flows/tasks/TaskOneOf.vue
+++ b/ui/src/components/flows/tasks/TaskOneOf.vue
@@ -1,114 +1,48 @@
 <template>
-    <el-input
-        :model-value="JSON.stringify(values)"
-        :disabled="true"
-    >
+    <el-input :model-value="JSON.stringify(values)">
         <template #append>
-            <el-button :icon="Eye" @click="isOpen = true" />
-        </template>
-    </el-input>
-
-    <drawer
-        v-if="isOpen"
-        v-model="isOpen"
-    >
-        <template #header>
-            <code>{{ root }}</code>
-        </template>
-        <el-form-item>
-            <template #label>
-                <span class="d-flex flex-grow-1">
-                    <span class="me-auto">
-                        <code> One of</code>&nbsp;
-                    </span>
-                </span>
-            </template>
-            <el-select
-                :model-value="selectedSchema"
-                @update:model-value="onSelect"
-            >
-                <el-option
-                    v-for="schema in schemaOptions"
-                    :key="schema.label"
-                    :label="schema.label"
-                    :value="schema.value"
-                />
-            </el-select>
-        </el-form-item>
-        <el-form label-position="top" v-if="selectedSchema">
-            <component
-                :is="`task-${getType(currentSchema)}`"
-                v-if="currentSchema"
-                :model-value="modelValue"
-                @update:model-value="onInput"
-                :schema="currentSchema"
-                :definitions="definitions"
+            <el-button
+                :icon="Eye"
+                @click="
+                    () => {
+                        $store.commit('code/addBreadcrumbs', {
+                            breadcrumb: {
+                                label: root,
+                                to: {},
+                                component: h(OneOfContent, {
+                                    modelValue,
+                                    schema,
+                                    definitions,
+                                    'onUpdate:modelValue': onInput,
+                                }),
+                            },
+                            position:
+                                breadcrumbs.length === 2
+                                    ? 2
+                                    : breadcrumbs.length,
+                        });
+                    }
+                "
             />
-        </el-form>
-        <template #footer>
-            <el-button :icon="ContentSave" @click="isOpen = false" type="primary">
-                {{ $t("save") }}
-            </el-button>
         </template>
-    </drawer>
+    </el-input>
 </template>
 
 <script setup>
+    import {h} from "vue";
     import Eye from "vue-material-design-icons/Eye.vue";
-    import ContentSave from "vue-material-design-icons/ContentSave.vue";
+    import OneOfContent from "./OneOfContent.vue";
 </script>
 
 <script>
-    import Task from "./Task"
-    import Drawer from "../../Drawer.vue"
+    import Task from "./Task";
+    import {mapState} from "vuex";
 
     export default {
         mixins: [Task],
-        components: {Drawer},
-        data() {
-            return {
-                isOpen: false,
-                schemas: [],
-                selectedSchema: undefined
-            };
-        },
-        created() {
-            this.schemas = this.schema?.oneOf ?? []
-        },
-        methods: {
-            onSelect(value) {
-                this.selectedSchema = value
-                // Set up default values
-                if (this.currentSchema.properties && this.modelValue === undefined) {
-                    const defaultValues = {};
-                    for (let prop in this.currentSchema.properties) {
-                        if(this.currentSchema.properties[prop].$required && this.currentSchema.properties[prop].default) {
-                            defaultValues[prop] = this.currentSchema.properties[prop].default
-                        }
-                    }
-                    this.onInput(defaultValues);
-                }
-            }
-        },
+
         computed: {
-            currentSchema() {
-                return this.definitions[this.selectedSchema] ?? this.schemaByType[this.selectedSchema]
-            },
-            schemaByType() {
-                return this.schemas.reduce((acc, schema) => {
-                    acc[schema.type] = schema
-                    return acc
-                }, {})
-            },
-            schemaOptions() {
-                return this.schemas.map(schema => {
-                    const label = schema.$ref ? schema.$ref.split("/").pop() : schema.type
-                    return {
-                        label: label.capitalize(),
-                        value: label
-                    }
-                })
-            }
+            ...mapState("code", ["breadcrumbs"]),
         },
     };
 </script>