diff --git a/apps/client/src/modules/workflows/components/GeneralActionsPanel.vue b/apps/client/src/modules/workflows/components/GeneralActionsPanel.vue
index 0d4ef823..8c214b0d 100644
--- a/apps/client/src/modules/workflows/components/GeneralActionsPanel.vue
+++ b/apps/client/src/modules/workflows/components/GeneralActionsPanel.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useWorkflowsStore } from '../stores/workflows'
 import CreateNewWorkflow from './features/CreateNewWorkflow.vue'
 import SearchWorkflows from './filters/SearchWorkflows.vue'
 import WorkflowsSort from './filters/WorkflowsSort.vue'
 import RemoveWorkflow from './features/handlers/RemoveWorkflow.vue'
-import type { Workflow } from '../types'
 import ViewTabs from '@/modules/common/components/controls/ViewTabs.vue'
 
 defineProps<{
-  workflows: Workflow[]
   isSelected: boolean
   idxs: string[]
 }>()
+
+const workflowsStore = useWorkflowsStore()
+const { workflows } = storeToRefs(workflowsStore)
 </script>
 
 <template>
@@ -20,6 +23,7 @@ defineProps<{
       <WorkflowsSort />
       <RemoveWorkflow
         v-if="isSelected && workflows.length > 0"
+        @remove="workflowsStore.removeWorkflows(idxs)"
       />
     </div>
     <div class="flex items-center gap-2">
diff --git a/apps/client/src/modules/workflows/components/SectionSign.vue b/apps/client/src/modules/workflows/components/SectionSign.vue
deleted file mode 100644
index 34b2b33e..00000000
--- a/apps/client/src/modules/workflows/components/SectionSign.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  section: 'recent' | 'all'
-}>()
-</script>
-
-<template>
-  <div class="flex items-center gap-1.5 text-neutral-500 dark:text-neutral-400">
-    <div i-lucide:chevron-down class="w-4 h-4" />
-    <p class="text-small">
-      {{ $t(`workflows.section.${section}`) }}
-    </p>
-  </div>
-</template>
diff --git a/apps/client/src/modules/workflows/components/WorkflowsCards.vue b/apps/client/src/modules/workflows/components/WorkflowsCards.vue
index 56960a04..792c8fea 100644
--- a/apps/client/src/modules/workflows/components/WorkflowsCards.vue
+++ b/apps/client/src/modules/workflows/components/WorkflowsCards.vue
@@ -10,11 +10,7 @@ defineProps<{
 <template>
   <div class="flex flex-col space-y-3 mt-1">
     <div class="grid grid-cols-4 gap-4 items-stretch">
-      <CardItem
-        v-for="card in cards"
-        :key="card._id"
-        :card="card"
-      />
+      <CardItem v-for="card in cards" :key="card._id" :card="card" />
     </div>
   </div>
 </template>
diff --git a/apps/client/src/modules/workflows/components/WorkflowsDataTable.vue b/apps/client/src/modules/workflows/components/WorkflowsDataTable.vue
index 68f2f390..30db4f79 100644
--- a/apps/client/src/modules/workflows/components/WorkflowsDataTable.vue
+++ b/apps/client/src/modules/workflows/components/WorkflowsDataTable.vue
@@ -60,9 +60,12 @@ defineExpose({
     )"
   >
     <template #description-cell="{ cell }">
-      <span class="text-default text-neutral-500 dark:text-neutral-400 whitespace-nowrap overflow-hidden text-ellipsis">
-        {{ cell.row.original.description }}
-      </span>
+      <div v-if="cell.row.original.description">
+        <span class="text-default text-neutral-500 dark:text-neutral-400 whitespace-nowrap overflow-hidden text-ellipsis">
+          {{ cell.row.original.description }}
+        </span>
+      </div>
+      <span v-else class="text-neutral-500">-</span>
     </template>
     <template #creator-cell="{ cell }">
       <div class="flex items-center gap-2">
@@ -73,9 +76,12 @@ defineExpose({
       </div>
     </template>
     <template #runs-cell="{ cell }">
-      <span class="text-default text-neutral-500 dark:text-neutral-400 whitespace-nowrap">
-        {{ $t('workflows.runs', { n: cell.row.original.runsCount }) }}
-      </span>
+      <div v-if="cell.row.original.runsCount">
+        <span class="text-default text-neutral-500 dark:text-neutral-400 whitespace-nowrap">
+          {{ $t('workflows.runs', { n: cell.row.original.runsCount }) }}
+        </span>
+      </div>
+      <span v-else class="text-neutral-500">-</span>
     </template>
     <template #date-cell="{ cell }">
       <span class="text-default text-neutral-800 dark:text-neutral-200 whitespace-nowrap">
diff --git a/apps/client/src/modules/workflows/components/WorkflowsManager.vue b/apps/client/src/modules/workflows/components/WorkflowsManager.vue
new file mode 100644
index 00000000..7add30d9
--- /dev/null
+++ b/apps/client/src/modules/workflows/components/WorkflowsManager.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts" generic="TData">
+import { type ComponentPublicInstance, computed, ref, useTemplateRef } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useWorkflowsStore } from '../stores/workflows'
+import { provideFilteredWorkflowsContext, useFilteredWorkflows } from '../composables/filtered'
+import GeneralActionsPanel from './GeneralActionsPanel.vue'
+import WorkflowsCards from './WorkflowsCards.vue'
+import WorkflowsDataTable from './WorkflowsDataTable.vue'
+import type { Table } from '@tanstack/vue-table'
+import ViewControl from '@/modules/common/components/controls/ViewControl.vue'
+import TableControls from '@/modules/common/components/controls/TableControls.vue'
+
+interface WorkflowsDataTableExpose {
+  getTable: () => Table<TData>
+}
+
+const sortModel = ref('default')
+const search = ref('')
+
+const dataTable = useTemplateRef<
+  ComponentPublicInstance<typeof WorkflowsDataTable, WorkflowsDataTableExpose>
+>('table')
+
+const selectedWorkflows = ref<Record<string, boolean>>({})
+
+const isSelected = computed(() => {
+  return Object.values(selectedWorkflows.value).some(value => value)
+})
+
+const idxs = computed(() => Object.keys(selectedWorkflows.value))
+
+const workflowsStore = useWorkflowsStore()
+const { workflows } = storeToRefs(workflowsStore)
+
+const {
+  filteredWorkflows,
+} = useFilteredWorkflows(workflows, sortModel)
+
+provideFilteredWorkflowsContext({
+  sortModel,
+  search,
+})
+</script>
+
+<template>
+  <ViewControl>
+    <GeneralActionsPanel :workflows :idxs :is-selected />
+    <template #table>
+      <div
+        class="relative w-full h-full flex flex-col"
+        :class="workflows.length > 0 && 'justify-between'"
+      >
+        <div class="flex flex-col overflow-auto">
+          <WorkflowsDataTable ref="table" v-model:search="search" v-model:select="selectedWorkflows" :data="filteredWorkflows" />
+        </div>
+        <TableControls v-if="workflows.length > 0" :table="(dataTable?.getTable()! as Table<TData>)" />
+      </div>
+    </template>
+    <template #cards>
+      <WorkflowsCards :cards="filteredWorkflows" />
+    </template>
+  </ViewControl>
+</template>
diff --git a/apps/client/src/modules/workflows/components/forms/CreateWorkflowForm.vue b/apps/client/src/modules/workflows/components/forms/CreateWorkflowForm.vue
index a0539ae5..e1b25a89 100644
--- a/apps/client/src/modules/workflows/components/forms/CreateWorkflowForm.vue
+++ b/apps/client/src/modules/workflows/components/forms/CreateWorkflowForm.vue
@@ -4,10 +4,12 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { createReusableTemplate } from '@vueuse/core'
 import { useField, useForm } from 'vee-validate'
 import { useRouter } from 'vue-router/auto'
+import { storeToRefs } from 'pinia'
 import { useWorkflowsStore } from '../../stores/workflows'
 import { UiButton, UiFormField, UiFormLabel, UiFormMessage, UiInput } from '@/shared/ui'
 import { z } from '@/shared/libs/vee-validate'
 import { UiTextarea } from '@/shared/ui/textarea'
+import { useUserStore } from '@/modules/auth/stores/auth'
 
 const validationSchema = toTypedSchema(
   z.object({
@@ -23,8 +25,16 @@ const description = ref('')
 
 const router = useRouter()
 const workflowsStore = useWorkflowsStore()
+const authStore = useUserStore()
+const { user } = storeToRefs(authStore)
 
 const onWorkflowCreation = handleSubmit((values) => {
+  workflowsStore.addNewWorkflow({
+    name: values.name,
+    description: description.value,
+    state: 'draft',
+    creator: user.value,
+  })
   router.push({ name: 'workflows-id', params: { id: '1' } })
 })
 
@@ -36,6 +46,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     <UiFormField v-auto-animate>
       <UiFormLabel
         :for="field"
+        :required="field === 'name'"
       >
         {{ $t(`workflows.forms.creating.${field}.label`) }}
       </UiFormLabel>
@@ -67,19 +78,13 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
         <div class="flex items-center justify-end gap-3">
           <UiButton
             variant="secondary"
-            size="default"
             type="button"
             class="px-4"
             @click="router.back()"
           >
             {{ $t('workflows.forms.creating.btns', 1) }}
           </UiButton>
-          <UiButton
-            variant="solid"
-            size="default"
-            type="submit"
-            class="px-4"
-          >
+          <UiButton variant="solid" type="submit" class="px-4">
             {{ $t('workflows.forms.creating.btns', 2) }}
           </UiButton>
         </div>
diff --git a/apps/client/src/modules/workflows/pages/workflows.vue b/apps/client/src/modules/workflows/pages/workflows.vue
index bcb5138e..33e0518b 100644
--- a/apps/client/src/modules/workflows/pages/workflows.vue
+++ b/apps/client/src/modules/workflows/pages/workflows.vue
@@ -1,47 +1,14 @@
 <script setup lang="ts" generic="TData">
-import { type ComponentPublicInstance, computed, ref, useTemplateRef } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useHead } from '@unhead/vue'
-import GeneralActionsPanel from '../components/GeneralActionsPanel.vue'
 import { useWorkflowsStore } from '../stores/workflows'
 import EmptyWorkflows from '../components/EmptyWorkflows.vue'
-import { provideFilteredWorkflowsContext, useFilteredWorkflows } from '../composables/filtered'
-import WorkflowsDataTable from '../components/WorkflowsDataTable.vue'
-import WorkflowsCards from '../components/WorkflowsCards.vue'
-import type { Table } from '@tanstack/vue-table'
-import ViewControl from '@/modules/common/components/controls/ViewControl.vue'
-import TableControls from '@/modules/common/components/controls/TableControls.vue'
-
-interface WorkflowsDataTableExpose {
-  getTable: () => Table<TData>
-}
-
-const sortModel = ref('default')
-const search = ref('')
-
-const dataTable = useTemplateRef<
-  ComponentPublicInstance<typeof WorkflowsDataTable, WorkflowsDataTableExpose>
->('table')
-
-const selectedWorkflows = ref<Record<string, boolean>>({})
-
-const isSelected = computed(() => {
-  return Object.values(selectedWorkflows.value).some(value => value)
-})
-
-const idxs = computed(() => Object.keys(selectedWorkflows.value))
+import WorkflowsManager from '../components/WorkflowsManager.vue'
 
+// to data loaders
 const workflowsStore = useWorkflowsStore()
-const { workflows } = storeToRefs(workflowsStore)
-
-const {
-  filteredWorkflows,
-} = useFilteredWorkflows(workflows, sortModel)
 
-provideFilteredWorkflowsContext({
-  sortModel,
-  search,
-})
+const { workflows } = storeToRefs(workflowsStore)
 
 // unplugin
 definePage({
@@ -65,25 +32,12 @@ useHead({
 </script>
 
 <template>
-  <div v-if="$route.name !== 'workflows-id'" class="w-full h-full flex flex-col">
-    <ViewControl>
-      <GeneralActionsPanel :workflows :idxs :is-selected />
-      <template #table>
-        <div
-          class="relative w-full h-full flex flex-col"
-          :class="workflows.length > 0 && 'justify-between'"
-        >
-          <div class="flex flex-col overflow-auto">
-            <WorkflowsDataTable ref="table" v-model:search="search" v-model:select="selectedWorkflows" :data="filteredWorkflows" />
-          </div>
-          <TableControls v-if="workflows.length > 0" :table="(dataTable?.getTable()! as Table<TData>)" />
-        </div>
-      </template>
-      <template #cards>
-        <WorkflowsCards :cards="filteredWorkflows" />
-      </template>
-    </ViewControl>
-    <EmptyWorkflows v-if="!filteredWorkflows.length" />
+  <div
+    v-if="$route.name !== 'workflows-id'"
+    class="w-full h-full flex flex-col"
+  >
+    <WorkflowsManager />
+    <EmptyWorkflows v-if="!workflows.length" />
   </div>
   <RouterView />
 </template>
diff --git a/apps/client/src/modules/workflows/stores/workflows.ts b/apps/client/src/modules/workflows/stores/workflows.ts
index 39e20816..e9eb8ead 100644
--- a/apps/client/src/modules/workflows/stores/workflows.ts
+++ b/apps/client/src/modules/workflows/stores/workflows.ts
@@ -1,82 +1,30 @@
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef, triggerRef } from 'vue'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import type { Workflow } from '../types'
 
 export const useWorkflowsStore = defineStore('workflows', () => {
-  const workflows = shallowRef<Workflow[]>(
-    [
-      {
-        _id: '1',
-        name: 'Workflow 1',
-        description: 'Workflow 1 description',
-        state: 'draft',
-        runsCount: 1,
-        creator: {
-          _id: '1',
-          email: 'airat@gmail.com',
-          photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4',
-        },
-        updatedAt: new Date(),
-      },
-      {
-        _id: '2',
-        name: 'Workflow 2',
-        description: 'Workflow 2 description',
-        state: 'production',
-        runsCount: 4,
-        creator: {
-          _id: '1',
-          email: 'airat@gmail.com',
-          photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4',
-        },
-        updatedAt: new Date(),
-      },
-      {
-        _id: '3',
-        name: 'Workflow 3',
-        description: 'dsklajdjlkasjdklasj djhsgjdhasghjdjsad sa',
-        state: 'production',
-        runsCount: 23,
-        creator: {
-          _id: '1',
-          email: 'airat@gmail.com',
-          photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4',
-        },
-        updatedAt: new Date(),
-      },
-      {
-        _id: '4',
-        name: 'Workflow 5',
-        description: 'dsklajdjlkasjdklasj',
-        state: 'production',
-        runsCount: 23,
-        creator: {
-          _id: '1',
-          email: 'airat@gmail.com',
-          photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4',
-        },
-        updatedAt: new Date(),
-      },
-      {
-        _id: '5',
-        name: 'Workflow 5',
-        description: 'dsklajdjlkasjdklasj  ',
-        state: 'draft',
-        runsCount: 23,
-        creator: {
-          _id: '1',
-          email: 'airat@gmail.com',
-          photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4',
-        },
-        updatedAt: new Date(),
-      },
-    ],
-  )
+  const workflows = shallowRef<Workflow[]>([])
   const workflow = ref<Workflow>()
 
+  function addNewWorkflow(workflow: Omit<Workflow, '_id'>) {
+    workflows.value.push(workflow)
+  }
+
+  function removeWorkflows(idxs: string[]) {
+    idxs.forEach((id) => {
+      const index = workflows.value.findIndex(workflow => workflow._id === id)
+      if (index !== -1) {
+        workflows.value.splice(index, 1)
+        triggerRef(workflows)
+      }
+    })
+  }
+
   return {
     workflows,
     workflow,
+    addNewWorkflow,
+    removeWorkflows,
   }
 })
 
diff --git a/apps/client/src/modules/workflows/types/index.ts b/apps/client/src/modules/workflows/types/index.ts
index 9d0796bb..b92d8a49 100644
--- a/apps/client/src/modules/workflows/types/index.ts
+++ b/apps/client/src/modules/workflows/types/index.ts
@@ -8,11 +8,12 @@ interface DateParams {
 
 export type WorkflowCard = Pick<Workflow, '_id' | 'name' | 'description' | 'state' | 'updatedAt'>
 
+// fix with nodes and edges
 export interface Workflow extends DateParams {
-  _id: string;
+  _id?: string;
   name: string;
   description: string;
   state: 'draft' | 'production';
-  runsCount: number;
+  runsCount?: number;
   creator: User
 }
\ No newline at end of file
diff --git a/apps/client/src/shared/ui/_shortcuts/form.ts b/apps/client/src/shared/ui/_shortcuts/form.ts
index 17ab28db..f9a8b4b9 100644
--- a/apps/client/src/shared/ui/_shortcuts/form.ts
+++ b/apps/client/src/shared/ui/_shortcuts/form.ts
@@ -6,6 +6,8 @@ export const staticForm: Record<`${FormPrefix}-${string}` | FormPrefix, string>
   'form-label': 'text-sm text-neutral-900 !fw500 dark:text-neutral-200 peer-disabled:(cursor-not-allowed opacity-70)',
   'form-message': 'flex items-center gap-2 capitalize text-sm normal-case !fw500',
   'form-text-underline': 'cursor-pointer underline underline-offset-4 duration-100 ease-in hover:text-neutral-900 dark:hover:text-neutral-400',
+  'form-label-container': 'relative',
+  'form-label-required': 'absolute w-3 h-3 text-red-500 top-0.5 right--3',
 }
 
 export const form = [
diff --git a/apps/client/src/shared/ui/form/UiFormLabel.vue b/apps/client/src/shared/ui/form/UiFormLabel.vue
index db14f995..2aba940a 100644
--- a/apps/client/src/shared/ui/form/UiFormLabel.vue
+++ b/apps/client/src/shared/ui/form/UiFormLabel.vue
@@ -3,7 +3,12 @@ import { computed, type HTMLAttributes } from 'vue'
 import { Label, type LabelProps } from 'radix-vue'
 import { cn } from '@/shared/libs/shadcn/utils'
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+interface Props extends LabelProps {
+  class?: HTMLAttributes['class']
+  required?: boolean
+}
+
+const props = defineProps<Props>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -13,13 +18,20 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <Label
-    :class="cn(
-      'form-label',
-      props.class,
-    )"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </Label>
+  <div class="form-label-container">
+    <Label
+      :class="cn(
+        'form-label',
+        props.class,
+      )"
+      v-bind="delegatedProps"
+    >
+      <slot />
+    </Label>
+    <div
+      v-if="required"
+      i-lucide-asterisk
+      class="form-label-required"
+    />
+  </div>
 </template>