diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 4a3b8789c2..bdecbd064b 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -247,7 +247,7 @@ const copyProjectMeta = async () => {
       <a-table-column key="title" :title="$t('general.title')" data-index="title">
         <template #default="{ text, record }">
           <div class="flex items-center">
-            <div @click.stop class="w-2">
+            <div class="w-2" @click.stop>
               <a-menu class="!border-0 !m-0 !p-0" trigger-sub-menu-action="click">
                 <template v-if="isUIAllowed('projectTheme') || isUIAllowed('projectTheme', true, record.roles)">
                   <a-sub-menu key="theme" popup-class-name="custom-color">
@@ -310,14 +310,15 @@ const copyProjectMeta = async () => {
               :is="iconMap.edit"
               v-if="isUIAllowed('projectUpdate', true) || isUIAllowed('projectUpdate', true, record.roles)"
               v-e="['c:project:edit:rename']"
-              class="nc-action-btn"
+              class="nc-action-btn nc-edit-project"
+              :data-testid="`edit-project-${record.title}`"
               @click.stop="navigateTo(`/${text}`)"
             />
 
             <component
               :is="iconMap.delete"
               v-if="isUIAllowed('projectDelete', true) || isUIAllowed('projectDelete', true, record.roles)"
-              class="nc-action-btn"
+              class="nc-action-btn nc-delete-project"
               :data-testid="`delete-project-${record.title}`"
               @click.stop="deleteProject(record)"
             />
diff --git a/tests/playwright/pages/ProjectsPage/index.ts b/tests/playwright/pages/ProjectsPage/index.ts
index 7543d3e87c..3635bd6cea 100644
--- a/tests/playwright/pages/ProjectsPage/index.ts
+++ b/tests/playwright/pages/ProjectsPage/index.ts
@@ -1,10 +1,21 @@
-import { expect, Page } from '@playwright/test';
+import { expect, Locator, Page } from '@playwright/test';
 import BasePage from '../Base';
 import { DashboardPage } from '../Dashboard';
 
 export class ProjectsPage extends BasePage {
+  readonly buttonEditProject: Locator;
+  readonly buttonDeleteProject: Locator;
+  readonly buttonMoreActions: Locator;
+  readonly buttonNewProject: Locator;
+  readonly buttonColorSelector: Locator;
+
   constructor(rootPage: Page) {
     super(rootPage);
+    this.buttonEditProject = this.get().locator('.nc-action-btn.nc-edit-project');
+    this.buttonDeleteProject = this.get().locator('.nc-action-btn.nc-delete-project');
+    this.buttonMoreActions = this.get().locator('.nc-import-menu');
+    this.buttonNewProject = this.get().locator('.nc-new-project-menu');
+    this.buttonColorSelector = this.get().locator('div.color-selector');
   }
 
   prefixTitle(title: string) {
@@ -236,4 +247,27 @@ export class ProjectsPage extends BasePage {
   async waitForRender() {
     await this.rootPage.locator('.nc-project-page-title:has-text("My Projects")').waitFor();
   }
+
+  async validateRoleAccess(param: { role: string }) {
+    // new user; by default org level permission is to viewer (can't create project)
+    await expect(await this.buttonNewProject).toBeVisible({ visible: false });
+
+    // role specific permissions
+    switch (param.role) {
+      case 'creator':
+        await expect(await this.buttonColorSelector).toBeVisible();
+        await expect(await this.buttonEditProject).toBeVisible();
+        await expect(await this.buttonDeleteProject).toBeVisible();
+        await expect(await this.buttonMoreActions).toBeVisible();
+        break;
+      case 'editor':
+      case 'commenter':
+      case 'viewer':
+        await expect(await this.buttonColorSelector).toBeVisible({ visible: false });
+        await expect(await this.buttonEditProject).toBeVisible({ visible: false });
+        await expect(await this.buttonDeleteProject).toBeVisible({ visible: false });
+        await expect(await this.buttonMoreActions).toBeVisible({ visible: false });
+        break;
+    }
+  }
 }
diff --git a/tests/playwright/tests/db/rolesCreate.spec.ts b/tests/playwright/tests/db/rolesCreate.spec.ts
index 9b6c244e1e..672b77e4fa 100644
--- a/tests/playwright/tests/db/rolesCreate.spec.ts
+++ b/tests/playwright/tests/db/rolesCreate.spec.ts
@@ -103,6 +103,18 @@ test.describe('User roles', () => {
       title: 'CustomerList',
       exists: roleDb[roleIdx].role === 'creator' ? true : false,
     });
+
+    // Project page validation
+    await dashboard.clickHome();
+    await projectsPage.validateRoleAccess({
+      role: roleDb[roleIdx].role,
+    });
+
+    await projectsPage.openProject({
+      title: context.project.title,
+      waitForAuthTab: roleDb[roleIdx].role === 'creator',
+      withoutPrefix: true,
+    });
   }
 
   async function roleSignup(roleIdx: number) {