diff --git a/ui/eslint.config.js b/ui/eslint.config.js
index 7b2c682e17c..fd06d7988b3 100644
--- a/ui/eslint.config.js
+++ b/ui/eslint.config.js
@@ -3,6 +3,8 @@ import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginVue from "eslint-plugin-vue";
 
+const components = (folder) => `src/components/${folder}/**/*.vue`;
+
 /** @type {import('eslint').Linter.Config[]} */
 export default [
     {
@@ -12,8 +14,13 @@ export default [
     {languageOptions: {globals: globals.browser}},
     pluginJs.configs.recommended,
     ...tseslint.configs.recommended,
-     {
-        files: ["**/*.spec.js", "**/*.spec.ts", "vite.config.js", "vitest.config.js"],
+    {
+        files: [
+            "**/*.spec.js",
+            "**/*.spec.ts",
+            "vite.config.js",
+            "vitest.config.js",
+        ],
         languageOptions: {globals: globals.node},
     },
     ...pluginVue.configs["flat/strongly-recommended"],
@@ -66,7 +73,12 @@ export default [
                 },
             ],
             "@typescript-eslint/no-this-alias": "off",
-            "@typescript-eslint/no-explicit-any": "off"
-        }
-    }
+            "@typescript-eslint/no-explicit-any": "off",
+        },
+    },
+    {
+        // Enforce the use of the <script setup> block in components within these paths
+        files: [components("filter"), components("code")],
+        rules: {"vue/component-api-style": ["error", ["script-setup"]]},
+    },
 ];
diff --git a/ui/src/components/Tabs.vue b/ui/src/components/Tabs.vue
index 4579129dfbb..d673a2c31d2 100644
--- a/ui/src/components/Tabs.vue
+++ b/ui/src/components/Tabs.vue
@@ -170,7 +170,7 @@
                     .filter(tab => (this.embedActiveTab ?? this.$route.params.tab) === tab.name)[0] || this.tabs[0];
             },
             isEditorActiveTab() {
-                return this.activeTab.name === "editor";
+                return this.activeTab.name === "edit";
             },
             isNamespaceEditor(){
                 return this.activeTab?.props?.isNamespace === true;
diff --git a/ui/src/components/code/NoCode.vue b/ui/src/components/code/NoCode.vue
new file mode 100644
index 00000000000..31d71d5a69c
--- /dev/null
+++ b/ui/src/components/code/NoCode.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="h-100 overflow-y-auto no-code">
+        <Breadcrumbs :flow="YamlUtils.parse(props.flow)" />
+
+        <hr class="m-0">
+
+        <Editor
+            :creation="route.query.identifier === 'new'"
+            :flow
+            :metadata
+            :schemas
+            @update-metadata="(k, v) => emits('updateMetadata', {[k]: v})"
+            @update-task="(yaml) => emits('updateTask', yaml)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {onBeforeMount, computed, ref} from "vue";
+
+    import {Schemas} from "./utils/types";
+
+    import YamlUtils from "../../utils/yamlUtils";
+
+    import Breadcrumbs from "./components/Breadcrumbs.vue";
+    import Editor from "./segments/Editor.vue";
+
+    const emits = defineEmits(["updateTask", "updateMetadata"]);
+    const props = defineProps({
+        flow: {type: String, required: true},
+    });
+
+    const metadata = computed(() => YamlUtils.getMetadata(props.flow));
+
+    import {useStore} from "vuex";
+    const store = useStore();
+
+    import {useRouter, useRoute} from "vue-router";
+    const router = useRouter();
+    const route = useRoute();
+
+    const schemas = ref<Schemas>({});
+    onBeforeMount(async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {section, identifier, type, ...rest} = route.query;
+        router.replace({query: {...rest}});
+
+        schemas.value = await store.dispatch("plugin/loadSchemaType");
+    });
+</script>
+
+<style scoped lang="scss">
+@import "./styles/code.scss";
+</style>
diff --git a/ui/src/components/code/README.md b/ui/src/components/code/README.md
new file mode 100644
index 00000000000..0f295a34f41
--- /dev/null
+++ b/ui/src/components/code/README.md
@@ -0,0 +1,5 @@
+### Guide on How to Handle the `NoCode` Editor
+
+> Code within `Vue` components must be written using the `<script setup>` block, as enforced by the `ESLint` rule.
+
+This is a brief guide on working with the `NoCode` editor component.
diff --git a/ui/src/components/code/components/Add.vue b/ui/src/components/code/components/Add.vue
new file mode 100644
index 00000000000..7a19445ce73
--- /dev/null
+++ b/ui/src/components/code/components/Add.vue
@@ -0,0 +1,23 @@
+<template>
+    <div @click="emits('add', props.what)" class="pb-3 adding">
+        {{ t("no_code.adding", {what: props.what}) }}
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {useI18n} from "vue-i18n";
+    const {t} = useI18n({useScope: "global"});
+
+    const emits = defineEmits(["add"]);
+    const props = defineProps({what: {type: String, required: true}});
+</script>
+
+<style scoped lang="scss">
+@import "../styles/code.scss";
+
+.adding {
+    cursor: pointer;
+    color: $code-gray-700;
+    font-size: $code-font-sm;
+}
+</style>
diff --git a/ui/src/components/code/components/Breadcrumbs.vue b/ui/src/components/code/components/Breadcrumbs.vue
new file mode 100644
index 00000000000..51607ab3e8b
--- /dev/null
+++ b/ui/src/components/code/components/Breadcrumbs.vue
@@ -0,0 +1,61 @@
+<template>
+    <el-breadcrumb class="p-4">
+        <el-breadcrumb-item
+            v-for="(breadcrumb, index) in breadcrumbs"
+            :key="index"
+            class="item"
+        >
+            <router-link :to="breadcrumb.to">
+                {{ breadcrumb.label }}
+            </router-link>
+        </el-breadcrumb-item>
+    </el-breadcrumb>
+</template>
+
+<script setup lang="ts">
+    import {computed} from "vue";
+
+    import {Breadcrumb} from "../utils/types";
+
+    import {useRoute} from "vue-router";
+    const route = useRoute();
+
+    import {useI18n} from "vue-i18n";
+    const {t} = useI18n({useScope: "global"});
+
+    const props = defineProps({flow: {type: Object, required: true}});
+
+    const params = {
+        namespace: route.params.namespace,
+        id: props.flow.id ?? "new",
+        tab: "edit",
+    };
+
+    const breadcrumbs = computed<Breadcrumb[]>(() => {
+        return [
+            {
+                label: props.flow.id ?? t("create_flow"),
+                to: {name: route.name, params},
+            },
+            ...(route.query.section
+                ? [
+                    {
+                        label:
+                            route.query.identifier === "new"
+                                ? t(`no_code.creation.${route.query.section}`)
+                                : route.query.identifier,
+                        to: {name: route.name, params},
+                    },
+                ]
+                : []),
+        ];
+    });
+</script>
+
+<style scoped lang="scss">
+@import "../styles/code.scss";
+
+.item:last-child > .el-breadcrumb__inner > a {
+    color: $code-primary !important;
+}
+</style>
diff --git a/ui/src/components/code/components/Save.vue b/ui/src/components/code/components/Save.vue
new file mode 100644
index 00000000000..3976b81a67f
--- /dev/null
+++ b/ui/src/components/code/components/Save.vue
@@ -0,0 +1,16 @@
+<template>
+    <el-button type="primary" :icon="ContentSave">
+        {{ t(`no_code.save.${props.what}`) }}
+    </el-button>
+</template>
+
+<script setup lang="ts">
+    import {ContentSave} from "../utils/icons";
+
+    const props = defineProps({
+        what: {type: String, required: true, default: "tasks"},
+    });
+
+    import {useI18n} from "vue-i18n";
+    const {t} = useI18n({useScope: "global"});
+</script>
diff --git a/ui/src/components/code/components/collapse/Collapse.vue b/ui/src/components/code/components/collapse/Collapse.vue
new file mode 100644
index 00000000000..e3ea22628f2
--- /dev/null
+++ b/ui/src/components/code/components/collapse/Collapse.vue
@@ -0,0 +1,79 @@
+<template>
+    <el-collapse v-model="expanded" class="mt-3 collapse">
+        <el-collapse-item
+            v-for="(item, index) in props.items"
+            :key="index"
+            :name="item.title"
+            :title="`${item.title}${item.elements ? ` (${item.elements.length})` : ''}`"
+            :class="{creation: props.creation}"
+        >
+            <template v-if="creation" #icon>
+                <Creation :section="item.title" />
+            </template>
+
+            <template v-if="creation">
+                <Element
+                    v-for="(element, elementIndex) in item.elements"
+                    :key="elementIndex"
+                    :section="item.title"
+                    :element
+                />
+            </template>
+
+            <slot name="content" />
+        </el-collapse-item>
+    </el-collapse>
+</template>
+
+<script setup lang="ts">
+    import {PropType, ref} from "vue";
+
+    import {CollapseItem} from "../../utils/types";
+
+    import Creation from "./buttons/Creation.vue";
+    import Element from "./Element.vue";
+
+    const props = defineProps({
+        items: {
+            type: Array as PropType<CollapseItem[]>,
+            required: true,
+        },
+        creation: {type: Boolean, default: false},
+    });
+    const expanded = ref<CollapseItem["title"][]>([]);
+
+    if (props.creation) {
+        props.items.forEach((item) => {
+            if (item.elements?.length) expanded.value.push(item.title);
+        });
+    }
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/code.scss";
+
+.collapse {
+    & * {
+        font-size: $code-font-sm;
+    }
+
+    :deep(*) {
+        --el-collapse-header-bg-color: initial;
+        --el-collapse-header-text-color: #{$code-gray-700};
+        --el-collapse-content-bg-color: initial;
+
+        .el-collapse-item__header,
+        .el-collapse-item__content {
+            padding: 0.5rem 0;
+        }
+
+        .el-collapse-item__header {
+            justify-content: space-between;
+
+            &.is-active {
+                color: $code-primary;
+            }
+        }
+    }
+}
+</style>
diff --git a/ui/src/components/code/components/collapse/Element.vue b/ui/src/components/code/components/collapse/Element.vue
new file mode 100644
index 00000000000..c2d18317bbd
--- /dev/null
+++ b/ui/src/components/code/components/collapse/Element.vue
@@ -0,0 +1,62 @@
+<template>
+    <div @click="handleClick" class="d-flex my-2 p-2 rounded element">
+        <div class="me-2 icon">
+            <TaskIcon :cls="props.element.type" :icons only-icon />
+        </div>
+
+        <div class="flex-grow-1 label">
+            {{ props.element.id }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {computed} from "vue";
+
+    // TODO: Update import once https://github.com/kestra-io/kestra/pull/6643 is merged
+    import TaskIcon from "@kestra-io/ui-libs/src/components/misc/TaskIcon.vue";
+
+    const props = defineProps({
+        section: {type: String, required: true},
+        element: {type: Object, required: true},
+    });
+
+    import {useStore} from "vuex";
+    const store = useStore();
+
+    const icons = computed(() => store.state.plugin.icons);
+
+    import {useRouter, useRoute} from "vue-router";
+    const router = useRouter();
+    const route = useRoute();
+
+    const handleClick = () => {
+        router.replace({
+            query: {
+                ...route.query,
+                section: props.section.toLowerCase(),
+                identifier: props.element.id,
+                type: props.element.type,
+            },
+        });
+    };
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/code.scss";
+
+.element {
+    cursor: pointer;
+    background-color: $code-card-color;
+    border: 1px solid $code-border-color;
+
+    & > .icon {
+        width: 1.25rem;
+    }
+
+    & > .label {
+        color: initial;
+        font-size: $code-font-sm;
+    }
+}
+</style>
diff --git a/ui/src/components/code/components/collapse/buttons/Creation.vue b/ui/src/components/code/components/collapse/buttons/Creation.vue
new file mode 100644
index 00000000000..27d4ee2d6f3
--- /dev/null
+++ b/ui/src/components/code/components/collapse/buttons/Creation.vue
@@ -0,0 +1,28 @@
+<template>
+    <el-button @click.prevent.stop="handleClick()" type="primary" :icon="Plus">
+        {{ t("add") }}
+    </el-button>
+</template>
+
+<script setup lang="ts">
+    import {Plus} from "../../../utils/icons";
+
+    import {useRouter, useRoute} from "vue-router";
+    const router = useRouter();
+    const route = useRoute();
+
+    import {useI18n} from "vue-i18n";
+    const {t} = useI18n({useScope: "global"});
+
+    const props = defineProps({section: {type: String, required: true}});
+
+    const handleClick = () => {
+        router.replace({
+            query: {
+                ...route.query,
+                section: props.section.toLowerCase(),
+                identifier: "new",
+            },
+        });
+    };
+</script>
diff --git a/ui/src/components/code/components/inputs/InputLabel.vue b/ui/src/components/code/components/inputs/InputLabel.vue
new file mode 100644
index 00000000000..55149589078
--- /dev/null
+++ b/ui/src/components/code/components/inputs/InputLabel.vue
@@ -0,0 +1,102 @@
+<template>
+    <span v-if="required" class="me-1 text-danger">*</span>
+    <span class="label">{{ label }}</span>
+    <div class="mt-1 mb-2 wrapper">
+        <el-row
+            v-for="(value, key, index) in props.modelValue"
+            :key="index"
+            :gutter="10"
+        >
+            <el-col :span="6">
+                <InputText
+                    :model-value="key"
+                    @update:model-value="(changed) => updateKey(key, changed)"
+                />
+            </el-col>
+            <el-col :span="16">
+                <InputText
+                    :v-model="value"
+                    @update:model-value="(changed) => updateValue(key, changed)"
+                />
+            </el-col>
+            <el-col :span="2" class="col align-self-center delete">
+                <DeleteOutline @click="removeLabel(key)" />
+            </el-col>
+        </el-row>
+
+        <Add what="label" @add="addLabel()" />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {PropType} from "vue";
+
+    import {LabelField} from "../../utils/types";
+
+    import {DeleteOutline} from "../../utils/icons";
+
+    import InputText from "./InputText.vue";
+    import Add from "../Add.vue";
+
+    const emits = defineEmits(["update:modelValue"]);
+    const props = defineProps({
+        modelValue: {
+            type: Array as PropType<LabelField["value"]>,
+            default: undefined,
+        },
+        label: {type: String, required: true},
+        required: {type: Boolean, default: false},
+    });
+
+    const addLabel = () => {
+        emits("update:modelValue", {...props.modelValue, "": ""});
+    };
+    const removeLabel = (key: any) => {
+        const values = {...props.modelValue};
+        delete values[key];
+
+        emits("update:modelValue", values);
+    };
+    const updateKey = (old, changed) => {
+        const values = {...props.modelValue};
+
+        // Create an array of key-value pairs and preserve order
+        const entries = Object.entries(values);
+
+        // Find the index of the old key
+        const index = entries.findIndex(([key]) => key === old);
+
+        if (index !== -1) {
+            // Get the value of the old key
+            const [value] = entries[index];
+
+            // Remove the old key from the entries
+            entries.splice(index, 1);
+
+            // Add the new key with the same value
+            entries.splice(index, 0, [changed, value]);
+
+            // Rebuild the object while keeping the order
+            const updatedValues = Object.fromEntries(entries);
+
+            // Emit the updated object
+            emits("update:modelValue", updatedValues);
+        }
+    };
+    const updateValue = (key, value) => {
+        const values = {...props.modelValue};
+        values[key] = value;
+        emits("update:modelValue", values);
+    };
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/code.scss";
+
+.delete {
+    cursor: pointer;
+    padding-left: 0;
+    color: $code-gray-700;
+    text-align: right;
+}
+</style>
diff --git a/ui/src/components/code/components/inputs/InputSwitch.vue b/ui/src/components/code/components/inputs/InputSwitch.vue
new file mode 100644
index 00000000000..8b47310b6a2
--- /dev/null
+++ b/ui/src/components/code/components/inputs/InputSwitch.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="py-3">
+        <span v-if="required" class="me-1 text-danger">*</span>
+        <span class="me-3 label">{{ label }}:</span>
+        <span class="wrapper">
+            <el-switch v-model="input" @input="handleInput" :disabled />
+        </span>
+
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {ref, watch} from "vue";
+
+    const emits = defineEmits(["update:modelValue"]);
+    const props = defineProps({
+        modelValue: {type: [String, Number, Boolean], default: undefined},
+        label: {type: String, required: true},
+        required: {type: Boolean, default: false},
+        disabled: {type: Boolean, default: false},
+    });
+
+    const input = ref(props.modelValue);
+
+    const handleInput = (value: string) => {
+        emits("update:modelValue", value);
+    };
+
+    watch(
+        () => props.modelValue,
+        (newValue) => {
+            if (newValue !== input.value) {
+                input.value = newValue;
+            }
+        },
+    );
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/code.scss";
+</style>
diff --git a/ui/src/components/code/components/inputs/InputText.vue b/ui/src/components/code/components/inputs/InputText.vue
new file mode 100644
index 00000000000..0a51a2f85d8
--- /dev/null
+++ b/ui/src/components/code/components/inputs/InputText.vue
@@ -0,0 +1,38 @@
+<template>
+    <span v-if="required" class="me-1 text-danger">*</span>
+    <span class="label">{{ label }}</span>
+    <div class="mt-1 mb-2 wrapper">
+        <el-input v-model="input" @input="handleInput" :disabled />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {ref, watch} from "vue";
+
+    const emits = defineEmits(["update:modelValue"]);
+    const props = defineProps({
+        modelValue: {type: [String, Number, Boolean], default: undefined},
+        label: {type: String, default: ""},
+        required: {type: Boolean, default: false},
+        disabled: {type: Boolean, default: false},
+    });
+
+    const input = ref(props.modelValue);
+
+    const handleInput = (value: string) => {
+        emits("update:modelValue", value);
+    };
+
+    watch(
+        () => props.modelValue,
+        (newValue) => {
+            if (newValue !== input.value) {
+                input.value = newValue;
+            }
+        },
+    );
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/code.scss";
+</style>
diff --git a/ui/src/components/code/segments/Editor.vue b/ui/src/components/code/segments/Editor.vue
new file mode 100644
index 00000000000..5869bce2f47
--- /dev/null
+++ b/ui/src/components/code/segments/Editor.vue
@@ -0,0 +1,169 @@
+<template>
+    <div class="p-4">
+        <template v-if="!route.query.section && !route.query.identifier">
+            <component
+                v-for="([k, v], index) in Object.entries(fields.main)"
+                :key="index"
+                :is="v.component"
+                v-model="v.value"
+                v-bind="trimmed(v)"
+                @update:model-value="emits('updateMetadata', k, v.value)"
+            />
+
+            <Collapse :items="sections.main">
+                <template #content>
+                    <component
+                        v-for="([k, v], index) in Object.entries(
+                            fields.general,
+                        )"
+                        :key="index"
+                        :is="v.component"
+                        v-model="v.value"
+                        v-bind="trimmed(v)"
+                        @update:model-value="
+                            emits('updateMetadata', k, v.value)
+                        "
+                    />
+                </template>
+            </Collapse>
+
+            <hr class="m-0 mt-3">
+
+            <Collapse :items="sections.segments" creation />
+        </template>
+
+        <Task
+            v-else
+            :flow
+            :creation
+            @update-task="(yaml) => emits('updateTask', yaml)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {ref, shallowRef} from "vue";
+
+    import {Field, Fields, Sections} from "../utils/types";
+
+    import Collapse from "../components/collapse/Collapse.vue";
+    import InputText from "../components/inputs/InputText.vue";
+    import InputSwitch from "../components/inputs/InputSwitch.vue";
+    import InputLabel from "../components/inputs/InputLabel.vue";
+
+    import MetadataInputs from "../../flows/MetadataInputs.vue";
+    import MetadataVariables from "../../flows/MetadataVariables.vue";
+
+    import Task from "./Task.vue";
+
+    // const CONCURRENCY = "io.kestra.core.models.flows.Concurrency";
+
+    import {useRoute} from "vue-router";
+    const route = useRoute();
+
+    import {useI18n} from "vue-i18n";
+    const {t} = useI18n({useScope: "global"});
+
+    const emits = defineEmits(["updateTask", "updateMetadata"]);
+
+    const props = defineProps({
+        creation: {type: Boolean, default: false},
+        flow: {type: String, required: true},
+        metadata: {type: Object, required: true},
+        schemas: {type: Object, required: true},
+    });
+
+    const trimmed = (field: Field) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {component, value, ...rest} = field;
+
+        return rest;
+    };
+
+    const fields = ref<Fields>({
+        main: {
+            id: {
+                component: shallowRef(InputText),
+                value: props.metadata.id,
+                label: t("no_code.fields.main.flow_id"),
+                required: true,
+                disabled: !props.creation,
+            },
+            namespace: {
+                component: shallowRef(InputText),
+                value: props.metadata.namespace,
+                label: t("no_code.fields.main.namespace"),
+                required: true,
+                disabled: !props.creation,
+            },
+            description: {
+                component: shallowRef(InputText),
+                value: props.metadata.description,
+                label: t("no_code.fields.main.description"),
+            },
+        },
+        general: {
+            retry: {
+                component: shallowRef(InputText),
+                value: props.metadata.retry,
+                label: t("no_code.fields.general.retry"),
+            },
+            labels: {
+                component: shallowRef(InputLabel),
+                value: props.metadata.labels,
+                label: t("no_code.fields.general.labels"),
+            },
+            inputs: {
+                component: shallowRef(MetadataInputs),
+                value: props.metadata.inputs,
+                label: t("no_code.fields.general.inputs"),
+                inputs: props.metadata.inputs,
+            },
+            outputs: {
+                component: shallowRef(InputText),
+                value: props.metadata.outputs,
+                label: t("no_code.fields.general.outputs"),
+            },
+            variables: {
+                component: shallowRef(MetadataVariables),
+                value: props.metadata.variables,
+                label: t("no_code.fields.general.variables"),
+                variables: props.metadata.variables,
+            },
+            // concurrency: {
+            //     component: shallowRef(InputSwitch), // TODO: To improve slot content
+            //     value: props.metadata.concurrency,
+            //     label: t("no_code.fields.general.concurrency"),
+            //     schema: props.schemas?.definitions?.[CONCURRENCY] ?? {},
+            //     root: "concurrency",
+            // },
+            pluginDefaults: {
+                component: shallowRef(InputText),
+                value: props.metadata.pluginDefaults,
+                label: t("no_code.fields.general.plugin_defaults"),
+            },
+            disabled: {
+                component: shallowRef(InputSwitch),
+                value: props.metadata.disabled,
+                label: t("no_code.fields.general.disabled"),
+            },
+        },
+    });
+
+    import YamlUtils from "../../../utils/yamlUtils";
+    const getSectionTitle = (label: string, elements = []) => {
+        const title = t(`no_code.sections.${label}`);
+        return {title, elements};
+    };
+    const sections = ref<Sections>({
+        main: [{title: t("no_code.sections.general")}],
+        segments: [
+            getSectionTitle("tasks", YamlUtils.parse(props.flow).tasks ?? []),
+            getSectionTitle("triggers", YamlUtils.parse(props.flow).triggers ?? []),
+            getSectionTitle(
+                "error_handlers",
+                YamlUtils.parse(props.flow).errors ?? [],
+            ),
+        ],
+    });
+</script>
diff --git a/ui/src/components/code/segments/Task.vue b/ui/src/components/code/segments/Task.vue
new file mode 100644
index 00000000000..52619b11339
--- /dev/null
+++ b/ui/src/components/code/segments/Task.vue
@@ -0,0 +1,118 @@
+<template>
+    <TaskEditor v-model="yaml" :section @update:model-value="validateTask" />
+
+    <hr>
+
+    <div class="d-flex justify-content-between">
+        <div class="d-flex align-items-center">
+            <ValidationError :errors link />
+        </div>
+
+        <Save @click="saveTask" :what="route.query.section?.toString()" />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {ref, watch, computed} from "vue";
+
+    const emits = defineEmits(["updateTask"]);
+    const props = defineProps({
+        flow: {type: String, required: true},
+        creation: {type: Boolean, default: false},
+    });
+
+    import {useRoute} from "vue-router";
+    const route = useRoute();
+
+    import {SECTIONS} from ".././../../utils/constants";
+    const section = ref(SECTIONS.TASKS);
+
+    import TaskEditor from "../../../components/flows/TaskEditor.vue";
+    import YamlUtils from "../../../utils/yamlUtils";
+
+    const yaml = ref(
+        YamlUtils.extractTask(props.flow, route.query.identifier)?.toString() || "",
+    );
+
+    watch(
+        () => route.query.section,
+        (value) => {
+            section.value = SECTIONS[value === "triggers" ? "TRIGGERS" : "TASKS"];
+        },
+        {immediate: true},
+    );
+
+    watch(
+        () => route.query.identifier,
+        (value) => {
+            if (value === "new") {
+                yaml.value = "";
+            } else {
+                yaml.value =
+                    YamlUtils.extractTask(props.flow, value)?.toString() || "";
+            }
+        },
+        {immediate: true},
+    );
+
+    import ValidationError from "../../../components/flows/ValidationError.vue";
+
+    const CURRENT = ref(null);
+    const validateTask = (task) => {
+        store
+            .dispatch("flow/validateTask", {task, section: section.value})
+            .then(() => (yaml.value = task));
+
+        CURRENT.value = task;
+    };
+
+    import {useStore} from "vuex";
+    const store = useStore();
+
+    const errors = computed(() => store.getters["flow/taskError"]);
+
+    import Save from "../components/Save.vue";
+    const saveTask = () => {
+        const source = props.flow;
+
+        const task = YamlUtils.extractTask(
+            yaml.value,
+            YamlUtils.parse(yaml.value).id,
+        );
+
+        if (route.query.section === SECTIONS.TRIGGERS.toLowerCase()) {
+            console.log("Update trigger");
+
+            const existingTask = YamlUtils.checkTaskAlreadyExist(
+                source,
+                CURRENT.value,
+            );
+            if (existingTask) {
+                store.dispatch("core/showMessage", {
+                    variant: "error",
+                    title: "Trigger Id already exist",
+                    message: `Trigger Id ${existingTask} already exist in the flow.`,
+                });
+                return;
+            }
+
+            emits("updateTask", YamlUtils.insertTrigger(source, CURRENT.value));
+            CURRENT.value = null;
+        } else {
+            const action = props.creation
+                ? YamlUtils.insertTask(
+                    source,
+                    YamlUtils.getLastTask(source),
+                    task,
+                    "after",
+                )
+                : YamlUtils.replaceTaskInDocument(
+                    source,
+                    route.query.identifier,
+                    task,
+                );
+
+            emits("updateTask", action);
+        }
+    };
+</script>
diff --git a/ui/src/components/code/styles/code.scss b/ui/src/components/code/styles/code.scss
new file mode 100644
index 00000000000..62323678d7b
--- /dev/null
+++ b/ui/src/components/code/styles/code.scss
@@ -0,0 +1,39 @@
+// Coloring
+$code-primary: var(--ks-content-link);
+$code-gray-700: var(--bs-gray-700);
+$code-card-color: var(--ks-background-card);
+$code-border-color: var(--ks-border-primary);
+
+// Typography
+$code-font-sm: var(--el-font-size-small);
+
+.no-code {
+    &::-webkit-scrollbar {
+        height: 5px;
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $code-card-color
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $code-border-color;
+        border-radius: 0px;
+    }
+}
+
+.label {
+    color: $code-gray-700;
+    font-size: $code-font-sm;
+}
+
+.wrapper {
+    :deep(*) {
+        --el-disabled-text-color: #{$code-gray-700};
+
+        .el-input__inner {
+            font-size: $code-font-sm;
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui/src/components/code/utils/icons.ts b/ui/src/components/code/utils/icons.ts
new file mode 100644
index 00000000000..79e2b4e7ecc
--- /dev/null
+++ b/ui/src/components/code/utils/icons.ts
@@ -0,0 +1,5 @@
+import Plus from "vue-material-design-icons/Plus.vue";
+import ContentSave from "vue-material-design-icons/ContentSave.vue";
+import DeleteOutline from "vue-material-design-icons/DeleteOutline.vue";
+
+export {Plus, ContentSave, DeleteOutline};
diff --git a/ui/src/components/code/utils/types.ts b/ui/src/components/code/utils/types.ts
new file mode 100644
index 00000000000..0b2d55d9594
--- /dev/null
+++ b/ui/src/components/code/utils/types.ts
@@ -0,0 +1,75 @@
+import {defineComponent} from "vue";
+import type {RouteRecordName, RouteParams} from "vue-router";
+
+export type Schemas = {
+    $ref?: string;
+    $schema?: string;
+    definitions?: {
+        [key: string]: object;
+    };
+};
+
+export type Field = {
+    component: ReturnType<typeof defineComponent>;
+    value: any;
+    label: string;
+    required?: boolean;
+    disabled?: boolean;
+};
+
+export type LabelField = Omit<Field, "value"> & {
+    value: [string, string][];
+};
+
+type InputField = Field & {
+    inputs: any[];
+};
+
+type VariableField = Field & {
+    variables: any[];
+};
+
+type Main = {
+    id: Field;
+    namespace: Field;
+    description: Field;
+};
+
+type ConcurrencyField = Field & {
+    root: string;
+    schema: object;
+};
+
+type General = {
+    retry: Field;
+    labels: LabelField;
+    inputs: InputField;
+    outputs: Field;
+    variables: VariableField;
+    concurrency: ConcurrencyField;
+    pluginDefaults: Field;
+    disabled: Field;
+};
+
+export type Fields = {
+    main: Main;
+    general: General;
+};
+
+export type Breadcrumb = {
+    label: string;
+    to: {
+        name: RouteRecordName;
+        params: RouteParams;
+    };
+};
+
+export type CollapseItem = {
+    title: string;
+    elements?: Record<string, any>[];
+};
+
+export type Sections = {
+    main: CollapseItem[];
+    segments: CollapseItem[];
+};
diff --git a/ui/src/components/executions/ExecutionRootTopBar.vue b/ui/src/components/executions/ExecutionRootTopBar.vue
index 34030aa217b..1dd6dbfb4f2 100644
--- a/ui/src/components/executions/ExecutionRootTopBar.vue
+++ b/ui/src/components/executions/ExecutionRootTopBar.vue
@@ -78,7 +78,7 @@
                     name: "flows/update", params: {
                         namespace: this.$route.params.namespace,
                         id: this.$route.params.flowId,
-                        tab: "editor",
+                        tab: "edit",
                         tenant: this.$route.params.tenant
                     }
                 })
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 217852466de..30e555ff1e0 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -590,9 +590,6 @@
             isDisplayedTop() {
                 return this.embed === false && this.filter
             },
-            filterStorageKey() {
-                return storageKeys.EXECUTIONS_FILTERS
-            },
             states() {
                 return [ State.FAILED, State.SUCCESS, State.WARNING, State.CANCELLED,].map(value => {
                     return {
@@ -938,7 +935,7 @@
                     name: "flows/update", params: {
                         namespace: this.flow.namespace,
                         id: this.flow.id,
-                        tab: "editor",
+                        tab: "edit",
                         tenant: this.$route.params.tenant
                     }
                 })
diff --git a/ui/src/components/filter/KestraFilter.vue b/ui/src/components/filter/KestraFilter.vue
index 4d9a03e0219..29c2cefab7d 100644
--- a/ui/src/components/filter/KestraFilter.vue
+++ b/ui/src/components/filter/KestraFilter.vue
@@ -151,7 +151,7 @@
     import KestraIcon from "../Kicon.vue";
     import DateRange from "../layout/DateRange.vue";
 
-    import {Magnify} from "./utils/icons.js";
+    import {Magnify} from "./utils/icons";
 
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
@@ -189,7 +189,7 @@
 
     const ITEMS_PREFIX = props.prefix ?? String(route.name);
 
-    import {useFilters} from "./composables/useFilters.js";
+    import {useFilters} from "./composables/useFilters";
     const {COMPARATORS, OPTIONS} = useFilters(ITEMS_PREFIX);
 
     const select = ref<InstanceType<typeof ElSelect> | null>(null);
@@ -499,7 +499,7 @@
         select.value?.focus();
     };
 
-    import {encodeParams, decodeParams} from "./utils/helpers.js";
+    import {encodeParams, decodeParams} from "./utils/helpers";
 
     const triggerSearch = () => {
         if (props.searchCallback) return;
diff --git a/ui/src/components/filter/README.md b/ui/src/components/filter/README.md
index 40727e0e4f9..47eef4a1edf 100644
--- a/ui/src/components/filter/README.md
+++ b/ui/src/components/filter/README.md
@@ -1,16 +1,19 @@
 ### Guide on How to Handle `Filters`
 
-When adding a completely new filter, follow these steps:
+> Code within `Vue` components must be written using the `<script setup>` block, as enforced by the `ESLint` rule.
+
+When adding a new filter, follow these steps:
 
 1. **Update the `OPTIONS` Array**  
-   Add a new object to the `OPTIONS` array inside the `./composables/useFilters.ts` component.  
-   If necessary, also add a corresponding comparator to the appropriate array.
+   Add a new object to the `OPTIONS` array inside the `./composables/useFilters.ts` file.  
+   If needed, also add a corresponding comparator to the appropriate array.
 
 2. **Provide a Value for the New Filter**  
-   Ensure the new filter has an assigned value. You can do this in one of the following locations:  
-   - `./composables/useValues.ts`  
-   - Directly inside the `./KestraFilter.vue` component.
+   Ensure the new filter has an assigned value. You can do this in one of the following locations:
+
+   - `./composables/useValues.ts`
+   - Directly within the `./KestraFilter.vue` component.
 
 3. **Amend the `valueOptions` Computed Property**  
    Update the `valueOptions` computed property in the `./KestraFilter.vue` component.  
-   This ensures the correct values are passed to the third dropdown.
+   This ensures the correct values are provided for the third dropdown.
diff --git a/ui/src/components/filter/segments/Dashboards.vue b/ui/src/components/filter/segments/Dashboards.vue
index c0d9ff9cbb0..f1acd2165b0 100644
--- a/ui/src/components/filter/segments/Dashboards.vue
+++ b/ui/src/components/filter/segments/Dashboards.vue
@@ -74,7 +74,7 @@
         Plus,
         DeleteOutline,
         Magnify,
-    } from "../utils/icons.js";
+    } from "../utils/icons";
 
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
diff --git a/ui/src/components/filter/segments/Items.vue b/ui/src/components/filter/segments/Items.vue
index 360eed99330..0890b2540a8 100644
--- a/ui/src/components/filter/segments/Items.vue
+++ b/ui/src/components/filter/segments/Items.vue
@@ -67,7 +67,7 @@
     import Label from "../components/Label.vue";
     import Title from "../components/Title.vue";
 
-    import {History, DeleteOutline} from "../utils/icons.js";
+    import {History, DeleteOutline} from "../utils/icons";
 
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
@@ -75,7 +75,7 @@
     const emits = defineEmits(["search"]);
     const props = defineProps({prefix: {type: String, required: true}});
 
-    import {useFilters} from "../composables/useFilters.js";
+    import {useFilters} from "../composables/useFilters";
     const {getSavedItems, removeSavedItem} = useFilters(props.prefix);
 
     let saved = ref<{ value: CurrentItem[]; name: string }[]>([]);
diff --git a/ui/src/components/filter/segments/Save.vue b/ui/src/components/filter/segments/Save.vue
index e93a3fc8656..c1f0308150b 100644
--- a/ui/src/components/filter/segments/Save.vue
+++ b/ui/src/components/filter/segments/Save.vue
@@ -67,7 +67,7 @@
     import KestraIcon from "../../Kicon.vue";
     import Label from "../components/Label.vue";
 
-    import {Save} from "../utils/icons.js";
+    import {Save} from "../utils/icons";
 
     const toast = getCurrentInstance()?.appContext.config.globalProperties.$toast();
 
@@ -80,7 +80,7 @@
         current: {type: Object as PropType<CurrentItem[]>, required: true},
     });
 
-    import {useFilters} from "../composables/useFilters.js";
+    import {useFilters} from "../composables/useFilters";
     const {getSavedItems, setSavedItems} = useFilters(props.prefix);
 
     const visible = ref(false);
diff --git a/ui/src/components/filter/segments/Settings.vue b/ui/src/components/filter/segments/Settings.vue
index fbc0b5a19f2..722ae279b75 100644
--- a/ui/src/components/filter/segments/Settings.vue
+++ b/ui/src/components/filter/segments/Settings.vue
@@ -31,7 +31,7 @@
     import KestraIcon from "../../Kicon.vue";
     import Title from "../components/Title.vue";
 
-    import {ChartBar} from "../utils/icons.js";
+    import {ChartBar} from "../utils/icons";
 
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
diff --git a/ui/src/components/filter/styles/filter.scss b/ui/src/components/filter/styles/filter.scss
index ece418dca22..f1f3d1517d4 100644
--- a/ui/src/components/filter/styles/filter.scss
+++ b/ui/src/components/filter/styles/filter.scss
@@ -2,8 +2,8 @@
 $filters-gray-500: var(--bs-gray-500);
 $filters-gray-700: var(--bs-gray-700);
 $filters-gray-900: var(--bs-gray-900);
-$filters-card-color: var(--card-bg);
-$filters-border-color: var(--bs-border-color);
+$filters-card-color: var(--ks-background-card);
+$filters-border-color: var(--ks-border-primary);
 
 // Typography
 $filters-font-xs: var(--el-font-size-extra-small);
@@ -32,8 +32,8 @@ $filters-font-xs: var(--el-font-size-extra-small);
 
     .scroller {
         &::-webkit-scrollbar {
-            height: 5px;
-            width: 5px;
+            height: 3px;
+            width: 3px;
         }
 
         &::-webkit-scrollbar-track {
diff --git a/ui/src/components/flows/FlowRoot.vue b/ui/src/components/flows/FlowRoot.vue
index c3cca59ed4c..f18b2591927 100644
--- a/ui/src/components/flows/FlowRoot.vue
+++ b/ui/src/components/flows/FlowRoot.vue
@@ -161,7 +161,7 @@
                     )
                 ) {
                     tabs.push({
-                        name: "editor",
+                        name: "edit",
                         component: FlowEditor,
                         title: this.$t("edit"),
                         containerClass: "full-container",
diff --git a/ui/src/components/flows/FlowRootTopBar.vue b/ui/src/components/flows/FlowRootTopBar.vue
index e5ff188efae..039d4a67a0b 100644
--- a/ui/src/components/flows/FlowRootTopBar.vue
+++ b/ui/src/components/flows/FlowRootTopBar.vue
@@ -14,7 +14,7 @@
                         {{ $t("restore") }}
                     </el-button>
                 </li>
-                <li v-if="isAllowedEdit && !deleted && activeTabName !== 'editor'">
+                <li v-if="isAllowedEdit && !deleted && activeTabName !== 'edit'">
                     <el-button
                         :icon="Pencil"
                         @click="editFlow"
@@ -101,7 +101,7 @@
                     params: {
                         namespace: this.flow.namespace,
                         id: this.flow.id,
-                        tab: "editor",
+                        tab: "edit",
                         tenant: this.$route.params.tenant,
                     },
                 });
diff --git a/ui/src/components/flows/MetadataInputs.vue b/ui/src/components/flows/MetadataInputs.vue
index 536d91aef16..b9af1949389 100644
--- a/ui/src/components/flows/MetadataInputs.vue
+++ b/ui/src/components/flows/MetadataInputs.vue
@@ -1,17 +1,20 @@
 <template>
-    <div class="w-100 d-flex flex-column align-items-center">
-        <drawer
-            v-if="isEditOpen"
-            v-model="isEditOpen"
-        >
+    <span v-if="required" class="me-1 text-danger">*</span>
+    <span class="label">{{ label }}</span>
+    <div class="mt-1 mb-2 wrapper">
+        <drawer v-if="isEditOpen" v-model="isEditOpen">
             <template #header>
                 <code>inputs</code>
             </template>
 
             <template #footer>
                 <div>
-                    <el-button :icon="ContentSave" @click="update()" type="primary">
-                        {{ $t('save') }}
+                    <el-button
+                        :icon="ContentSave"
+                        @click="update()"
+                        type="primary"
+                    >
+                        {{ $t("save") }}
                     </el-button>
                 </div>
             </template>
@@ -40,21 +43,27 @@
         </drawer>
         <div class="w-100">
             <div>
-                <div class="d-flex w-100" v-for="(input, index) in newInputs" :key="index">
+                <div
+                    class="d-flex w-100 mb-2"
+                    v-for="(input, index) in newInputs"
+                    :key="index"
+                >
                     <div class="flex-fill flex-grow-1 w-100 me-2">
-                        <el-input
-                            disabled
-                            :model-value="input.id"
-                        />
+                        <el-input disabled :model-value="input.id" />
                     </div>
                     <div class="flex-shrink-1">
                         <el-button-group class="d-flex flex-nowrap">
-                            <el-button :icon="TextSearch" @click="selectInput(input, index)" />
+                            <el-button
+                                :icon="TextSearch"
+                                @click="selectInput(input, index)"
+                            />
                             <el-button :icon="Plus" @click="addInput" />
                             <el-button
                                 :icon="Minus"
                                 @click="deleteInput(index)"
-                                :disabled="index === 0 && newInputs.length === 1"
+                                :disabled="
+                                    index === 0 && newInputs.length === 1
+                                "
                             />
                         </el-button-group>
                     </div>
@@ -78,10 +87,17 @@
         components: {Drawer},
         emits: ["update:modelValue"],
         props: {
+            modelValue: {
+                type: Array,
+                default: () => [],
+            },
             inputs: {
                 type: Array,
-                default: () => []
-            }
+                default: () => [],
+            },
+            label: {type: String, required: true},
+            required: {type: Boolean, default: false},
+            disabled: {type: Boolean, default: false},
         },
         computed: {
             ...mapState("plugin", ["inputSchema", "inputsType"]),
@@ -91,9 +107,9 @@
                 this.newInputs = this.inputs;
             }
 
-            this.$store.dispatch("plugin/loadInputsType")
-                .then(_ => this.loading = false);
-
+            this.$store
+                .dispatch("plugin/loadInputsType")
+                .then((_) => (this.loading = false));
         },
         data() {
             return {
@@ -101,8 +117,8 @@
                 selectedInput: undefined,
                 selectedIndex: undefined,
                 isEditOpen: false,
-                loading: false
-            }
+                loading: false,
+            };
         },
         methods: {
             selectInput(input, index) {
@@ -110,20 +126,24 @@
                 this.selectedInput = input;
                 this.selectedIndex = index;
                 this.isEditOpen = true;
-                this.loadSchema(input.type)
+                this.loadSchema(input.type);
             },
             getCls(type) {
-                return this.inputsType.find(e => e.type === type).cls
+                return this.inputsType.find((e) => e.type === type).cls;
             },
             getType(cls) {
-                return this.inputsType.find(e => e.cls === cls).type
+                return this.inputsType.find((e) => e.cls === cls).type;
             },
             loadSchema(type) {
-                this.$store.dispatch("plugin/loadInputSchema", {type: type})
-                    .then(_ => this.loading = false);
+                this.$store
+                    .dispatch("plugin/loadInputSchema", {type: type})
+                    .then((_) => (this.loading = false));
             },
             update() {
-                if (this.newInputs.map(e => e.id).length !== new Set(this.newInputs.map(e => e.id)).size) {
+                if (
+                    this.newInputs.map((e) => e.id).length !==
+                    new Set(this.newInputs.map((e) => e.id)).size
+                ) {
                     this.$store.dispatch("core/showMessage", {
                         variant: "error",
                         title: this.$t("error"),
@@ -145,10 +165,17 @@
             },
             onChangeType(value) {
                 this.loading = true;
-                this.selectedInput = {type: value, id: this.newInputs[this.selectedIndex].id};
+                this.selectedInput = {
+                    type: value,
+                    id: this.newInputs[this.selectedIndex].id,
+                };
                 this.newInputs[this.selectedIndex] = this.selectedInput;
-                this.loadSchema(value)
-            }
+                this.loadSchema(value);
+            },
         },
     };
 </script>
+
+<style scoped lang="scss">
+@import "../../components/code/styles/code.scss";
+</style>
diff --git a/ui/src/components/flows/MetadataVariables.vue b/ui/src/components/flows/MetadataVariables.vue
index 031169cea41..d41bdec13bc 100644
--- a/ui/src/components/flows/MetadataVariables.vue
+++ b/ui/src/components/flows/MetadataVariables.vue
@@ -1,17 +1,20 @@
 <template>
-    <div class="w-100">
-        <drawer
-            v-if="isEditOpen"
-            v-model="isEditOpen"
-        >
+    <span v-if="required" class="me-1 text-danger">*</span>
+    <span class="label">{{ label }}</span>
+    <div class="mt-1 mb-2 wrapper">
+        <drawer v-if="isEditOpen" v-model="isEditOpen">
             <template #header>
                 <code>variables</code>
             </template>
 
             <template #footer>
                 <div>
-                    <el-button :icon="ContentSave" @click="update()" type="primary">
-                        {{ $t('save') }}
+                    <el-button
+                        :icon="ContentSave"
+                        @click="update()"
+                        type="primary"
+                    >
+                        {{ $t("save") }}
                     </el-button>
                 </div>
             </template>
@@ -23,7 +26,9 @@
                     </template>
                     <el-input
                         :model-value="newVariables[selectedIndex][0]"
-                        @update:model-value="updateIndex($event, selectedIndex, 'key')"
+                        @update:model-value="
+                            updateIndex($event, selectedIndex, 'key')
+                        "
                     />
                 </el-form-item>
                 <el-form-item>
@@ -36,38 +41,47 @@
                         :full-height="false"
                         :input="true"
                         lang="text"
-                        @update:model-value="updateIndex($event, selectedIndex, 'value')"
+                        @update:model-value="
+                            updateIndex($event, selectedIndex, 'value')
+                        "
                     />
                 </el-form-item>
             </el-form>
         </drawer>
-        <div class="w-100">
-            <div v-if="variables">
-                <div class="d-flex w-100" v-for="(value, index) in newVariables" :key="index">
-                    <div class="flex-fill flex-grow-1 w-100 me-2">
-                        <el-input
-                            disabled
-                            :model-value="value[0]"
+        <div v-if="variables">
+            <div
+                class="d-flex w-100 mb-2"
+                v-for="(value, index) in newVariables"
+                :key="index"
+            >
+                <div class="flex-fill flex-grow-1 w-100 me-2">
+                    <el-input disabled :model-value="value[0]" />
+                </div>
+                <div class="flex-shrink-1">
+                    <el-button-group class="d-flex flex-nowrap">
+                        <el-button
+                            :icon="TextSearch"
+                            @click="selectVariable(index)"
+                        />
+                        <el-button :icon="Plus" @click="addVariable" />
+                        <el-button
+                            :icon="Minus"
+                            @click="deleteInput(index)"
+                            :disabled="index === 0 && newVariables.length === 1"
                         />
-                    </div>
-                    <div class="flex-shrink-1">
-                        <el-button-group class="d-flex flex-nowrap">
-                            <el-button :icon="TextSearch" @click="selectVariable(index)" />
-                            <el-button :icon="Plus" @click="addVariable" />
-                            <el-button
-                                :icon="Minus"
-                                @click="deleteInput(index)"
-                                :disabled="index === 0 && newVariables.length === 1"
-                            />
-                        </el-button-group>
-                    </div>
+                    </el-button-group>
                 </div>
             </div>
-            <div v-else class="d-flex justify-content-center">
-                <el-button :icon="Plus" type="success" class="w-25" @click="addVariable">
-                    Add
-                </el-button>
-            </div>
+        </div>
+        <div v-else class="d-flex justify-content-center">
+            <el-button
+                :icon="Plus"
+                type="success"
+                class="w-25"
+                @click="addVariable"
+            >
+                Add
+            </el-button>
         </div>
     </div>
 </template>
@@ -87,20 +101,29 @@
         components: {Editor, Drawer},
         emits: ["update:modelValue"],
         props: {
+            modelValue: {
+                type: Object,
+                default: () => {},
+            },
             variables: {
-                type: Array,
-                default: () => []
-            }
+                type: Object,
+                default: () => {},
+            },
+            label: {type: String, required: true},
+            required: {type: Boolean, default: false},
+            disabled: {type: Boolean, default: false},
         },
         created() {
-            this.newVariables = this.variables ? this.variables : this.newVariables
+            this.newVariables = this.variables
+                ? Object.entries(this.variables)
+                : this.newVariables;
         },
         data() {
             return {
-                newVariables: ["",undefined],
+                newVariables: ["", undefined],
                 selectedIndex: undefined,
-                isEditOpen: false
-            }
+                isEditOpen: false,
+            };
         },
         methods: {
             selectVariable(index) {
@@ -109,7 +132,10 @@
             },
             update() {
                 this.isEditOpen = false;
-                this.$emit("update:modelValue", this.newVariables);
+                this.$emit(
+                    "update:modelValue",
+                    Object.fromEntries(this.newVariables),
+                );
             },
             updateIndex(event, index, edited) {
                 if (edited === "key") {
@@ -123,8 +149,11 @@
             },
             addVariable() {
                 this.newVariables.push(["", undefined]);
-
-            }
+            },
         },
     };
 </script>
+
+<style scoped lang="scss">
+@import "../../components/code/styles/code.scss";
+</style>
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index 3051da293a1..3424d2f57e7 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -68,6 +68,9 @@
         </el-menu>
 
         <div class="d-inline-flex">
+            <el-button size="small" text @click="toggleYamlEditor">
+                {{ isYamlEditorShown ? $t("no_code.labels.no_code") : $t("no_code.labels.yaml") }}
+            </el-button>
             <switch-view
                 v-if="!isNamespace"
                 :type="viewType"
@@ -119,37 +122,45 @@
             :class="combinedEditor ? 'editor-combined' : ''"
             style="flex: 1;"
         >
-            <editor
-                v-if="isCreating || openedTabs.length"
-                ref="editorDomElement"
-                @save="save"
-                @execute="execute"
-                v-model="flowYaml"
-                :schema-type="isCurrentTabFlow? 'flow': undefined"
-                :lang="currentTab?.extension === undefined ? 'yaml' : undefined"
-                :extension="currentTab?.extension"
-                @update:model-value="editorUpdate"
-                @cursor="updatePluginDocumentation"
-                :creating="isCreating"
-                @restart-guided-tour="() => persistViewType(editorViewTypes.SOURCE)"
-                :read-only="isReadOnly"
-                :navbar="false"
-            />
-            <section v-else class="no-tabs-opened">
-                <div class="img" />
-
-                <h2>{{ $t("namespace_editor.empty.title") }}</h2>
-                <p><span>{{ $t("namespace_editor.empty.message") }}</span></p>
-
-                <iframe
-                    width="60%"
-                    height="400px"
-                    src="https://www.youtube.com/embed/o-d-GaXUiKQ?si=TTjV8jgRg6-lj_cC"
-                    frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    allowfullscreen
+            <template v-if="isYamlEditorShown">
+                <editor
+                    v-if="isCreating || openedTabs.length"
+                    ref="editorDomElement"
+                    @save="save"
+                    @execute="execute"
+                    v-model="flowYaml"
+                    :schema-type="isCurrentTabFlow? 'flow': undefined"
+                    :lang="currentTab?.extension === undefined ? 'yaml' : undefined"
+                    :extension="currentTab?.extension"
+                    @update:model-value="editorUpdate"
+                    @cursor="updatePluginDocumentation"
+                    :creating="isCreating"
+                    @restart-guided-tour="() => persistViewType(editorViewTypes.SOURCE)"
+                    :read-only="isReadOnly"
+                    :navbar="false"
                 />
-            </section>
+                <section v-else class="no-tabs-opened">
+                    <div class="img" />
+
+                    <h2>{{ $t("namespace_editor.empty.title") }}</h2>
+                    <p><span>{{ $t("namespace_editor.empty.message") }}</span></p>
+
+                    <iframe
+                        width="60%"
+                        height="400px"
+                        src="https://www.youtube.com/embed/o-d-GaXUiKQ?si=TTjV8jgRg6-lj_cC"
+                        frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen
+                    />
+                </section>
+            </template>
+            <NoCode
+                v-else
+                :flow="flowYaml"
+                @update-metadata="(e) => onUpdateMetadata(e, true)"
+                @update-task="(e) => editorUpdate(e)"
+            />
         </div>
         <div class="slider" @mousedown.prevent.stop="dragEditor" v-if="combinedEditor" />
         <div :class="{'d-flex': combinedEditor}" :style="viewType === editorViewTypes.SOURCE ? `display: none` : combinedEditor ? `flex: 0 0 calc(${100 - editorWidth}% - 11px)` : 'flex: 1 0 0%'">
@@ -173,6 +184,7 @@
                     @loading="loadingState"
                     @expand-subflow="onExpandSubflow"
                     @swapped-task="onSwappedTask"
+                    @open-no-code="(params) => handleTopologyEditClick(params)"
                     :flow-graph="flowGraph"
                     :flow-id="flowId"
                     :namespace="namespace"
@@ -296,7 +308,7 @@
 <script setup>
     import {computed, getCurrentInstance, h, nextTick, onBeforeUnmount, onMounted, ref, watch,} from "vue";
     import {useStore} from "vuex";
-    import {useRouter} from "vue-router";
+    import {useRoute, useRouter} from "vue-router";
 
     // Icons
     import ContentSave from "vue-material-design-icons/ContentSave.vue";
@@ -317,7 +329,7 @@
     import TaskEditor from "../flows/TaskEditor.vue";
     import MetadataEditor from "../flows/MetadataEditor.vue";
     import Editor from "./Editor.vue";
-    import {SECTIONS} from "../../utils/constants.js";
+    import {SECTIONS, storageKeys} from "../../utils/constants.js";
     import LowCodeEditor from "../inputs/LowCodeEditor.vue";
     import {editorViewTypes} from "../../utils/constants";
     import {Utils} from "@kestra-io/ui-libs";
@@ -326,8 +338,11 @@
     import Drawer from "../Drawer.vue";
     import {ElMessageBox} from "element-plus";
 
+    import NoCode from "../code/NoCode.vue";
+
     const store = useStore();
     const router = useRouter();
+    const route = useRoute();
     const emit = defineEmits(["follow", "expand-subflow"]);
     const toast = getCurrentInstance().appContext.config.globalProperties.$toast();
     const t = getCurrentInstance().appContext.config.globalProperties.$t;
@@ -473,6 +488,17 @@
         return undefined;
     });
 
+    const isYamlEditorShown = ref(true);
+    const toggleYamlEditor = () => {
+        isYamlEditorShown.value = !isYamlEditorShown.value
+        localStorage.setItem(storageKeys.EDITOR_VIEW_TYPE, isYamlEditorShown.value === true ? "YAML" : "NO_CODE");
+    }
+
+    const handleTopologyEditClick = (params) => {
+        isYamlEditorShown.value = false;
+        nextTick(() => router.replace({query: {...route.query, ...params}}))
+    }
+
     const loadViewType = () => {
         return localStorage.getItem(editorViewTypes.STORAGE_KEY);
     };
@@ -633,6 +659,8 @@
     };
 
     onMounted(async () => {
+        isYamlEditorShown.value = localStorage.getItem(storageKeys.EDITOR_VIEW_TYPE) === "YAML";
+
         if(!props.isNamespace) {
             initViewType()
             await initYamlSource();
@@ -880,8 +908,31 @@
         );
     };
 
-    const onUpdateMetadata = (event) => {
+    const validateFlow = (flow = yamlWithNextRevision.value) => {
+        return store
+            .dispatch("flow/validateFlow", {flow})
+            .then((value) => {
+                if (validationDomElement.value && editorDomElement.value) {
+                    validationDomElement.value.onResize(
+                        editorDomElement.value.$el.offsetWidth
+                    );
+                }
+
+                return value;
+            });
+    };
+
+    const onUpdateMetadata = (event, shouldSave) => {
         metadata.value = event;
+
+        if(shouldSave) {
+            metadata.value = {...metadata.value, ...event};
+            onSaveMetadata();
+            validateFlow()
+
+        } else {
+            metadata.value = event;
+        }
     };
 
     const onSaveMetadata = () => {
@@ -988,7 +1039,7 @@
                 params: {
                     id: flowParsed.value.id,
                     namespace: flowParsed.value.namespace,
-                    tab: "editor",
+                    tab: "edit",
                     tenant: routeParams.tenant,
                 },
             });
diff --git a/ui/src/components/inputs/LowCodeEditor.vue b/ui/src/components/inputs/LowCodeEditor.vue
index 4b5c8a7f349..bb03ee9718d 100644
--- a/ui/src/components/inputs/LowCodeEditor.vue
+++ b/ui/src/components/inputs/LowCodeEditor.vue
@@ -47,20 +47,24 @@
 
         <!--    Drawer to task informations (logs, description, ..)   -->
         <!--    Assuming selectedTask is always the id and the required data for the opened drawer    -->
-        <drawer
-            v-if="isDrawerOpen && selectedTask"
-            v-model="isDrawerOpen"
-        >
+        <drawer v-if="isDrawerOpen && selectedTask" v-model="isDrawerOpen">
             <template #header>
                 <code>{{ selectedTask.id }}</code>
             </template>
             <div v-if="isShowLogsOpen">
                 <collapse>
                     <el-form-item>
-                        <search-field :router="false" @search="onSearch" class="me-2" />
+                        <search-field
+                            :router="false"
+                            @search="onSearch"
+                            class="me-2"
+                        />
                     </el-form-item>
                     <el-form-item>
-                        <log-level-selector :value="logLevel" @update:model-value="onLevelChange" />
+                        <log-level-selector
+                            :value="logLevel"
+                            @update:model-value="onLevelChange"
+                        />
                     </el-form-item>
                 </collapse>
                 <task-run-details
@@ -69,13 +73,21 @@
                     :target-execution-id="selectedTask.execution?.id"
                     :task-run-id="taskRun.id"
                     :filter="logFilter"
-                    :exclude-metas="['namespace', 'flowId', 'taskId', 'executionId']"
+                    :exclude-metas="[
+                        'namespace',
+                        'flowId',
+                        'taskId',
+                        'executionId',
+                    ]"
                     :level="logLevel"
                     @follow="forwardEvent('follow', $event)"
                 />
             </div>
             <div v-if="isShowDescriptionOpen">
-                <markdown class="markdown-tooltip" :source="selectedTask.description" />
+                <markdown
+                    class="markdown-tooltip"
+                    :source="selectedTask.description"
+                />
             </div>
             <div v-if="isShowConditionOpen">
                 <editor
@@ -94,7 +106,7 @@
 </template>
 
 <script setup>
-    // Core
+// Core
     import {getCurrentInstance, nextTick, onMounted, ref, watch} from "vue";
     import {useStore} from "vuex";
     import {useVueFlow} from "@vue-flow/core";
@@ -108,9 +120,7 @@
     import Drawer from "../Drawer.vue";
 
     // Topology
-    import {
-        Topology
-    } from "@kestra-io/ui-libs"
+    import {Topology} from "@kestra-io/ui-libs";
 
     // Utils
     import {YamlUtils} from "@kestra-io/ui-libs";
@@ -122,53 +132,58 @@
 
     const vueflowId = ref(Math.random().toString());
     // Vue flow methods to interact with Graph
-    const {
-        fitView
-    } = useVueFlow({id: vueflowId.value});
+    const {fitView} = useVueFlow({id: vueflowId.value});
 
     // props
     const props = defineProps({
         flowGraph: {
             type: Object,
-            required: true
+            required: true,
         },
         flowId: {
             type: String,
             required: false,
-            default: undefined
+            default: undefined,
         },
         namespace: {
             type: String,
             required: false,
-            default: undefined
+            default: undefined,
         },
         execution: {
             type: Object,
-            default: undefined
+            default: undefined,
         },
         isReadOnly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         source: {
             type: String,
-            default: undefined
+            default: undefined,
         },
         isAllowedEdit: {
             type: Boolean,
-            default: false
+            default: false,
         },
         viewType: {
             type: String,
-            default: undefined
+            default: undefined,
         },
         expandedSubflows: {
             type: Array,
-            default: () => []
-        }
-    })
+            default: () => [],
+        },
+    });
 
-    const emit = defineEmits(["follow", "on-edit", "loading", "expand-subflow", "swapped-task"])
+    const emit = defineEmits([
+        "follow",
+        "on-edit",
+        "loading",
+        "expand-subflow",
+        "swapped-task",
+        "openNoCode",
+    ]);
 
     // Vue instance variables
     const store = useStore();
@@ -177,9 +192,12 @@
 
     // Init variables functions
     const isHorizontalDefault = () => {
-        return props.viewType === "source-topology" ? false :
-            (props.viewType?.indexOf("blueprint") !== -1 ? true : localStorage.getItem("topology-orientation") === "1")
-    }
+        return props.viewType === "source-topology"
+            ? false
+            : props.viewType?.indexOf("blueprint") !== -1
+                ? true
+                : localStorage.getItem("topology-orientation") === "1";
+    };
 
     // Components variables
     const isHorizontal = ref(isHorizontalDefault());
@@ -201,25 +219,33 @@
     onMounted(() => {
         // Regenerate graph on window resize
         observeWidth();
-        store.dispatch("plugin/icons").then(
-            () => {
-                icons.value = store.getters["plugin/getIcons"];
+        store.dispatch("plugin/icons").then(() => {
+            icons.value = store.getters["plugin/getIcons"];
+        });
+    });
+
+    watch(
+        () => isDrawerOpen.value,
+        () => {
+            if (!isDrawerOpen.value) {
+                isShowDescriptionOpen.value = false;
+                isShowLogsOpen.value = false;
+                selectedTask.value = null;
             }
-        )
-    })
-
-    watch(() => isDrawerOpen.value, () => {
-        if (!isDrawerOpen.value) {
-            isShowDescriptionOpen.value = false;
-            isShowLogsOpen.value = false;
-            selectedTask.value = null;
-        }
-    })
-
-    watch(() => props.viewType, () => {
-        isHorizontal.value = props.viewType === "source-topology" ? false :
-            (props.viewType?.indexOf("blueprint") !== -1 ? true : localStorage.getItem("topology-orientation") === "1")
-    })
+        },
+    );
+
+    watch(
+        () => props.viewType,
+        () => {
+            isHorizontal.value =
+                props.viewType === "source-topology"
+                    ? false
+                    : props.viewType?.indexOf("blueprint") !== -1
+                        ? true
+                        : localStorage.getItem("topology-orientation") === "1";
+        },
+    );
 
     // Event listeners & Watchers
     const observeWidth = () => {
@@ -227,12 +253,12 @@
             clearTimeout(timer.value);
             timer.value = setTimeout(() => {
                 nextTick(() => {
-                    fitView()
-                })
+                    fitView();
+                });
             }, 50);
         });
         resizeObserver.observe(vueFlow.value);
-    }
+    };
 
     const forwardEvent = (type, event) => {
         emit(type, event);
@@ -244,90 +270,119 @@
         toast.confirm(
             t("delete task confirm", {taskId: event.id}),
             () => {
-
                 const section = event.section ? event.section : SECTIONS.TASKS;
-                if (section === SECTIONS.TASKS && flowParsed.tasks.length === 1 && flowParsed.tasks.map(e => e.id).includes(event.id)) {
+                if (
+                    section === SECTIONS.TASKS &&
+                    flowParsed.tasks.length === 1 &&
+                    flowParsed.tasks.map((e) => e.id).includes(event.id)
+                ) {
                     store.dispatch("core/showMessage", {
                         variant: "error",
                         title: t("can not delete"),
-                        message: t("can not have less than 1 task")
+                        message: t("can not have less than 1 task"),
                     });
                     return;
                 }
-                emit("on-edit", YamlUtils.deleteTask(props.source, event.id, section), true)
+                emit(
+                    "on-edit",
+                    YamlUtils.deleteTask(props.source, event.id, section),
+                    true,
+                );
             },
-            () => {
-            }
-        )
-    }
+            () => {},
+        );
+    };
 
-    const onCreateNewTask = (event) => {
-        taskEditData.value = {
-            insertionDetails: event,
-            action: "create_task",
-            section: SECTIONS.TASKS
-        };
-        taskEditDomElement.value.$refs.taskEdit.click()
-    }
+    const onCreateNewTask = () => {
+        emit("openNoCode", {
+            section: SECTIONS.TASKS.toLowerCase(),
+            identifier: "new",
+        });
+    };
 
     const onEditTask = (event) => {
-        taskEditData.value = {
-            action: "edit_task",
-            section: event.section ? event.section : SECTIONS.TASKS,
-            oldTaskId: event.task.id,
-        };
-        taskObject.value = event.task
-        taskEditDomElement.value.$refs.taskEdit.click()
-    }
+        emit("openNoCode", {
+            section: event.section
+                ? event.section.toLowerCase()
+                : SECTIONS.TASKS.toLowerCase(),
+            identifier: event.task.id,
+            type: event.task.type,
+        });
+    };
 
     const onAddFlowableError = (event) => {
         taskEditData.value = {
             action: "add_flowable_error",
-            taskId: event.task.id
+            taskId: event.task.id,
         };
-        taskEditDomElement.value.$refs.taskEdit.click()
-
-    }
+        taskEditDomElement.value.$refs.taskEdit.click();
+    };
 
     const confirmEdit = (event) => {
         const source = props.source;
         const task = YamlUtils.extractTask(props.source, YamlUtils.parse(event).id);
-        if (task === undefined || (task && YamlUtils.parse(event).id === taskEditData.value.oldTaskId)) {
+        if (
+            task === undefined ||
+            (task && YamlUtils.parse(event).id === taskEditData.value.oldTaskId)
+        ) {
             switch (taskEditData.value.action) {
-            case("create_task"):
-                emit("on-edit", YamlUtils.insertTask(source, taskEditData.value.insertionDetails[0], event, taskEditData.value.insertionDetails[1]), true)
+            case "create_task":
+                emit(
+                    "on-edit",
+                    YamlUtils.insertTask(
+                        source,
+                        taskEditData.value.insertionDetails[0],
+                        event,
+                        taskEditData.value.insertionDetails[1],
+                    ),
+                    true,
+                );
                 return;
-            case("edit_task"):
-                emit("on-edit", YamlUtils.replaceTaskInDocument(
-                    source,
-                    taskEditData.value.oldTaskId,
-                    event
-                ), true)
+            case "edit_task":
+                emit(
+                    "on-edit",
+                    YamlUtils.replaceTaskInDocument(
+                        source,
+                        taskEditData.value.oldTaskId,
+                        event,
+                    ),
+                    true,
+                );
                 return;
-            case("add_flowable_error"):
-                emit("on-edit", YamlUtils.insertErrorInFlowable(props.source, event, taskEditData.value.taskId), true)
+            case "add_flowable_error":
+                emit(
+                    "on-edit",
+                    YamlUtils.insertErrorInFlowable(
+                        props.source,
+                        event,
+                        taskEditData.value.taskId,
+                    ),
+                    true,
+                );
                 return;
             }
         } else {
             store.dispatch("core/showMessage", {
                 variant: "error",
                 title: t("error detected"),
-                message: t("Task Id already exist in the flow", {taskId: YamlUtils.parse(event).id})
+                message: t("Task Id already exist in the flow", {
+                    taskId: YamlUtils.parse(event).id,
+                }),
             });
         }
         taskEditData.value = null;
         taskObject.value = null;
-    }
+    };
 
     const closeEdit = () => {
         taskEditData.value = null;
         taskObject.value = null;
-    }
+    };
 
     const toggleOrientation = () => {
         localStorage.setItem(
             "topology-orientation",
-            localStorage.getItem("topology-orientation") !== "0" ? "0" : "1"
+            localStorage.getItem("topology-orientation") !== "0" ? "0" : "1",
         );
         isHorizontal.value = localStorage.getItem("topology-orientation") === "1";
         fitView();
@@ -335,72 +390,81 @@
 
     const openFlow = (data) => {
         if (data.link.executionId) {
-            window.open(router.resolve({
-                name: "executions/update",
-                params: {
-                    namespace: data.link.namespace,
-                    flowId: data.link.id,
-                    tab: "topology",
-                    id: data.link.executionId,
-                },
-            }).href, "_blank");
+            window.open(
+                router.resolve({
+                    name: "executions/update",
+                    params: {
+                        namespace: data.link.namespace,
+                        flowId: data.link.id,
+                        tab: "topology",
+                        id: data.link.executionId,
+                    },
+                }).href,
+                "_blank",
+            );
         } else {
-            window.open(router.resolve({
-                name: "flows/update",
-                params: {"namespace": data.link.namespace, "id": data.link.id, tab: "overview"},
-            }).href, "_blank");
+            window.open(
+                router.resolve({
+                    name: "flows/update",
+                    params: {
+                        namespace: data.link.namespace,
+                        id: data.link.id,
+                        tab: "overview",
+                    },
+                }).href,
+                "_blank",
+            );
         }
-    }
+    };
 
     const showLogs = (event) => {
-        selectedTask.value = event
+        selectedTask.value = event;
         isShowLogsOpen.value = true;
         isDrawerOpen.value = true;
-    }
+    };
 
     const onSearch = (search) => {
         logFilter.value = search;
-    }
+    };
 
     const onLevelChange = (level) => {
         logLevel.value = level;
-    }
+    };
 
     const showDescription = (event) => {
-        selectedTask.value = event
+        selectedTask.value = event;
         isShowDescriptionOpen.value = true;
         isDrawerOpen.value = true;
-    }
+    };
 
     const showCondition = (event) => {
-        selectedTask.value = event.task
+        selectedTask.value = event.task;
         isShowConditionOpen.value = true;
         isDrawerOpen.value = true;
-    }
+    };
 
     const onSwappedTask = (event) => {
         emit("swapped-task", event.swappedTasks);
         emit("on-edit", event.newSource, true);
-    }
+    };
 
     const message = (event) => {
         store.dispatch("core/showMessage", {
             variant: event.variant,
             title: t(event.title),
-            message: t(event.message)
+            message: t(event.message),
         });
-    }
+    };
 
     const expandSubflow = (event) => {
-        emit("expand-subflow", event)
-    }
+        emit("expand-subflow", event);
+    };
 </script>
 
-
 <style scoped lang="scss">
-    .vueflow {
-        height: 100%;
-        width: 100%;
-        position: relative;
-    }
-</style>
\ No newline at end of file
+.vueflow {
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+</style>
diff --git a/ui/src/components/namespace/Namespace.vue b/ui/src/components/namespace/Namespace.vue
index 0dc37944be2..c5866cd4128 100644
--- a/ui/src/components/namespace/Namespace.vue
+++ b/ui/src/components/namespace/Namespace.vue
@@ -125,7 +125,7 @@
                         component: EditorView,
                         title: this.$t("editor"),
                         props: {
-                            tab: "editor",
+                            tab: "edit",
                             isNamespace: true,
                             namespace: this.$route.params.id,
                             isReadOnly: false,
diff --git a/ui/src/components/onboarding/VueTour.vue b/ui/src/components/onboarding/VueTour.vue
index ba93738d562..27040c80105 100644
--- a/ui/src/components/onboarding/VueTour.vue
+++ b/ui/src/components/onboarding/VueTour.vue
@@ -299,7 +299,7 @@
                     params: {
                         namespace: "tutorial",
                         id: flows.value[activeFlow.value]?.id,
-                        tab: "editor",
+                        tab: "edit",
                     },
                 });
                 store.commit("core/setGuidedProperties", {
diff --git a/ui/src/components/plugins/PluginSelect.vue b/ui/src/components/plugins/PluginSelect.vue
index 7e983ea1a52..85acbca433e 100644
--- a/ui/src/components/plugins/PluginSelect.vue
+++ b/ui/src/components/plugins/PluginSelect.vue
@@ -1,9 +1,9 @@
 <template>
     <el-select
         :model-value="modelValue"
-        placeholder=""
+        :placeholder="$t('no_code.creation.select', {section: section.toLowerCase().slice(0, -1)})"
         filterable
-        :persistent="false"
+        clearable
         @update:model-value="onInput"
     >
         <el-option
diff --git a/ui/src/components/saved-filters/Filters.vue b/ui/src/components/saved-filters/Filters.vue
deleted file mode 100644
index 3731971d42d..00000000000
--- a/ui/src/components/saved-filters/Filters.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-    <!-- No filter yet -->
-    <el-button v-if="!hasSavedFilters" data-test-id="no-filters-selector" :icon="ContentSave" @click="toggleDrawer()">
-        {{ $t("search filters.filters") }}
-    </el-button>
-    <!-- Existing filters -->
-    <el-dropdown v-else button type="default" popper-class="disabled-means-selected">
-        <el-button class="dropdown-button" data-test-id="filters-selector" :icon="ContentSave" @click="toggleDrawer()">
-            {{ $t("search filters.filters") }}
-        </el-button>
-        <template #dropdown>
-            <el-dropdown-menu>
-                <template
-                    v-for="(query, label) in relevantFilters"
-                    :key="label"
-                >
-                    <el-dropdown-item @click="setFilter(query)" :disabled="isSelected(query)">
-                        {{ label }}
-                    </el-dropdown-item>
-                </template>
-            </el-dropdown-menu>
-        </template>
-    </el-dropdown>
-    <drawer
-        v-model="isDrawerOpen"
-        :title="$t('search filters.manage')"
-    >
-        <el-card
-            v-if="hasSavedFilters"
-            :header="$t('search filters.saved')"
-            class="w-100"
-        >
-            <saved-filter
-                v-for="(query, label) in relevantFilters"
-                :key="label"
-                :query="query"
-                :label="label"
-                @clicked="() => isDrawerOpen = false"
-                @deleted="removeSavedFilter"
-            />
-
-            <template #footer>
-                <el-input
-                    v-model="labelFilter"
-                    :prefix-icon="Magnify"
-                    :maxlength="15"
-                    :placeholder="$t('search')"
-                    clearable
-                />
-            </template>
-        </el-card>
-
-
-        <el-input
-            class="py-3"
-            v-model="newFilterLabel"
-            :autofocus="true"
-            :maxlength="15"
-            :placeholder="$t('search filters.filter name')"
-            @keyup.enter="storeSavedFilters()"
-        >
-            <template #append>
-                <el-button
-                    :icon="Plus"
-                    :disabled="newFilterLabel === EMPTY_LABEL"
-                    @click="storeSavedFilters()"
-                >
-                    {{ $t("search filters.save filter") }}
-                </el-button>
-            </template>
-        </el-input>
-    </drawer>
-</template>
-
-<script setup>
-    import ContentSave from "vue-material-design-icons/ContentSave.vue";
-    import Plus from "vue-material-design-icons/Plus.vue";
-    import Magnify from "vue-material-design-icons/Magnify.vue";
-</script>
-
-<script>
-    import Drawer from "../Drawer.vue";
-    import SavedFilter from "./SavedFilter.vue";
-    import {mapGetters} from "vuex";
-    import _isEqual from "lodash/isEqual";
-
-    export default {
-        components: {
-            Drawer,
-            SavedFilter
-        },
-        props: {
-            storageKey: {
-                type: String,
-                required: true
-            }
-        },
-        data() {
-            return {
-                isDrawerOpen: false,
-                newFilterLabel: undefined,
-                labelFilter: undefined,
-                filters: {}
-            };
-        },
-        computed: {
-            ...mapGetters("filters", ["savedFilters"]),
-            relevantFilters() {
-                return Object.entries(this.filters)
-                    .filter(([key, _]) => this.labelFilter ? key.includes(this.labelFilter) : true)
-                    .sort(([a, _], [b, __]) => {
-                        const keyA = a.toLowerCase();
-                        const keyB = b.toLowerCase();
-
-                        return (keyA < keyB ? -1 : (keyA > keyB ? 1 : 0));
-                    })
-                    .reduce((acc, [key, value]) => {
-                        acc[key] = value;
-                        return acc;
-                    }, {});
-            },
-            hasSavedFilters() {
-                return Object.keys(this.filters).length > 0;
-            }
-        },
-        created() {
-            this.resetNewFilterLabel();
-            this.EMPTY_LABEL = "";
-        },
-        mounted() {
-            this.filters = this.savedFilters(this.storageKey);
-        },
-        methods: {
-            resetNewFilterLabel() {
-                this.newFilterLabel = this.EMPTY_LABEL;
-            },
-            removeSavedFilter(label) {
-                delete this.filters[label];
-                this.$store.commit("filters/setSavedFilters",
-                                   {
-                                       storageKey: this.storageKey,
-                                       filters: this.filters
-                                   });
-            },
-            storeSavedFilters() {
-                if (!this.newFilterLabel) {
-                    return;
-                }
-                this.filters[this.newFilterLabel] = this.$route.query;
-                this.$store.commit("filters/setSavedFilters",
-                                   {
-                                       storageKey: this.storageKey,
-                                       filters: this.filters
-                                   });
-                this.resetNewFilterLabel();
-            },
-            toggleDrawer() {
-                this.isDrawerOpen = !this.isDrawerOpen;
-            },
-            setFilter(query) {
-                this.$router.push({query: query})
-            },
-            isSelected(query) {
-                return _isEqual(query, this.$route.query);
-            }
-        }
-    }
-</script>
-
-<style lang="scss">
-    .dropdown-button {
-        width: 100%;
-    }
-
-    .disabled-means-selected {
-        li.is-disabled {
-            color: var(--ks-content-link);
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/ui/src/components/saved-filters/SavedFilter.vue b/ui/src/components/saved-filters/SavedFilter.vue
deleted file mode 100644
index 2c7d8627972..00000000000
--- a/ui/src/components/saved-filters/SavedFilter.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <el-tooltip
-        effect="light"
-        placement="bottom"
-        trigger="hover"
-        :persistent="false"
-        :show-after="750"
-        :hide-after="0"
-    >
-        <template #content>
-            <div v-for="(queryPart) in getReadableQuery()" :key="queryPart">
-                {{ queryPart }}
-            </div>
-        </template>
-        <el-tag
-            :type="isSelected() ? 'primary' : 'info'"
-            size="large"
-            @click="onClick"
-            @close="showConfirmDialog()"
-            closable
-            class="me-1"
-            disable-transitions
-        >
-            <span>{{ label }}</span>
-        </el-tag>
-    </el-tooltip>
-</template>
-
-<script>
-    import _isEqual from "lodash/isEqual";
-
-    export default {
-        emits: [
-            "clicked",
-            "deleted"
-        ],
-        props: {
-            query: {
-                type: Object,
-                required: true
-            },
-            label: {
-                type: String,
-                required: true
-            }
-        },
-        methods: {
-            showConfirmDialog() {
-                this.$toast().confirm(
-                    this.$t("delete confirm", {name: this.label}),
-                    this.onDelete,
-                    () => {
-                    }
-                );
-            },
-            onClick() {
-                this.$router.push({query: this.query})
-                this.$emit("clicked");
-            },
-            onDelete() {
-                this.$emit("deleted", this.label);
-            },
-            isSelected() {
-                return _isEqual(this.query, this.$route.query);
-            },
-            getReadableQuery() {
-                return Object.entries(this.query)
-                    .map(([key, value]) => `${key}: ${value}`);
-            }
-        }
-    }
-</script>
-
-<style lang="scss" scoped>
-    .el-tag {
-        & a, span, :deep(.el-icon) {
-            color: var(--bs-white);
-            cursor: pointer;
-        }
-
-        &.el-tag--info {
-            background: var(--bs-gray-600);
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/ui/src/components/settings/BasicSettings.vue b/ui/src/components/settings/BasicSettings.vue
index e4028032eb5..68a35cb88d4 100644
--- a/ui/src/components/settings/BasicSettings.vue
+++ b/ui/src/components/settings/BasicSettings.vue
@@ -30,6 +30,26 @@
                         </el-select>
                     </Column>
 
+                    <Column :label="$t('settings.blocks.configuration.fields.editor_type')">
+                        <el-select :model-value="pendingSettings.editorType" @update:model-value="onEditorTypeChange">
+                            <el-option
+                                v-for="item in [
+                                    {
+                                        label: $t('no_code.labels.yaml'),
+                                        value: 'YAML'
+
+                                    }, 
+                                    {
+                                        label: $t('no_code.labels.no_code'),
+                                        value: 'NO_CODE'
+                                    }]"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </Column>
+
                     <Column :label="$t('settings.blocks.configuration.fields.execute_flow')">
                         <el-select :model-value="pendingSettings.executeFlowBehaviour" @update:model-value="onExecuteFlowBehaviourChange">
                             <el-option
@@ -260,6 +280,7 @@
                 pendingSettings: {
                     defaultNamespace: undefined,
                     defaultLogLevel: undefined,
+                    editorType: undefined,
                     lang: undefined,
                     theme: undefined,
                     editorTheme: undefined,
@@ -299,6 +320,7 @@
             const store = useStore();
 
             this.pendingSettings.defaultNamespace = localStorage.getItem("defaultNamespace") || "";
+            this.pendingSettings.editorType = localStorage.getItem(storageKeys.EDITOR_VIEW_TYPE) || "YAML";
             this.pendingSettings.defaultLogLevel = localStorage.getItem("defaultLogLevel") || "INFO";
             this.pendingSettings.lang = Utils.getLang();
             
@@ -326,6 +348,10 @@
             onNamespaceSelect(value) {
                 this.pendingSettings.defaultNamespace = value;
             },
+            onEditorTypeChange(value) {
+                this.pendingSettings.editorType = value;
+                localStorage.setItem(storageKeys.EDITOR_VIEW_TYPE, value);
+            },
             onLevelChange(value) {
                 this.pendingSettings.defaultLogLevel = value;
             },
diff --git a/ui/src/stores/filters.js b/ui/src/stores/filters.js
deleted file mode 100644
index 3f622f82820..00000000000
--- a/ui/src/stores/filters.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default {
-    namespaced: true,
-    state: {
-        lastFilters: undefined
-    },
-    mutations: {
-        setSavedFilters(state, value) {
-            localStorage.setItem(value.storageKey, JSON.stringify(value.filters));
-        }
-    },
-    getters: {
-        savedFilters() {
-            return (storageKey) => {
-                return JSON.parse(localStorage.getItem(storageKey)) ?? {}
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/ui/src/stores/plugins.js b/ui/src/stores/plugins.js
index cebd1039f62..52e4ae6df65 100644
--- a/ui/src/stores/plugins.js
+++ b/ui/src/stores/plugins.js
@@ -94,7 +94,7 @@ export default {
                 return response.data;
             })
         },
-        loadSchemaType(_, options) {
+        loadSchemaType(_, options = {type: "flow"}) {
             return this.$http.get(`${apiUrlWithoutTenants()}/plugins/schemas/${options.type}`, {}).then(response => {
                 return response.data;
             })
diff --git a/ui/src/stores/store.js b/ui/src/stores/store.js
index ae17325b8a9..3064c024b88 100644
--- a/ui/src/stores/store.js
+++ b/ui/src/stores/store.js
@@ -2,7 +2,6 @@ import api from "./api"
 import auth from "./auth"
 import core from "./core"
 import execution from "./executions"
-import filters from "./filters";
 import flow from "./flow"
 import graph from "./graph"
 import layout from "./layout"
@@ -23,7 +22,6 @@ export default {
     modules: {
         api,
         core,
-        filters,
         flow,
         template,
         execution,
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index 62615a6fa00..1988132b960 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -744,6 +744,7 @@
             "default_namespace": "Default Namespace",
             "log_level": "Default Log Level",
             "log_display": "Default Log Display",
+            "editor_type": "Defailt Editor Type",
             "execute_flow": "Execute the Flow",
             "execute_default_tab": "Default Execution Tab"
           }
@@ -942,10 +943,10 @@
     "behavior": "Behavior",
     "concurrency": "Concurrency",
     "no-executions-view": {
-        "title": "Start automating with ",
-        "sub_title": "Click on the Execute button to start your first workflow execution.",
-        "guidance_desc": "Need guidance to execute your flow?",
-        "guidance_sub_desc": "Follow the documentation for all the info you need."
+      "title": "Start automating with ",
+      "sub_title": "Click on the Execute button to start your first workflow execution.",
+      "guidance_desc": "Need guidance to execute your flow?",
+      "guidance_sub_desc": "Follow the documentation for all the info you need."
     },
     "execution_guide": {
       "get_started": {
@@ -1058,6 +1059,47 @@
     },
     "custom value": "Custom value",
     "chart": "Chart",
-    "chart preview": "Chart preview"
+    "chart preview": "Chart preview",
+    "no_code": {
+      "adding": "+ Add a {what}",
+      "labels": {
+        "yaml": "YAML Editor",
+        "no_code": "No Code Editor"
+      },
+      "sections": {
+        "main": "Main properties",
+        "general": "General properties",
+        "tasks": "Tasks",
+        "triggers": "Triggers",
+        "error_handlers": "Error Handlers"
+      },
+      "fields": {
+        "main": {
+          "flow_id": "Flow ID",
+          "namespace": "Namespace",
+          "description": "Description"
+        },
+        "general": {
+          "retry": "Retry",
+          "labels": "Labels",
+          "inputs": "Inputs",
+          "outputs": "Outputs",
+          "variables": "Variables",
+          "concurrency": "Concurrency",
+          "plugin_defaults": "Plugin Defaults",
+          "disabled": "Disabled"
+        }
+      },
+      "creation": {
+        "tasks": "Add a task",
+        "triggers": "Add a trigger",
+        "error handlers": "Add an error handler",
+        "select": "Select a {section}"
+      },
+      "save": {
+        "tasks": "Save task",
+        "triggers": "Save trigger"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/ui/src/translations/es.json b/ui/src/translations/es.json
index 835cd9e3175..46c00486b84 100644
--- a/ui/src/translations/es.json
+++ b/ui/src/translations/es.json
@@ -873,7 +873,7 @@
       "see_all": "Ver todo",
       "success_ratio_tooltip": "La Tasa de Éxito es la suma de ejecuciones en estado SUCCESS, CANCELLED y WARNING dividida por el número total de ejecuciones en un estado terminado.",
       "failure_ratio_tooltip": "La proporción de Failed es la suma de ejecuciones FAILED, KILLED y RETRIED dividida por el número total de ejecuciones en un estado terminado.",
-      "preview": "Vista previa del Dashboard"
+      "preview": "Vista previa del dashboard"
     },
     "delete_log": "¿Está seguro de que desea eliminar el log?",
     "docs": "Documentos",
diff --git a/ui/src/translations/hi.json b/ui/src/translations/hi.json
index b89a8ff3f63..8962cb99ade 100644
--- a/ui/src/translations/hi.json
+++ b/ui/src/translations/hi.json
@@ -1043,6 +1043,6 @@
     "source only": "केवल स्रोत",
     "chart preview": "चार्ट पूर्वावलोकन",
     "execution replayed": "इस execution को पुनः चलाया गया है।",
-    "execution replay": "यह execution <code>{originalId}</code> का पुनरावर्तन है।"
+    "execution replay": "यह निष्पादन <code>{originalId}</code> का पुन: प्ले है।"
   }
 }
\ No newline at end of file
diff --git a/ui/src/translations/it.json b/ui/src/translations/it.json
index aa3562ed877..39a36abb954 100644
--- a/ui/src/translations/it.json
+++ b/ui/src/translations/it.json
@@ -873,7 +873,7 @@
       "see_all": "Vedi tutto",
       "success_ratio_tooltip": "Il Rapporto di Successo è la somma delle esecuzioni in stato SUCCESS, CANCELLED e WARNING divisa per il numero totale di esecuzioni in uno stato terminato.",
       "failure_ratio_tooltip": "Il rapporto di errore è la somma delle esecuzioni FAILED, KILLED e RETRIED divisa per il numero totale di esecuzioni in uno stato terminato.",
-      "preview": "Anteprima Dashboard"
+      "preview": "Anteprima dashboard"
     },
     "delete_log": "Sei sicuro di voler eliminare il log?",
     "docs": "Documenti",
@@ -1041,7 +1041,7 @@
     "execution restarted": "Questa esecuzione è stata riavviata {nbRestart} volta(e).",
     "chart": "Grafico",
     "source only": "Solo sorgente",
-    "chart preview": "Anteprima del grafico",
+    "chart preview": "Anteprima grafico",
     "execution replayed": "Questa esecuzione è stata ripetuta.",
     "execution replay": "Questa esecuzione è una ripetizione di <code>{originalId}</code>."
   }
diff --git a/ui/src/translations/ko.json b/ui/src/translations/ko.json
index 9b5e9a6ce63..85049dfb861 100644
--- a/ui/src/translations/ko.json
+++ b/ui/src/translations/ko.json
@@ -1042,7 +1042,7 @@
     "chart": "차트",
     "source only": "소스 전용",
     "chart preview": "차트 미리보기",
-    "execution replayed": "이 실행은 재생되었습니다.",
+    "execution replayed": "이 실행은 재실행되었습니다.",
     "execution replay": "이 실행은 <code>{originalId}</code>의 재실행입니다."
   }
 }
\ No newline at end of file
diff --git a/ui/src/translations/pl.json b/ui/src/translations/pl.json
index a177d57074e..47d05723698 100644
--- a/ui/src/translations/pl.json
+++ b/ui/src/translations/pl.json
@@ -873,7 +873,7 @@
       "see_all": "Zobacz wszystkie",
       "success_ratio_tooltip": "Wskaźnik Sukcesu to suma wykonań w stanach SUCCESS, CANCELLED i WARNING podzielona przez całkowitą liczbę wykonań w stanie zakończonym.",
       "failure_ratio_tooltip": "Stosunek niepowodzeń to suma wykonań w stanach FAILED, KILLED i RETRIED podzielona przez całkowitą liczbę wykonań w stanie zakończonym.",
-      "preview": "Podgląd dashboardu"
+      "preview": "Podgląd Dashboardu"
     },
     "delete_log": "Czy na pewno chcesz usunąć log?",
     "docs": "Dokumentacja",
diff --git a/ui/src/translations/ru.json b/ui/src/translations/ru.json
index 4b0a53b085d..22659a0f104 100644
--- a/ui/src/translations/ru.json
+++ b/ui/src/translations/ru.json
@@ -1039,8 +1039,8 @@
     },
     "custom value": "Пользовательское значение",
     "execution restarted": "Это выполнение было перезапущено {nbRestart} раз(а).",
-    "chart": "Диаграмма",
-    "source only": "Только источник",
+    "chart": "График",
+    "source only": "Источник только",
     "chart preview": "Предварительный просмотр диаграммы",
     "execution replayed": "Это выполнение было воспроизведено.",
     "execution replay": "Это выполнение является повтором <code>{originalId}</code>."
diff --git a/ui/src/translations/zh_CN.json b/ui/src/translations/zh_CN.json
index bb23499d86b..389baa92315 100644
--- a/ui/src/translations/zh_CN.json
+++ b/ui/src/translations/zh_CN.json
@@ -1043,6 +1043,6 @@
     "source only": "仅限来源",
     "chart preview": "图表预览",
     "execution replayed": "此执行已被重放。",
-    "execution replay": "此执行是 <code>{originalId}</code> 的重放。"
+    "execution replay": "此执行是对<code>{originalId}</code>的重放。"
   }
 }
\ No newline at end of file
diff --git a/ui/src/utils/constants.js b/ui/src/utils/constants.js
index 7bbd1dfbff0..6d437e8a544 100644
--- a/ui/src/utils/constants.js
+++ b/ui/src/utils/constants.js
@@ -36,10 +36,8 @@ export const storageKeys = {
     DEFAULT_NAMESPACE: "defaultNamespace",
     LATEST_NAMESPACE: "latestNamespace",
     PAGINATION_SIZE: "paginationSize",
-    EXECUTIONS_FILTERS: "executionsSavedFilters",
-    FLOWS_FILTERS: "flowsSavedFilters",
-    LOGS_FILTERS: "logsSavedFilters",
-    IMPERSONATE: "impersonate"
+    IMPERSONATE: "impersonate",
+    EDITOR_VIEW_TYPE: "editorViewType",
 }
 
 export const executeFlowBehaviours = {