diff --git a/public/app.tsx b/public/app.tsx
index 2e46c62a..e6afe830 100644
--- a/public/app.tsx
+++ b/public/app.tsx
@@ -9,7 +9,7 @@ import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
 import { CoreStart } from '../../../src/core/public';
 import { Navigation, APP_PATH } from './utils';
-import { Overview, UseCases, Workflows } from './pages';
+import { Overview, UseCases, Workflows, WorkflowBuilder } from './pages';
 import { CoreServicesConsumer } from './core_services';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -37,6 +37,13 @@ export const AiFlowDashboardsApp = (props: Props) => {
                 href: `#${APP_PATH.WORKFLOWS}`,
                 isSelected: props.location.pathname === APP_PATH.WORKFLOWS,
               },
+              {
+                name: Navigation.WorkflowBuilder,
+                id: 3,
+                href: `#${APP_PATH.WORKFLOW_BUILDER}`,
+                isSelected:
+                  props.location.pathname === APP_PATH.WORKFLOW_BUILDER,
+              },
             ],
           },
         ]}
@@ -65,6 +72,12 @@ export const AiFlowDashboardsApp = (props: Props) => {
                     path={APP_PATH.WORKFLOWS}
                     render={(routeProps: RouteComponentProps) => <Workflows />}
                   />
+                  <Route
+                    path={APP_PATH.WORKFLOW_BUILDER}
+                    render={(routeProps: RouteComponentProps) => (
+                      <WorkflowBuilder />
+                    )}
+                  />
                   {/* Defaulting to Overview page */}
                   <Route
                     path={`${APP_PATH.HOME}`}
diff --git a/public/pages/index.ts b/public/pages/index.ts
index 98812058..de362a9c 100644
--- a/public/pages/index.ts
+++ b/public/pages/index.ts
@@ -6,3 +6,4 @@
 export * from './use_cases';
 export * from './workflows';
 export * from './overview';
+export * from './workflow_builder';
diff --git a/public/pages/workflow_builder/index.ts b/public/pages/workflow_builder/index.ts
new file mode 100644
index 00000000..a84bee82
--- /dev/null
+++ b/public/pages/workflow_builder/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkflowBuilder } from './workflow_builder';
diff --git a/public/pages/workflow_builder/workflow_builder.tsx b/public/pages/workflow_builder/workflow_builder.tsx
new file mode 100644
index 00000000..8b9bc914
--- /dev/null
+++ b/public/pages/workflow_builder/workflow_builder.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import {
+  EuiPageHeader,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
+import { CoreServicesContext } from '../../core_services';
+import { CoreStart } from '../../../../../src/core/public';
+import { BREADCRUMBS } from '../../utils';
+
+export function WorkflowBuilder() {
+  const core = React.useContext(CoreServicesContext) as CoreStart;
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([
+      BREADCRUMBS.AI_APPLICATION_BUILDER,
+      BREADCRUMBS.WORKFLOWS,
+    ]);
+  });
+
+  return (
+    <div>
+      <EuiPageHeader>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h1>Workflow Builder</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageHeader>
+      <EuiSpacer size="l" />
+      <EuiFlexItem>
+        <EuiText>Placeholder for workflow builder page...</EuiText>
+      </EuiFlexItem>
+    </div>
+  );
+}
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index 0bbcc29c..8db2f6dd 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -7,6 +7,7 @@ export enum Navigation {
   AiApplicationBuilder = 'AI Application Builder',
   UseCases = 'Use Cases',
   Workflows = 'Workflows',
+  WorkflowBuilder = 'Workflow Builder',
 }
 
 export enum APP_PATH {
@@ -15,10 +16,15 @@ export enum APP_PATH {
   WORKSPACE = '/workspace',
   WORKFLOWS = '/workflows',
   WORKFLOW_DETAIL = '/workflows/:workflowId/',
+  WORKFLOW_BUILDER = '/workflow-builder',
 }
 
 export const BREADCRUMBS = Object.freeze({
   AI_APPLICATION_BUILDER: { text: 'AI application builder', href: '#/' },
   USE_CASES: { text: 'Use cases', href: `#${APP_PATH.USE_CASES}` },
   WORKFLOWS: { text: 'Workflows', href: `#${APP_PATH.WORKFLOWS}` },
+  WORKFLOW_BUILDER: {
+    text: 'Workflow builder',
+    href: `#${APP_PATH.WORKFLOW_BUILDER}`,
+  },
 });