diff --git a/packages/backend/package.json b/packages/backend/package.json
index a832402e..1866f054 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -69,6 +69,7 @@
     "prettier": "^2.5.1",
     "raw-body": "^2.5.2",
     "showdown": "^2.1.0",
+    "slugify": "^1.6.6",
     "uuid": "^9.0.1",
     "winston": "^3.7.1",
     "xmlrpc": "^1.3.2"
diff --git a/packages/backend/src/apps/forms/assets/favicon.svg b/packages/backend/src/apps/forms/assets/favicon.svg
new file mode 100644
index 00000000..c47f1b48
--- /dev/null
+++ b/packages/backend/src/apps/forms/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M17 20v-9h-2V4h7l-2 5h2zm-2-7v7H4c-1.1 0-2-.9-2-2v-3c0-1.1.9-2 2-2zm-8.75 2.75h-1.5v1.5h1.5zM13 4v7H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM6.25 6.75h-1.5v1.5h1.5z"></path></svg>
diff --git a/packages/backend/src/apps/forms/common/add-auth-header.js b/packages/backend/src/apps/forms/common/add-auth-header.js
new file mode 100644
index 00000000..1bec6104
--- /dev/null
+++ b/packages/backend/src/apps/forms/common/add-auth-header.js
@@ -0,0 +1,16 @@
+const addAuthHeader = ($, requestConfig) => {
+  requestConfig.headers['Content-Type'] = 'application/json';
+
+  if ($.auth.data?.apiKey && $.auth.data?.projectId) {
+    requestConfig.headers['X-Appwrite-Project'] = $.auth.data.projectId;
+    requestConfig.headers['X-Appwrite-Key'] = $.auth.data.apiKey;
+  }
+
+  if ($.auth.data?.host) {
+    requestConfig.headers['Host'] = $.auth.data.host;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;
diff --git a/packages/backend/src/apps/forms/common/set-base-url.js b/packages/backend/src/apps/forms/common/set-base-url.js
new file mode 100644
index 00000000..35a7a957
--- /dev/null
+++ b/packages/backend/src/apps/forms/common/set-base-url.js
@@ -0,0 +1,13 @@
+const setBaseUrl = ($, requestConfig) => {
+  const instanceUrl = $.auth.data.instanceUrl;
+
+  if (instanceUrl) {
+    requestConfig.baseURL = instanceUrl;
+  } else if ($.app.apiBaseUrl) {
+    requestConfig.baseURL = $.app.apiBaseUrl;
+  }
+
+  return requestConfig;
+};
+
+export default setBaseUrl;
diff --git a/packages/backend/src/apps/forms/dynamic-data/index.js b/packages/backend/src/apps/forms/dynamic-data/index.js
new file mode 100644
index 00000000..45eecdb0
--- /dev/null
+++ b/packages/backend/src/apps/forms/dynamic-data/index.js
@@ -0,0 +1,4 @@
+import listCollections from './list-collections/index.js';
+import listDatabases from './list-databases/index.js';
+
+export default [listCollections, listDatabases];
diff --git a/packages/backend/src/apps/forms/dynamic-data/list-collections/index.js b/packages/backend/src/apps/forms/dynamic-data/list-collections/index.js
new file mode 100644
index 00000000..00a839f6
--- /dev/null
+++ b/packages/backend/src/apps/forms/dynamic-data/list-collections/index.js
@@ -0,0 +1,44 @@
+export default {
+  name: 'List collections',
+  key: 'listCollections',
+
+  async run($) {
+    const collections = {
+      data: [],
+    };
+    const databaseId = $.step.parameters.databaseId;
+
+    if (!databaseId) {
+      return collections;
+    }
+
+    const params = {
+      queries: [
+        JSON.stringify({
+          method: 'orderAsc',
+          attribute: 'name',
+        }),
+        JSON.stringify({
+          method: 'limit',
+          values: [100],
+        }),
+      ],
+    };
+
+    const { data } = await $.http.get(
+      `/v1/databases/${databaseId}/collections`,
+      { params }
+    );
+
+    if (data?.collections) {
+      for (const collection of data.collections) {
+        collections.data.push({
+          value: collection.$id,
+          name: collection.name,
+        });
+      }
+    }
+
+    return collections;
+  },
+};
diff --git a/packages/backend/src/apps/forms/dynamic-data/list-databases/index.js b/packages/backend/src/apps/forms/dynamic-data/list-databases/index.js
new file mode 100644
index 00000000..225e4dd0
--- /dev/null
+++ b/packages/backend/src/apps/forms/dynamic-data/list-databases/index.js
@@ -0,0 +1,36 @@
+export default {
+  name: 'List databases',
+  key: 'listDatabases',
+
+  async run($) {
+    const databases = {
+      data: [],
+    };
+
+    const params = {
+      queries: [
+        JSON.stringify({
+          method: 'orderAsc',
+          attribute: 'name',
+        }),
+        JSON.stringify({
+          method: 'limit',
+          values: [100],
+        }),
+      ],
+    };
+
+    const { data } = await $.http.get('/v1/databases', { params });
+
+    if (data?.databases) {
+      for (const database of data.databases) {
+        databases.data.push({
+          value: database.$id,
+          name: database.name,
+        });
+      }
+    }
+
+    return databases;
+  },
+};
diff --git a/packages/backend/src/apps/forms/index.js b/packages/backend/src/apps/forms/index.js
new file mode 100644
index 00000000..d674fe69
--- /dev/null
+++ b/packages/backend/src/apps/forms/index.js
@@ -0,0 +1,14 @@
+import defineApp from '../../helpers/define-app.js';
+import triggers from './triggers/index.js';
+
+export default defineApp({
+  name: 'Forms',
+  key: 'forms',
+  iconUrl: '{BASE_URL}/apps/forms/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/forms/connection',
+  supportsConnections: false,
+  baseUrl: '',
+  apiBaseUrl: '',
+  primaryColor: '#0059F7',
+  triggers,
+});
diff --git a/packages/backend/src/apps/forms/triggers/form-submission/index.js b/packages/backend/src/apps/forms/triggers/form-submission/index.js
new file mode 100644
index 00000000..be495fb1
--- /dev/null
+++ b/packages/backend/src/apps/forms/triggers/form-submission/index.js
@@ -0,0 +1,64 @@
+import Crypto from 'crypto';
+import isEmpty from 'lodash/isEmpty.js';
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New form submission',
+  key: 'newFormSubmission',
+  pollInterval: 15,
+  type: 'webhook',
+  description: 'Triggers when a new form is submitted.',
+  arguments: [
+    {
+      label: 'Fields',
+      key: 'fields',
+      type: 'dynamic',
+      required: false,
+      description: 'Add or remove fields as needed',
+      value: [],
+      fields: [
+        {
+          label: 'Field name',
+          key: 'fieldName',
+          type: 'string',
+          required: true,
+          description: 'Displayed name to the user',
+          variables: true,
+        },
+        {
+          label: 'Type',
+          key: 'fieldType',
+          type: 'dropdown',
+          required: true,
+          description: 'Field type',
+          variables: true,
+          options: [{ label: 'String', value: 'string' }],
+        },
+      ],
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: Crypto.randomUUID(),
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const lastExecutionStep = await $.getLastExecutionStep();
+
+    if (!isEmpty(lastExecutionStep?.dataOut)) {
+      $.pushTriggerItem({
+        raw: lastExecutionStep.dataOut,
+        meta: {
+          internalId: '',
+        },
+      });
+    }
+  },
+});
diff --git a/packages/backend/src/apps/forms/triggers/index.js b/packages/backend/src/apps/forms/triggers/index.js
new file mode 100644
index 00000000..c37f5bfc
--- /dev/null
+++ b/packages/backend/src/apps/forms/triggers/index.js
@@ -0,0 +1,3 @@
+import formSubmittion from './form-submission/index.js';
+
+export default [formSubmittion];
diff --git a/packages/backend/src/controllers/api/v1/forms/create-form-submission.ee.js b/packages/backend/src/controllers/api/v1/forms/create-form-submission.ee.js
new file mode 100644
index 00000000..677801f5
--- /dev/null
+++ b/packages/backend/src/controllers/api/v1/forms/create-form-submission.ee.js
@@ -0,0 +1,21 @@
+import Flow from '../../../../models/flow.js';
+import logger from '../../../../helpers/logger.js';
+import handler from '../../../../helpers/form-handler.ee.js';
+
+export default async (request, response) => {
+  logger.debug(`Handling incoming form submission at ${request.originalUrl}.`);
+  logger.debug(JSON.stringify(request.body, null, 2));
+
+  const formId = request.params.formId;
+  const flow = await Flow.query().findById(formId).throwIfNotFound();
+  const triggerStep = await flow.getTriggerStep();
+
+  if (triggerStep.appKey !== 'forms') {
+    logger.error('Invalid trigger step');
+    return response.status(400).send('Invalid trigger step');
+  }
+
+  await handler(formId, request, response);
+
+  response.sendStatus(204);
+};
diff --git a/packages/backend/src/controllers/api/v1/forms/get-form.ee.js b/packages/backend/src/controllers/api/v1/forms/get-form.ee.js
new file mode 100644
index 00000000..52efc0ae
--- /dev/null
+++ b/packages/backend/src/controllers/api/v1/forms/get-form.ee.js
@@ -0,0 +1,18 @@
+import { renderObject } from '../../../../helpers/renderer.js';
+import Flow from '../../../../models/flow.js';
+
+export default async (request, response) => {
+  const form = await Flow.query()
+    .withGraphJoined({ steps: true })
+    .orderBy('steps.position', 'asc')
+    .findById(request.params.formId)
+    .throwIfNotFound();
+
+  const triggerStep = await form.getTriggerStep();
+
+  if (triggerStep.appKey !== 'forms') {
+    throw new Error('Invalid trigger step');
+  }
+
+  renderObject(response, form, { serializer: 'Form' });
+};
diff --git a/packages/backend/src/helpers/form-handler.ee.js b/packages/backend/src/helpers/form-handler.ee.js
new file mode 100644
index 00000000..1835ef07
--- /dev/null
+++ b/packages/backend/src/helpers/form-handler.ee.js
@@ -0,0 +1,71 @@
+import isEmpty from 'lodash/isEmpty.js';
+
+import Flow from '../models/flow.js';
+import { processTrigger } from '../services/trigger.js';
+import triggerQueue from '../queues/trigger.js';
+import globalVariable from './global-variable.js';
+import QuotaExceededError from '../errors/quote-exceeded.js';
+import {
+  REMOVE_AFTER_30_DAYS_OR_150_JOBS,
+  REMOVE_AFTER_7_DAYS_OR_50_JOBS,
+} from './remove-job-configuration.js';
+
+export default async (flowId, request, response) => {
+  const flow = await Flow.query().findById(flowId).throwIfNotFound();
+  const user = await flow.$relatedQuery('user');
+
+  const testRun = !flow.active;
+  const quotaExceeded = !testRun && !(await user.isAllowedToRunFlows());
+
+  if (quotaExceeded) {
+    throw new QuotaExceededError();
+  }
+
+  const triggerStep = await flow.getTriggerStep();
+  const app = await triggerStep.getApp();
+
+  const $ = await globalVariable({
+    flow,
+    app,
+    step: triggerStep,
+    testRun,
+    request,
+  });
+
+  const triggerCommand = await triggerStep.getTriggerCommand();
+  await triggerCommand.run($);
+
+  const triggerItem = $.triggerOutput.data?.[0];
+
+  if (isEmpty(triggerItem)) {
+    return response.status(204);
+  }
+
+  if (testRun) {
+    await processTrigger({
+      flowId,
+      stepId: triggerStep.id,
+      triggerItem,
+      testRun,
+    });
+
+    return response.status(204);
+  }
+
+  const jobName = `${triggerStep.id}-${triggerItem.meta.internalId}`;
+
+  const jobOptions = {
+    removeOnComplete: REMOVE_AFTER_7_DAYS_OR_50_JOBS,
+    removeOnFail: REMOVE_AFTER_30_DAYS_OR_150_JOBS,
+  };
+
+  const jobPayload = {
+    flowId,
+    stepId: triggerStep.id,
+    triggerItem,
+  };
+
+  await triggerQueue.add(jobName, jobPayload, jobOptions);
+
+  return response.status(204);
+};
diff --git a/packages/backend/src/helpers/global-variable.js b/packages/backend/src/helpers/global-variable.js
index 843499fc..85d2f64a 100644
--- a/packages/backend/src/helpers/global-variable.js
+++ b/packages/backend/src/helpers/global-variable.js
@@ -80,8 +80,9 @@ const globalVariable = async (options) => {
       $.triggerOutput.data.push(triggerItem);
 
       const isWebhookApp = app.key === 'webhook';
+      const isFormsApp = app.key === 'forms';
 
-      if ($.execution.testRun && !isWebhookApp) {
+      if ($.execution.testRun && !isWebhookApp && !isFormsApp) {
         // early exit after receiving one item as it is enough for test execution
         throw new EarlyExitError();
       }
diff --git a/packages/backend/src/routes/internal/api/index.js b/packages/backend/src/routes/internal/api/index.js
index 14794960..e0c67016 100644
--- a/packages/backend/src/routes/internal/api/index.js
+++ b/packages/backend/src/routes/internal/api/index.js
@@ -21,6 +21,7 @@ import permissionsRouter from './v1/admin/permissions.ee.js';
 import adminUsersRouter from './v1/admin/users.ee.js';
 import installationUsersRouter from './v1/installation/users.js';
 import foldersRouter from './v1/folders.js';
+import formsRouter from './v1/forms.ee.js';
 
 const router = Router();
 
@@ -45,5 +46,6 @@ router.use('/v1/admin/api-tokens', adminApiTokensRouter);
 router.use('/v1/templates', templatesRouter);
 router.use('/v1/installation/users', installationUsersRouter);
 router.use('/v1/folders', foldersRouter);
+router.use('/v1/forms', formsRouter);
 
 export default router;
diff --git a/packages/backend/src/routes/internal/api/v1/forms.ee.js b/packages/backend/src/routes/internal/api/v1/forms.ee.js
new file mode 100644
index 00000000..bb8ed2a0
--- /dev/null
+++ b/packages/backend/src/routes/internal/api/v1/forms.ee.js
@@ -0,0 +1,10 @@
+import { Router } from 'express';
+import getFormAction from '../../../../controllers/api/v1/forms/get-form.ee.js';
+import useCreateFormSubmission from '../../../../controllers/api/v1/forms/create-form-submission.ee.js';
+
+const router = Router();
+
+router.get('/:formId', getFormAction);
+router.post('/:formId', useCreateFormSubmission);
+
+export default router;
diff --git a/packages/backend/src/serializers/form.ee.js b/packages/backend/src/serializers/form.ee.js
new file mode 100644
index 00000000..30f6a1e2
--- /dev/null
+++ b/packages/backend/src/serializers/form.ee.js
@@ -0,0 +1,22 @@
+import stepSerializer from './step.js';
+import slugify from 'slugify';
+
+const formSerializer = (form) => {
+  const formData = {
+    id: form.id,
+    name: form.name,
+    fields: form.steps[0].parameters.fields.map((parameter) => ({
+      fieldKey: slugify(parameter.fieldName, {
+        lower: true,
+        strict: true,
+        replacement: '-',
+      }),
+      fieldName: parameter.fieldName,
+      fieldType: parameter.fieldType,
+    })),
+  };
+
+  return formData;
+};
+
+export default formSerializer;
diff --git a/packages/backend/src/serializers/index.js b/packages/backend/src/serializers/index.js
index 2966ff3f..524c82a5 100644
--- a/packages/backend/src/serializers/index.js
+++ b/packages/backend/src/serializers/index.js
@@ -26,6 +26,7 @@ import templateSerializer from './template.ee.js';
 import triggerSerializer from './trigger.js';
 import userAppSerializer from './user-app.js';
 import userSerializer from './user.js';
+import formSerializer from './form.ee.js';
 
 const serializers = {
   Action: actionSerializer,
@@ -34,6 +35,7 @@ const serializers = {
   AdminSamlAuthProvider: adminSamlAuthProviderSerializer,
   AdminTemplate: adminTemplateSerializer,
   AdminUser: adminUserSerializer,
+  Form: formSerializer,
   App: appSerializer,
   AppConfig: appConfigSerializer,
   Auth: authSerializer,
diff --git a/packages/backend/yarn.lock b/packages/backend/yarn.lock
index 718eff58..2adf2930 100644
--- a/packages/backend/yarn.lock
+++ b/packages/backend/yarn.lock
@@ -4177,6 +4177,11 @@ simple-update-notifier@^1.0.7:
   dependencies:
     semver "~7.0.0"
 
+slugify@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.6.tgz#2d4ac0eacb47add6af9e04d3be79319cbcc7924b"
+  integrity sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==
+
 smart-buffer@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
@@ -4261,7 +4266,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4293,7 +4307,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
diff --git a/packages/web/package.json b/packages/web/package.json
index 057cb981..3a809006 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -12,6 +12,7 @@
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.11.9",
+    "@mui/joy": "^5.0.0-beta.52",
     "@mui/lab": "^5.0.0-alpha.120",
     "@mui/material": "^5.11.10",
     "@mui/x-date-pickers": "^7.28.0",
diff --git a/packages/web/src/components/FlowStep/index.jsx b/packages/web/src/components/FlowStep/index.jsx
index 50ea3a19..136474f3 100644
--- a/packages/web/src/components/FlowStep/index.jsx
+++ b/packages/web/src/components/FlowStep/index.jsx
@@ -369,6 +369,7 @@ function FlowStep(props) {
                             onSubmit={expandNextStep}
                             onChange={handleChange}
                             step={step}
+                            flowId={flowId}
                           />
                         )}
                     </Form>
diff --git a/packages/web/src/components/FlowSubstep/index.jsx b/packages/web/src/components/FlowSubstep/index.jsx
index 96ecfe13..4d52f901 100644
--- a/packages/web/src/components/FlowSubstep/index.jsx
+++ b/packages/web/src/components/FlowSubstep/index.jsx
@@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form';
 import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
 import Button from '@mui/material/Button';
+import Alert from '@mui/material/Alert';
 import Stack from '@mui/material/Stack';
 import { EditorContext } from 'contexts/Editor';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
@@ -22,6 +23,7 @@ function FlowSubstep(props) {
     onCollapse,
     onSubmit,
     step,
+    flowId,
   } = props;
   const { name, arguments: args } = substep;
   const editorContext = React.useContext(EditorContext);
@@ -51,6 +53,19 @@ function FlowSubstep(props) {
             position: 'relative',
           }}
         >
+          {step.appKey === 'forms' && (
+            <Alert severity="info" sx={{ mb: 2, width: '100%' }}>
+              You may preview the form at{' '}
+              <a
+                href={new URL(`/forms/${flowId}`, window.location.href).href}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {new URL(`/forms/${flowId}`, window.location.href).href}
+              </a>
+              .
+            </Alert>
+          )}
           {!!args?.length && (
             <Stack width="100%" spacing={2}>
               {args.map((argument) => (
@@ -92,6 +107,7 @@ FlowSubstep.propTypes = {
   onCollapse: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
   step: StepPropType.isRequired,
+  flowId: PropTypes.string.isRequired,
 };
 
 export default FlowSubstep;
diff --git a/packages/web/src/config/urls.js b/packages/web/src/config/urls.js
index c27c7a93..bb953d16 100644
--- a/packages/web/src/config/urls.js
+++ b/packages/web/src/config/urls.js
@@ -15,6 +15,7 @@ export const APP = (appKey) => `/app/${appKey}`;
 export const APP_PATTERN = '/app/:appKey';
 export const APP_CONNECTIONS = (appKey) => `/app/${appKey}/connections`;
 export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
+export const FORM_FLOW_PATTERN = '/forms/:flowId';
 
 export const APP_ADD_CONNECTION = (appKey, shared = false) =>
   `/app/${appKey}/connections/add?shared=${shared}`;
diff --git a/packages/web/src/hooks/useCreateFormSubmission.ee.js b/packages/web/src/hooks/useCreateFormSubmission.ee.js
new file mode 100644
index 00000000..e2ca708a
--- /dev/null
+++ b/packages/web/src/hooks/useCreateFormSubmission.ee.js
@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useCreateFormSubmission(formId) {
+  const mutation = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.post(`/v1/forms/${formId}`, payload);
+
+      return data;
+    },
+  });
+
+  return mutation;
+}
diff --git a/packages/web/src/hooks/useForm.ee.js b/packages/web/src/hooks/useForm.ee.js
new file mode 100644
index 00000000..448f9c0c
--- /dev/null
+++ b/packages/web/src/hooks/useForm.ee.js
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useForm(formId) {
+  const query = useQuery({
+    queryKey: ['forms', formId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/forms/${formId}`, {
+        signal,
+      });
+
+      return data;
+    },
+    enabled: !!formId,
+  });
+
+  return query;
+}
diff --git a/packages/web/src/pages/FormFlow/index.jsx b/packages/web/src/pages/FormFlow/index.jsx
new file mode 100644
index 00000000..44717ca6
--- /dev/null
+++ b/packages/web/src/pages/FormFlow/index.jsx
@@ -0,0 +1,74 @@
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+import Button from '@mui/joy/Button';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
+import { CssVarsProvider } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+import Container from 'components/Container';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+
+import useForm from 'hooks/useForm.ee';
+import useCreateFormSubmission from 'hooks/useCreateFormSubmission.ee';
+
+export default function FormFlow() {
+  const { flowId } = useParams();
+  const { data: flow, isLoading } = useForm(flowId);
+  const { mutate: createFormSubmission, isSuccess } =
+    useCreateFormSubmission(flowId);
+
+  if (isLoading) return 'loading...';
+
+  const formFields = flow.data.fields;
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    console.log(event.target);
+    const formData = new FormData(event.target);
+
+    const data = Object.fromEntries(formData.entries());
+
+    console.log('data', data);
+    createFormSubmission(data);
+  };
+
+  return (
+    <CssVarsProvider>
+      <Box sx={{ display: 'flex', flex: 1, alignItems: 'center' }}>
+        <Container maxWidth="sm">
+          <Typography gutterBottom color="primary" level="h1">
+            {flow.data.name}
+          </Typography>
+
+          <Stack
+            component="form"
+            direction="column"
+            gap={2}
+            onSubmit={handleSubmit}
+          >
+            {formFields.map(({ fieldName, fieldKey, fieldType }, index) => (
+              <>
+                {fieldType === 'string' && (
+                  <FormControl key={index}>
+                    <FormLabel>{fieldName}</FormLabel>
+                    <Input name={fieldKey} />
+                  </FormControl>
+                )}
+              </>
+            ))}
+
+            <Button variant="solid" type="submit">
+              Submit
+            </Button>
+
+            {isSuccess && <Alert>Form submitted successfully!</Alert>}
+          </Stack>
+        </Container>
+      </Box>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/web/src/routes.jsx b/packages/web/src/routes.jsx
index 241bf53d..1eb0897b 100644
--- a/packages/web/src/routes.jsx
+++ b/packages/web/src/routes.jsx
@@ -11,6 +11,7 @@ import NoResultFound from 'components/NotFound';
 import PublicLayout from 'components/PublicLayout';
 import AdminSettingsLayout from 'components/AdminSettingsLayout';
 import Applications from 'pages/Applications';
+import FormFlow from 'pages/FormFlow';
 import Application from 'pages/Application';
 import Executions from 'pages/Executions';
 import Execution from 'pages/Execution';
@@ -175,6 +176,8 @@ function Routes() {
 
       <Route path={URLS.SETTINGS}>{settingsRoutes}</Route>
 
+      <Route path={URLS.FORM_FLOW_PATTERN} element={<FormFlow />} />
+
       <Route path={URLS.ADMIN_SETTINGS} element={<AdminSettingsLayout />}>
         {adminSettingsRoutes}
       </Route>
diff --git a/packages/web/yarn.lock b/packages/web/yarn.lock
index 1dbeabdb..12c937ad 100644
--- a/packages/web/yarn.lock
+++ b/packages/web/yarn.lock
@@ -1592,6 +1592,20 @@
   dependencies:
     "@babel/runtime" "^7.23.9"
 
+"@mui/joy@^5.0.0-beta.52":
+  version "5.0.0-beta.52"
+  resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.52.tgz#9c7cd9629603089c80e8f8f7b78a41534ef06e91"
+  integrity sha512-e8jQanA5M1f/X52mJrw0UIW8Er7EAHuLuigmGFw7yIsAgIluhIP4rZ7JcbVrUi6z5Gk0weC9QWUUtjLejAbO8g==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/base" "5.0.0-beta.40-1"
+    "@mui/core-downloads-tracker" "^5.17.1"
+    "@mui/system" "^5.17.1"
+    "@mui/types" "~7.2.15"
+    "@mui/utils" "^5.17.1"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/lab@^5.0.0-alpha.120":
   version "5.0.0-alpha.176"
   resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.176.tgz#4e6101c8224d896d66588b08b9b7883408a0ecc3"