diff --git a/client/tests/acceptance/features/webUILogin/login.feature b/client/tests/acceptance/features/webUILogin/login.feature
new file mode 100644
index 00000000..65ba588f
--- /dev/null
+++ b/client/tests/acceptance/features/webUILogin/login.feature
@@ -0,0 +1,27 @@
+Feature: login
+    As a admin
+    I want to log in
+    So that I can manage project
+
+
+  Scenario: User logs in with valid credentials
+    Given user has browsed to the login page
+    When user logs in with username "demo@demo.demo" and password "demo" using the webUI
+    Then the user should be in dashboard page
+
+
+  Scenario Outline: login with invalid username and invalid password
+    Given user has browsed to the login page
+    When user logs in with username "<username>" and password "<password>" using the webUI
+    Then user should see the error message "<message>"
+    Examples:
+      | username  | password | message                    |
+      | spiderman | spidy123 | Invalid e-mail or username |
+      | ironman   | iron123  | Invalid e-mail or username |
+      | aquaman   | aqua123  | Invalid e-mail or username |
+
+
+  Scenario: User can log out
+    Given user has logged in with email "demo@demo.demo" and password "demo"
+    When user logs out using the webUI
+    Then the user should be in the login page
diff --git a/client/tests/acceptance/pageObjects/LoginPage.js b/client/tests/acceptance/pageObjects/LoginPage.js
new file mode 100644
index 00000000..5a8cdd8c
--- /dev/null
+++ b/client/tests/acceptance/pageObjects/LoginPage.js
@@ -0,0 +1,35 @@
+class LoginPage {
+  constructor() {
+    // url
+    this.homeUrl = 'http://localhost:3000';
+    this.loginUrl = `${this.homeUrl}/login`;
+
+    this.loginButtonSelector = `//i[@class="right arrow icon"]`;
+    this.usernameSelector = `//input[@name='emailOrUsername']`;
+    this.passwordSelector = `//input[@name='password']`;
+    this.errorMessageSelector = `//div[@class='ui error visible message']`;
+    this.userActionSelector = `//span[@class="User_initials__9Wp90"]`;
+    this.logOutSelector = `//a[@class="item UserStep_menuItem__5pvtT"][contains(text(),'Log Out')]`;
+  }
+
+  async goToLoginUrl() {
+    await page.goto(this.loginUrl);
+  }
+
+  async logOut() {
+    await page.click(this.userActionSelector);
+    await page.click(this.logOutSelector);
+  }
+
+  async login(username, password) {
+    await page.fill(this.usernameSelector, username);
+    await page.fill(this.passwordSelector, password);
+    await page.click(this.loginButtonSelector);
+  }
+
+  async getErrorMessage() {
+    return page.innerText(this.errorMessageSelector);
+  }
+}
+
+module.exports = LoginPage;
diff --git a/client/tests/acceptance/stepDefinitions/loginContext.js b/client/tests/acceptance/stepDefinitions/loginContext.js
new file mode 100644
index 00000000..8b784553
--- /dev/null
+++ b/client/tests/acceptance/stepDefinitions/loginContext.js
@@ -0,0 +1,53 @@
+const { Given, When, Then } = require('@cucumber/cucumber');
+
+// import expect for assertion
+const { expect } = require('@playwright/test');
+
+// import assert
+const assert = require('assert');
+
+const LoginPage = require('../pageObjects/LoginPage');
+
+const loginPage = new LoginPage();
+
+Given('user has browsed to the login page', async function () {
+  await loginPage.goToLoginUrl();
+  await expect(page).toHaveURL(loginPage.loginUrl);
+});
+
+Given(
+  'user has logged in with email {string} and password {string}',
+  async function (username, password) {
+    await loginPage.goToLoginUrl();
+    await loginPage.login(username, password);
+    await expect(page).toHaveURL(loginPage.homeUrl);
+  },
+);
+
+When(
+  'user logs in with username {string} and password {string} using the webUI',
+  async function (username, password) {
+    await loginPage.login(username, password);
+  },
+);
+
+Then('the user should be in dashboard page', async function () {
+  await expect(page).toHaveURL(loginPage.homeUrl);
+});
+
+Then('user should see the error message {string}', async function (errorMessage) {
+  const actualErrorMessage = await loginPage.getErrorMessage();
+  assert.equal(
+    actualErrorMessage,
+    errorMessage,
+    `Expected message to be "${errorMessage}" but receive "${actualErrorMessage}"`,
+  );
+});
+
+When('user logs out using the webUI', async function () {
+  await loginPage.logOut();
+});
+
+Then('the user should be in the login page', async function () {
+  await expect(page).toHaveURL(loginPage.loginUrl);
+});