diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue
index f1483905..928bc53b 100644
--- a/src/components/04_flow-management/FormFlow.vue
+++ b/src/components/04_flow-management/FormFlow.vue
@@ -199,7 +199,7 @@ onMounted(async () => {
         outlined
         dense
         class="col"
-        id="input-flow-template-name"
+        for="input-flow-template-name"
         v-model="flowData.name"
         hide-bottom-space
         :label="$t(`general.name`, { msg: $t('flow.step') })"
@@ -255,8 +255,8 @@ onMounted(async () => {
                 <div class="row items-center q-py-sm full-width">
                   <q-btn
                     v-if="!readonly"
-                    id="btn-work-up-product"
-                    for="btn-work-up-product"
+                    :id="`btn-work-up-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
+                    :for="`btn-work-up-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     icon="mdi-arrow-up"
                     dense
                     flat
@@ -270,8 +270,8 @@ onMounted(async () => {
                   />
                   <q-btn
                     v-if="!readonly"
-                    id="btn-work-down-product"
-                    for="btn-work-down-product"
+                    :id="`btn-work-down-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
+                    :for="`btn-work-down-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     icon="mdi-arrow-down"
                     dense
                     flat
@@ -376,7 +376,7 @@ onMounted(async () => {
                   </div> -->
                   <q-btn
                     v-if="!readonly"
-                    id="btn-delete-work"
+                    :id="`btn-delete-work-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     icon="mdi-trash-can-outline"
                     dense
                     flat
@@ -399,6 +399,7 @@ onMounted(async () => {
               >
                 <div class="row q-col-gutter-sm">
                   <q-input
+                    :for="`textarea-detail-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     class="col-md-6 col-12"
@@ -411,7 +412,6 @@ onMounted(async () => {
                       (v) => (step.detail = v?.toString() || '')
                     "
                   />
-
                   <div class="col-md-6 col-12">
                     <div
                       class="surface-1 rounded bordered full-height"
@@ -434,7 +434,7 @@ onMounted(async () => {
                         </div>
                         <q-btn
                           v-if="!readonly"
-                          id="btn-add-work-product"
+                          :id="`btn-add-work-product-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                           class="text-capitalize rounded absolute-top-right"
                           flat
                           dense
@@ -465,6 +465,7 @@ onMounted(async () => {
                   <q-select
                     v-if="step.responsiblePersonId"
                     behavior="menu"
+                    :for="`select-responsible-person-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     outlined
@@ -550,7 +551,7 @@ onMounted(async () => {
                       <q-list>
                         <q-item>
                           <q-input
-                            for="input-search"
+                            :for="`input-search-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                             outlined
                             dense
                             :label="$t('general.search')"
@@ -582,7 +583,10 @@ onMounted(async () => {
                           class="column"
                           @click.stop="selectResponsiblePerson(index, person)"
                         >
-                          <div class="row items-center no-wrap">
+                          <div
+                            class="row items-center no-wrap"
+                            :id="`select-responsible-person-${index}-${person.firstName || person.firstNameEN}-${onDrawer ? 'drawer' : 'dialog'}`"
+                          >
                             <q-checkbox
                               size="xs"
                               :model-value="
@@ -652,6 +656,7 @@ onMounted(async () => {
                         >
                           <div class="row items-center">
                             <q-checkbox
+                              :id="`select-area-${index}`"
                               v-model="step.messengerByArea"
                               size="xs"
                             ></q-checkbox>
@@ -667,6 +672,7 @@ onMounted(async () => {
                   <!-- RESPONSIBLE-AGENCIES, RESPONSIBLE-INSTITUTION -->
                   <q-select
                     behavior="menu"
+                    :for="`select-responsible-institution-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     outlined
@@ -737,6 +743,7 @@ onMounted(async () => {
                         v-if="step.responsibleInstitution"
                       >
                         <q-checkbox
+                          :id="`select-responsible-institution-${index}-${opt.label}-${onDrawer ? 'drawer' : 'dialog'}`"
                           :model-value="
                             step.responsibleInstitution.some(
                               (v: string) => v === opt.value,
diff --git a/src/components/button/ToggleButton.vue b/src/components/button/ToggleButton.vue
index 03530bb7..32854528 100644
--- a/src/components/button/ToggleButton.vue
+++ b/src/components/button/ToggleButton.vue
@@ -18,7 +18,12 @@ function handleClick() {
 </script>
 <template>
   <label class="switch" @click.stop="handleClick">
-    <input type="checkbox" :disabled="twoWay || disable" v-model="model" />
+    <input
+      id="btn-toggle"
+      type="checkbox"
+      :disabled="twoWay || disable"
+      v-model="model"
+    />
     <div class="slider round" :class="{ disable: disable }"></div>
   </label>
 </template>
diff --git a/src/components/dialog/DialogProperties.vue b/src/components/dialog/DialogProperties.vue
index 231937d0..d8b3b65e 100644
--- a/src/components/dialog/DialogProperties.vue
+++ b/src/components/dialog/DialogProperties.vue
@@ -365,6 +365,8 @@ watch(
             {{ $t('flow.stepNo', { msg: (props.stepIndex || stepIndex) + 1 }) }}
             <span class="app-text-muted">: {{ step.name }}</span>
             <q-btn-dropdown
+              for="select-step"
+              id="select-step"
               unelevated
               no-icon-animation
               size="sm"
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 9a400d52..8cada9a1 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -636,6 +636,7 @@ watch([() => pageState.inputSearch, workflowPageSize], () => {
                   <q-td style="width: 20%" class="text-right">
                     <q-btn
                       icon="mdi-eye-outline"
+                      :id="`btn-eye-${props.row.name}`"
                       size="sm"
                       dense
                       round
@@ -648,7 +649,7 @@ watch([() => pageState.inputSearch, workflowPageSize], () => {
                       "
                     />
                     <KebabAction
-                      :id-name="props.row.id"
+                      :id-name="props.row.name"
                       :status="props.row.status"
                       @view="
                         () => {