diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/layout.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/layout.tsx
index e88491aab..2bfbea978 100644
--- a/keep-ui/app/(keep)/workflows/[workflow_id]/layout.tsx
+++ b/keep-ui/app/(keep)/workflows/[workflow_id]/layout.tsx
@@ -1,37 +1,22 @@
-"use client";
-
-import { Link } from "@/components/ui";
-import { ArrowRightIcon } from "@heroicons/react/16/solid";
-import { Icon, Subtitle } from "@tremor/react";
-import { useParams } from "next/navigation";
+import { getWorkflowWithRedirectSafe } from "@/shared/api/workflows";
+import { WorkflowBreadcrumbs } from "./workflow-breadcrumbs";
 import WorkflowDetailHeader from "./workflow-detail-header";
 
-export default function Layout({
+export default async function Layout({
   children,
   params,
 }: {
-  children: any;
+  children: React.ReactNode;
   params: { workflow_id: string };
 }) {
-  const clientParams = useParams();
+  const workflow = await getWorkflowWithRedirectSafe(params.workflow_id);
   return (
     <div className="flex flex-col mb-4 h-full gap-6">
-      <Subtitle className="text-sm">
-        <Link href="/workflows">All Workflows</Link>{" "}
-        <Icon icon={ArrowRightIcon} color="gray" size="xs" />{" "}
-        {clientParams.workflow_execution_id ? (
-          <>
-            <Link href={`/workflows/${params.workflow_id}`}>
-              Workflow Details
-            </Link>
-            <Icon icon={ArrowRightIcon} color="gray" size="xs" /> Workflow
-            Execution Details
-          </>
-        ) : (
-          "Workflow Details"
-        )}
-      </Subtitle>
-      <WorkflowDetailHeader workflow_id={params.workflow_id} />
+      <WorkflowBreadcrumbs workflowId={params.workflow_id} />
+      <WorkflowDetailHeader
+        workflowId={params.workflow_id}
+        initialData={workflow}
+      />
       <div className="flex-1 h-full">{children}</div>
     </div>
   );
diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/page.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/page.tsx
index bb4d2ff6c..facbd0c29 100644
--- a/keep-ui/app/(keep)/workflows/[workflow_id]/page.tsx
+++ b/keep-ui/app/(keep)/workflows/[workflow_id]/page.tsx
@@ -1,8 +1,14 @@
 import { Metadata } from "next";
 import WorkflowDetailPage from "./workflow-detail-page";
+import { getWorkflowWithRedirectSafe } from "@/shared/api/workflows";
 
-export default function Page({ params }: { params: { workflow_id: string } }) {
-  return <WorkflowDetailPage params={params} />;
+export default async function Page({
+  params,
+}: {
+  params: { workflow_id: string };
+}) {
+  const initialData = await getWorkflowWithRedirectSafe(params.workflow_id);
+  return <WorkflowDetailPage params={params} initialData={initialData} />;
 }
 
 export const metadata: Metadata = {
diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-breadcrumbs.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-breadcrumbs.tsx
new file mode 100644
index 000000000..258a04b28
--- /dev/null
+++ b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-breadcrumbs.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { Icon } from "@tremor/react";
+import { useParams } from "next/navigation";
+import { Link } from "@/components/ui";
+import { Subtitle } from "@tremor/react";
+import { ArrowRightIcon } from "@heroicons/react/16/solid";
+
+export function WorkflowBreadcrumbs({ workflowId }: { workflowId: string }) {
+  const clientParams = useParams();
+
+  return (
+    <Subtitle className="text-sm">
+      <Link href="/workflows">All Workflows</Link>{" "}
+      <Icon icon={ArrowRightIcon} color="gray" size="xs" />{" "}
+      {clientParams.workflow_execution_id ? (
+        <>
+          <Link href={`/workflows/${workflowId}`}>Workflow Details</Link>
+          <Icon icon={ArrowRightIcon} color="gray" size="xs" /> Workflow
+          Execution Details
+        </>
+      ) : (
+        "Workflow Details"
+      )}
+    </Subtitle>
+  );
+}
diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-header.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-header.tsx
index 34c39252f..3235a5e8a 100644
--- a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-header.tsx
+++ b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-header.tsx
@@ -9,9 +9,11 @@ import { useWorkflowRun } from "@/utils/hooks/useWorkflowRun";
 import AlertTriggerModal from "../workflow-run-with-alert-modal";
 
 export default function WorkflowDetailHeader({
-  workflow_id,
+  workflowId: workflow_id,
+  initialData,
 }: {
-  workflow_id: string;
+  workflowId: string;
+  initialData?: Workflow;
 }) {
   const api = useApi();
   const {
@@ -20,10 +22,10 @@ export default function WorkflowDetailHeader({
     error,
   } = useSWR<Partial<Workflow>>(
     api.isReady() ? `/workflows/${workflow_id}` : null,
-    (url: string) => api.get(url)
+    (url: string) => api.get(url),
+    { fallbackData: initialData }
   );
 
-
   const {
     isRunning,
     handleRunClick,
diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx
index b086813fb..867d71523 100644
--- a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx
+++ b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-detail-page.tsx
@@ -25,8 +25,10 @@ import { ErrorComponent, TabNavigationLink, YAMLCodeblock } from "@/shared/ui";
 
 export default function WorkflowDetailPage({
   params,
+  initialData,
 }: {
   params: { workflow_id: string };
+  initialData?: Workflow;
 }) {
   const api = useApi();
   const [tabIndex, setTabIndex] = useState(0);
@@ -35,9 +37,12 @@ export default function WorkflowDetailPage({
     data: workflow,
     isLoading,
     error,
-  } = useSWR<Partial<Workflow>>(
+  } = useSWR<Workflow>(
     api.isReady() ? `/workflows/${params.workflow_id}` : null,
-    (url: string) => api.get(url)
+    (url: string) => api.get(url),
+    {
+      fallbackData: initialData,
+    }
   );
 
   if (error) {
diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview-skeleton.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview-skeleton.tsx
new file mode 100644
index 000000000..cc14de36d
--- /dev/null
+++ b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview-skeleton.tsx
@@ -0,0 +1,28 @@
+import Skeleton from "react-loading-skeleton";
+
+export function WorkflowOverviewSkeleton() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+        <div>
+          <Skeleton className="h-24" />
+        </div>
+        <div>
+          <Skeleton className="h-24" />
+        </div>
+        <div>
+          <Skeleton className="h-24" />
+        </div>
+        <div>
+          <Skeleton className="h-24" />
+        </div>
+        <div>
+          <Skeleton className="h-24" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-32" />
+      </div>
+    </div>
+  );
+}
diff --git a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview.tsx b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview.tsx
index 394501bf8..532a0cf4d 100644
--- a/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview.tsx
+++ b/keep-ui/app/(keep)/workflows/[workflow_id]/workflow-overview.tsx
@@ -10,6 +10,7 @@ import { Workflow } from "@/shared/api/workflows";
 import WorkflowGraph from "../workflow-graph";
 import { TableFilters } from "./table-filters";
 import { ExecutionTable } from "./workflow-execution-table";
+import { WorkflowOverviewSkeleton } from "./workflow-overview-skeleton";
 
 interface Pagination {
   limit: number;
@@ -80,7 +81,7 @@ export default function WorkflowOverview({
   return (
     <div className="flex flex-col gap-4">
       {/* TODO: Add a working time filter */}
-      {!data || isLoading || (isValidating && <Loading />)}
+      {(!data || isLoading || isValidating) && <WorkflowOverviewSkeleton />}
       {data?.items && (
         <div className="flex flex-col gap-4">
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
diff --git a/keep-ui/app/(keep)/workflows/builder/builder-modal.tsx b/keep-ui/app/(keep)/workflows/builder/builder-modal.tsx
index 578dcfe6b..c8608827d 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder-modal.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder-modal.tsx
@@ -1,12 +1,12 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Button, Card, Subtitle, Title } from "@tremor/react";
 import { stringify } from "yaml";
-import { Alert } from "./legacy-workflow.types";
+import { LegacyWorkflow } from "./legacy-workflow.types";
 import { YAMLCodeblock } from "@/shared/ui";
 
 interface Props {
   closeModal: () => void;
-  compiledAlert: Alert | string | null;
+  compiledAlert: LegacyWorkflow | string | null;
   id?: string;
   hideCloseButton?: boolean;
 }
diff --git a/keep-ui/app/(keep)/workflows/builder/builder-store.tsx b/keep-ui/app/(keep)/workflows/builder/builder-store.tsx
index d16d3b2b5..ece17fdbe 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder-store.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder-store.tsx
@@ -266,7 +266,7 @@ function addNodeBetween(
   }
 }
 
-const useStore = create<FlowState>((set, get) => ({
+const defaultState: FlowState = {
   nodes: [],
   edges: [],
   selectedNode: null,
@@ -282,6 +282,10 @@ const useStore = create<FlowState>((set, get) => ({
   errorNode: null,
   synced: true,
   canDeploy: false,
+};
+
+const useStore = create<FlowState>((set, get) => ({
+  ...defaultState,
   setCanDeploy: (deploy) => set({ canDeploy: deploy }),
   setSynced: (sync) => set({ synced: sync }),
   setErrorNode: (id) => set({ errorNode: id }),
@@ -553,6 +557,7 @@ const useStore = create<FlowState>((set, get) => ({
     };
     set({ nodes: [...get().nodes, newNode] });
   },
+  reset: () => set(defaultState),
 }));
 
 export default useStore;
diff --git a/keep-ui/app/(keep)/workflows/builder/builder.tsx b/keep-ui/app/(keep)/workflows/builder/builder.tsx
index 6de4924c7..84b75bae8 100644
--- a/keep-ui/app/(keep)/workflows/builder/builder.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/builder.tsx
@@ -5,7 +5,7 @@ import {
   parseWorkflow,
   generateWorkflow,
   getToolboxConfiguration,
-  buildAlert,
+  getWorkflowFromDefinition,
   wrapDefinitionV2,
 } from "./utils";
 import {
@@ -13,7 +13,7 @@ import {
   ExclamationCircleIcon,
 } from "@heroicons/react/20/solid";
 import { globalValidatorV2, stepValidatorV2 } from "./builder-validators";
-import { Alert } from "./legacy-workflow.types";
+import { LegacyWorkflow } from "./legacy-workflow.types";
 import BuilderModalContent from "./builder-modal";
 import Loader from "./loader";
 import { stringify } from "yaml";
@@ -37,8 +37,8 @@ import { useApi } from "@/shared/lib/hooks/useApi";
 import { KeepApiError } from "@/shared/api";
 import { showErrorToast, showSuccessToast } from "@/shared/ui";
 import { YAMLException } from "js-yaml";
-import { revalidatePath } from "next/cache";
 import Modal from "@/components/ui/Modal";
+import { useWorkflowActions } from "@/entities/workflows/model/useWorkflowActions";
 
 interface Props {
   loadedAlertFile: string | null;
@@ -87,11 +87,13 @@ function Builder({
   const [runningWorkflowExecution, setRunningWorkflowExecution] = useState<
     WorkflowExecutionDetail | WorkflowExecutionFailure | null
   >(null);
-  const [compiledAlert, setCompiledAlert] = useState<Alert | null>(null);
+  const [legacyWorkflow, setLegacyWorkflow] = useState<LegacyWorkflow | null>(
+    null
+  );
   const router = useRouter();
 
   const searchParams = useSearchParams();
-  const { errorNode, setErrorNode, canDeploy, synced } = useStore();
+  const { errorNode, setErrorNode, canDeploy, synced, reset } = useStore();
 
   const setStepValidationErrorV2 = (step: V2Step, error: string | null) => {
     setStepValidationError(error);
@@ -113,7 +115,7 @@ function Builder({
   };
 
   const updateWorkflow = useCallback(() => {
-    const body = stringify(buildAlert(definition.value));
+    const body = stringify(getWorkflowFromDefinition(definition.value));
     api
       .request(`/workflows/${workflowId}`, {
         method: "PUT",
@@ -130,7 +132,7 @@ function Builder({
 
   const testRunWorkflow = () => {
     setTestRunModalOpen(true);
-    const body = stringify(buildAlert(definition.value));
+    const body = stringify(getWorkflowFromDefinition(definition.value));
     api
       .request(`/workflows/test`, {
         method: "POST",
@@ -150,25 +152,21 @@ function Builder({
       });
   };
 
-  const addWorkflow = useCallback(() => {
-    const body = stringify(buildAlert(definition.value));
-    api
-      .request(`/workflows/json`, {
-        method: "POST",
-        body,
-        headers: { "Content-Type": "text/html" },
-      })
-      .then(({ workflow_id }) => {
-        // This is important because it makes sure we will re-fetch the workflow if we get to this page again.
-        // router.push for instance, optimizes re-render of same pages and we don't want that here because of "cache".
-        showSuccessToast("Workflow added successfully");
-        revalidatePath("/workflows/builder");
-        router.push(`/workflows/${workflow_id}`);
-      })
-      .catch((error) => {
-        alert(`Error: ${error}`);
-      });
-  }, [api, definition.value, router]);
+  const { createWorkflow } = useWorkflowActions();
+
+  const addWorkflow = useCallback(async () => {
+    try {
+      const response = await createWorkflow(definition.value);
+      // reset the store to clear the nodes and edges
+      if (response?.workflow_id) {
+        reset();
+        router.push(`/workflows/${response.workflow_id}`);
+      }
+    } catch (error) {
+      // error is handled in the useWorkflowActions hook4
+      console.error(error);
+    }
+  }, [createWorkflow, definition.value, reset, router]);
 
   useEffect(() => {
     setIsLoading(true);
@@ -215,7 +213,7 @@ function Builder({
 
   useEffect(() => {
     if (triggerGenerate) {
-      setCompiledAlert(buildAlert(definition.value));
+      setLegacyWorkflow(getWorkflowFromDefinition(definition.value));
       if (!generateModalIsOpen) setGenerateModalIsOpen(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -344,7 +342,7 @@ function Builder({
       >
         <BuilderModalContent
           closeModal={closeGenerateModal}
-          compiledAlert={compiledAlert}
+          compiledAlert={legacyWorkflow}
         />
       </Modal>
       <Modal
diff --git a/keep-ui/app/(keep)/workflows/builder/legacy-workflow.types.ts b/keep-ui/app/(keep)/workflows/builder/legacy-workflow.types.ts
index 4fa28c200..594a74c60 100644
--- a/keep-ui/app/(keep)/workflows/builder/legacy-workflow.types.ts
+++ b/keep-ui/app/(keep)/workflows/builder/legacy-workflow.types.ts
@@ -30,7 +30,7 @@ export interface Action extends Step {
   foreach?: string;
 }
 
-export interface Alert {
+export interface LegacyWorkflow {
   id: string;
   description?: string;
   owners?: string[];
diff --git a/keep-ui/app/(keep)/workflows/builder/page.client.tsx b/keep-ui/app/(keep)/workflows/builder/page.client.tsx
index 618a261e2..becb4ebd2 100644
--- a/keep-ui/app/(keep)/workflows/builder/page.client.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/page.client.tsx
@@ -82,7 +82,7 @@ export function WorkflowBuilderPageClient({
     <main className="mx-auto max-w-full h-[98%]">
       <div className="flex justify-between">
         <div className="flex flex-col">
-          <Title>{workflow ? "Edit" : "New"} Workflow</Title>
+          <Title>{workflowId ? "Edit" : "New"} Workflow</Title>
         </div>
         <div className="flex gap-2">
           {!workflow && (
diff --git a/keep-ui/app/(keep)/workflows/builder/utils.tsx b/keep-ui/app/(keep)/workflows/builder/utils.tsx
index d9d67243e..865bc6747 100644
--- a/keep-ui/app/(keep)/workflows/builder/utils.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/utils.tsx
@@ -1,6 +1,6 @@
 import { load, JSON_SCHEMA } from "js-yaml";
 import { Provider } from "../../providers/providers";
-import { Action, Alert } from "./legacy-workflow.types";
+import { Action, LegacyWorkflow } from "./legacy-workflow.types";
 import { v4 as uuidv4 } from "uuid";
 import {
   Definition,
@@ -396,7 +396,9 @@ function getActionsFromCondition(
   return compiledActions;
 }
 
-export function buildAlert(definition: Definition): Alert {
+export function getWorkflowFromDefinition(
+  definition: Definition
+): LegacyWorkflow {
   const alert = definition;
   const alertId = alert.properties.id as string;
   const name = (alert.properties.name as string) ?? "";
@@ -544,7 +546,7 @@ export function buildAlert(definition: Definition): Alert {
     consts: consts,
     steps: steps,
     actions: actions,
-  } as Alert;
+  } as LegacyWorkflow;
 }
 
 export function wrapDefinitionV2({
diff --git a/keep-ui/app/(keep)/workflows/mockworkflows.tsx b/keep-ui/app/(keep)/workflows/mockworkflows.tsx
index a6fb570fa..087ea17f8 100644
--- a/keep-ui/app/(keep)/workflows/mockworkflows.tsx
+++ b/keep-ui/app/(keep)/workflows/mockworkflows.tsx
@@ -1,10 +1,19 @@
 import React, { useState } from "react";
-import { MockStep, MockWorkflow } from "@/shared/api/workflows";
-import Loading from "@/app/(keep)/loading";
-import { Button, Card, Tab, TabGroup, TabList } from "@tremor/react";
+import {
+  MockStep,
+  MockWorkflow,
+  WorkflowTemplate,
+} from "@/shared/api/workflows";
+import { Button, Card } from "@tremor/react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { TiArrowRight } from "react-icons/ti";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+import useSWR from "swr";
+import { useApi } from "@/shared/lib/hooks/useApi";
+import { ErrorComponent } from "@/shared/ui";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
 
 export function WorkflowSteps({ workflow }: { workflow: MockWorkflow }) {
   const isStepPresent =
@@ -71,104 +80,98 @@ export function WorkflowSteps({ workflow }: { workflow: MockWorkflow }) {
   );
 }
 
-export const MockFilterTabs = ({
-  tabs,
-}: {
-  tabs: { name: string; onClick?: () => void }[];
-}) => (
-  <div className="max-w-lg space-y-12">
-    <TabGroup>
-      <TabList variant="solid">
-        {tabs?.map(
-          (tab: { name: string; onClick?: () => void }, index: number) => (
-            <Tab key={index} value={tab.name}>
-              {tab.name}
-            </Tab>
-          )
-        )}
-      </TabList>
-    </TabGroup>
-  </div>
-);
-
-export default function MockWorkflowCardSection({
-  mockWorkflows,
-  mockError,
-  mockLoading,
-}: {
-  mockWorkflows: MockWorkflow[];
-  mockError: any;
-  mockLoading: boolean | null;
-}) {
+export function WorkflowTemplates() {
+  const api = useApi();
   const router = useRouter();
   const [loadingId, setLoadingId] = useState<string | null>(null);
 
+  /**
+    Add Mock Workflows (6 Random Workflows on Every Request)
+      To add mock workflows, a new backend API endpoint has been created: /workflows/random-templates.
+        1. Fetching Random Templates: When a request is made to this endpoint, all workflow YAML/YML files are read and
+           shuffled randomly.
+        2. Response: Only the first 6 files are parsed and sent in the response.
+   **/
+  const {
+    data: mockWorkflows,
+    error: mockError,
+    isLoading: mockLoading,
+    mutate: refresh,
+  } = useSWR<WorkflowTemplate[]>(
+    api.isReady() ? `/workflows/random-templates` : null,
+    (url: string) => api.get(url),
+    {
+      revalidateOnFocus: false,
+    }
+  );
+
   const getNameFromId = (id: string) => {
     if (!id) {
       return "";
     }
-
     return id.split("-").join(" ");
   };
 
-  // if mockError is not null, handle the error case
-  if (mockError) {
-    return <p>Error: {mockError.message}</p>;
-  }
+  const handlePreview = (template: WorkflowTemplate) => {
+    setLoadingId(template.workflow_raw_id);
+    localStorage.setItem("preview_workflow", JSON.stringify(template));
+    router.push(`/workflows/preview/${template.workflow_raw_id}`);
+  };
 
   return (
     <div className="w-full">
-      <h2 className="text-xl sm:text-2xl font-semibold mb-6">
+      <h2 className="text-xl sm:text-2xl font-semibold mb-6 flex justify-between">
         Discover workflow templates
-      </h2>
-      {/* TODO: Implement the commented out code block */}
-      {/* This is a placeholder comment until the commented out code block is implemented */}
-      {/* <div className="flex flex-col sm:flex-row justify-between mb-6 flex-wrap gap-2">
-        <div className="flex flex-col sm:flex-row flex-wrap gap-2" >
-          <input
-            type="text"
-            placeholder="Search through workflow examples..."
-            className="px-4 py-2 border rounded"
-          />
-          <button className="px-4 py-2 bg-gray-200 border rounded">Integrations used</button>
+        <div className="flex justify-end">
+          <Button
+            icon={ArrowPathIcon}
+            color="orange"
+            size="sm"
+            onClick={() => {
+              refresh();
+            }}
+          >
+            Refresh
+          </Button>
         </div>
-        <MockFilterTabs tabs={[
-          {name: "All workflows"},
-          {name: "Notifications"},
-          {name: "Databases"},
-          {name: "CI/CD"},
-          {name: "Other"},
-          ]}/>
-      </div> */}
-      {mockError && (
-        <p className="text-center text-red-100 m-auto">
-          Error: {mockError.message || "Something went wrong!"}
-        </p>
+      </h2>
+
+      {/* TODO: Filters and search */}
+      {!mockLoading && !mockError && mockWorkflows?.length === 0 && (
+        <p className="text-center m-auto">No workflow templates found</p>
       )}
-      {!mockLoading && !mockError && mockWorkflows.length === 0 && (
-        <p className="text-center m-auto">No workflows found</p>
+      {mockError && (
+        <ErrorComponent error={mockError} reset={() => refresh()} />
       )}
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 w-full gap-4">
-        {mockError && (
-          <p className="text-center text-red-100">
-            Error: {mockError.message || "Something went wrong!"}
-          </p>
+        {mockLoading && (
+          <>
+            {Array.from({ length: 8 }).map((_, index) => (
+              <div key={index} className="w-full h-48">
+                <Skeleton className="w-full h-48" />
+              </div>
+            ))}
+          </>
         )}
-        {mockLoading && <Loading />}
         {!mockLoading &&
-          mockWorkflows.length > 0 &&
-          mockWorkflows.map((template: any, index: number) => {
+          mockWorkflows?.length &&
+          mockWorkflows?.map((template, index: number) => {
             const workflow = template.workflow;
             return (
               <Card
                 key={index}
-                className="p-4 flex flex-col justify-between w-full border-2 border-transparent hover:border-orange-400 "
+                className="p-4 flex flex-col justify-between w-full border-2 border-transparent hover:border-orange-400 gap-2"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handlePreview(template);
+                }}
               >
-                <div>
+                <div className="min-h-36">
                   <WorkflowSteps workflow={workflow} />
                   <h3 className="text-lg sm:text-xl font-semibold line-clamp-2">
-                    {workflow.name || getNameFromId(workflow.id)}
+                    {getNameFromId(workflow.id)}
                   </h3>
                   <p className="mt-2 text-sm sm:text-base line-clamp-3">
                     {workflow.description}
@@ -176,16 +179,7 @@ export default function MockWorkflowCardSection({
                 </div>
                 <div>
                   <Button
-                    className="flex justify-center mt-8 px-4 py-2 border-none bg-gray-200 hover:bg-gray-300 bold-medium transition text-black rounded"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setLoadingId(workflow.id);
-                      localStorage.setItem(
-                        "preview_workflow",
-                        JSON.stringify(template)
-                      );
-                      router.push(`/workflows/preview/${workflow.id}`);
-                    }}
+                    variant="secondary"
                     disabled={!!(loadingId && loadingId !== workflow.id)}
                     loading={loadingId === workflow.id}
                   >
diff --git a/keep-ui/app/(keep)/workflows/noworkflows.tsx b/keep-ui/app/(keep)/workflows/noworkflows.tsx
index d381d1cd5..fc2b5fc18 100644
--- a/keep-ui/app/(keep)/workflows/noworkflows.tsx
+++ b/keep-ui/app/(keep)/workflows/noworkflows.tsx
@@ -39,8 +39,7 @@ const DetailsSection = () => {
         You do not have any workflow added yet.
       </p>
       <div className="text-sm mt-4 text-gray-500 max-w-md text-center">
-        you can start by creating your very first Workflow from scratch, or
-        browse thorugh some available Workflow templates below
+        Start from scratch, or browse through workflow templates
       </div>
       <Button
         className="mt-4 px-6 py-2"
diff --git a/keep-ui/app/(keep)/workflows/preview/[workflowId]/page.tsx b/keep-ui/app/(keep)/workflows/preview/[workflowId]/page.tsx
index 6bfd54497..85f898df1 100644
--- a/keep-ui/app/(keep)/workflows/preview/[workflowId]/page.tsx
+++ b/keep-ui/app/(keep)/workflows/preview/[workflowId]/page.tsx
@@ -1,8 +1,11 @@
 "use client";
 import { useEffect, useState } from "react";
 import Loading from "@/app/(keep)/loading";
-import Link from "next/link";
 import { WorkflowBuilderPageClient } from "../../builder/page.client";
+import { Subtitle } from "@tremor/react";
+import { ArrowRightIcon } from "@heroicons/react/16/solid";
+import { Icon } from "@tremor/react";
+import { Link } from "@/components/ui";
 
 export default function PageWithId({
   params,
@@ -24,27 +27,36 @@ export default function PageWithId({
   }, [params.workflowId]);
 
   return (
-    <>
-      {!workflowPreviewData && <Loading />}
-      {workflowPreviewData && workflowPreviewData.name === key && (
-        <WorkflowBuilderPageClient
-          workflowRaw={workflowPreviewData.workflow_raw || ""}
-          isPreview={true}
-        />
-      )}
-      {workflowPreviewData && workflowPreviewData.name !== key && (
-        <>
-          <Link
-            className="p-2 bg-orange-500 text-white hover:bg-orange-600 rounded"
-            href="/workflows"
-          >
-            Go Back
-          </Link>
-          <div className="flex items-center justify-center min-h-screen">
-            <div className="text-center text-red-500">Workflow not found!</div>
-          </div>
-        </>
-      )}
-    </>
+    <div className="flex flex-col mb-4 h-full gap-6">
+      <Subtitle className="text-sm">
+        <Link href="/workflows">All Workflows</Link>{" "}
+        <Icon icon={ArrowRightIcon} color="gray" size="xs" /> Preview workflow
+        template
+      </Subtitle>
+      <div className="flex-1 h-full">
+        {!workflowPreviewData && <Loading />}
+        {workflowPreviewData && workflowPreviewData.name === key && (
+          <WorkflowBuilderPageClient
+            workflowRaw={workflowPreviewData.workflow_raw || ""}
+            isPreview={true}
+          />
+        )}
+        {workflowPreviewData && workflowPreviewData.name !== key && (
+          <>
+            <Link
+              className="p-2 bg-orange-500 text-white hover:bg-orange-600 rounded"
+              href="/workflows"
+            >
+              Go Back
+            </Link>
+            <div className="flex items-center justify-center min-h-screen">
+              <div className="text-center text-red-500">
+                Workflow not found!
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
   );
 }
diff --git a/keep-ui/app/(keep)/workflows/workflow-menu.tsx b/keep-ui/app/(keep)/workflows/workflow-menu.tsx
index f3438bdb4..9d879640e 100644
--- a/keep-ui/app/(keep)/workflows/workflow-menu.tsx
+++ b/keep-ui/app/(keep)/workflows/workflow-menu.tsx
@@ -1,7 +1,4 @@
-import { Menu, Transition } from "@headlessui/react";
-import { Fragment } from "react";
 import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
-import { Icon } from "@tremor/react";
 import {
   EyeIcon,
   PlayIcon,
@@ -10,6 +7,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { DownloadIcon } from "@radix-ui/react-icons";
 import React from "react";
+import { DropdownMenu } from "@/shared/ui";
 
 interface WorkflowMenuProps {
   onDelete?: () => Promise<void>;
@@ -32,175 +30,60 @@ export default function WorkflowMenu({
   runButtonToolTip,
   provisioned,
 }: WorkflowMenuProps) {
-  const [showTooltip, setShowTooltip] = React.useState(false);
-  const [tooltipPosition, setTooltipPosition] = React.useState({
-    top: 0,
-    left: 0,
-  });
-  const wrapperRef = React.useRef<HTMLDivElement>(null);
-  const stopPropagation = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-  };
-
-  const handleMouseEnter = () => {
-    if (isRunButtonDisabled && runButtonToolTip && wrapperRef.current) {
-      const rect = wrapperRef.current.getBoundingClientRect();
-      setTooltipPosition({
-        top: rect.top - 40,
-        left: rect.left + rect.width / 2,
-      });
-      setShowTooltip(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    setShowTooltip(false);
-  };
-
   return (
-    <div className="w-44 text-right">
-      <Menu as="div" className="relative inline-block text-left z-10">
-        <div>
-          <Menu.Button
-            className="inline-flex w-full justify-center rounded-md text-sm"
-            onClick={stopPropagation}
-          >
-            <Icon
-              size="sm"
-              icon={EllipsisHorizontalIcon}
-              className="hover:bg-gray-100 w-8 h-8" // you can manually adjust the size here
-              color="gray"
-            />
-          </Menu.Button>
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items className="absolute right-0 mt-2 w-36 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="px-1 py-1">
-              <Menu.Item>
-                {({ active }) => (
-                  <div
-                    ref={wrapperRef}
-                    onMouseEnter={handleMouseEnter}
-                    onMouseLeave={handleMouseLeave}
-                    className="relative"
-                  >
-                    <button
-                      disabled={isRunButtonDisabled}
-                      onClick={(e) => {
-                        stopPropagation(e);
-                        onRun?.();
-                      }}
-                      className={`${
-                        active ? "bg-slate-200" : "text-gray-900"
-                      } flex w-full items-center rounded-md px-2 py-2 text-xs ${
-                        isRunButtonDisabled
-                          ? "cursor-not-allowed opacity-50"
-                          : ""
-                      }`}
-                    >
-                      <PlayIcon className="mr-2 h-4 w-4" aria-hidden="true" />
-                      Run
-                    </button>
-                  </div>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <button
-                    onClick={(e) => {
-                      stopPropagation(e);
-                      onDownload?.();
-                    }}
-                    className={`${
-                      active ? "bg-slate-200" : "text-gray-900"
-                    } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
-                  >
-                    <DownloadIcon className="mr-2 h-4 w-4" aria-hidden="true" />
-                    Download
-                  </button>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <button
-                    onClick={(e) => {
-                      stopPropagation(e);
-                      onView?.();
-                    }}
-                    className={`${
-                      active ? "bg-slate-200" : "text-gray-900"
-                    } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
-                  >
-                    <EyeIcon className="mr-2 h-4 w-4" aria-hidden="true" />
-                    Last executions
-                  </button>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <button
-                    onClick={(e) => {
-                      stopPropagation(e);
-                      onBuilder?.();
-                    }}
-                    className={`${
-                      active ? "bg-slate-200" : "text-gray-900"
-                    } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
-                  >
-                    <WrenchIcon className="mr-2 h-4 w-4" aria-hidden="true" />
-                    Open in builder
-                  </button>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <div className="relative group">
-                    <button
-                      disabled={provisioned}
-                      onClick={(e) => {
-                        stopPropagation(e);
-                        onDelete?.();
-                      }}
-                      className={`${
-                        active ? "bg-slate-200" : "text-gray-900"
-                      } flex w-full items-center rounded-md px-2 py-2 text-xs ${
-                        provisioned ? "cursor-not-allowed opacity-50" : ""
-                      }`}
-                    >
-                      <TrashIcon className="mr-2 h-4 w-4" aria-hidden="true" />
-                      Delete
-                    </button>
-                    {provisioned && (
-                      <div className="absolute bottom-full transform -translate-x-1/2 bg-black text-white text-xs rounded px-4 py-1 z-10 opacity-0 group-hover:opacity-100">
-                        Cannot delete a provisioned workflow
-                      </div>
-                    )}
-                  </div>
-                )}
-              </Menu.Item>
-            </div>
-          </Menu.Items>
-        </Transition>
-      </Menu>
-      {showTooltip && isRunButtonDisabled && runButtonToolTip && (
-        <div
-          className="fixed bg-black text-white text-xs rounded px-4 py-1 z-50 transform -translate-x-1/2 whitespace-nowrap"
-          style={{
-            top: `${tooltipPosition.top}px`,
-            left: `${tooltipPosition.left}px`,
+    <div className="js-dont-propagate">
+      <DropdownMenu.Menu icon={EllipsisHorizontalIcon} label="">
+        <DropdownMenu.Item
+          icon={PlayIcon}
+          label="Run workflow"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onRun?.();
+          }}
+          title={runButtonToolTip}
+          disabled={isRunButtonDisabled}
+        />
+        <DropdownMenu.Item
+          icon={DownloadIcon}
+          label="Download"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onDownload?.();
+          }}
+        />
+        <DropdownMenu.Item
+          icon={EyeIcon}
+          label="Last executions"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onView?.();
+          }}
+        />
+        <DropdownMenu.Item
+          icon={WrenchIcon}
+          label="Open in builder"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onBuilder?.();
+          }}
+        />
+        <DropdownMenu.Item
+          icon={TrashIcon}
+          label="Delete"
+          variant="destructive"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onDelete?.();
           }}
-        >
-          {runButtonToolTip}
-        </div>
-      )}
+          disabled={provisioned}
+          title={provisioned ? "Cannot delete a provisioned workflow" : ""}
+        />
+      </DropdownMenu.Menu>
     </div>
   );
 }
diff --git a/keep-ui/app/(keep)/workflows/workflow-tile.tsx b/keep-ui/app/(keep)/workflows/workflow-tile.tsx
index c4c06099d..6ba99b7a8 100644
--- a/keep-ui/app/(keep)/workflows/workflow-tile.tsx
+++ b/keep-ui/app/(keep)/workflows/workflow-tile.tsx
@@ -6,19 +6,7 @@ import { useRouter } from "next/navigation";
 import WorkflowMenu from "./workflow-menu";
 import Loading from "@/app/(keep)/loading";
 import { Trigger, Provider, Workflow } from "@/shared/api/workflows";
-import {
-  Button,
-  Text,
-  Card,
-  Title,
-  Icon,
-  ListItem,
-  List,
-  Accordion,
-  AccordionBody,
-  AccordionHeader,
-  Badge,
-} from "@tremor/react";
+import { Button, Text, Card, Icon, ListItem, List, Badge } from "@tremor/react";
 import ProviderForm from "@/app/(keep)/providers/provider-form";
 import SlidingPanel from "react-sliding-side-panel";
 import { useFetchProviders } from "@/app/(keep)/providers/page.client";
@@ -40,44 +28,9 @@ import {
 } from "react-icons/md";
 import { HiBellAlert } from "react-icons/hi2";
 import { useWorkflowRun } from "utils/hooks/useWorkflowRun";
-import { useApi } from "@/shared/lib/hooks/useApi";
+import { useWorkflowActions } from "@/entities/workflows/model/useWorkflowActions";
 import "./workflow-tile.css";
 
-function WorkflowMenuSection({
-  onDelete,
-  onRun,
-  onDownload,
-  onView,
-  onBuilder,
-  isRunButtonDisabled,
-  runButtonToolTip,
-  provisioned,
-}: {
-  onDelete: () => Promise<void>;
-  onRun: () => Promise<void>;
-  onDownload: () => void;
-  onView: () => void;
-  onBuilder: () => void;
-  isRunButtonDisabled: boolean;
-  runButtonToolTip?: string;
-  provisioned?: boolean;
-}) {
-  // Determine if all providers are installed
-
-  return (
-    <WorkflowMenu
-      onDelete={onDelete}
-      onRun={onRun}
-      onDownload={onDownload}
-      onView={onView}
-      onBuilder={onBuilder}
-      isRunButtonDisabled={isRunButtonDisabled}
-      runButtonToolTip={runButtonToolTip}
-      provisioned={provisioned}
-    />
-  );
-}
-
 function TriggerTile({ trigger }: { trigger: Trigger }) {
   return (
     <ListItem>
@@ -103,69 +56,6 @@ function TriggerTile({ trigger }: { trigger: Trigger }) {
   );
 }
 
-function ProviderTile({
-  provider,
-  onConnectClick,
-}: {
-  provider: FullProvider;
-  onConnectClick: (provider: FullProvider) => void;
-}) {
-  const [isHovered, setIsHovered] = useState(false);
-
-  return (
-    <div
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      className={`relative group flex flex-col justify-around items-center bg-white rounded-lg w-24 h-28 mt-2.5 mr-2.5 hover:grayscale-0 shadow-md hover:shadow-lg`}
-      title={`${provider.details.name} (${provider.type})`}
-    >
-      {provider.installed ? (
-        <Icon
-          icon={CheckCircleIcon}
-          className="absolute top-[-15px] right-[-15px]"
-          color="green"
-          size="sm"
-          tooltip="Connected"
-        />
-      ) : (
-        <Icon
-          icon={XCircleIcon}
-          className="absolute top-[-15px] right-[-15px]"
-          color="red"
-          size="sm"
-          tooltip="Disconnected"
-        />
-      )}
-      <Image
-        src={`/icons/${provider.type}-icon.png`}
-        width={30}
-        height={30}
-        alt={provider.type}
-        className={`${
-          provider.installed ? "mt-6" : "mt-6 grayscale group-hover:grayscale-0"
-        }`}
-      />
-
-      <div className="h-8 w-[70px] flex justify-center">
-        {!provider.installed && isHovered ? (
-          <Button
-            variant="secondary"
-            size="xs"
-            color="green"
-            onClick={() => onConnectClick(provider)}
-          >
-            Connect
-          </Button>
-        ) : (
-          <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content truncate">
-            {provider.details.name}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
 export const ProvidersCarousel = ({
   providers,
   onConnectClick,
@@ -174,7 +64,6 @@ export const ProvidersCarousel = ({
   onConnectClick: (provider: FullProvider) => void;
 }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [isHovered, setIsHovered] = useState(false);
 
   const providersPerPage = 3;
 
@@ -211,8 +100,6 @@ export const ProvidersCarousel = ({
           <div
             key={index}
             className="relative p-2 hover:grayscale-0 text-2xl h-full shadow-md"
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
           >
             {provider.installed ? (
               <Icon
@@ -265,7 +152,6 @@ export const ProvidersCarousel = ({
 };
 
 function WorkflowTile({ workflow }: { workflow: Workflow }) {
-  const api = useApi();
   // Create a set to keep track of unique providers
   const router = useRouter();
   const [openPanel, setOpenPanel] = useState(false);
@@ -280,6 +166,7 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
   const [fallBackIcon, setFallBackIcon] = useState(false);
 
   const { providers } = useFetchProviders();
+  const { deleteWorkflow } = useWorkflowActions();
   const {
     isRunning,
     handleRunClick,
@@ -300,13 +187,18 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
   };
 
   const handleDeleteClick = async () => {
-    try {
-      await api.delete(`/workflows/${workflow.id}`);
-      // Workflow deleted successfully
-      window.location.reload();
-    } catch (error) {
-      console.error("An error occurred while deleting workflow", error);
+    deleteWorkflow(workflow.id);
+  };
+
+  const handleWorkflowClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const target = e.target as HTMLElement;
+    if (target.closest(".js-dont-propagate")) {
+      // do not redirect if the three-dot menu is clicked
+      return;
     }
+    router.push(`/workflows/${workflow.id}`);
   };
 
   const handleConnecting = (isConnecting: boolean, isConnected: boolean) => {
@@ -529,13 +421,7 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
       )}
       <Card
         className="relative flex flex-col justify-between bg-white rounded shadow p-2 h-full border-2 border-transparent hover:border-orange-400 overflow-hidden"
-        onClick={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          if (workflow.id) {
-            router.push(`/workflows/${workflow.id}`);
-          }
-        }}
+        onClick={handleWorkflowClick}
       >
         <div className="absolute top-0 right-0 mt-2 mr-2 mb-2 flex items-center flex-wrap">
           {workflow.provisioned && (
@@ -543,17 +429,18 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
               Provisioned
             </Badge>
           )}
-          {!!handleRunClick &&
-            WorkflowMenuSection({
-              onDelete: handleDeleteClick,
-              onRun: handleRunClick,
-              onDownload: handleDownloadClick,
-              onView: handleViewClick,
-              onBuilder: handleBuilderClick,
-              runButtonToolTip: message,
-              isRunButtonDisabled: !!isRunButtonDisabled,
-              provisioned: workflow.provisioned,
-            })}
+          {!!handleRunClick && (
+            <WorkflowMenu
+              onDelete={handleDeleteClick}
+              onRun={handleRunClick}
+              onDownload={handleDownloadClick}
+              onView={handleViewClick}
+              onBuilder={handleBuilderClick}
+              runButtonToolTip={message}
+              isRunButtonDisabled={!!isRunButtonDisabled}
+              provisioned={workflow.provisioned}
+            />
+          )}
         </div>
         <div className="m-2 flex flex-col justify-around item-start flex-wrap">
           <WorkflowGraph workflow={workflow} />
@@ -637,7 +524,6 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
               providers={uniqueProviders}
               onConnectClick={handleConnectProvider}
             />
-            {/* </div> */}
           </Card>
           <SlidingPanel
             type={"right"}
@@ -692,288 +578,4 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
   );
 }
 
-export function WorkflowTileOld({ workflow }: { workflow: Workflow }) {
-  const api = useApi();
-  // Create a set to keep track of unique providers
-  const router = useRouter();
-  const [openPanel, setOpenPanel] = useState(false);
-  const [selectedProvider, setSelectedProvider] = useState<FullProvider | null>(
-    null
-  );
-
-  const { providers } = useFetchProviders();
-  const {
-    isRunning,
-    handleRunClick,
-    isRunButtonDisabled,
-    message,
-    getTriggerModalProps,
-  } = useWorkflowRun(workflow!);
-
-  const handleConnectProvider = (provider: FullProvider) => {
-    setSelectedProvider(provider);
-    setOpenPanel(true);
-  };
-
-  const handleCloseModal = () => {
-    setOpenPanel(false);
-    setSelectedProvider(null);
-  };
-
-  const handleDeleteClick = async () => {
-    try {
-      await api.delete(`/workflows/${workflow.id}`);
-
-      // Workflow deleted successfully
-      window.location.reload();
-    } catch (error) {
-      console.error("An error occurred while deleting workflow", error);
-    }
-  };
-
-  const handleConnecting = (isConnecting: boolean, isConnected: boolean) => {
-    if (isConnected) {
-      handleCloseModal();
-      // refresh the page to show the changes
-      window.location.reload();
-    }
-  };
-  const handleDownloadClick = async () => {
-    try {
-      // Use the raw workflow data directly, as it is already in YAML format
-      const workflowYAML = workflow.workflow_raw;
-
-      // Create a Blob object representing the data as a YAML file
-      const blob = new Blob([workflowYAML], { type: "text/yaml" });
-
-      // Create an anchor element with a URL object created from the Blob
-      const url = window.URL.createObjectURL(blob);
-
-      // Create a "hidden" anchor tag with the download attribute and click it
-      const a = document.createElement("a");
-      a.style.display = "none";
-      a.href = url;
-      a.download = `${workflow.workflow_raw_id}.yaml`; // The file will be named after the workflow's id
-      document.body.appendChild(a);
-      a.click();
-
-      // Release the object URL to free up resources
-      window.URL.revokeObjectURL(url);
-    } catch (error) {
-      console.error("An error occurred while downloading the YAML", error);
-    }
-  };
-
-  const handleViewClick = async () => {
-    router.push(`/workflows/${workflow.id}`);
-  };
-
-  const handleBuilderClick = async () => {
-    router.push(`/workflows/builder/${workflow.id}`);
-  };
-
-  const workflowProvidersMap = new Map(
-    workflow.providers.map((p) => [p.type, p])
-  );
-
-  const uniqueProviders: FullProvider[] = Array.from(
-    new Set(workflow.providers.map((p) => p.type))
-  )
-    .map((type) => {
-      let fullProvider =
-        providers.find((fp) => fp.type === type) || ({} as FullProvider);
-      let workflowProvider =
-        workflowProvidersMap.get(type) || ({} as FullProvider);
-
-      // Merge properties
-      const mergedProvider: FullProvider = {
-        ...fullProvider,
-        ...workflowProvider,
-        installed: workflowProvider.installed || fullProvider.installed,
-        details: {
-          authentication: {},
-          name: (workflowProvider as Provider).name || fullProvider.id,
-        },
-        id: fullProvider.type,
-      };
-
-      return mergedProvider;
-    })
-    .filter(Boolean) as FullProvider[];
-  const triggerTypes = workflow.triggers.map((trigger) => trigger.type);
-  return (
-    <div className="workflow-tile-basis mt-2.5">
-      {isRunning && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <Loading />
-        </div>
-      )}
-      <Card>
-        <div className="flex w-full justify-between items-center h-14">
-          <Title className="truncate max-w-64 text-left text-lightBlack">
-            {workflow.name}
-          </Title>
-          {!!handleRunClick &&
-            WorkflowMenuSection({
-              onDelete: handleDeleteClick,
-              onRun: handleRunClick,
-              onDownload: handleDownloadClick,
-              onView: handleViewClick,
-              onBuilder: handleBuilderClick,
-              runButtonToolTip: message,
-              isRunButtonDisabled: !!isRunButtonDisabled,
-              provisioned: workflow.provisioned,
-            })}
-        </div>
-
-        <div className="flex items-center justify-between h-10">
-          <Text className="truncate max-w-sm text-left text-lightBlack">
-            {workflow.description}
-          </Text>
-        </div>
-
-        <List>
-          <ListItem>
-            <span>Created By</span>
-            <span className="text-right">{workflow.created_by}</span>
-          </ListItem>
-          <ListItem>
-            <span>Created At</span>
-            <span className="text-right">
-              {workflow.creation_time
-                ? new Date(workflow.creation_time + "Z").toLocaleString()
-                : "N/A"}
-            </span>
-          </ListItem>
-          <ListItem>
-            <span>Last Updated</span>
-            <span className="text-right">
-              {workflow.last_updated
-                ? new Date(workflow.last_updated + "Z").toLocaleString()
-                : "N/A"}
-            </span>
-          </ListItem>
-          <ListItem>
-            <span>Last Execution</span>
-            <span className="text-right">
-              {workflow.last_execution_time
-                ? new Date(workflow.last_execution_time + "Z").toLocaleString()
-                : "N/A"}
-            </span>
-          </ListItem>
-          <ListItem>
-            <span>Last Status</span>
-            <span className="text-right">
-              {workflow.last_execution_status
-                ? workflow.last_execution_status
-                : "N/A"}
-            </span>
-          </ListItem>
-          <ListItem>
-            <span>Disabled</span>
-            <span className="text-right">{workflow?.disabled?.toString()}</span>
-          </ListItem>
-        </List>
-
-        <Accordion className="mt-2.5">
-          <AccordionHeader>
-            <span className="mr-1">Triggers:</span>
-            {triggerTypes.map((t) => {
-              if (t === "alert") {
-                const handleImageError = (event: any) => {
-                  event.target.href.baseVal = "/icons/keep-icon.png";
-                };
-                const alertSource = workflow.triggers
-                  .find((w) => w.type === "alert")
-                  ?.filters?.find((f) => f.key === "source")?.value;
-                const DynamicIcon = (props: any) => (
-                  <svg
-                    width="24px"
-                    height="24px"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    {...props}
-                  >
-                    {" "}
-                    <image
-                      id="image0"
-                      width={"24"}
-                      height={"24"}
-                      href={`/icons/${alertSource}-icon.png`}
-                      onError={handleImageError}
-                    />
-                  </svg>
-                );
-                return (
-                  <Badge
-                    icon={DynamicIcon}
-                    key={t}
-                    size="xs"
-                    color="orange"
-                    title={`Source: ${alertSource}`}
-                  >
-                    {t}
-                  </Badge>
-                );
-              }
-              return (
-                <Badge key={t} size="xs" color="orange">
-                  {t}
-                </Badge>
-              );
-            })}
-          </AccordionHeader>
-          <AccordionBody>
-            {workflow.triggers.length > 0 ? (
-              <List>
-                {workflow.triggers.map((trigger, index) => (
-                  <TriggerTile key={index} trigger={trigger} />
-                ))}
-              </List>
-            ) : (
-              <p className="text-xs text-center mx-4 mt-5 text-tremor-content dark:text-dark-tremor-content">
-                This workflow does not have any triggers.
-              </p>
-            )}
-          </AccordionBody>
-        </Accordion>
-
-        <Card className="mt-2.5">
-          <Text>Providers:</Text>
-          <div className="flex flex-wrap justify-start">
-            {uniqueProviders.map((provider) => (
-              <ProviderTile
-                key={provider.id}
-                provider={provider}
-                onConnectClick={handleConnectProvider}
-              />
-            ))}
-          </div>
-        </Card>
-        <SlidingPanel
-          type={"right"}
-          isOpen={openPanel}
-          size={30}
-          backdropClicked={handleCloseModal}
-          panelContainerClassName="bg-white z-[2000]"
-        >
-          {selectedProvider && (
-            <ProviderForm
-              provider={selectedProvider}
-              onConnectChange={handleConnecting}
-              closeModal={handleCloseModal}
-              installedProvidersMode={selectedProvider.installed}
-              isProviderNameDisabled={true}
-            />
-          )}
-        </SlidingPanel>
-      </Card>
-      {!!getTriggerModalProps && (
-        <AlertTriggerModal {...getTriggerModalProps()} />
-      )}
-    </div>
-  );
-}
-
 export default WorkflowTile;
diff --git a/keep-ui/app/(keep)/workflows/workflows.client.tsx b/keep-ui/app/(keep)/workflows/workflows.client.tsx
index c995b1f84..79ac6dc40 100644
--- a/keep-ui/app/(keep)/workflows/workflows.client.tsx
+++ b/keep-ui/app/(keep)/workflows/workflows.client.tsx
@@ -7,7 +7,7 @@ import {
   ArrowUpOnSquareStackIcon,
   PlusCircleIcon,
 } from "@heroicons/react/24/outline";
-import { Workflow, MockWorkflow } from "@/shared/api/workflows";
+import { Workflow } from "@/shared/api/workflows";
 import Loading from "@/app/(keep)/loading";
 import WorkflowsEmptyState from "./noworkflows";
 import WorkflowTile from "./workflow-tile";
@@ -15,7 +15,7 @@ import { Button, Title } from "@tremor/react";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
 import { useRouter } from "next/navigation";
 import Modal from "@/components/ui/Modal";
-import MockWorkflowCardSection from "./mockworkflows";
+import { WorkflowTemplates } from "./mockworkflows";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { KeepApiError } from "@/shared/api";
 import { showErrorToast, Input, ErrorComponent } from "@/shared/ui";
@@ -87,22 +87,6 @@ export default function WorkflowsPage() {
     (url: string) => api.get(url)
   );
 
-  /**
-    Add Mock Workflows (6 Random Workflows on Every Request)
-      To add mock workflows, a new backend API endpoint has been created: /workflows/random-templates.
-        1. Fetching Random Templates: When a request is made to this endpoint, all workflow YAML/YML files are read and
-           shuffled randomly.
-        2. Response: Only the first 6 files are parsed and sent in the response.
-   **/
-  const {
-    data: mockWorkflows,
-    error: mockError,
-    isLoading: mockLoading,
-  } = useSWR<MockWorkflow[]>(
-    api.isReady() ? `/workflows/random-templates` : null,
-    (url: string) => api.get(url)
-  );
-
   if (error) {
     return <ErrorComponent error={error} reset={() => {}} />;
   }
@@ -235,11 +219,7 @@ export default function WorkflowsPage() {
           )}
         </div>
         <div className="flex flex-col gap-4">
-          <MockWorkflowCardSection
-            mockWorkflows={mockWorkflows || []}
-            mockError={mockError}
-            mockLoading={mockLoading}
-          />
+          <WorkflowTemplates />
         </div>
       </main>
       <Modal
diff --git a/keep-ui/entities/workflows/index.ts b/keep-ui/entities/workflows/index.ts
new file mode 100644
index 000000000..5ba873ff7
--- /dev/null
+++ b/keep-ui/entities/workflows/index.ts
@@ -0,0 +1 @@
+export { useWorkflowActions } from "./model/useWorkflowActions";
diff --git a/keep-ui/entities/workflows/model/useWorkflowActions.ts b/keep-ui/entities/workflows/model/useWorkflowActions.ts
new file mode 100644
index 000000000..76d46a327
--- /dev/null
+++ b/keep-ui/entities/workflows/model/useWorkflowActions.ts
@@ -0,0 +1,80 @@
+import { useApi } from "@/shared/lib/hooks/useApi";
+import { showSuccessToast } from "@/shared/ui/utils/showSuccessToast";
+import { useRevalidateMultiple } from "@/shared/lib/state-utils";
+import { showErrorToast } from "@/shared/ui";
+import { Definition } from "@/app/(keep)/workflows/builder/builder-store";
+import { getWorkflowFromDefinition } from "@/app/(keep)/workflows/builder/utils";
+import { stringify } from "yaml";
+import { useCallback } from "react";
+
+type UseWorkflowActionsReturn = {
+  createWorkflow: (
+    definition: Definition
+  ) => Promise<CreateOrUpdateWorkflowResponse | null>;
+  deleteWorkflow: (workflowId: string) => void;
+};
+
+type CreateOrUpdateWorkflowResponse = {
+  workflow_id: string;
+  status: "created" | "updated";
+  revision: number;
+};
+
+export function useWorkflowActions(): UseWorkflowActionsReturn {
+  const api = useApi();
+  const revalidateMultiple = useRevalidateMultiple();
+  const refreshWorkflows = useCallback(() => {
+    revalidateMultiple(["/workflows?is_v2=true"], { isExact: true });
+  }, [revalidateMultiple]);
+
+  const createWorkflow = useCallback(
+    async (definition: Definition) => {
+      try {
+        const workflow = getWorkflowFromDefinition(definition);
+        const body = stringify(workflow);
+        const response = await api.request<CreateOrUpdateWorkflowResponse>(
+          "/workflows/json",
+          {
+            method: "POST",
+            body,
+            headers: { "Content-Type": "text/html" },
+          }
+        );
+        showSuccessToast("Workflow created successfully");
+        refreshWorkflows();
+        return response;
+      } catch (error) {
+        showErrorToast(error, "An error occurred while creating workflow");
+        return null;
+      }
+    },
+    [api, refreshWorkflows]
+  );
+
+  const deleteWorkflow = useCallback(
+    async (
+      workflowId: string,
+      { skipConfirmation = false }: { skipConfirmation?: boolean } = {}
+    ) => {
+      if (
+        !skipConfirmation &&
+        !confirm("Are you sure you want to delete this workflow?")
+      ) {
+        return false;
+      }
+      try {
+        await api.delete(`/workflows/${workflowId}`);
+        showSuccessToast("Workflow deleted successfully");
+        refreshWorkflows();
+      } catch (error) {
+        showErrorToast(error, "An error occurred while deleting workflow");
+      }
+    },
+    [api, refreshWorkflows]
+  );
+
+  return {
+    createWorkflow,
+    deleteWorkflow,
+  };
+}
diff --git a/keep-ui/shared/api/workflows.ts b/keep-ui/shared/api/workflows.ts
index 58e331656..a7e01d7ac 100644
--- a/keep-ui/shared/api/workflows.ts
+++ b/keep-ui/shared/api/workflows.ts
@@ -1,3 +1,8 @@
+import { notFound } from "next/navigation";
+import { ApiClient } from "./ApiClient";
+import { KeepApiError } from "./KeepApiError";
+import { createServerApiClient } from "./server";
+
 export type Provider = {
   id: string;
   type: string; // This corresponds to the name of the icon, e.g., "slack", "github", etc.
@@ -85,3 +90,40 @@ export type MockWorkflow = {
   steps: MockStep[];
   actions: MockAction[];
 };
+
+export type WorkflowTemplate = {
+  name: string;
+  workflow: MockWorkflow;
+  workflow_raw: string;
+  workflow_raw_id: string;
+};
+
+export async function getWorkflow(api: ApiClient, id: string) {
+  return await api.get<Workflow>(`/workflows/${id}`);
+}
+
+export async function getWorkflowWithErrorHandling(
+  id: string,
+  { redirect = true }: { redirect?: boolean } = {}
+  // @ts-ignore ignoring since not found will be handled by nextjs
+): Promise<Workflow> {
+  try {
+    const api = await createServerApiClient();
+    return await getWorkflow(api, id);
+  } catch (error) {
+    if (error instanceof KeepApiError && error.statusCode === 404 && redirect) {
+      notFound();
+    } else {
+      throw error;
+    }
+  }
+}
+
+export async function getWorkflowWithRedirectSafe(id: string) {
+  try {
+    return await getWorkflowWithErrorHandling(id, { redirect: false });
+  } catch (error) {
+    console.error(error);
+    return undefined;
+  }
+}
diff --git a/keep-ui/shared/lib/provider-utils.ts b/keep-ui/shared/lib/provider-utils.ts
new file mode 100644
index 000000000..0fb0294b3
--- /dev/null
+++ b/keep-ui/shared/lib/provider-utils.ts
@@ -0,0 +1,18 @@
+import { Provider } from "@/app/(keep)/providers/providers";
+
+interface ProvidersData {
+  providers: { [key: string]: { providers: Provider[] } };
+}
+
+export function isProviderInstalled(
+  provider: Provider,
+  providers: ProvidersData | Provider[]
+) {
+  return (
+    provider.installed ||
+    !Object.values(providers || {}).some(
+      (p) =>
+        p.type === provider.type && p.config && Object.keys(p.config).length > 0
+    )
+  );
+}
diff --git a/keep-ui/shared/ui/DropdownMenu/DropdownMenu.tsx b/keep-ui/shared/ui/DropdownMenu/DropdownMenu.tsx
index 835206a0a..704b60f86 100644
--- a/keep-ui/shared/ui/DropdownMenu/DropdownMenu.tsx
+++ b/keep-ui/shared/ui/DropdownMenu/DropdownMenu.tsx
@@ -243,6 +243,7 @@ const DropdownDropdownMenuItem = React.forwardRef<
       className={clsx(
         "DropdownMenuItem",
         props.variant === "destructive" && "text-red-500",
+        disabled && "opacity-50 cursor-not-allowed",
         props.className
       )}
       tabIndex={isActive ? 0 : -1}
diff --git a/keep-ui/utils/hooks/useWorkflowRun.ts b/keep-ui/utils/hooks/useWorkflowRun.ts
index abaf4d778..d2df8e579 100644
--- a/keep-ui/utils/hooks/useWorkflowRun.ts
+++ b/keep-ui/utils/hooks/useWorkflowRun.ts
@@ -6,6 +6,7 @@ import { Provider } from "@/app/(keep)/providers/providers";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { showErrorToast } from "@/shared/ui";
 import { useRevalidateMultiple } from "@/shared/lib/state-utils";
+import { isProviderInstalled } from "@/shared/lib/provider-utils";
 interface ProvidersData {
   providers: { [key: string]: { providers: Provider[] } };
 }
@@ -30,14 +31,7 @@ export const useWorkflowRun = (workflow: Workflow) => {
 
   const notInstalledProviders = workflow?.providers
     ?.filter(
-      (workflowProvider) =>
-        !workflowProvider.installed &&
-        Object.values(providers || {}).some(
-          (provider) =>
-            provider.type === workflowProvider.type &&
-            provider.config &&
-            Object.keys(provider.config).length > 0
-        )
+      (workflowProvider) => !isProviderInstalled(workflowProvider, providers)
     )
     .map((provider) => provider.type);
 
diff --git a/keep/api/routes/workflows.py b/keep/api/routes/workflows.py
index e6504df69..363d45b16 100644
--- a/keep/api/routes/workflows.py
+++ b/keep/api/routes/workflows.py
@@ -306,7 +306,7 @@ async def run_workflow_from_definition(
     return workflow_execution
 
 
-async def __get_workflow_raw_data(request: Request, file: UploadFile) -> dict:
+async def __get_workflow_raw_data(request: Request, file: UploadFile | None) -> dict:
     try:
         # we support both File upload (from frontend) or raw yaml (e.g. curl)
         if file: