diff --git a/apps/web/app/future/workflows/[workflow]/page.tsx b/apps/web/app/future/workflows/[workflow]/page.tsx
new file mode 100644
index 0000000000..f0c5c5eaa6
--- /dev/null
+++ b/apps/web/app/future/workflows/[workflow]/page.tsx
@@ -0,0 +1,43 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+import LegacyPage from "@calcom/features/ee/workflows/pages/workflow";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+const querySchema = z.object({
+  workflow: z.string(),
+});
+
+export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
+  const { workflow } = await getProps(
+    buildLegacyCtx(headers(), cookies(), params) as unknown as GetServerSidePropsContext
+  );
+  return await _generateMetadata(
+    () => workflow ?? "Untitled",
+    () => ""
+  );
+};
+
+async function getProps(context: GetServerSidePropsContext) {
+  const safeParams = querySchema.safeParse(context.params);
+
+  console.log("Built workflow page:", safeParams);
+  if (!safeParams.success) {
+    return notFound();
+  }
+  return { workflow: safeParams.data.workflow };
+}
+
+export const generateStaticParams = () => [];
+
+// @ts-expect-error getData arg
+export default WithLayout({ getLayout: null, getData: getProps, Page: LegacyPage })<"P">;
+export const dynamic = "force-static";
+// generate segments on demand
+export const dynamicParams = true;
+export const revalidate = 10;
diff --git a/apps/web/app/future/workflows/page.tsx b/apps/web/app/future/workflows/page.tsx
new file mode 100644
index 0000000000..78ea4d910b
--- /dev/null
+++ b/apps/web/app/future/workflows/page.tsx
@@ -0,0 +1,13 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+import LegacyPage from "@calcom/features/ee/workflows/pages/index";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("workflows"),
+    (t) => t("workflows_to_automate_notifications")
+  );
+
+export default WithLayout({ getLayout, Page: LegacyPage })<"P">;
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index c0714a3898..e25fbd1135 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index 15774f4d65..6bbe64f52f 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { WorkflowStep } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";