diff --git a/README.md b/README.md
index da740ce..03bb615 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,8 @@ Roadmap:
 - [x] Now we can customize the folder icon and color
 - [ ] Pagination on table view
 - [ ] Move the category to a collection for better UX and data structure
-- [ ] Run Another flow ability
+- [x] Run webhook flow ability
+- [x] Manage another instance flows
 
 
 
@@ -78,5 +79,10 @@ Changelogs:
   * Add feature to pull flows from another directus instance to the current instance
 - 1.4.4 (28 July 2024)
   * Add admin access checker on the flow manager module registration
+- 1.4.5 (07 August 2024)
+  * Add feature to run webhook flow
+  * Add feature to manage another instance flows (duplicate, backup, restore, categorize, table view, run, and delete)
+  * Add checking for the flow manager field onload
+
 Contributing:
 If you want to contribute kindly to create a PR and if you want to request a feature or report of a bug kindly create the Issue
diff --git a/package-lock.json b/package-lock.json
index a0f3dee..f9b637c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "directus-extension-flow-manager",
-	"version": "1.4.4",
+	"version": "1.4.5",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "directus-extension-flow-manager",
-			"version": "1.4.4",
+			"version": "1.4.5",
 			"license": "gpl-3.0",
 			"devDependencies": {
 				"@directus/composables": "^10.1.12",
diff --git a/package.json b/package.json
index 217e6b9..992147a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
 	"name": "directus-extension-flow-manager",
 	"description": "This is a custom module for managing Flow",
 	"icon": "extension",
-	"version": "1.4.4",
+	"version": "1.4.5",
   "author": {
     "name": "Bagus Andreanto",
     "email": "andreanto.bagus@gmail.com"
diff --git a/src/components/flow-item.vue b/src/components/flow-item.vue
deleted file mode 100644
index 6f87c44..0000000
--- a/src/components/flow-item.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <div class="row-item">
-    <v-list-item block dense clickable :class="{ hidden: !isCategory && !isActive }">
-      <v-list-item-icon>
-        <v-icon class="drag-handle" name="drag_handle" v-if="!isCategory" />
-      </v-list-item-icon>
-      <v-icon v-if="isCategory" :name="item.icon" :class="`mr-4`" />
-      <v-icon
-        v-else
-        :name="item.icon"
-        :color="item.color || 'var(--primary)'"
-        :class="`mr-4`"
-        v-tooltip.bottom="item.status === 'active' ? 'Active' : 'Inactive'"
-      />
-      <div v-if="!isCategory && !isActive" class="item-detail">
-        <v-chip x-small class="item-name text-gray mr-4 trigger-chip">{{ triggerType }}</v-chip>
-        <span ref="itemName" class="item-name text-gray">{{ item.name }}</span>
-        <span v-if="item.description" class="item-note text-gray">{{ item.description }}</span>
-      </div>
-      <div v-else class="item-detail">
-        <v-chip v-if="triggerType" x-small active class="item-name mr-4 trigger-chip">{{ triggerType }} </v-chip>
-        <span ref="itemName" class="item-name">{{ item.name }}</span>
-        <span v-if="item.description" class="item-note">{{ item.description }}</span>
-      </div>
-      <v-icon v-if="!isCategory" v-tooltip="'Go to Flow'" name="open_in_new" clickable @click.stop.prevent="goToFlow(item)" />
-      <v-icon
-        v-if="nestedFlows?.length"
-        v-tooltip="isItemExpanded ? 'Collapse' : 'Expand'"
-        :name="isItemExpanded ? 'unfold_less' : 'unfold_more'"
-        clickable
-        @click.stop.prevent="toggleCollapse"
-      />
-      <item-options v-if="item.type !== 'category'" :item="item" />
-    </v-list-item>
-
-    <transition-expand>
-      <draggable
-        v-if="isItemExpanded"
-        :force-fallback="true"
-        :model-value="nestedFlows"
-        :group="{ name: 'flows' }"
-        :swap-threshold="0.3"
-        class="drag-container"
-        item-key="id"
-        handle=".drag-handle"
-        @update:model-value="onGroupSortChange"
-      >
-        <template #item="{ element }">
-          <flow-item :item="element" :items="items" />
-        </template>
-      </draggable>
-    </transition-expand>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, toRefs, computed, inject } from "vue";
-import { IFlow, IFolder } from "../types";
-import Draggable from "vuedraggable";
-import { useRouter } from "vue-router";
-import { useLocalStorage } from "../composables/use-local-storage";
-import itemOptions from "./item-options.vue";
-
-export default defineComponent({
-  components: {
-    Draggable,
-    itemOptions,
-  },
-  props: {
-    item: {
-      type: Object as PropType<IFlow & IFolder>,
-      required: true,
-    },
-    items: {
-      type: Array as PropType<IFlow[]>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const router = useRouter();
-    const { item, items } = toRefs(props);
-    const flowManagerUtils = inject<{
-      onSort: (event: any[], parentId: string) => void;
-    }>("flowManagerUtils");
-    const nestedFlows = computed(() =>
-      props.items
-        .filter((flow) => flow.flow_manager_category === props.item.id)
-        .sort((a, b) => (a.flow_manager_order || 0) - (b.flow_manager_order || 0))
-    );
-    const { data: isItemExpanded } = useLocalStorage<boolean>(`settings-collapsed-flow-manager-${props.item.id}`, true);
-
-    const isActive = computed(() => item.value.status === "active");
-
-    const isCategory = computed(() => item.value.type === "category");
-
-    const triggerType = computed(() => {
-      return item.value.trigger?.toUpperCase();
-    });
-
-    return {
-      item,
-      items,
-      nestedFlows,
-      isItemExpanded,
-      toggleCollapse,
-      onGroupSortChange,
-      goToFlow,
-      isActive,
-      isCategory,
-      triggerType,
-    };
-
-    function toggleCollapse() {
-      isItemExpanded.value = !isItemExpanded.value;
-    }
-
-    function onGroupSortChange(updates: IFlow[]) {
-      flowManagerUtils?.onSort(updates, item.value.id);
-    }
-
-    function goToFlow(item: IFlow & IFolder) {
-      if (item.type === "category") return;
-      router.push(`/settings/flows/${item.id}`);
-    }
-  },
-});
-</script>
-
-<style lang="scss">
-.drag-handle {
-  cursor: move;
-}
-
-.mr-4 {
-  margin-right: 4px;
-}
-
-.drag-container {
-  margin-top: 8px;
-  margin-left: 20px;
-}
-
-.drag-handle {
-  cursor: grab;
-}
-
-.item-name {
-  flex-shrink: 0;
-}
-
-.item-detail {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  height: 100%;
-  overflow: hidden;
-  font-family: var(--family-monospace);
-  pointer-events: none;
-}
-
-.row-item {
-  margin-bottom: 8px;
-}
-
-.item-note {
-  margin-left: 4px;
-  overflow: hidden;
-  color: var(--foreground-subdued, var(--theme--foreground-subdued, gray));
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  opacity: 0;
-  transition: opacity var(--fast) var(--transition);
-}
-
-.v-list-item:hover .item-note {
-  opacity: 1;
-}
-
-.text-gray {
-  color: var(--foreground-subdued, var(--theme--foreground-subdued, gray));
-}
-
-.trigger-chip {
-  --v-chip-color: white;
-  --v-chip-background-color: var(--primary);
-}
-</style>
diff --git a/src/components/item-options.vue b/src/components/item-options.vue
deleted file mode 100644
index 8a63fa5..0000000
--- a/src/components/item-options.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <v-menu placement="left-start" show-arrow>
-    <template #activator="{ toggle }">
-      <v-icon name="more_vert" clickable class="ctx-toggle" @click.prevent="toggle" />
-    </template>
-    <v-list>
-      <v-list-item clickable @click="duplicate(item)">
-        <v-list-item-icon>
-          <v-icon name="content_copy" />
-        </v-list-item-icon>
-        <v-list-item-content> Duplicate </v-list-item-content>
-      </v-list-item>
-      <v-list-item clickable @click="backup(item)">
-        <v-list-item-icon>
-          <v-icon name="file_download" />
-        </v-list-item-icon>
-        <v-list-item-content> Backup </v-list-item-content>
-      </v-list-item>
-      <v-list-item clickable @click="showPushToCloud(item)">
-        <v-list-item-icon>
-          <v-icon name="cloud_upload" />
-        </v-list-item-icon>
-        <v-list-item-content> Push to Cloud </v-list-item-content>
-      </v-list-item>
-      <v-list-item clickable @click="showDeleteFlowDialog(item)">
-        <v-list-item-icon>
-          <v-icon name="delete" />
-        </v-list-item-icon>
-        <v-list-item-content> Delete </v-list-item-content>
-      </v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, toRefs, inject } from "vue";
-import { IFlow } from "../types";
-
-export default defineComponent({
-  props: {
-    item: {
-      type: Object as PropType<IFlow>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { item } = toRefs(props);
-    const flowManagerUtils = inject<{
-      duplicate: (item: IFlow, isDuplicate?: boolean) => Promise<void>;
-      backup: (item: IFlow) => Promise<void>;
-      showPushToCloud: (item: IFlow) => Promise<void>;
-      showDeleteFlowDialog: (item: IFlow) => Promise<void>;
-    }>("flowManagerUtils");
-
-    const duplicate = (item: IFlow, isDuplicate?: boolean) => {
-      flowManagerUtils?.duplicate(item, isDuplicate);
-    };
-
-    const backup = (item: IFlow) => {
-      flowManagerUtils?.backup(item);
-    };
-
-    const showPushToCloud = (item: IFlow) => {
-      flowManagerUtils?.showPushToCloud(item);
-    };
-
-    const showDeleteFlowDialog = (item: IFlow) => {
-      flowManagerUtils?.showDeleteFlowDialog(item);
-    };
-
-    return {
-      item,
-      duplicate,
-      backup,
-      showPushToCloud,
-      showDeleteFlowDialog,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.ctx-toggle {
-  --v-icon-color: var(--foreground-subdued);
-
-  &:hover {
-    --v-icon-color: var(--foreground-normal);
-  }
-}
-</style>
diff --git a/src/components/navigation-item-content.vue b/src/components/navigation-item-content.vue
deleted file mode 100644
index 30550ac..0000000
--- a/src/components/navigation-item-content.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <v-list-item-icon>
-    <v-icon :name="icon ?? 'label'" :color="color" />
-  </v-list-item-icon>
-  <v-list-item-content><v-text-overflow :text="name" :highlight="search" /></v-list-item-content>
-</template>
-
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    name: string;
-    search?: string;
-    icon?: string;
-    color?: string;
-  }>(),
-  {
-    icon: "label",
-    color: "var(--foreground-normal)",
-  }
-);
-</script>
diff --git a/src/components/navigation-item.vue b/src/components/navigation-item.vue
deleted file mode 100644
index 03234cd..0000000
--- a/src/components/navigation-item.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <v-list-group
-    v-if="childFlows?.length && matchesSearch"
-    v-context-menu="flow.type !== 'category' ? 'contextMenu' : null"
-    :to="`/flow-manager/${currentPath}`"
-    scope="content-navigation"
-    :value="flow.id"
-    query
-  >
-    <template #activator>
-      <navigation-item-content :name="flow.name || 'Flow'" :icon="flow.icon" :color="flow.color" :search="search" />
-    </template>
-    <navigation-item
-      v-for="(childFlow, indexChild) in childFlows"
-      :key="`${childFlow.id}_${indexChild}`"
-      :flow="childFlow"
-      :flow-child-map="flowChildMap"
-      :search="search"
-    />
-  </v-list-group>
-
-  <v-list-item v-context-menu="flow.type !== 'category' ? 'contextMenu' : null" v-else-if="matchesSearch">
-    <navigation-item-content :search="search" :name="flow.name || 'Flow'" :icon="flow.icon" :color="flow.color" />
-  </v-list-item>
-
-  <v-menu v-if="flow.type !== 'category'" ref="contextMenu" show-arrow placement="bottom-start">
-    <v-list>
-      <v-list-item clickable :to="`/settings/flows/${flow.id}`">
-        <v-list-item-icon>
-          <v-icon name="bolt" />
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-text-overflow :text="'Go to the Flow'" />
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item clickable @click="duplicate(flow as IFlow)">
-        <v-list-item-icon>
-          <v-icon name="content_copy" />
-        </v-list-item-icon>
-        <v-list-item-content> Duplicate </v-list-item-content>
-      </v-list-item>
-      <v-list-item clickable @click="backup(flow as IFlow)">
-        <v-list-item-icon>
-          <v-icon name="file_download" />
-        </v-list-item-icon>
-        <v-list-item-content> Backup </v-list-item-content>
-      </v-list-item>
-      <v-list-item clickable @click="showPushToCloud(flow as IFlow)">
-        <v-list-item-icon>
-          <v-icon name="cloud_upload" />
-        </v-list-item-icon>
-        <v-list-item-content> Push to Cloud </v-list-item-content>
-      </v-list-item>
-      <v-list-item clickable @click="showDeleteFlowDialog(flow as IFlow)">
-        <v-list-item-icon>
-          <v-icon name="delete" />
-        </v-list-item-icon>
-        <v-list-item-content> Delete </v-list-item-content>
-      </v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-
-<script setup lang="ts">
-import { computed, toRefs, inject } from "vue";
-import { IFlow, IFolder } from "../types";
-import NavigationItemContent from "./navigation-item-content.vue";
-
-const props = defineProps<{
-  flow: Partial<IFlow & IFolder>;
-  showHidden?: boolean;
-  search?: string;
-  flowChildMap: Record<string, IFlow[]>;
-}>();
-
-const { flow, search, flowChildMap } = toRefs(props);
-
-const currentPath = computed(() => encodeURIComponent((flow.value.id as string) || ""));
-
-const childFlows = computed(() => {
-  const flows = (flowChildMap.value[flow.value.id as string] || []).sort(
-    (a, b) => (a.flow_manager_order || 0) - (b.flow_manager_order || 0)
-  );
-
-  return flows;
-});
-
-const allChildreens = computed(() => {
-  const childreens = [];
-  let tmp = flowChildMap.value[flow.value.id as string] || [];
-  while (tmp.length > 0) {
-    childreens.push(...tmp);
-    tmp = tmp.flatMap((flow) => flowChildMap.value[flow.id as string] || []);
-  }
-
-  return childreens;
-});
-
-const matchesSearch = computed<boolean>(() => {
-  if (!props.search) return true;
-
-  const searchQuery = props.search.toLowerCase();
-
-  return matchesSearch(flow.value) || childrenMatchSearch(allChildreens.value);
-
-  function childrenMatchSearch(items: Partial<IFlow & IFolder>[]): boolean {
-    return items.some((item) => {
-      return matchesSearch(item);
-    });
-  }
-
-  function matchesSearch(item: Partial<IFlow & IFolder>) {
-    return item?.name?.toLowerCase().includes(searchQuery);
-  }
-});
-
-const flowManagerUtils = inject<{
-  duplicate: (item: IFlow, isDuplicate?: boolean) => Promise<void>;
-  backup: (item: IFlow) => Promise<void>;
-  showPushToCloud: (item: IFlow) => Promise<void>;
-  showDeleteFlowDialog: (item: IFlow) => Promise<void>;
-}>("flowManagerUtils");
-
-const duplicate = (item: IFlow, isDuplicate?: boolean) => {
-  flowManagerUtils?.duplicate(item, isDuplicate);
-};
-
-const backup = (item: IFlow) => {
-  flowManagerUtils?.backup(item);
-};
-
-const showPushToCloud = (item: IFlow) => {
-  flowManagerUtils?.showPushToCloud(item);
-};
-
-const showDeleteFlowDialog = (item: IFlow) => {
-  flowManagerUtils?.showDeleteFlowDialog(item);
-};
-</script>
-
-<style scoped>
-.hidden {
-  --v-list-item-color: var(--foreground-subdued);
-}
-</style>
diff --git a/src/components/navigation.vue b/src/components/navigation.vue
deleted file mode 100644
index 558966d..0000000
--- a/src/components/navigation.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-  <div class="content-navigation-wrapper">
-    <div class="action-bar">
-      <div class="action-button">
-        <v-button small to="/flow-manager"> Home </v-button>
-        <v-button small @click="onNavigationAction">
-          {{ activeGroups.length ? "Collapse All" : "Expand All" }}
-        </v-button>
-      </div>
-      <div class="search-input">
-        <v-input type="search" small :placeholder="'Search Flow'" v-model="tmpSearch" @input="debounce(onSearchChange, 500)">
-          <template v-slot:append>
-            <v-icon
-              v-if="tmpSearch"
-              name="close"
-              clickable
-              @click="
-                search = '';
-                tmpSearch = '';
-              "
-            />
-          </template>
-        </v-input>
-      </div>
-    </div>
-    <v-list v-model="activeGroups" scope="content-navigation" class="content-navigation" tabindex="-1" nav :mandatory="false">
-      <navigation-item
-        v-for="(flow, flowIndex) in filteredRootFlows"
-        :key="`${flow.id}_${flowIndex}`"
-        :flow="flow"
-        :flow-child-map="flowChildMap"
-        :search="search"
-      />
-    </v-list>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, toRefs } from "vue";
-import NavigationItem from "./navigation-item.vue";
-import { IFlow, IFolder } from "../types";
-import { useLocalStorage } from "../composables/use-local-storage";
-
-const props = defineProps<{
-  currentCollection?: string;
-  rootFlows: Partial<IFlow & IFolder>[];
-  flowChildMap: Record<string, IFlow[]>;
-  allFlows: IFolder[] | IFlow[];
-}>();
-
-const { rootFlows, flowChildMap, allFlows } = toRefs(props);
-const search = ref<string>("");
-const tmpSearch = ref<string>("");
-const timeOutId = ref<NodeJS.Timeout | null>(null);
-
-/**
- * @description
- * This is a computed property that returns a filtered list of items based on the search value.
- */
-const filteredItemFlag = computed(() => {
-  if (!allFlows.value) return {};
-  const cache: Record<string, boolean> = {};
-
-  for (let i = 0; i < allFlows.value.length; i++) {
-    const flow = allFlows.value[i] as IFlow | IFolder;
-    const { id } = flow;
-
-    cache[id as string] = checkFlowHaveChildSearched(flow);
-  }
-
-  return cache;
-});
-
-const filteredRootFlows = ref(rootFlows.value);
-
-function checkFlowHaveChildSearched(item: IFlow | IFolder): boolean {
-  const { id, name } = item;
-
-  if (name?.toLowerCase().includes(search.value.toLowerCase())) {
-    return true;
-  }
-
-  let children = flowChildMap.value[id as string];
-  if (!children?.length) {
-    return false;
-  }
-
-  const isExist = children.some((child) => {
-    return child.name.toLowerCase().includes(search.value.toLowerCase());
-  });
-
-  if (isExist) {
-    return true;
-  }
-
-  return children.some((child) => {
-    return checkFlowHaveChildSearched(child);
-  });
-}
-
-const { data: activeGroups } = useLocalStorage<string[]>(`settings-active-groups-flow-manager`, []);
-
-function onSearchChange() {
-  if (!search.value) {
-    return;
-  }
-
-  const result: string[] = [];
-
-  const flowFlags = Object.entries(filteredItemFlag.value);
-  for (let i = 0; i < flowFlags.length; i++) {
-    const [key, value] = flowFlags[i] as [string, boolean];
-
-    if (value) {
-      result.push(key);
-    }
-  }
-
-  activeGroups.value = result;
-}
-
-function debounce(fn: Function, delay: number) {
-  if (timeOutId.value) clearTimeout(timeOutId.value);
-  timeOutId.value = setTimeout(() => {
-    search.value = tmpSearch.value;
-    fn();
-  }, delay);
-}
-
-function onNavigationAction() {
-  if (activeGroups.value?.length) {
-    activeGroups.value = [];
-  } else {
-    const result: string[] = [];
-
-    const flowChildren = Object.entries(flowChildMap.value);
-    for (let i = 0; i < flowChildren.length; i++) {
-      const [key, value] = flowChildren[i] as [string, IFlow[]];
-
-      if (value.length) {
-        result.push(key);
-      }
-    }
-    activeGroups.value = result;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.group-name {
-  padding-left: 8px;
-  font-weight: 600;
-}
-
-.empty {
-  .v-button {
-    --v-button-color: var(--foreground-subdued);
-    --v-button-background-color: var(--foreground-subdued);
-    --v-button-background-color-hover: var(--primary);
-  }
-}
-
-.content-navigation-wrapper {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-}
-
-.content-navigation {
-  --v-list-min-height: calc(100% - 64px);
-
-  flex-grow: 1;
-
-  .v-detail {
-    :deep(.v-divider) {
-      margin: 0px;
-    }
-
-    &:not(:first-child) :deep(.v-divider) {
-      margin-top: 8px;
-    }
-
-    &.empty :deep(.v-divider) {
-      margin-bottom: 8px;
-    }
-  }
-}
-
-.hidden-collection {
-  --v-list-item-color: var(--foreground-subdued);
-}
-
-.action-bar {
-  .search-input {
-    --input-height: 40px;
-    margin-top: 8px;
-  }
-
-  .action-button {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  padding: 12px;
-  padding-bottom: 0;
-  background-color: var(--background-normal);
-}
-</style>
diff --git a/src/constants.ts b/src/constants.ts
index 0fd466f..e6be781 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +1,3 @@
 export const TRIGGER_TYPES = ["event", "manual", "operation", "schedule", "webhook"];
+export const NPM_LINK = "https://registry.npmjs.org/directus-extension-flow-manager";
+export const ENDPOINT_EXTENSION_NAME = "flow-manager-endpoint";
diff --git a/src/flow-manager-directus-flow-hook/index.ts b/src/flow-manager-directus-flow-hook/index.ts
index 671587f..aa33163 100644
--- a/src/flow-manager-directus-flow-hook/index.ts
+++ b/src/flow-manager-directus-flow-hook/index.ts
@@ -1,17 +1,41 @@
 import { defineHook } from "@directus/extensions-sdk";
 
-export default defineHook(({ action }, { services }) => {
+export default defineHook(({ action }, { services, logger }) => {
   action("activity.create", async (data: any, { database, schema }) => {
     const {
       payload: { action, item: flowId },
     } = data;
-    const { RevisionsService } = services;
+    const { RevisionsService, FieldsService } = services;
     if (action === "run") {
       const revisionsService = new RevisionsService({
         knex: database,
         schema,
       });
 
+      const fieldsService = new FieldsService({
+        knex: database,
+        schema,
+      });
+
+      const fields = await fieldsService.readAll("directus_flows");
+
+      let isCounterFieldExists = false;
+      let isCounterDateFieldExists = false;
+
+      for (const field of fields) {
+        if (field.field === "flow_manager_run_counter") {
+          isCounterFieldExists = true;
+        }
+
+        if (field.field === "flow_manager_last_run_at") {
+          isCounterDateFieldExists = true;
+        }
+
+        if (isCounterFieldExists && isCounterDateFieldExists) {
+          break;
+        }
+      }
+
       const counter = await revisionsService.readByQuery({
         filter: {
           _and: [
@@ -43,10 +67,16 @@ export default defineHook(({ action }, { services }) => {
         sort: ["-id"],
       });
 
-      await database("directus_flows").where({ id: flowId }).update({
-        flow_manager_last_run_at: new Date(),
-        flow_manager_run_counter: counter.length + 1,
-      });
+      if (isCounterDateFieldExists && isCounterFieldExists) {
+        await database("directus_flows")
+          .where({ id: flowId })
+          .update({
+            flow_manager_last_run_at: new Date(),
+            flow_manager_run_counter: counter.length + 1,
+          });
+      } else {
+        logger.warn("Flow Manager: flow_manager_run_counter or flow_manager_last_run_at field is missing in directus_flows collection");
+      }
     }
   });
 });
diff --git a/src/flow-manager-module/components/credential-dialog.vue b/src/flow-manager-module/components/credential-dialog.vue
index 04bad85..e174de8 100644
--- a/src/flow-manager-module/components/credential-dialog.vue
+++ b/src/flow-manager-module/components/credential-dialog.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { PropType, computed, inject, ref, toRefs, watch } from "vue";
-import { ICredential, IFlow } from "../types";
+import { ICredential, IFlow } from "../../types";
 import { generateRandomString } from "../../utils/string.util";
 import { useApi } from "@directus/extensions-sdk";
+import { ENDPOINT_EXTENSION_NAME } from "../../constants";
 const props = withDefaults(
   defineProps<{
     value: boolean;
@@ -196,7 +197,7 @@ async function pullFlows(credential: ICredential) {
     const fields = ["*", "operations.*"];
     const {
       data: { data },
-    } = await api.post("/flow-manager-endpoint/flow-manager/process", {
+    } = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
       url: `${credential?.url}/flows?fields=${fields.join(",")}`,
       staticToken: credential?.staticToken,
       method: "GET",
diff --git a/src/flow-manager-module/components/delete-dialog.vue b/src/flow-manager-module/components/delete-dialog.vue
index 4895189..faee2c6 100644
--- a/src/flow-manager-module/components/delete-dialog.vue
+++ b/src/flow-manager-module/components/delete-dialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { toRefs } from "vue";
-import { IFlow, IFolder } from "../types";
+import { IFlow, IFolder } from "../../types";
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/flow-manager-module/components/flow-item.vue b/src/flow-manager-module/components/flow-item.vue
index 0022dc7..dbdb967 100644
--- a/src/flow-manager-module/components/flow-item.vue
+++ b/src/flow-manager-module/components/flow-item.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { toRefs, computed, inject, Ref } from "vue";
-import { IFlow, IFolder } from "../types";
+import { ICredential, IFlow, IFolder } from "../../types";
 import Draggable from "vuedraggable";
 import { useRouter } from "vue-router";
-import { useLocalStorage } from "../composables/use-local-storage";
+import { useLocalStorage } from "../../composables/use-local-storage";
 import itemOptions from "./item-options.vue";
 
 const props = withDefaults(
@@ -28,6 +28,8 @@ const flowManagerUtils = inject<{
   selectItem: (item: IFlow) => void;
   selectItemKey: (key: string, isSelected: boolean) => void;
   selectedItems: Ref<string[]>;
+  selectedCredential: Ref<string>;
+  credentials: Ref<ICredential[]>;
 }>("flowManagerUtils");
 const nestedFlows = computed(() =>
   items.value
@@ -63,7 +65,19 @@ function onGroupSortChange(updates: IFlow[]) {
 
 function goToFlow(item: IFlow & IFolder) {
   if (item.type === "category") return;
-  router.push(`/settings/flows/${item.id}`);
+
+  if (flowManagerUtils?.selectedCredential.value === "local") {
+    router.push(`/settings/flows/${item.id}`);
+  } else {
+    const credential = flowManagerUtils?.credentials.value.find((cred) => cred.id === flowManagerUtils?.selectedCredential.value);
+    if (credential) {
+      const a = document.createElement("a");
+      a.href = `${credential.url}/admin/settings/flows/${item.id}`;
+      a.target = "_blank";
+      a.click();
+      document.body.removeChild(a);
+    }
+  }
 }
 
 function selectItem() {
diff --git a/src/flow-manager-module/components/item-options.vue b/src/flow-manager-module/components/item-options.vue
index d3d062f..a9abc2d 100644
--- a/src/flow-manager-module/components/item-options.vue
+++ b/src/flow-manager-module/components/item-options.vue
@@ -4,7 +4,17 @@
       <v-icon name="more_vert" clickable class="ctx-toggle" @click.prevent="toggle" />
     </template>
     <v-list v-if="item.type !== 'category'">
-      <v-list-item v-if="item.trigger === 'manual' && item.status === 'active'" clickable @click="showRunDialog(item)">
+      <v-list-item
+        v-if="item.trigger === 'manual' && item.status === 'active' && selectedCredential === 'local'"
+        clickable
+        @click="showRunDialog(item)"
+      >
+        <v-list-item-icon>
+          <v-icon name="play_arrow" />
+        </v-list-item-icon>
+        <v-list-item-content> Run </v-list-item-content>
+      </v-list-item>
+      <v-list-item v-else-if="item.trigger === 'webhook' && item.status === 'active'" clickable @click="showRunWebhookDialog(item)">
         <v-list-item-icon>
           <v-icon name="play_arrow" />
         </v-list-item-icon>
@@ -36,13 +46,13 @@
       </v-list-item>
     </v-list>
     <v-list v-else>
-      <v-list-item clickable @click="duplicateFolder(item)">
+      <v-list-item clickable @click="duplicateFolder(item as IFolder)">
         <v-list-item-icon>
           <v-icon name="content_copy" />
         </v-list-item-icon>
         <v-list-item-content> Duplicate Folder </v-list-item-content>
       </v-list-item>
-      <v-list-item clickable @click="showEditFolderDialog(item)">
+      <v-list-item clickable @click="showEditFolderDialog(item as IFolder)">
         <v-list-item-icon>
           <v-icon name="edit" />
         </v-list-item-icon>
@@ -59,8 +69,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, toRefs, inject } from "vue";
-import { IFlow, IFolder } from "../types";
+import { defineComponent, PropType, toRefs, inject, Ref, computed } from "vue";
+import { IFlow, IFolder } from "../../types";
 
 export default defineComponent({
   props: {
@@ -79,8 +89,12 @@ export default defineComponent({
       duplicateFolder: (item: IFolder) => Promise<void>;
       showEditFolderDialog: (item: IFolder) => Promise<void>;
       showRunDialog: (item: IFlow) => Promise<void>;
+      showRunWebhookDialog: (item: IFlow) => Promise<void>;
+      selectedCredential: Ref<string>;
     }>("flowManagerUtils");
 
+    const selectedCredential = computed(() => flowManagerUtils?.selectedCredential.value);
+
     return {
       item,
       duplicate,
@@ -90,6 +104,8 @@ export default defineComponent({
       duplicateFolder,
       showEditFolderDialog,
       showRunDialog,
+      showRunWebhookDialog,
+      selectedCredential,
     };
 
     function duplicate(item: IFlow, isDuplicate?: boolean) {
@@ -119,6 +135,10 @@ export default defineComponent({
     function showRunDialog(item: IFlow) {
       flowManagerUtils?.showRunDialog(item);
     }
+
+    function showRunWebhookDialog(item: IFlow) {
+      flowManagerUtils?.showRunWebhookDialog(item);
+    }
   },
 });
 </script>
diff --git a/src/flow-manager-module/components/loading-dialog.vue b/src/flow-manager-module/components/loading-dialog.vue
index b0701aa..f0e66cf 100644
--- a/src/flow-manager-module/components/loading-dialog.vue
+++ b/src/flow-manager-module/components/loading-dialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, toRefs, watch } from "vue";
-import { ProcessingItem } from "../types";
+import { ProcessingItem } from "../../types";
 
 const props = withDefaults(
   defineProps<{
@@ -8,15 +8,17 @@ const props = withDefaults(
     progressValue: number;
     listProcessing: ProcessingItem[];
     title: string;
+    indeterminate: boolean;
   }>(),
   {
     title: "Processing",
+    indeterminate: false,
   }
 );
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { value, progressValue, listProcessing, title } = toRefs(props);
+const { value, progressValue, listProcessing, title, indeterminate } = toRefs(props);
 const bottomList = ref<HTMLElement | null>(null);
 
 watch([progressValue], () => {
@@ -25,8 +27,14 @@ watch([progressValue], () => {
 </script>
 
 <template>
-  <v-dialog :model-value="value" @update:model-value="emit('update:model-value', false)">
-    <v-card>
+  <v-dialog :model-value="value" @update:model-value="emit('update:modelValue', false)" :persistent="indeterminate">
+    <v-card v-if="indeterminate">
+      <v-card-title>{{ title }}</v-card-title>
+      <v-card-text>
+        <v-progress-circular indeterminate></v-progress-circular>
+      </v-card-text>
+    </v-card>
+    <v-card v-else>
       <v-card-title>{{ title }}</v-card-title>
       <v-card-text>
         <v-progress-linear :value="progressValue"></v-progress-linear>
diff --git a/src/flow-manager-module/components/navigation-item.vue b/src/flow-manager-module/components/navigation-item.vue
index d21b8cf..42c0c5b 100644
--- a/src/flow-manager-module/components/navigation-item.vue
+++ b/src/flow-manager-module/components/navigation-item.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { computed, toRefs, inject, unref } from "vue";
-import { IFlow, IFolder } from "../types";
+import { computed, toRefs, inject, unref, Ref } from "vue";
+import { ICredential, IFlow, IFolder } from "../../types";
 import NavigationItemContent from "./navigation-item-content.vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const props = defineProps<{
   flow: Partial<IFlow & IFolder>;
   search?: string;
@@ -15,7 +17,7 @@ const currentPath = computed(() => encodeURIComponent((flow.value.id as string)
 
 const childFlows = computed(() => {
   const flows = (flowChildMap.value[flow.value.id as string] || []).sort(
-    (a, b) => (a.flow_manager_order || 0) - (b.flow_manager_order || 0)
+    (a, b) => ((a as IFlow).flow_manager_order || 0) - ((b as IFlow).flow_manager_order || 0)
   );
 
   return flows;
@@ -64,8 +66,13 @@ const flowManagerUtils = inject<{
   showEditFolderDialog: (item: IFolder) => Promise<void>;
   parentId: string | null;
   onSort: (event: any[], parentId: string) => void;
+  selectedCredential: Ref<string>;
+  showRunWebhookDialog: (item: IFlow) => Promise<void>;
+  credentials: Ref<ICredential[]>;
 }>("flowManagerUtils");
 
+const selectedCredential = computed(() => flowManagerUtils?.selectedCredential.value);
+
 const parentId = flowManagerUtils?.parentId;
 
 const duplicate = (item: IFlow, isDuplicate?: boolean) => {
@@ -96,6 +103,10 @@ const showEditFolderDialog = (item: IFolder) => {
   flowManagerUtils?.showEditFolderDialog(item);
 };
 
+const showRunWebhookDialog = (item: IFlow) => {
+  flowManagerUtils?.showRunWebhookDialog(item);
+};
+
 function moveTo() {
   const destinationCategory = unref(parentId) || "";
   const destinationFlows = flowChildMap.value[destinationCategory] || [];
@@ -118,6 +129,23 @@ function moveTo() {
   flowManagerUtils?.onSort(destinationFlows, destinationCategory);
   flowManagerUtils?.onSort(reorderSourceFlows, sourceCategory);
 }
+
+function goToFlow(item: IFlow & IFolder) {
+  if (item.type === "category") return;
+
+  if (flowManagerUtils?.selectedCredential.value === "local") {
+    router.push(`/settings/flows/${item.id}`);
+  } else {
+    const credential = flowManagerUtils?.credentials.value.find((cred) => cred.id === flowManagerUtils?.selectedCredential.value);
+    if (credential) {
+      const a = document.createElement("a");
+      a.href = `${credential.url}/admin/settings/flows/${item.id}`;
+      a.target = "_blank";
+      a.click();
+      document.body.removeChild(a);
+    }
+  }
+}
 </script>
 
 <template>
@@ -163,7 +191,23 @@ function moveTo() {
 
   <v-menu ref="contextMenu" show-arrow placement="bottom-start">
     <v-list v-if="flow.type !== 'category'">
-      <v-list-item v-if="flow.trigger === 'manual' && flow.status === 'active'" clickable @click="showRunDialog(flow as IFlow)">
+      <v-list-item
+        v-if="flow.trigger === 'manual' && flow.status === 'active' && selectedCredential === 'local'"
+        clickable
+        @click="showRunDialog(flow as IFlow)"
+      >
+        <v-list-item-icon>
+          <v-icon name="play_arrow" />
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-text-overflow :text="'Run'" />
+        </v-list-item-content>
+      </v-list-item>
+      <v-list-item
+        v-else-if="flow.trigger === 'webhook' && flow.status === 'active'"
+        clickable
+        @click="showRunWebhookDialog(flow as IFlow)"
+      >
         <v-list-item-icon>
           <v-icon name="play_arrow" />
         </v-list-item-icon>
@@ -171,7 +215,7 @@ function moveTo() {
           <v-text-overflow :text="'Run'" />
         </v-list-item-content>
       </v-list-item>
-      <v-list-item clickable :to="`/settings/flows/${flow.id}`">
+      <v-list-item clickable @click="goToFlow(flow as IFolder & IFlow)">
         <v-list-item-icon>
           <v-icon name="bolt" />
         </v-list-item-icon>
diff --git a/src/flow-manager-module/components/navigation.vue b/src/flow-manager-module/components/navigation.vue
index bfa0ff3..03183ee 100644
--- a/src/flow-manager-module/components/navigation.vue
+++ b/src/flow-manager-module/components/navigation.vue
@@ -1,6 +1,12 @@
 <template>
-  <div class="content-navigation-wrapper">
+  <div v-if="viewMode === 'TABLE'" class="content-navigation-wrapper">
     <div class="action-bar">
+      <v-select class="small" v-model="selectedCredential" :items="credentialOptions"></v-select>
+    </div>
+  </div>
+  <div v-else class="content-navigation-wrapper">
+    <div class="action-bar">
+      <v-select class="small" v-model="selectedCredential" :items="credentialOptions"></v-select>
       <div class="action-button">
         <v-button x-small to="/flow-manager"> Home </v-button>
         <v-button x-small @click="onNavigationAction">
@@ -36,23 +42,34 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, toRefs } from "vue";
+import { computed, ref, toRefs, inject, Ref } from "vue";
 import NavigationItem from "./navigation-item.vue";
-import { IFlow, IFolder } from "../types";
-import { useLocalStorage } from "../composables/use-local-storage";
+import { ICredential, IFlow, IFolder } from "../../types";
+import { useLocalStorage } from "../../composables/use-local-storage";
 
 const props = defineProps<{
   currentCollection?: string;
   rootFlows: Partial<IFlow & IFolder>[];
   flowChildMap: Record<string, (IFlow | IFolder)[]>;
   allFlows: IFolder[] | IFlow[];
+  viewMode: string;
 }>();
 
-const { rootFlows, flowChildMap, allFlows } = toRefs(props);
+const { rootFlows, flowChildMap, allFlows, viewMode } = toRefs(props);
 const search = ref<string>("");
 const tmpSearch = ref<string>("");
 const timeOutId = ref<NodeJS.Timeout | null>(null);
 
+const flowManagerUtils = inject<{
+  credentials: Ref<ICredential[]>;
+  selectedCredential: Ref<string>;
+  setCredential: (credential: string) => void;
+}>("flowManagerUtils");
+
+const selectedCredential = computed({
+  get: () => flowManagerUtils?.selectedCredential.value,
+  set: (value) => flowManagerUtils?.setCredential(value as string),
+});
 /**
  * @description
  * This is a computed property that returns a filtered list of items based on the search value.
@@ -71,6 +88,22 @@ const filteredItemFlag = computed(() => {
   return cache;
 });
 
+const credentialOptions = computed(() => {
+  const credentials =
+    flowManagerUtils?.credentials?.value?.map((credential) => ({
+      text: credential.name,
+      value: credential.id,
+    })) || [];
+
+  return [
+    {
+      text: "Local",
+      value: "local",
+    },
+    ...credentials,
+  ];
+});
+
 function checkFlowHaveChildSearched(item: IFlow | IFolder): boolean {
   const { id, name } = item;
 
@@ -198,6 +231,7 @@ function onNavigationAction() {
   .action-button {
     display: flex;
     justify-content: space-between;
+    margin-top: 8px;
   }
 
   position: sticky;
diff --git a/src/flow-manager-module/components/push-to-cloud-dialog.vue b/src/flow-manager-module/components/push-to-cloud-dialog.vue
index 3f33032..ce3f500 100644
--- a/src/flow-manager-module/components/push-to-cloud-dialog.vue
+++ b/src/flow-manager-module/components/push-to-cloud-dialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, toRefs } from "vue";
-import { ICredential } from "../types";
+import { ICredential } from "../../types";
 import { maskingText } from "../../utils/string.util";
 
 const props = withDefaults(
diff --git a/src/flow-manager-module/components/run-manual-flow-form.vue b/src/flow-manager-module/components/run-manual-flow-form.vue
index b3f4581..258a93c 100644
--- a/src/flow-manager-module/components/run-manual-flow-form.vue
+++ b/src/flow-manager-module/components/run-manual-flow-form.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, toRefs, Ref, computed, watch } from "vue";
-import { IFlow } from "../types";
+import { IFlow } from "../../types";
 import { useStores, useLayout, useApi } from "@directus/extensions-sdk";
 import { Preset, Collection } from "@directus/types";
 import debounce from "lodash/debounce";
@@ -51,17 +51,21 @@ const fields = computed(() => {
   }));
 });
 
-watch([requireSelection, requireConfirmation], ([isNeedSelection, isNeedConfirmation]) => {
-  if (isNeedSelection) {
-    step.value = 1;
-  } else if (isNeedConfirmation) {
-    step.value = 2;
-  } else {
-    step.value = 3;
+watch(
+  [requireSelection, requireConfirmation],
+  ([isNeedSelection, isNeedConfirmation]) => {
+    if (isNeedSelection) {
+      step.value = 1;
+    } else if (isNeedConfirmation) {
+      step.value = 2;
+    } else {
+      step.value = 3;
+    }
+  },
+  {
+    immediate: true,
   }
-}, {
-  immediate: true,
-});
+);
 
 const existingTabularPreset: Ref<Partial<Preset>> = ref(
   presetsStore.getPresetForCollection(`flow-manager-${selectedCollectionToRun.value}`)
@@ -175,10 +179,13 @@ const tabularLayoutQuery = computed({
   },
 });
 
-const collectionMap: Record<string, Collection> = allCollections.reduce((acc: Record<string, Collection>, collection: Collection) => {
-  acc[collection.collection] = collection;
-  return acc;
-}, {});
+const collectionMap: Record<string, Collection> = allCollections.reduce(
+  (acc: Record<string, Collection>, collection: Collection) => {
+    acc[collection.collection] = collection;
+    return acc;
+  },
+  {}
+);
 
 function onSelectCollectionToRun(collection: string) {
   selectedCollectionToRun.value = collection;
@@ -295,7 +302,11 @@ function resetConfirm() {
       </v-card-text>
       <v-card-actions>
         <v-button secondary @click="resetConfirm"> Cancel </v-button>
-        <v-button :disabled="(requireSelection && !selectedItemKeys.length) || !selectedCollectionToRun" @click="proceed()" :loading="loadingRunFlow">
+        <v-button
+          :disabled="(requireSelection && !selectedItemKeys.length) || !selectedCollectionToRun"
+          @click="proceed()"
+          :loading="loadingRunFlow"
+        >
           {{ requireConfirmation ? "Next" : `Run with ${selectedItemKeys.length} ${selectedItemKeys.length > 1 ? "Items" : "Item"}` }}
         </v-button>
       </v-card-actions>
diff --git a/src/flow-manager-module/components/run-webhook-flow-form.vue b/src/flow-manager-module/components/run-webhook-flow-form.vue
new file mode 100644
index 0000000..9b4ff3d
--- /dev/null
+++ b/src/flow-manager-module/components/run-webhook-flow-form.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, toRefs, inject, Ref, computed } from "vue";
+import { ICredential, IFlow } from "../types";
+import { useStores, useApi } from "@directus/extensions-sdk";
+import { ENDPOINT_EXTENSION_NAME } from "../../constants";
+
+const props = defineProps<{
+  selectedItem: Partial<IFlow>;
+  value: boolean;
+}>();
+
+const emit = defineEmits(["update:modelValue", "reload:flow", "reload:tabularFlow"]);
+
+const { selectedItem, value } = toRefs(props);
+const { useNotificationsStore } = useStores();
+const notificationsStore = useNotificationsStore();
+const api = useApi();
+
+const loadingRunFlow = ref(false);
+const payload = ref("{}");
+const responseJSON = ref("{}");
+
+const flowManagerUtils = inject<{
+  credentials: Ref<ICredential[]>;
+  selectedCredential: Ref<string>;
+  setCredential: (credential: string) => void;
+}>("flowManagerUtils");
+
+const selectedCredential = computed(() =>
+  flowManagerUtils?.credentials?.value?.find((c) => c.id === flowManagerUtils?.selectedCredential.value)
+);
+
+async function runFlow() {
+  loadingRunFlow.value = true;
+
+  let parsedPayload = {};
+  try {
+    parsedPayload = JSON.parse(payload.value || "{}");
+  } catch (error) {
+    notificationsStore.add({
+      type: "error",
+      title: "Invalid JSON",
+      message: "Please provide a valid JSON payload",
+      closeable: true,
+      persist: true,
+    });
+    loadingRunFlow.value = false;
+    return;
+  }
+
+  const method = (selectedItem.value?.options?.method || "post").toLowerCase();
+  try {
+    let result = { data: {} };
+    if (flowManagerUtils?.selectedCredential.value === "local") {
+      result = await api[method](`/flows/trigger/${selectedItem.value?.id}`, parsedPayload);
+    } else if (selectedCredential.value) {
+      result = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+        url: `${selectedCredential.value.url}/flows/trigger/${selectedItem.value?.id}`,
+        staticToken: selectedCredential.value.staticToken,
+        payload: parsedPayload,
+        method: selectedItem.value?.options?.method || "POST",
+      });
+    }
+
+    responseJSON.value = JSON.stringify(result.data, null, 2);
+
+    emit("reload:flow");
+    emit("reload:tabularFlow");
+    notificationsStore.add({
+      type: "success",
+      title: `Flow "${selectedItem.value.name}" has been run successfully`,
+      closeable: true,
+      persist: true,
+    });
+  } catch (error) {
+    notificationsStore.add({
+      type: "error",
+      title: `Failed to run Flow "${selectedItem.value.name}"`,
+      closeable: true,
+      persist: true,
+    });
+  } finally {
+    loadingRunFlow.value = false;
+  }
+}
+
+function proceed() {
+  responseJSON.value = "{}";
+  runFlow();
+}
+
+function resetConfirm() {
+  payload.value = "{}";
+  responseJSON.value = "{}";
+  emit("update:modelValue", false);
+}
+</script>
+
+<template>
+  <v-dialog :model-value="value" @update:model-value="resetConfirm">
+    <v-card class="extended-card">
+      <v-card-title>Run {{ selectedItem?.name }}</v-card-title>
+      <v-card-text>
+        <div class="mb-2 overflow-x-scroll">
+          Request Body
+          <interface-input-code :value="payload" language="JSON" line-wrapping line-number @input="($e: string) => payload = $e" />
+          Response
+          <interface-input-code :value="responseJSON" language="JSON" line-number />
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-button secondary @click="resetConfirm"> Cancel </v-button>
+        <v-button @click="proceed()" :loading="loadingRunFlow"> Run </v-button>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style lang="scss" scoped>
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.extended-card {
+  min-width: 800px;
+}
+</style>
diff --git a/src/flow-manager-module/composables/use-local-storage.ts b/src/flow-manager-module/composables/use-local-storage.ts
deleted file mode 100644
index b2434c0..0000000
--- a/src/flow-manager-module/composables/use-local-storage.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ref, UnwrapRef, watch } from "vue";
-import { parseJSON } from "@directus/utils";
-
-type LocalStorageObjectType = string | number | boolean | object;
-
-export function useLocalStorage<T extends LocalStorageObjectType>(key: string, defaultValue: UnwrapRef<T> | null = null) {
-  const internalKey = `directus-${key}`;
-  const data = ref<T | null>(null);
-
-  function getValue(): UnwrapRef<T> | null {
-    const rawExistingValue = localStorage.getItem(internalKey);
-
-    if (!rawExistingValue) return defaultValue;
-
-    try {
-      return parseJSON(rawExistingValue);
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn(`Couldn't parse value from local storage`, e);
-
-      return defaultValue;
-    }
-  }
-
-  function setValue(value: UnwrapRef<T> | null) {
-    try {
-      localStorage.setItem(internalKey, JSON.stringify(value));
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn(`Couldn't stringify and set value to local storage`, e);
-    }
-  }
-
-  data.value = getValue();
-
-  watch(data, () => {
-    if (data.value == null) {
-      localStorage.removeItem(internalKey);
-    } else {
-      setValue(data.value);
-    }
-  });
-
-  return { data };
-}
diff --git a/src/flow-manager-module/module.vue b/src/flow-manager-module/module.vue
index c080a76..535afc7 100644
--- a/src/flow-manager-module/module.vue
+++ b/src/flow-manager-module/module.vue
@@ -126,7 +126,11 @@
               </template>
 
               <v-list>
-                <v-list-item v-if="item.trigger === 'manual' && item.status === 'active'" clickable @click="showRunDialog(item)">
+                <v-list-item
+                  v-if="item.trigger === 'manual' && item.status === 'active' && selectedCredential === 'local'"
+                  clickable
+                  @click="showRunDialog(item)"
+                >
                   <v-list-item-icon>
                     <v-icon name="play_arrow" />
                   </v-list-item-icon>
@@ -285,12 +289,7 @@
       <v-button v-tooltip.bottom="'Settings'" rounded icon @click="settingDialog = true">
         <v-icon name="settings" />
       </v-button>
-      <v-button
-        v-tooltip.bottom="'Credentials'"
-        rounded
-        icon
-        @click="credentialDialog = true"
-      >
+      <v-button v-tooltip.bottom="'Credentials'" rounded icon @click="credentialDialog = true">
         <v-icon name="database" />
       </v-button>
       <v-button v-tooltip.bottom="'Restore'" rounded icon @click="onRestoreButtonClicked">
@@ -298,8 +297,8 @@
       </v-button>
     </template>
 
-    <template v-if="viewListMode" #navigation>
-      <content-navigation :root-flows="rootFlows" :flow-child-map="flowChildMap" :all-flows="allFlows" />
+    <template #navigation>
+      <content-navigation :view-mode="viewListMode ? 'LIST' : 'TABLE'" :root-flows="rootFlows" :flow-child-map="flowChildMap" :all-flows="allFlows" />
     </template>
 
     <template #sidebar>
@@ -452,27 +451,38 @@
       @reload:tabular-flow="reloadTabularFlow"
     />
 
+    <RunWebhookFlowForm
+      :value="runWebhookFlowDialog"
+      :selectedItem="selectedItem"
+      @update:model-value="runWebhookFlowDialog = $event"
+      @reload:flow="reloadFlow"
+      @reload:tabular-flow="reloadTabularFlow"
+    />
+
     <LoadingDialog
       :title="processingDialogTitle"
       :value="processingDialog"
       @update:model-value="processingDialog = $event"
       :progress-value="progressValue"
       :list-processing="listProcessing"
+      :indeterminate="indeterminateProcess"
     />
+
+    <v-overlay :value="true" />
   </private-view>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref, Ref, computed, provide, toRefs } from "vue";
+import { defineComponent, ref, unref, Ref, computed, provide, toRefs, onMounted } from "vue";
 import { useStores, useApi, useLayout } from "@directus/extensions-sdk";
 import { useRouter } from "vue-router";
 import Draggable from "vuedraggable";
 import SecureLS from "secure-ls";
 import debounce from "lodash/debounce";
-import { Collection, Field, Preset } from "@directus/types";
+import { Collection, Field, Preset, User } from "@directus/types";
 
-import { ICredential, IFlow, IFolder, IOperation, ProcessingItem } from "./types";
-import { TRIGGER_TYPES } from "../constants";
+import { ICredential, IFlow, IFolder, IOperation, ProcessingItem } from "../types";
+import { ENDPOINT_EXTENSION_NAME, NPM_LINK, TRIGGER_TYPES } from "../constants";
 
 import { formatDate, formatDateLong, getTimestamp } from "../utils/date.util";
 import { generateRandomString, maskingText } from "../utils/string.util";
@@ -487,6 +497,7 @@ import LoadingDialog from "./components/loading-dialog.vue";
 import CredentialDialog from "./components/credential-dialog.vue";
 import DeleteDialog from "./components/delete-dialog.vue";
 import PushToCloudDialog from "./components/push-to-cloud-dialog.vue";
+import RunWebhookFlowForm from "./components/run-webhook-flow-form.vue";
 
 export default defineComponent({
   components: {
@@ -499,6 +510,7 @@ export default defineComponent({
     CredentialDialog,
     DeleteDialog,
     PushToCloudDialog,
+    RunWebhookFlowForm,
   },
 
   props: {
@@ -597,6 +609,9 @@ export default defineComponent({
     const installedVersion = ref("");
     const latestVersion = ref("");
 
+    const selectedCredential = ref("local");
+    const currentUser = ref<User | null>(null);
+
     /*
       Flags stuff
     */
@@ -606,6 +621,7 @@ export default defineComponent({
     const settingDialog = ref(false);
     const credentialDialog = ref(false);
     const pushToCloudDialog = ref(false);
+    const runWebhookFlowDialog = ref(false);
 
     const loadingDeleteItem = ref(false);
     const loadingRunFlow = ref(false);
@@ -618,6 +634,7 @@ export default defineComponent({
     const isBatchAction = ref(false);
     const isPreviousIdPersisted = ref(false);
     const isEditCategory = ref(false);
+    const indeterminateProcess = ref(false);
 
     const selectedFlows = computed<IFlow[]>(() => {
       return flows.value.filter((flow) => selectedItems.value.includes(flow.id));
@@ -710,7 +727,7 @@ export default defineComponent({
         preset.value = {
           ...(preset.value || {}),
           layout_query: {
-            ...(preset.value.layout_query || {}),
+            ...(preset.value?.layout_query || {}),
             sort: value,
           },
         };
@@ -747,16 +764,16 @@ export default defineComponent({
     // true for list view, false for table view
     const viewListMode = computed({
       get() {
-        if (typeof preset.value.layout_options?.viewListMode === "undefined") {
+        if (typeof preset.value?.layout_options?.viewListMode === "undefined") {
           return true;
         }
-        return preset.value.layout_options?.viewListMode;
+        return preset.value?.layout_options?.viewListMode;
       },
       set(value) {
         preset.value = {
           ...(preset.value || {}),
           layout_options: {
-            ...(preset.value.layout_options || {}),
+            ...(preset.value?.layout_options || {}),
             viewListMode: value,
           },
         };
@@ -795,38 +812,88 @@ export default defineComponent({
     });
 
     const updateExistingPreset = debounce(async () => {
-      await presetsStore.update(preset.value.id, {
-        layout_options: {
-          sort: tableSort.value,
-          headers: headers.value,
-          viewListMode: viewListMode.value,
-        },
-        layout_query: {
-          sort: tableSort.value,
-        },
-        filter: tableFlowFilter.value,
-        search: tableFlowSearch.value,
-      });
-      presetsStore.hydrate();
+      if (selectedCredential.value === "local") {
+        await presetsStore.update(preset.value.id, {
+          layout_options: {
+            sort: tableSort.value,
+            headers: headers.value,
+            viewListMode: viewListMode.value,
+          },
+          layout_query: {
+            sort: tableSort.value,
+          },
+          filter: tableFlowFilter.value,
+          search: tableFlowSearch.value,
+        });
+        presetsStore.hydrate();
+      } else {
+        const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+        if (credential) {
+          await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+            url: `${credential.url}/presets/${preset.value.id}`,
+            staticToken: credential.staticToken,
+            method: "PATCH",
+            payload: {
+              layout_options: {
+                sort: tableSort.value,
+                headers: headers.value,
+                viewListMode: viewListMode.value,
+              },
+              layout_query: {
+                sort: tableSort.value,
+              },
+              filter: tableFlowFilter.value,
+              search: tableFlowSearch.value,
+            },
+          });
+        }
+      }
       reloadTabularFlow();
     }, 500);
 
     const createNewPreset = debounce(async () => {
-      await presetsStore.savePreset({
-        bookmark: null,
-        collection: "flow-manager",
-        layout_options: {
-          sort: tableSort.value,
-          headers: headers.value,
-          viewListMode: viewListMode.value,
-        },
-        layout_query: {
-          sort: tableSort.value,
-        },
-        filter: tableFlowFilter.value,
-        search: tableFlowSearch.value,
-      });
-      presetsStore.hydrate();
+      if (selectedCredential.value === "local") {
+        await presetsStore.savePreset({
+          bookmark: null,
+          collection: "flow-manager",
+          layout_options: {
+            sort: tableSort.value,
+            headers: headers.value,
+            viewListMode: viewListMode.value,
+          },
+          layout_query: {
+            sort: tableSort.value,
+          },
+          filter: tableFlowFilter.value,
+          search: tableFlowSearch.value,
+        });
+        presetsStore.hydrate();
+      } else {
+        const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+        if (credential) {
+          await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+            url: `${credential.url}/presets`,
+            staticToken: credential.staticToken,
+            method: "POST",
+            payload: {
+              bookmark: null,
+              collection: "flow-manager",
+              layout_options: {
+                sort: tableSort.value,
+                headers: headers.value,
+                viewListMode: viewListMode.value,
+              },
+              layout_query: {
+                sort: tableSort.value,
+              },
+              filter: tableFlowFilter.value,
+              search: tableFlowSearch.value,
+              user: currentUser.value?.id,
+            },
+          });
+          reloadExternalPreset();
+        }
+      }
       reloadTabularFlow();
     }, 500);
 
@@ -897,7 +964,7 @@ export default defineComponent({
         preset.value = {
           ...(preset.value || {}),
           layout_options: {
-            ...(preset.value.layout_options || {}),
+            ...(preset.value?.layout_options || {}),
             headers: value,
           },
         };
@@ -1047,6 +1114,16 @@ export default defineComponent({
       createFlow,
       reloadFlow,
       reloadTabularFlow,
+      showRunWebhookDialog,
+      credentials,
+      setCredential,
+      selectedCredential,
+    });
+
+    onMounted(() => {
+      if (!flowFieldConfiguration.value.isConfigured || !isSettingFieldConfigured.value) {
+        settingDialog.value = true;
+      }
     });
 
     return {
@@ -1144,28 +1221,61 @@ export default defineComponent({
       isBatchAction,
       selectedFlows,
       showRunDialog,
+      runWebhookFlowDialog,
+      selectedCredential,
+      indeterminateProcess,
     };
 
     async function createFlow(item: Omit<IFlow, "id"> & { id?: string }) {
       try {
-        const response = await api.post("/flows", {
-          id: item.id,
-          name: item.name,
-          status: "inactive",
-          icon: item.icon,
-          accountability: item.accountability,
-          description: item.description,
-          trigger: item.trigger,
-          options: item.options,
-          color: item.color,
-          flow_manager_category: item.flow_manager_category,
-        });
+        if (selectedCredential.value === "local") {
+          const response = await api.post("/flows", {
+            id: item.id,
+            name: item.name,
+            status: "inactive",
+            icon: item.icon,
+            accountability: item.accountability,
+            description: item.description,
+            trigger: item.trigger,
+            options: item.options,
+            color: item.color,
+            flow_manager_category: item.flow_manager_category,
+          });
 
-        const payload = transformData(item.operations, response.data.data.id, item.operation);
+          const payload = transformData(item.operations, response.data.data.id, item.operation);
 
-        await api.patch(`/flows/${response.data.data.id}`, {
-          operation: item.operation ? payload : null,
-        });
+          await api.patch(`/flows/${response.data.data.id}`, {
+            operation: item.operation ? payload : null,
+          });
+        } else {
+          const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+          const response = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+            url: `${credential?.url}/flows`,
+            staticToken: credential?.staticToken,
+            method: "POST",
+            payload: {
+              name: item.name,
+              status: "inactive",
+              icon: item.icon,
+              accountability: item.accountability,
+              description: item.description,
+              trigger: item.trigger,
+              options: item.options,
+              color: item.color,
+            },
+          });
+
+          const payload = transformData(item.operations, response.data.data.id, item.operation);
+
+          await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+            url: `${credential?.url}/flows/${response.data.data.id}`,
+            staticToken: credential?.staticToken,
+            method: "PATCH",
+            payload: {
+              operation: item.operation ? payload : null,
+            },
+          });
+        }
       } catch (error) {
         throw error;
       }
@@ -1216,7 +1326,7 @@ export default defineComponent({
       const item = selectedItem.value as IFlow;
       loadingPushToCloud.value = true;
       try {
-        const response = await api.post("/flow-manager-endpoint/flow-manager/process", {
+        const response = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
           url: `${credential?.url}/flows`,
           staticToken: credential?.staticToken,
           method: "POST",
@@ -1234,7 +1344,7 @@ export default defineComponent({
 
         const payload = transformData(item.operations, response.data.data.id, item.operation);
 
-        await api.post("/flow-manager-endpoint/flow-manager/process", {
+        await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
           url: `${credential?.url}/flows/${response.data.data.id}`,
           staticToken: credential?.staticToken,
           method: "PATCH",
@@ -1336,18 +1446,33 @@ export default defineComponent({
     }
 
     async function deleteItem() {
+      const deleteFunc =
+        selectedCredential.value === "local"
+          ? async (id: string) => {
+              await api.delete(`/flows/${id}`);
+            }
+          : async (id: string) => {
+              const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+              await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+                url: `${credential?.url}/flows/${id}`,
+                staticToken: credential?.staticToken,
+                method: "DELETE",
+              });
+            };
       if (isBatchAction.value) {
         if (!selectedItems.value.length) return;
         deleteItemDialog.value = false;
+        indeterminateProcess.value = false;
         processingDialogTitle.value = "Deleting Flows";
         processingDialog.value = true;
         listProcessing.value = [];
         progressValue.value = 0;
         let totalSuccess = 0;
         let totalError = 0;
+
         for (const item of selectedFlows.value) {
           try {
-            await api.delete(`/flows/${item.id}`);
+            await deleteFunc(`${item.id}`);
             listProcessing.value.push({
               status: "success",
               message: `Flow "${item.name}"`,
@@ -1384,10 +1509,10 @@ export default defineComponent({
             type = "Folder";
             deleteCategory(selectedItem.value as IFolder);
           } else {
-            await api.delete(`/flows/${selectedItem.value.id}`);
+            await deleteFunc((selectedItem.value as IFlow).id);
 
-            await flowsStore.hydrate();
-            flows.value = unref(flowsStore.flows);
+            await reloadFlow();
+            await reloadTabularFlow();
           }
 
           notificationsStore.add({
@@ -1489,12 +1614,24 @@ export default defineComponent({
     }
 
     function goToFlow({ item }: { item: IFlow }) {
-      router.push(`/settings/flows/${item.id}`);
+      if (selectedCredential.value === "local") {
+        router.push(`/settings/flows/${item.id}`);
+      } else {
+        const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+        if (credential) {
+          const a = document.createElement("a");
+          a.href = `${credential.url}/admin/settings/flows/${item.id}`;
+          a.target = "_blank";
+          a.click();
+          document.body.removeChild(a);
+        }
+      }
     }
 
     async function onConfirmRestore() {
       restoreConfirmationDialog.value = false;
       if (Array.isArray(restoredFileObj.value)) {
+        indeterminateProcess.value = false;
         processingDialogTitle.value = "Restoring Flows";
         processingDialog.value = true;
         listProcessing.value = [];
@@ -1580,20 +1717,32 @@ export default defineComponent({
         }
       }
 
-      settingsStore.updateSettings(
-        {
-          flow_manager_categories: flowCategories.value,
-        },
-        false
-      );
+      saveCategories();
 
       if (flowPayload.length) {
-        await api.patch(`/flows`, flowPayload);
+        if (selectedCredential.value === "local") {
+          await api.patch(`/flows`, flowPayload);
+        } else {
+          const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+          await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+            url: `${credential?.url}/flows`,
+            staticToken: credential?.staticToken,
+            method: "PATCH",
+            payload: flowPayload,
+          });
+        }
         await reloadFlow();
       }
     }
 
     async function configureFlowManagerField() {
+      const fields: {
+        settings: Partial<Field>[];
+        flows: Partial<Field>[];
+      } = {
+        settings: [],
+        flows: [],
+      };
       isConfigurationLoading.value = true;
       if (!flowFieldConfiguration.value.isCategoryFieldConfigured) {
         const payload = {
@@ -1602,8 +1751,8 @@ export default defineComponent({
           schema: { default_value: null },
           meta: { interface: "input", special: null, hidden: true },
           collection: "directus_flows",
-        };
-        await fieldsStore.createField("directus_flows", payload);
+        } as Partial<Field>;
+        fields.flows.push(payload);
       }
 
       if (!flowFieldConfiguration.value.isOrderFieldConfigured) {
@@ -1613,8 +1762,8 @@ export default defineComponent({
           schema: { default_value: "0" },
           meta: { interface: "input", special: null, hidden: true },
           collection: "directus_flows",
-        };
-        await fieldsStore.createField("directus_flows", payload);
+        } as Partial<Field>;
+        fields.flows.push(payload);
       }
 
       if (!isSettingFieldConfigured.value) {
@@ -1623,8 +1772,8 @@ export default defineComponent({
           type: "json",
           meta: { interface: "input-code", special: ["cast-json"], hidden: true },
           collection: "directus_settings",
-        };
-        await fieldsStore.createField("directus_settings", payload);
+        } as Partial<Field>;
+        fields.settings.push(payload);
       }
 
       if (!flowFieldConfiguration.value.isLastRunFieldConfigured) {
@@ -1634,8 +1783,8 @@ export default defineComponent({
           schema: { default_value: null },
           meta: { interface: "input-datetime", special: null, hidden: true },
           collection: "directus_flows",
-        };
-        await fieldsStore.createField("directus_flows", payload);
+        } as Partial<Field>;
+        fields.flows.push(payload);
       }
 
       if (!flowFieldConfiguration.value.isRunCounterFieldConfigured) {
@@ -1645,13 +1794,46 @@ export default defineComponent({
           schema: { default_value: "0" },
           meta: { interface: "input", special: null, hidden: true },
           collection: "directus_flows",
-        };
-        await fieldsStore.createField("directus_flows", payload);
+        } as Partial<Field>;
+        fields.flows.push(payload);
       }
 
-      await fieldsStore.hydrate();
-      flowFields.value = fieldsStore.getFieldsForCollection("directus_flows");
-      settingFields.value = fieldsStore.getFieldsForCollection("directus_settings");
+      if (selectedCredential.value === "local") {
+        for (const field of fields.flows) {
+          await fieldsStore.createField("directus_flows", field);
+        }
+
+        for (const field of fields.settings) {
+          await fieldsStore.createField("directus_settings", field);
+        }
+        await fieldsStore.hydrate();
+        flowFields.value = fieldsStore.getFieldsForCollection("directus_flows");
+        settingFields.value = fieldsStore.getFieldsForCollection("directus_settings");
+      } else {
+        const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+        if (credential) {
+          for (const field of fields.flows) {
+            await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+              url: `${credential?.url}/fields/directus_flows`,
+              staticToken: credential?.staticToken,
+              method: "POST",
+              payload: field,
+            });
+          }
+
+          for (const field of fields.settings) {
+            await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+              url: `${credential?.url}/fields/directus_settings`,
+              staticToken: credential?.staticToken,
+              method: "POST",
+              payload: field,
+            });
+          }
+
+          flowFields.value = await reloadFields("directus_flows");
+          settingFields.value = await reloadFields("directus_settings");
+        }
+      }
       isConfigurationLoading.value = false;
     }
 
@@ -1737,12 +1919,7 @@ export default defineComponent({
         color: "",
       };
 
-      settingsStore.updateSettings(
-        {
-          flow_manager_categories: flowCategories.value,
-        },
-        false
-      );
+      saveCategories();
     }
 
     async function deleteCategory(category: IFolder) {
@@ -1774,12 +1951,7 @@ export default defineComponent({
 
         flowCategories.value.splice(deletedIndex, 1);
 
-        settingsStore.updateSettings(
-          {
-            flow_manager_categories: flowCategories.value,
-          },
-          false
-        );
+        saveCategories();
       }
     }
 
@@ -1825,12 +1997,7 @@ export default defineComponent({
         },
       ];
 
-      settingsStore.updateSettings(
-        {
-          flow_manager_categories: flowCategories.value,
-        },
-        false
-      );
+      saveCategories();
     }
 
     function showEditFolderDialog(item: IFolder) {
@@ -1850,8 +2017,34 @@ export default defineComponent({
     }
 
     async function reloadFlow() {
-      await flowsStore.hydrate();
-      flows.value = unref(flowsStore.flows);
+      flows.value = [];
+      if (selectedCredential.value === "local") {
+        await flowsStore.hydrate();
+        flows.value = unref(flowsStore.flows);
+      } else {
+        try {
+          const c = credentials.value.find((c) => c.id === selectedCredential.value);
+          if (c) {
+            const fields = ["*", "operations.*"];
+            const {
+              data: { data: flowsResponse },
+            } = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+              url: `${c.url}/flows?fields=${fields.join(",")}`,
+              staticToken: c.staticToken,
+              method: "GET",
+            });
+
+            flows.value = flowsResponse;
+          }
+        } catch (error) {
+          notificationsStore.add({
+            type: "error",
+            title: "Failed to fetch Flows. Please check your credentials",
+            closeable: true,
+            persist: true,
+          });
+        }
+      }
     }
 
     async function reloadTabularFlow() {
@@ -1865,15 +2058,33 @@ export default defineComponent({
         }
         const fields = ["*", "operations.*"];
 
-        const response = await api.get("/flows", {
-          params: {
-            fields: fields.join(","),
-            sort,
-            filter: tableFlowFilter.value,
-            search: tableFlowSearch.value,
-          },
-        });
-
+        let response: { data: { data: IFlow[] } } = { data: { data: [] } };
+        if (selectedCredential.value === "local") {
+          response = await api.get("/flows", {
+            params: {
+              fields: fields.join(","),
+              sort,
+              filter: tableFlowFilter.value,
+              search: tableFlowSearch.value,
+            },
+          });
+        } else {
+          const c = credentials.value.find((c) => c.id === selectedCredential.value);
+          if (c) {
+            const queries = [`fields=${fields.join(",")}`, `sort=${sort}`];
+            if (tableFlowFilter.value) {
+              queries.push(`filter=${JSON.stringify(tableFlowFilter.value)}`);
+            }
+            if (tableFlowSearch.value) {
+              queries.push(`search=${tableFlowSearch.value}`);
+            }
+            response = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+              url: `${c.url}/flows?${queries.join("&")}`,
+              staticToken: c.staticToken,
+              method: "GET",
+            });
+          }
+        }
         tabularFlows.value = response.data.data;
       } catch (error) {
       } finally {
@@ -2005,8 +2216,8 @@ export default defineComponent({
         installedVersion.value = extension?.schema.version;
 
         if (installedVersion.value) {
-          const { data } = await api.post("/flow-manager-endpoint/flow-manager/process", {
-            url: "https://registry.npmjs.org/directus-extension-flow-manager",
+          const { data } = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+            url: NPM_LINK,
           });
 
           const latestTag = data?.["dist-tags"]?.latest;
@@ -2050,6 +2261,7 @@ export default defineComponent({
       if (!selectedItems.value.length) {
         return;
       }
+      indeterminateProcess.value = false;
       processingDialogTitle.value = "Duplicating Flows";
       processingDialog.value = true;
       listProcessing.value = [];
@@ -2126,6 +2338,164 @@ export default defineComponent({
       selectedItem.value = item;
       runFlowDialog.value = true;
     }
+
+    function showRunWebhookDialog(item: IFlow) {
+      selectedItem.value = item;
+      runWebhookFlowDialog.value = true;
+    }
+
+    async function reloadFields(collectionName: string) {
+      if (selectedCredential.value === "local") {
+        return fieldsStore.getFieldsForCollection(collectionName);
+      } else {
+        const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+        const {
+          data: { data },
+        } = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+          url: `${credential?.url}/fields/${collectionName}`,
+          staticToken: credential?.staticToken,
+          method: "GET",
+        });
+        return data;
+      }
+    }
+
+    async function reloadFolders() {
+      if (selectedCredential.value === "local") {
+        return (settingsStore.settings?.flow_manager_categories || []).map((category: string | IFolder) => {
+          if (typeof category === "string") {
+            return {
+              id: category,
+              name: category,
+              type: "category",
+              icon: "folder",
+              color: "",
+              flow_manager_order: 0,
+            };
+          }
+
+          return category;
+        });
+      } else {
+        const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+        const {
+          data: { data },
+        } = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+          url: `${credential?.url}/settings`,
+          staticToken: credential?.staticToken,
+          method: "GET",
+        });
+        return (data?.flow_manager_categories || []).map((category: string | IFolder) => {
+          if (typeof category === "string") {
+            return {
+              id: category,
+              name: category,
+              type: "category",
+              icon: "folder",
+              color: "",
+              flow_manager_order: 0,
+            };
+          }
+
+          return category;
+        });
+      }
+    }
+
+    async function setCredential(credential: string) {
+      indeterminateProcess.value = true;
+      processingDialogTitle.value = "Loading";
+      selectedCredential.value = credential;
+
+      try {
+        await getUser();
+        const isHaveAdminAccess = currentUser.value?.role?.admin_access;
+        if (!isHaveAdminAccess) {
+          notificationsStore.add({
+            type: "error",
+            title: "You don't have permission to access this credential",
+            closeable: true,
+            persist: true,
+          });
+          selectedCredential.value = "local";
+          return;
+        }
+        router.push("/flow-manager");
+        processingDialog.value = true;
+        await reloadExternalPreset();
+        reloadFlow();
+        reloadTabularFlow();
+        flowFields.value = await reloadFields("directus_flows");
+        settingFields.value = await reloadFields("directus_settings");
+  
+        if (!flowFieldConfiguration.value.isConfigured || !isSettingFieldConfigured.value) {
+          settingDialog.value = true;
+        }
+        reloadFolders().then((folders) => {
+          flowCategories.value = folders;
+        });
+      } catch (error) {
+        notificationsStore.add({
+          type: "error",
+          title: "Failed to fetch using the selected credential",
+          closeable: true,
+          persist: true,
+        });
+        selectedCredential.value = "local";
+      }
+      processingDialog.value = false;
+      processingDialogTitle.value = "";
+    }
+
+    async function saveCategories() {
+      if (selectedCredential.value === "local") {
+        settingsStore.updateSettings(
+          {
+            flow_manager_categories: flowCategories.value,
+          },
+          false
+        );
+      } else {
+        const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+        await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+          url: `${credential?.url}/settings`,
+          staticToken: credential?.staticToken,
+          method: "PATCH",
+          payload: {
+            flow_manager_categories: flowCategories.value,
+          },
+        });
+      }
+    }
+
+    async function getUser() {
+      const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+      if (credential) {
+        const {
+          data: { data },
+        } = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+          url: `${credential.url}/users/me?fields[]=*&fields[]=role.admin_access&fields[]=role.app_access&fields[]=role.id`,
+          staticToken: credential.staticToken,
+          method: "GET",
+        });
+        currentUser.value = data;
+      }
+    }
+
+    async function reloadExternalPreset() {
+      const credential = credentials.value.find((cred) => cred.id === selectedCredential.value);
+      if (credential && currentUser.value) {
+        const {
+          data: { data },
+        } = await api.post(`/${ENDPOINT_EXTENSION_NAME}/flow-manager/process`, {
+          url: `${credential.url}/presets?filter[user][_eq]=${currentUser.value?.id}&limit=-1`,
+          staticToken: credential.staticToken,
+          method: "GET",
+        });
+        const [selectedPreset] = data.filter((preset: { collection: string }) => preset.collection === "flow-manager");
+        preset.value = selectedPreset;
+      }
+    }
   },
 });
 </script>
@@ -2289,4 +2659,8 @@ export default defineComponent({
 .container.right {
   z-index: 600;
 }
+
+.small.v-select > .v-menu-activator > .v-input {
+  height: 38px;
+}
 </style>
diff --git a/src/flow-manager-module/types.ts b/src/flow-manager-module/types.ts
index e225ba7..e4e750f 100644
--- a/src/flow-manager-module/types.ts
+++ b/src/flow-manager-module/types.ts
@@ -27,6 +27,7 @@ export interface IPayload {
 
 export interface IFlow {
   id: string;
+  type?: string;
   name: string;
   icon: string;
   color: string;
@@ -43,6 +44,7 @@ export interface IFlow {
     requireConfirmation?: boolean;
     confirmationDescription?: string;
     fields?: Field[];
+    method?: string;
   };
   operation: string;
   date_created?: string;
@@ -72,6 +74,7 @@ export interface ICredential {
 }
 
 export type ProcessingItem = {
+  id?: string;
   status: "success" | "error" | "processing" | "skipped";
   message: string;
 };
diff --git a/src/types.ts b/src/types.ts
index 96a298a..e4e750f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,5 @@
+import { Field } from "@directus/types";
+
 export interface IOperation {
   id: string;
   name: string;
@@ -25,6 +27,7 @@ export interface IPayload {
 
 export interface IFlow {
   id: string;
+  type?: string;
   name: string;
   icon: string;
   color: string;
@@ -32,13 +35,25 @@ export interface IFlow {
   status: string;
   trigger: string;
   accountability: string;
-  options: { type?: string; scope?: string[]; collections: string[] };
+  options: {
+    type?: string;
+    scope?: string[];
+    collections: string[];
+    return?: string;
+    requireSelection?: boolean;
+    requireConfirmation?: boolean;
+    confirmationDescription?: string;
+    fields?: Field[];
+    method?: string;
+  };
   operation: string;
   date_created?: string;
   user_created?: string;
   operations: IOperation[];
   flow_manager_category?: string;
   flow_manager_order?: number;
+  flow_manager_run_counter?: number;
+  flow_manager_last_run_at?: Date;
 }
 
 export interface IFolder {
@@ -47,6 +62,8 @@ export interface IFolder {
   icon: string;
   type: string;
   color: string;
+  flow_manager_order?: number;
+  flow_manager_category?: string;
 }
 
 export interface ICredential {
@@ -55,3 +72,9 @@ export interface ICredential {
   staticToken: string;
   url: string;
 }
+
+export type ProcessingItem = {
+  id?: string;
+  status: "success" | "error" | "processing" | "skipped";
+  message: string;
+};