diff --git a/client/cucumber.conf.js b/client/cucumber.conf.js
index 86a68ab0..62a84d91 100644
--- a/client/cucumber.conf.js
+++ b/client/cucumber.conf.js
@@ -2,6 +2,7 @@
 
 const { Before, BeforeAll, AfterAll, After, setDefaultTimeout } = require('@cucumber/cucumber');
 const { chromium } = require('playwright');
+const { deleteProject } = require('./tests/acceptance/testHelpers/apiHelpers');
 
 setDefaultTimeout(60000);
 
@@ -27,6 +28,7 @@ Before(async function () {
 
 // Cleanup after each scenario
 After(async function () {
+  await deleteProject();
   await global.page.close();
   await global.context.close();
 });
diff --git a/client/package.json b/client/package.json
index f21a01bf..e9cc9d84 100755
--- a/client/package.json
+++ b/client/package.json
@@ -109,7 +109,8 @@
     "@cucumber/cucumber": "^7.3.1",
     "@cucumber/pretty-formatter": "^1.0.1",
     "@playwright/test": "^1.46.1",
-    "playwright": "^1.46.1"
+    "playwright": "^1.46.1",
+    "axios":"^1.6.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
diff --git a/client/tests/acceptance/features/webUIDashboard/dashboard.feature b/client/tests/acceptance/features/webUIDashboard/dashboard.feature
new file mode 100644
index 00000000..c8930cd5
--- /dev/null
+++ b/client/tests/acceptance/features/webUIDashboard/dashboard.feature
@@ -0,0 +1,12 @@
+Feature: dashboard
+    As a admin
+    I want to create a project
+    So that I can manage project
+
+    Background:
+        Given user has browsed to the login page
+        And user has logged in with email "demo@demo.demo" and password "demo"
+
+    Scenario: create a new project
+        When the user creates a project with name "testproject" using the webUI
+        Then the created project "testproject" should be opened
diff --git a/client/tests/acceptance/pageObjects/DashboardPage.js b/client/tests/acceptance/pageObjects/DashboardPage.js
new file mode 100644
index 00000000..139741ac
--- /dev/null
+++ b/client/tests/acceptance/pageObjects/DashboardPage.js
@@ -0,0 +1,29 @@
+const util = require('util');
+
+class dashboardPage {
+  constructor() {
+    this.createProjectIconSelector = `.Projects_addTitle__tXhB4`;
+    this.projectTitleInputSelector = `input[name="name"]`;
+    this.createProjectButtonSelector = `//button[text()="Create project"]`;
+    this.projectTitleSelector = `//div[@class="item Header_item__OOEY7 Header_title__l+wMf"][text()="%s"]`;
+    this.dashBoardHeaderSelector = `//div[@class="Projects_openTitle__PlaU6"][text()="%s"]`;
+  }
+
+  async createProject(project) {
+    await page.click(this.createProjectIconSelector);
+    await page.fill(this.projectTitleInputSelector, project);
+    await page.click(this.createProjectButtonSelector);
+  }
+
+  async getProjectTilte() {
+    return page.innerText(this.projectTitleSelector);
+  }
+
+  async checkForProjectOpenedOrNot() {
+    expect(
+      await page.locator(util.format(this.dashboardPage.projectTitleInputSelector, project)),
+    ).toBeVisible();
+  }
+}
+
+module.exports = dashboardPage;
diff --git a/client/tests/acceptance/stepDefinitions/dashBoardContext.js b/client/tests/acceptance/stepDefinitions/dashBoardContext.js
new file mode 100644
index 00000000..61041a73
--- /dev/null
+++ b/client/tests/acceptance/stepDefinitions/dashBoardContext.js
@@ -0,0 +1,13 @@
+const { When, Then } = require('@cucumber/cucumber');
+
+const DashboardPage = require('../pageObjects/DashboardPage');
+
+const dashboardPage = new DashboardPage();
+
+When('the user creates a project with name {string} using the webUI', async function (project) {
+  await dashboardPage.createProject(project);
+});
+
+Then('the created project {string} should be opened', async function (project) {
+  dashboardPage.checkForProjectOpenedOrNot(project);
+});
diff --git a/client/tests/acceptance/testHelpers/apiHelpers.js b/client/tests/acceptance/testHelpers/apiHelpers.js
new file mode 100644
index 00000000..96af40b9
--- /dev/null
+++ b/client/tests/acceptance/testHelpers/apiHelpers.js
@@ -0,0 +1,56 @@
+const axios = require('axios');
+
+async function getXauthToken() {
+  try {
+    const res = await axios.post(
+      'http://localhost:1337/api/access-tokens',
+      {
+        emailOrUsername: 'demo',
+        password: 'demo',
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    return res.data.item;
+  } catch (error) {
+    return `Error requesting access token: ${error.message}`;
+  }
+}
+
+async function getProjectIDs() {
+  try {
+    const res = await axios.get('http://localhost:1337/api/projects', {
+      headers: {
+        Authorization: `Bearer ${await getXauthToken()}`,
+      },
+    });
+    return res.data.items.map((project) => project.id);
+  } catch (error) {
+    return `Error requesting projectIDs: ${error.message}`;
+  }
+}
+
+async function deleteProject() {
+  try {
+    const projectIDs = await getProjectIDs();
+    await Promise.all(
+      projectIDs.map(async (project) => {
+        await axios.delete(`http://localhost:1337/api/projects/${project}`, {
+          headers: {
+            Authorization: `Bearer ${await getXauthToken()}`,
+          },
+        });
+      }),
+    );
+    return true;
+  } catch (error) {
+    return `Error deleting project: ${error.message}`;
+  }
+}
+
+module.exports = {
+  deleteProject,
+};