diff --git a/web-app/.eslintrc.cjs b/web-app/.eslintrc.cjs
index 753811d3..c3e9d504 100644
--- a/web-app/.eslintrc.cjs
+++ b/web-app/.eslintrc.cjs
@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    es2021: true
+    es2021: true,
+    browser: true
   },
   extends: [
     'plugin:vue/essential',
@@ -42,8 +43,6 @@ module.exports = {
       {
         allowModifiers: true
       }
-    ],
-    'vue/multi-word-component-names': 'off',
-    'vue/no-v-model-argument': 'off',
+    ]
   }
 }
diff --git a/web-app/package.json b/web-app/package.json
index 476bf3a3..22a2385b 100755
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -49,7 +49,7 @@
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.6.2",
     "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^11.0.2",
diff --git a/web-app/packages/app/.eslintrc.cjs b/web-app/packages/app/.eslintrc.cjs
index c62b242c..9a294e26 100644
--- a/web-app/packages/app/.eslintrc.cjs
+++ b/web-app/packages/app/.eslintrc.cjs
@@ -1,11 +1,9 @@
 module.exports = {
-  env: {
-    node: true
-  },
   extends: [
     'plugin:vue/essential',
     'eslint:recommended',
     '@vue/typescript/recommended',
+    '../../.eslintrc.cjs'
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -16,7 +14,7 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     // Vue 3 opt https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for
     'vue/no-v-for-template-key-on-child': 'error',
     'vue/no-v-for-template-key': 'off',
diff --git a/web-app/packages/app/src/App.vue b/web-app/packages/app/src/App.vue
index 11058bb7..3f34f990 100644
--- a/web-app/packages/app/src/App.vue
+++ b/web-app/packages/app/src/App.vue
@@ -12,11 +12,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       v-slot="{ Component, route }"
       :key="$route.fullPath"
     >
-      <transition name="fade">
-        <div :key="route.name">
-          <component :is="Component" />
-        </div>
-      </transition>
+      <div :key="route.name">
+        <component :is="Component" />
+      </div>
     </router-view>
 
     <main
@@ -31,13 +29,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       ]"
     >
       <router-view name="header" v-slot="{ Component, route }">
-        <transition name="fade">
-          <div :key="route.name">
-            <component :is="Component" />
-          </div>
-        </transition>
+        <div :key="route.name">
+          <component :is="Component" />
+        </div>
       </router-view>
-      <PDivider :pt="{ root: { class: 'm-0'}}"></PDivider>
+      <PDivider :pt="{ root: { class: 'm-0' } }"></PDivider>
       <v-card
         v-if="pingData && pingData.maintenance"
         variant="outlined"
@@ -51,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           >
         </v-card-text>
       </v-card>
-      <router-view v-slot="{ Component, route }">
+      <router-view v-slot="{ Component }">
         <transition name="fade">
           <component :is="Component" />
         </transition>
@@ -169,17 +165,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.fade-leave-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.25s;
+.fade-enter-active {
+  transition: opacity ease-in 0.25s;
 }
 
 .fade-enter-from,
diff --git a/web-app/packages/app/src/app.ts b/web-app/packages/app/src/app.ts
index 56e2114b..40e42b7d 100644
--- a/web-app/packages/app/src/app.ts
+++ b/web-app/packages/app/src/app.ts
@@ -6,14 +6,6 @@
 import 'material-icons/iconfont/material-icons.scss'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@mdi/font/css/materialdesignicons.css'
-import PrimeVue from 'primevue/config';
-import "primevue/resources/primevue.min.css";
-import "primeflex/primeflex.min.css"
-import "@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss"
-import "@tabler/icons-webfont/tabler-icons.min.css"
-
-import '@mergin/lib/dist/style.css'
-
 import {
   dateUtils,
   textUtils,
@@ -22,6 +14,13 @@ import {
   MerginComponentUuidMixin
 } from '@mergin/lib'
 import PortalVue from 'portal-vue'
+import 'primevue/resources/primevue.min.css'
+import 'primeflex/primeflex.min.css'
+import '@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss'
+import '@tabler/icons-webfont/tabler-icons.min.css'
+import '@mergin/lib/dist/style.css'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
 import { createApp } from 'vue'
 import { createMetaManager } from 'vue-meta'
 
@@ -31,7 +30,6 @@ import { addRouterToPinia, getPiniaInstance } from './store'
 
 import i18n from '@/plugins/i18n/i18n'
 import vuetify from '@/plugins/vuetify/vuetify'
-import Tooltip from 'primevue/tooltip';
 
 const createMerginApp = () => {
   const pinia = getPiniaInstance()
diff --git a/web-app/packages/app/src/main.ts b/web-app/packages/app/src/main.ts
index 1349fafa..f140ca1d 100644
--- a/web-app/packages/app/src/main.ts
+++ b/web-app/packages/app/src/main.ts
@@ -13,7 +13,7 @@ import {
   LayoutModule,
   InstanceModule,
   useInstanceStore,
-  initCsrfToken,
+  initCsrfToken
 } from '@mergin/lib'
 
 import { createMerginApp } from './app'
diff --git a/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue b/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
index d7e5bc84..dbe3fd78 100644
--- a/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
+++ b/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     <template #content>
       <dashboard-access-requests-row v-if="userStore.isGlobalWorkspaceAdmin">
         <template v-slot:table="{ namespace }">
-          <project-access-request-table :namespace="namespace" />
+          <access-request-table :namespace="namespace" />
         </template>
       </dashboard-access-requests-row>
       <dashboard-projects-row :canCreateProject="canCreateProject" />
@@ -29,7 +29,7 @@ import {
   DashboardUsageInfoRow,
   DashboardFullStorageWarningRow,
   DashboardAccessRequestsRow,
-  ProjectAccessRequestTable,
+  AccessRequestTable,
   FullStorageWarning,
   useUserStore,
   DashboardProjectsRow
@@ -43,7 +43,7 @@ export default defineComponent({
     DashboardAccessRequestsRow,
     DashboardFullStorageWarningRow,
     DashboardUsageInfoRow,
-    ProjectAccessRequestTable,
+    AccessRequestTable,
     FullStorageWarning,
     DashboardProjectsRow
   },
diff --git a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
index 70feaebb..4b38ce6e 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
@@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  Hopaa
-  <!-- <project-settings-view-template
+  <project-settings-view-template
     :namespace="namespace"
     :projectName="projectName"
     :asAdmin="asAdmin"
@@ -17,10 +16,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <project-permissions-template
         v-model="settings.access"
         :key="keyProp"
-        @save-project="saveProject(...arguments)"
+        @save-project="saveProject"
       />
     </template>
-  </project-settings-view-template> -->
+  </project-settings-view-template>
 </template>
 
 <script lang="ts">
diff --git a/web-app/packages/app/src/modules/project/views/ProjectView.vue b/web-app/packages/app/src/modules/project/views/ProjectView.vue
index b495a588..a57ff595 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectView.vue
@@ -59,7 +59,11 @@ export default defineComponent({
         namespace: props.namespace,
         project: props.projectName
       }
-      const dialog = { maxWidth: 580, persistent: true, header: 'Clone project' }
+      const dialog = {
+        maxWidth: 580,
+        persistent: true,
+        header: 'Clone project'
+      }
       const listeners = {
         error: (error, data) => {
           formStore.handleError({
diff --git a/web-app/packages/app/src/modules/user/views/LoginView.vue b/web-app/packages/app/src/modules/user/views/LoginView.vue
index 6eb1705b..44081ee5 100644
--- a/web-app/packages/app/src/modules/user/views/LoginView.vue
+++ b/web-app/packages/app/src/modules/user/views/LoginView.vue
@@ -36,7 +36,7 @@ export default defineComponent({
             currentRoute: payload.currentRoute
           })
         }
-      } catch(err) {
+      } catch (err) {
         console.error(err)
       }
     }
diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index aadd4e7b..ed640888 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -14,6 +14,10 @@ import {
   SideBarTemplate as SideBar
 } from '@mergin/lib'
 import { Pinia } from 'pinia'
+import {
+  createWebHistory,
+  createRouter as createRouterInstance
+} from 'vue-router'
 
 import DashboardView from '@/modules/dashboard/views/DashboardView.vue'
 import AppHeader from '@/modules/layout/components/AppHeader.vue'
@@ -22,10 +26,6 @@ import ProjectsListView from '@/modules/project/views/ProjectsListView.vue'
 import ProjectView from '@/modules/project/views/ProjectView.vue'
 import LoginView from '@/modules/user/views/LoginView.vue'
 import ProfileView from '@/modules/user/views/ProfileView.vue'
-import {
-  createWebHistory,
-  createRouter as createRouterInstance
-} from 'vue-router'
 
 export const createRouter = (pinia: Pinia) => {
   const router = createRouterInstance({
@@ -146,7 +146,6 @@ export const createRouter = (pinia: Pinia) => {
             }/tree${from.params.location ? `/${from.params.location}` : ''}`,
             query: { file_path: to.params.location }
           })
-          return
         }
       },
       /** Redirect of unused /history/:version_id path to /history?version_id */
@@ -161,7 +160,6 @@ export const createRouter = (pinia: Pinia) => {
             path: `/projects/${to.params.namespace}/${to.params.projectName}/history`,
             query: { version_id: to.params.version_id }
           })
-          return
         }
       },
       {
diff --git a/web-app/packages/lib/.eslintrc.cjs b/web-app/packages/lib/.eslintrc.cjs
index 85505c99..785ba939 100644
--- a/web-app/packages/lib/.eslintrc.cjs
+++ b/web-app/packages/lib/.eslintrc.cjs
@@ -1,11 +1,9 @@
 module.exports = {
-  env: {
-    node: true
-  },
   extends: [
     'plugin:vue/essential',
     'eslint:recommended',
-    '@vue/typescript/recommended'
+    '@vue/typescript/recommended',
+    '../../.eslintrc.cjs'
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index eea7b432..f96b3c37 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -44,7 +44,6 @@ declare module 'vue' {
     VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VCol: typeof import('vuetify/components')['VCol']
     VContainer: typeof import('vuetify/components')['VContainer']
-    VDataTable: typeof import('vuetify/components')['VDataTable']
     VDivider: typeof import('vuetify/components')['VDivider']
     VForm: typeof import('vuetify/components')['VForm']
     VIcon: typeof import('vuetify/components')['VIcon']
@@ -56,7 +55,6 @@ declare module 'vue' {
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VResponsive: typeof import('vuetify/components')['VResponsive']
     VRow: typeof import('vuetify/components')['VRow']
-    VSelect: typeof import('vuetify/components')['VSelect']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSpacer: typeof import('vuetify/components')['VSpacer']
     VTextField: typeof import('vuetify/components')['VTextField']
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
index 98cd5328..220ab8d1 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
@@ -52,7 +52,7 @@ $colors: (
     --surface-f:#ffffff;
     --text-color: #{map-get($colors , "night")};
     --text-color-secondary:#aaacad;
-    --primary-color:$primaryColor;
+    --primary-color:#{$primaryColor};
     --primary-color-text:#ffffff;
     --font-family:inherit;
     --surface-0: #ffffff;
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss
index 4e68cf12..f8dccc05 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss
@@ -64,7 +64,7 @@ $inlineSpacing: .5rem;
 
 /// Opacity of the disabled elements
 /// @group general
-$disabledOpacity: .8;
+$disabledOpacity: .4;
 
 /// Background of the modal layer
 /// @group general
diff --git a/web-app/packages/lib/src/assets/trash.svg b/web-app/packages/lib/src/assets/trash.svg
new file mode 100644
index 00000000..eadbcf99
--- /dev/null
+++ b/web-app/packages/lib/src/assets/trash.svg
@@ -0,0 +1,32 @@
+<svg width="124" height="101" viewBox="0 0 124 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M67.2 100.8C93.7088 100.8 115.2 79.3512 115.2 52.8003C115.2 26.2484 93.6142 4.7998 67.2 4.7998C40.6911 4.7998 19.2 26.2484 19.2 52.8003C19.2 79.3512 40.6911 100.8 67.2 100.8Z" fill="#F0C4BC"/>
+<path d="M79.2276 71.7083C78.1765 71.0394 76.3609 72.0906 75.3097 74.0017C74.2586 75.9129 74.2586 77.9196 75.3097 78.4929L74.2586 77.9196C73.2074 77.2507 73.2074 75.244 74.2586 73.4284C75.3097 71.5172 77.1253 70.5616 78.1765 71.135L79.2276 71.7083Z" fill="#131528"/>
+<path d="M79.228 71.7082C80.2791 72.3771 80.2791 74.3838 79.228 76.1994C78.1768 78.1106 76.3612 79.0662 75.3101 78.4928C74.2589 77.8239 74.2589 75.8172 75.3101 74.0016C76.3612 72.0905 78.0813 71.1349 79.228 71.7082Z" fill="#101224"/>
+<path d="M79.1325 73.2365C78.4636 72.8543 77.3169 73.5232 76.5525 74.6699C75.8836 75.9122 75.8836 77.1544 76.5525 77.6322L76.0747 77.3455C75.4058 76.9633 75.4058 75.6255 76.0747 74.3832C76.7436 73.141 77.8903 72.4721 78.6548 72.9499L79.1325 73.2365Z" fill="#322B4E"/>
+<path d="M79.1328 73.2369C79.8017 73.6191 79.8017 74.9569 79.1328 76.1992C78.4639 77.4414 77.3172 78.1103 76.5527 77.6326C75.8838 77.2503 75.8838 75.9125 76.5527 74.6703C77.3172 73.5236 78.4639 72.8547 79.1328 73.2369Z" fill="#201B3C"/>
+<path d="M73.9715 76.8682L62.1223 83.6528L43.2974 72.7592L55.1466 65.9746L73.9715 76.8682Z" fill="#293773"/>
+<path d="M62.1223 83.6534V84.8001L43.2974 73.9065V72.7598L62.1223 83.6534Z" fill="#4A692B"/>
+<path d="M73.972 76.8682V77.9193L62.1228 84.7995V83.6528L73.972 76.8682Z" fill="#405224"/>
+<path d="M56.7712 47.5313L59.5424 82.1233C59.5424 82.9833 59.8291 83.5567 60.3069 83.8434L41.4819 72.9497C41.0042 72.6631 40.7175 72.0897 40.7175 71.2297L37.9463 36.6377L56.7712 47.5313Z" fill="#73D19C"/>
+<path d="M78.654 34.8223L77.5073 70.7521C75.3095 71.9943 73.8761 74.3833 73.7806 76.9634L62.218 83.5569C61.4536 84.0347 60.7847 84.0347 60.3069 83.748C59.8291 83.4613 59.5424 82.888 59.5424 82.0279L56.7712 46.767L78.654 34.8223Z" fill="#64B888"/>
+<path d="M36.8003 36.9255C36.8003 37.3078 36.9914 37.5944 37.4692 37.8811L54.5741 47.8191C55.4341 48.2969 56.8675 48.2969 57.8231 47.8191L78.7503 35.7788C79.2281 35.4921 79.4192 35.2055 79.4192 34.8232V36.7344C79.4192 37.1166 79.2281 37.4033 78.7503 37.69L57.8231 49.7303C56.963 50.2081 55.5297 50.2081 54.5741 49.7303L37.4692 39.7923C36.9914 39.5056 36.8003 39.2189 36.8003 38.8367V36.9255Z" fill="#64B888"/>
+<path d="M36.8003 36.9255C36.8003 36.5433 36.9914 36.2566 37.4692 35.9699L58.3964 23.9296C59.2564 23.4518 60.6898 23.4518 61.6454 23.9296L78.7503 33.8677C79.2281 34.1543 79.4192 34.441 79.4192 34.8232C79.4192 35.2055 79.2281 35.4922 78.7503 35.7788L57.8231 47.8191C56.963 48.2969 55.5297 48.2969 54.5741 47.8191L37.4692 37.8811C36.9914 37.5944 36.8003 37.3078 36.8003 36.9255Z" fill="#004C45"/>
+<path d="M75.6924 35.1097L56.7719 46.0033C56.6763 46.0033 56.4852 46.0988 56.1985 46.0988C55.9119 46.0988 55.6252 46.0033 55.6252 46.0033L40.527 37.3075C40.2403 37.2119 40.2403 36.8297 40.527 36.6386L59.4475 25.745C59.5431 25.745 59.7342 25.6494 60.0209 25.6494C60.1164 25.6494 60.212 25.6494 60.3075 25.6494C60.4031 25.6494 60.4986 25.745 60.5942 25.745L75.6924 34.4408C75.979 34.6319 75.979 34.9185 75.6924 35.1097Z" fill="#203565"/>
+<path d="M36.8003 34.1539C36.8003 34.5361 36.9914 34.8228 37.4692 35.1095L54.5741 45.0475C55.4341 45.5253 56.8675 45.5253 57.8231 45.0475L78.7503 32.9116C79.2281 32.625 79.4192 32.3383 79.4192 31.9561V33.9628C79.4192 34.345 79.2281 34.6317 78.7503 34.9184L57.8231 46.9587C56.963 47.4365 55.5297 47.4365 54.5741 46.9587L37.4692 37.0206C36.9914 36.734 36.8003 36.4473 36.8003 36.065V34.1539Z" fill="#64B888"/>
+<path d="M36.8 34.154C36.8 33.7718 36.9912 33.4851 37.469 33.1985L58.3962 21.1581C59.2562 20.6804 60.6896 20.6804 61.6451 21.1581L78.75 31.0962C79.2278 31.3829 79.4189 31.6695 79.4189 32.0518C79.4189 32.434 79.2278 32.7207 78.75 33.0073L57.8228 45.0477C56.9628 45.5254 55.5294 45.5254 54.5738 45.0477L37.469 35.1096C36.9912 34.8229 36.8 34.5363 36.8 34.154Z" fill="#73D19C"/>
+<path d="M44.1577 31.9558C44.1577 32.1469 44.3488 32.4336 44.6355 32.5292L55.8158 39.0271C56.3892 39.4094 57.3447 39.4094 57.9181 39.0271L71.5829 31.0958C71.8696 30.9047 72.0607 30.7136 72.0607 30.5225V32.7203C72.0607 32.9114 71.8696 33.1981 71.5829 33.2936L57.9181 41.225C57.3447 41.6072 56.3892 41.6072 55.8158 41.225L44.6355 34.727C44.3488 34.5359 44.1577 34.3448 44.1577 34.1537V31.9558Z" fill="#64B888"/>
+<path d="M44.1577 31.9564C44.1577 31.7653 44.3488 31.4786 44.6355 31.383L58.3003 23.4517C58.8736 23.0695 59.8292 23.0695 60.4026 23.4517L71.5829 29.9497C71.8696 30.1408 72.0607 30.3319 72.0607 30.523C72.0607 30.7141 71.8696 31.0008 71.5829 31.0964L57.9181 39.0277C57.3447 39.4099 56.3892 39.4099 55.8158 39.0277L44.6355 32.6253C44.3488 32.4342 44.1577 32.2431 44.1577 31.9564Z" fill="#73D19C"/>
+<path d="M41.8652 32.5297V30.7141L47.2165 27.6562V29.4719L41.8652 32.5297Z" fill="#004C45"/>
+<path d="M41.865 30.7146C41.3872 30.4279 41.0049 30.4279 40.7183 30.6191L46.0695 27.5612C46.3562 27.3701 46.7384 27.4656 47.2162 27.6568L41.865 30.7146Z" fill="#9CF9C5"/>
+<path d="M41.8651 32.53L40.3362 31.67C40.3362 31.1922 40.5273 30.8099 40.814 30.6188C41.1006 30.4277 41.4829 30.5233 41.9607 30.7144V32.53H41.8651Z" fill="#004C45"/>
+<path d="M60.5949 43.3272C60.5949 43.3272 59.9259 41.1294 59.0659 40.6516L64.4172 37.5938C65.2772 38.0715 65.9461 40.2694 65.9461 40.2694L60.5949 43.3272Z" fill="#9CF9C5"/>
+<path d="M61.0729 42.754C60.8817 42.2762 60.7862 41.9895 60.4995 41.4162L64.7996 38.9316C64.9907 39.4094 65.0863 39.6005 65.373 40.2695L61.0729 42.754Z" fill="#004C45"/>
+<path d="M60.5944 43.327L59.0654 42.467V40.6514C59.9255 41.1292 60.5944 43.327 60.5944 43.327Z" fill="#64B888"/>
+<path d="M114.4 20.7998C116.609 20.7998 118.4 19.0096 118.4 16.7998C118.4 14.591 116.609 12.7998 114.4 12.7998C112.191 12.7998 110.4 14.591 110.4 16.7998C110.4 19.0096 112.191 20.7998 114.4 20.7998Z" fill="#F0C4BC"/>
+<path d="M120.8 4.8C122.126 4.8 123.2 3.72516 123.2 2.40003C123.2 1.07403 122.126 0 120.8 0C119.475 0 118.4 1.07403 118.4 2.40003C118.4 3.72516 119.475 4.8 120.8 4.8Z" fill="#F0C4BC"/>
+<path d="M28.0001 10.3996C29.3261 10.3996 30.4001 9.32562 30.4001 7.99961C30.4001 6.67446 29.3261 5.59961 28.0001 5.59961C26.675 5.59961 25.6001 6.67446 25.6001 7.99961C25.6001 9.32562 26.675 10.3996 28.0001 10.3996Z" fill="#F0C4BC"/>
+<path d="M4.8 68.8002C7.45108 68.8002 9.6 66.6494 9.6 64.0002C9.6 61.351 7.45108 59.2002 4.8 59.2002C2.14892 59.2002 0 61.351 0 64.0002C0 66.6494 2.14892 68.8002 4.8 68.8002Z" fill="#F0C4BC"/>
+<circle cx="87.2" cy="71.2" r="15.2" fill="#5A2740"/>
+<path d="M87.2003 77.5994C88.084 77.5994 88.8003 76.8831 88.8003 75.9994C88.8003 75.1158 88.084 74.3994 87.2003 74.3994C86.3167 74.3994 85.6003 75.1158 85.6003 75.9994C85.6003 76.8831 86.3167 77.5994 87.2003 77.5994Z" fill="white"/>
+<path d="M87.2007 73.3331C87.4836 73.3331 87.7549 73.2208 87.9549 73.0207C88.155 72.8207 88.2674 72.5494 88.2674 72.2665V65.8665C88.2674 65.5836 88.155 65.3123 87.9549 65.1122C87.7549 64.9122 87.4836 64.7998 87.2007 64.7998C86.9178 64.7998 86.6465 64.9122 86.4465 65.1122C86.2464 65.3123 86.134 65.5836 86.134 65.8665V72.2665C86.134 72.5494 86.2464 72.8207 86.4465 73.0207C86.6465 73.2208 86.9178 73.3331 87.2007 73.3331Z" fill="white"/>
+</svg>
diff --git a/web-app/packages/lib/src/common/components/AppDropdown.vue b/web-app/packages/lib/src/common/components/AppDropdown.vue
new file mode 100644
index 00000000..b7f2d6b9
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/AppDropdown.vue
@@ -0,0 +1,98 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <PDropdown
+    :options="options"
+    option-label="label"
+    option-value="value"
+    v-model="model"
+    @show="toggle"
+    @hide="toggle"
+    :pt="{
+      root: {
+        class: 'border-transparent w-full bg-transparent',
+        onclick: (e) => {
+          // if in clickable area, there is problem with bubbling
+          e.stopPropagation()
+        }
+      },
+      input: {
+        class: 'text-xs'
+      },
+      item({ context }) {
+        return {
+          class: [
+            'text-color p-2 hover:bg-gray-100',
+            context.focused ? 'bg-gray-50' : 'bg-transparent'
+          ]
+        }
+      },
+      trigger(options) {
+        return {
+          class: options.props?.disabled ? 'text-color' : 'text-color-forest'
+        }
+      }
+    }"
+  >
+    <template #dropdownicon="scope">
+      <i
+        :class="[
+          scope.class,
+          'ti',
+          isOpen ? 'ti-chevron-up' : 'ti-chevron-down',
+          'font-semibold text-base'
+        ]"
+      ></i>
+    </template>
+    <template #option="{ option }">
+      <div class="flex text-xs align-items-center py-2">
+        <div class="flex flex-column mr-6">
+          <p class="font-semibold m-0">{{ option.label }}</p>
+          <span v-if="option.description" class="pt-2">{{
+            option.description
+          }}</span>
+        </div>
+        <div class="ml-auto px-2">
+          <i
+            :class="[
+              'ti ti-circle-check-filled text-color-forest',
+              modelValue === option.value ? 'visible' : 'hidden'
+            ]"
+          ></i>
+        </div>
+      </div>
+    </template>
+  </PDropdown>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+import { DropdownOption } from './types'
+
+const props = defineProps<{
+  modelValue: string
+  options: DropdownOption[]
+}>()
+const isOpen = ref(false)
+
+const emitModelValue = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    return emitModelValue('update:modelValue', value)
+  }
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
index 0a77edee..ac7247d9 100644
--- a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
+++ b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
@@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <PPanel
     toggleable
-    v-bind="$props"
     :pt="{
       header(options) {
         return {
@@ -21,13 +20,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         }
       },
       content: {
-        class: 'border-none border-round-bottom-2xl p-4 pt-2'
+        class: 'border-none border-round-bottom-2xl p-4 pt-0'
       }
     }"
   >
-    <template #header>
+    <template v-if="$slots.header" #header>
+      <slot name="header"></slot>
+    </template>
+    <template v-else-if="$slots.title" #header>
       <h3 class="text-color-forest font-semibold m-0">
-        <slot name="header"></slot>
+        <slot name="title"></slot>
       </h3>
     </template>
     <template v-if="$slots.footer" #footer>
diff --git a/web-app/packages/lib/src/common/components/AppSection.vue b/web-app/packages/lib/src/common/components/AppSection.vue
index 23adc2e8..931f6635 100644
--- a/web-app/packages/lib/src/common/components/AppSection.vue
+++ b/web-app/packages/lib/src/common/components/AppSection.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts" setup>
-withDefaults(defineProps<{ ground: boolean }>(), {
+withDefaults(defineProps<{ ground?: boolean }>(), {
   ground: false
 })
 </script>
diff --git a/web-app/packages/lib/src/common/components/AppSidebarRight.vue b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
index 9443da1d..a0da8864 100644
--- a/web-app/packages/lib/src/common/components/AppSidebarRight.vue
+++ b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
@@ -59,8 +59,8 @@ const model = computed({
   get() {
     return props.modelValue
   },
-  set() {
-    return emitModelValue('update:modelValue')
+  set(value) {
+    return emitModelValue('update:modelValue', value)
   }
 })
 </script>
diff --git a/web-app/packages/lib/src/common/components/base/BaseItem.vue b/web-app/packages/lib/src/common/components/base/BaseItem.vue
deleted file mode 100644
index 459a16cd..00000000
--- a/web-app/packages/lib/src/common/components/base/BaseItem.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<!--
-Based on template:
-Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard
-Copyright 2019 Creative Tim (https://www.creative-tim.com)
-
-Modifications by:
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <v-list-item
-    :href="href"
-    :rel="href && href !== '#' ? 'noopener' : undefined"
-    :target="href && href !== '#' ? '_blank' : undefined"
-    :to="item.to"
-    active-class="baseItemActiveColor"
-  >
-    <!--  TODO: VUE 3 - problematic upgrade, check this   -->
-    <template #prepend>
-      <v-list-item
-        v-if="text"
-        class="v-list-item__icon--text"
-        v-text="computedText"
-        :class="`${color}--text`"
-        icon
-      />
-
-      <v-list-item
-        v-else-if="item.icon || item.tablerIcon"
-        class="mr-2"
-        :class="`${color}--text`"
-        icon
-      >
-        <v-icon v-if="item.icon" :class="`${color}--text`" v-text="item.icon" />
-        <slot v-if="item.tablerIcon" name="icon"></slot>
-      </v-list-item>
-    </template>
-
-    <v-layout v-if="item.title || item.subtitle" :class="`${color}--text`">
-      <v-list-item-title v-text="item.title" />
-
-      <v-list-item-subtitle v-text="item.subtitle" />
-    </v-layout>
-  </v-list-item>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-
-import { SideBarItemModel } from '@/modules/layout/types'
-// import Themeable from 'vuetify/lib/mixins/themeable'
-
-export default defineComponent({
-  name: 'BaseItem',
-
-  // mixins: [Themeable],
-
-  props: {
-    color: {
-      type: String,
-      default: 'white'
-    },
-    item: {
-      type: Object as PropType<SideBarItemModel>,
-      default: () => ({
-        href: undefined,
-        icon: undefined,
-        tablerIcon: false,
-        subtitle: undefined,
-        title: undefined,
-        to: undefined
-      })
-    },
-    text: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    computedText() {
-      if (!this.item || !this.item.title) return ''
-
-      let text = ''
-
-      this.item.title.split(' ').forEach((val) => {
-        text += val.substring(0, 1)
-      })
-
-      return text
-    },
-    href() {
-      return this.item.href || (this.item.to ? undefined : '#')
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.baseItemActiveColor {
-  background-color: #f3f4f8;
-}
-</style>
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index 9c838114..35dc9a88 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -2,13 +2,12 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-export * from './base'
-
 export { default as AppSection } from './AppSection.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as AppPanelToggleable } from './AppPanelToggleable.vue'
 export { default as AppsidebarRight } from './AppSidebarRight.vue'
 export { default as AppMenu } from './AppMenu.vue'
+export { default as AppDropdwown } from './AppDropdown.vue'
 export { default as ActionButton } from './ActionButton.vue'
 export { default as CustomPage } from './CustomPage.vue'
 export { default as FullStorageWarning } from './FullStorageWarning.vue'
diff --git a/web-app/packages/lib/src/common/components/base/index.ts b/web-app/packages/lib/src/common/components/types.ts
similarity index 57%
rename from web-app/packages/lib/src/common/components/base/index.ts
rename to web-app/packages/lib/src/common/components/types.ts
index 2e184c3a..2001ddc2 100644
--- a/web-app/packages/lib/src/common/components/base/index.ts
+++ b/web-app/packages/lib/src/common/components/types.ts
@@ -2,4 +2,8 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-export { default as BaseItem } from './BaseItem.vue'
+export interface DropdownOption {
+  value: string
+  label: string
+  description?: string
+}
diff --git a/web-app/packages/lib/src/common/route_utils.ts b/web-app/packages/lib/src/common/route_utils.ts
index 4889853a..74503788 100644
--- a/web-app/packages/lib/src/common/route_utils.ts
+++ b/web-app/packages/lib/src/common/route_utils.ts
@@ -4,28 +4,29 @@
 
 import isEqual from 'lodash/isEqual'
 import pick from 'lodash/pick'
-import { Route, NavigationGuardNext } from 'vue-router'
-
-import { useUserStore } from '@/modules/user/store'
+import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
 
 export type IsAuthenticatedGuardOptions = {
   notAuthenticatedRedirectPath?: string
 }
 
-export function isTheSameRoute(from: Route, to: Route) {
+export function isTheSameRoute(
+  from: RouteLocationNormalized,
+  to: RouteLocationNormalized
+) {
   const properties = ['name', 'path', 'hash', 'params', 'query']
   return isEqual(pick(from, properties), pick(to, properties))
 }
 
-export function getTagsFromQuery(route: Route) {
+export function getTagsFromQuery(route: RouteLocationNormalized) {
   const tags = route.query.tags
   return tags ? (typeof tags === 'string' ? tags.split(',') : tags) : []
 }
 
 /** Handles redirect to /login when user is not authenticated. */
 export function isAuthenticatedGuard(
-  to: Route,
-  from: Route,
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
   next: NavigationGuardNext,
   userStore,
   options?: IsAuthenticatedGuardOptions
@@ -47,8 +48,8 @@ export function isAuthenticatedGuard(
 
 /** Handles redirect to /login when user is not superUser. */
 export function isSuperUser(
-  to: Route,
-  from: Route,
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
   next: NavigationGuardNext,
   userStore
 ) {
diff --git a/web-app/packages/lib/src/common/types.ts b/web-app/packages/lib/src/common/types.ts
index 992e06f2..ee5c592a 100644
--- a/web-app/packages/lib/src/common/types.ts
+++ b/web-app/packages/lib/src/common/types.ts
@@ -16,7 +16,7 @@ export type RouteOverrides = Record<
 export interface ModuleService {
   httpService?: HttpService
   routerService?: Router
-  [key: string]: any
+  [key: string]: unknown
 }
 
 export interface BaseModule {
@@ -62,7 +62,7 @@ export interface PaginatedResponse<T> extends PaginatedResponseDefaults {
   items: readonly T[]
 }
 
-export interface ApiRequestSuccessInfo<T = any> {
+export interface ApiRequestSuccessInfo<T> {
   success: boolean
   message?: string
   data?: T
diff --git a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
index 6a21b752..c272bd86 100644
--- a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
+++ b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
@@ -5,71 +5,80 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-card>
-    <v-card-title class="text-h5">{{ headline }}</v-card-title>
-    <v-card-text v-html="text" />
-    <v-card-actions>
-      <v-text-field
-        v-if="confirmField"
+  <div class="flex flex-column align-items-center p-4 text-center gap-4">
+    <img
+      v-if="severity === 'danger'"
+      src="@/assets/trash.svg"
+      alt="Cover for confirm dialog"
+    />
+    <img v-else src="@/assets/map-circle.svg" alt="Cover for confirm dialog" />
+    <span class="font-semibold text-color-forest text-xl">{{ text }}</span>
+    <span class="text-sm opacity-80">{{ description }}</span>
+    <span v-if="confirmField" class="flex p-float-label w-full">
+      <PInputText
         autofocus
-        :label="confirmField.label"
+        id="confirmValue"
         v-model="confirmValue"
-        style="margin-left: 15px"
+        type="text"
+        class="border-round-xl flex-grow-1"
+        :style="{ backgroundColor: 'var(--light-green-color)' }"
       />
-      <v-spacer />
-      <v-btn variant="text" @click="close">
-        {{ cancelText }}
-      </v-btn>
-      <v-btn :disabled="!isConfirmed" color="primary" @click="confirm">
+      <label for="confirmValue">{{ confirmField.label }}</label>
+    </span>
+
+    <slot></slot>
+
+    <!-- Footer -->
+    <div
+      class="w-full flex flex-column lg:flex-row justify-content-between align-items-center mt-4"
+    >
+      <PButton
+        severity="secondary"
+        outlined
+        @click="close"
+        class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
+        data-cy="clone-dialog-close-btn"
+        >{{ cancelText }}</PButton
+      >
+
+      <PButton
+        :disabled="!isConfirmed"
+        @click="confirm"
+        :severity="severity"
+        class="flex w-12 lg:w-6 justify-content-center"
+      >
         {{ confirmText }}
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+      </PButton>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import { mapActions } from 'pinia'
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { ref, computed, defineEmits, withDefaults } from 'vue'
+
+import { ConfirmDialogProps } from '../types'
 
 import { useDialogStore } from '@/modules/dialog/store'
 
-export default defineComponent({
-  name: 'confirm-dialog',
-  props: {
-    text: String,
-    confirmField: Object,
-    confirmText: {
-      type: String,
-      default: 'Ok'
-    },
-    cancelText: {
-      type: String,
-      default: 'Cancel'
-    },
-    headline: {
-      type: String,
-      default: 'Confirm'
-    }
-  },
-  data() {
-    return {
-      confirmValue: ''
-    }
-  },
-  computed: {
-    isConfirmed() {
-      return this.confirmField
-        ? this.confirmField.expected === this.confirmValue
-        : true
-    }
-  },
-  methods: {
-    ...mapActions(useDialogStore, ['close']),
+const props = withDefaults(defineProps<ConfirmDialogProps>(), {
+  confirmText: 'Ok',
+  cancelText: 'Cancel',
+  severity: 'primary'
+})
+
+const confirmValue = ref('')
+const emit = defineEmits(['confirm'])
 
-    confirm() {
-      this.close()
-      this.$emit('confirm')
-    }
-  }
+const isConfirmed = computed(() => {
+  return props.confirmField
+    ? props.confirmField.expected === confirmValue.value
+    : true
 })
+
+const { close } = useDialogStore()
+
+function confirm() {
+  close()
+  emit('confirm')
+}
 </script>
diff --git a/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue b/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue
index bbcead49..f1be5a76 100644
--- a/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue
+++ b/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue
@@ -21,11 +21,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         class: 'w-10 lg:w-4 border-round-2xl'
       },
       header: {
-        class: 'text-sm border-none border-round-top-2xl',
+        class: 'border-none border-round-top-2xl',
         style: {
           color: 'var(--forest-color)'
         }
       },
+      title: {
+        class: 'text-base font-semibold'
+      },
       closeButton: {
         style: {
           backgroundColor: 'var(--light-green-color)'
diff --git a/web-app/packages/lib/src/modules/dialog/types.ts b/web-app/packages/lib/src/modules/dialog/types.ts
index 1d7b1a5d..955e7012 100644
--- a/web-app/packages/lib/src/modules/dialog/types.ts
+++ b/web-app/packages/lib/src/modules/dialog/types.ts
@@ -4,6 +4,15 @@
 
 import { Component } from 'vue'
 
+export interface ConfirmDialogProps {
+  text: string
+  severity?: 'primary' | 'danger'
+  confirmText?: string
+  cancelText?: string
+  description?: string
+  confirmField?: { label: string; expected: string }
+}
+
 export interface DialogParams {
   dialog: {
     maxWidth?: number
@@ -13,7 +22,7 @@ export interface DialogParams {
   }
   // TODO: clear unknown based on 'on-listener' in template
   listeners?: unknown | Record<string, (...args: unknown[]) => void>
-  props?: Record<string, unknown>
+  props?: Record<string, unknown> | ConfirmDialogProps
 }
 
 export interface DialogPayload {
diff --git a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
index 3659d06f..67ccdf90 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
@@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <POverlayPanel
           id="app-header-profile"
           ref="menu"
-          :pt="{ root: { class: 'p-2' } }"
+          :pt="{ root: { class: 'p-3' }, content: { class: 'p-0' } }"
         >
           <div class="flex align-items-center mb-2">
             <PAvatar
@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               shape="circle"
               :pt="{
                 root: {
-                  class: 'surface-ground mr-2',
+                  class: 'surface-ground mr-2 text-color-forest font-semibold',
                   style: {
                     borderRadius: '50%'
                   }
@@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               root: { style: { width: '100%' }, class: 'border-none' },
               label: { class: 'font-semibold' },
               icon: { class: 'text-color text-2xl' },
-              action: { class: 'flex align-items-center pl-0 pr-0' }
+              action: { class: 'flex align-items-center' }
             }"
           ></PMenu>
         </POverlayPanel>
@@ -172,7 +172,7 @@ export default defineComponent({
           location.href = '/'
         }
       } catch (e) {
-        console.log(e)
+        console.error(e)
       }
     }
   }
diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue b/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
index 94227c87..99b5abc5 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
+++ b/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
@@ -20,7 +20,7 @@ export default defineComponent({
   <li class="p-2">
     <router-link
       :class="[
-        'sidebar-item__link px-3 py-2 flex align-items-center transition-color transition-duration-200 no-underline border-round-lg text-sm',
+        'sidebar-item__link p-3 flex align-items-center transition-color transition-duration-200 no-underline border-round-lg text-sm',
         item.active && 'sidebar-item__link--active'
       ]"
       :to="item.to"
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTable.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTable.vue
similarity index 81%
rename from web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTable.vue
rename to web-app/packages/lib/src/modules/project/components/AccessRequestTable.vue
index e17d9f22..c2c2a85d 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTable.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <project-access-request-table-template
+  <access-request-table-template
     :namespace="namespace"
     @accept-access-request-error="onAcceptAccessRequestError"
   />
@@ -16,14 +16,14 @@ import { AxiosError } from 'axios'
 import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
 
-import ProjectAccessRequestTableTemplate from './ProjectAccessRequestTableTemplate.vue'
+import AccessRequestTableTemplate from './AccessRequestTableTemplate.vue'
 
 import { getErrorMessage } from '@/common/error_utils'
 import { useNotificationStore } from '@/modules/notification/store'
 
 export default defineComponent({
-  name: 'ProjectAccessRequestTable',
-  components: { ProjectAccessRequestTableTemplate },
+  name: 'AccessRequestTable',
+  components: { AccessRequestTableTemplate },
   props: {
     namespace: {
       type: String,
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
similarity index 81%
rename from web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
rename to web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index 9920eeb1..08704ccf 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -19,6 +19,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     :pt="{
       header: {
         class: 'px-4 py-2'
+      },
+      loadingOverlay: {
+        class: 'bg-primary-reverse opacity-50'
       }
     }"
   >
@@ -34,9 +37,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <p class="w-12 lg:w-4 text-xs p-2 lg:p-0">
             User
             <span class="font-semibold">{{ item.requested_by }}</span>
-            wants to transfer project
-            <span class="font-semibold">{{ item.project_name }}</span>
-            to your workspace.
+            requested an access to your project
+            <span class="font-semibold">{{ item.project_name }}.</span>
           </p>
           <div
             class="flex w-12 lg:w-4 align-items-center flex-wrap lg:flex-nowrap"
@@ -47,18 +49,29 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             >
               Expiring in {{ $filters.remainingtime(item.expire) }}
             </p>
-            <PDropdown
+            <AppDropdown
               v-if="showAccept"
               :options="[
-                { value: 'read', label: 'Reader' },
-                { value: 'write', label: 'Writer' },
-                { value: 'owner', label: 'Owner' }
+                {
+                  value: 'owner',
+                  label: 'Manage',
+                  description: 'Can edit and remove projects in the workspace'
+                },
+                {
+                  value: 'write',
+                  label: 'Write',
+                  description: 'Can edit projects in the workspace'
+                },
+                {
+                  value: 'read',
+                  label: 'Read only',
+                  description: 'Can view projects in the workspace'
+                }
               ]"
-              option-label="label"
-              option-value="value"
               v-model="permissions[item.id]"
               @change="(e) => permissionsChange(e, item)"
-              class="w-6 lg:w-4 p-1"
+              :disabled="expired(item.expire)"
+              class="w-6 lg:w-5 p-1"
             />
             <div class="flex justify-content-end w-6 lg:w-4 p-1">
               <PButton
@@ -75,6 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 rounded
                 aria-label="Accept"
                 severity="success"
+                :disabled="expired(item.expire)"
                 @click="acceptRequest(item)"
               />
             </div>
@@ -94,16 +108,18 @@ import { DataViewPageEvent } from 'primevue/dataview'
 import { DropdownChangeEvent } from 'primevue/dropdown'
 import { defineComponent } from 'vue'
 
+import AppDropdown from '@/common/components/AppDropdown.vue'
 import { ProjectPermissionName } from '@/common/permission_utils'
 import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
 import {
-  GetProjectAccessRequestsPayload,
-  ProjectAccessRequest
+  GetAccessRequestsPayload,
+  AccessRequest
 } from '@/modules/project/types'
 
 export default defineComponent({
-  name: 'ProjectAccessRequestTableTemplate',
+  name: 'AccessRequestTableTemplate',
+  components: { AppDropdown },
   props: {
     namespace: {
       type: String,
@@ -157,7 +173,7 @@ export default defineComponent({
     ...mapActions(useProjectStore, [
       'cancelProjectAccessRequest',
       'acceptProjectAccessRequest',
-      'getProjectAccessRequests'
+      'getAccessRequests'
     ]),
     ...mapActions(useNotificationStore, ['error']),
 
@@ -166,7 +182,7 @@ export default defineComponent({
       this.options.itemsPerPage = e.rows
       this.fetchItems()
     },
-    permissionsChange(e: DropdownChangeEvent, item: ProjectAccessRequest) {
+    permissionsChange(e: DropdownChangeEvent, item: AccessRequest) {
       const { value } = e
       const { id } = item
       this.selectedPermissions[id] = value
@@ -206,7 +222,7 @@ export default defineComponent({
     async fetchItems() {
       this.loading = true
       try {
-        const payload: GetProjectAccessRequestsPayload = {
+        const payload: GetAccessRequestsPayload = {
           namespace: this.namespace,
           params: {
             page: this.options.page,
@@ -216,7 +232,7 @@ export default defineComponent({
               `${this.options.sortBy} ${this.options.sortDesc ? 'DESC' : 'ASC'}`
           }
         }
-        await this.getProjectAccessRequests(payload)
+        await this.getAccessRequests(payload)
       } finally {
         this.loading = false
       }
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
index 2e825398..a2823076 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -5,146 +5,109 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-layout class="no-shrink column">
-    <label class="mt-4 text-grey-darken-1">Access requests:</label>
-    <!-- <v-data-table
-      :loading="loading"
-      :headers="tableHeaders"
-      :items="accessRequests"
-      :server-items-length="accessRequestsCount"
-      no-data-text="No access requests"
-      :options="options"
-      v-on:update:options="onUpdateOptions"
-      :footer-props="{ 'items-per-page-options': [10, 25, 50] }"
-    >
-      <template #header.user="{ header }">
-        <v-tooltip v-if="header.tooltip" location="top">
-          <template v-slot:activator="{ props }">
-            <span v-bind="props">
-              {{ header.text }}
-            </span>
-          </template>
-          <span>
-            {{ header.tooltip }}
-          </span>
-        </v-tooltip>
-        <span v-else>
-          {{ header.text }}
-        </span>
-      </template>
-      <template #header.expire="{ header }">
-        <v-tooltip v-if="header.tooltip" location="top">
-          <template v-slot:activator="{ props }">
-            <span v-bind="props">
-              {{ header.text }}
-            </span>
-          </template>
-          <span>
-            {{ header.tooltip }}
-          </span>
-        </v-tooltip>
-        <span v-else>
-          {{ header.text }}
-        </span>
-      </template>
-      <template #item.user="{ value }">
-        <v-tooltip
-          top
-          v-if="
-            value.profile &&
-            (value.profile.first_name || value.profile.last_name)
-          "
+  <PDataView
+    :value="accessRequests"
+    :lazy="true"
+    :paginator="accessRequestsCount > 10"
+    :loading="loading"
+    :rows="options.itemsPerPage"
+    :totalRecords="accessRequestsCount"
+    :data-key="'id'"
+    :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
+    size="small"
+    @page="onPage"
+    :pt="{
+      header: {
+        class: 'px-4 py-2'
+      },
+      loadingOverlay: {
+        class: 'bg-primary-reverse opacity-50'
+      }
+    }"
+  >
+    <template #header>
+      <h3 class="font-semibold text-xs text-color m-0">Access requests</h3>
+    </template>
+    <template #list="slotProps">
+      <template v-for="item in slotProps.items" :key="item.id">
+        <!-- Row -->
+        <div
+          class="flex flex-column lg:flex-row align-items-center justify-content-between px-4 py-2 mt-0 border-bottom-1 border-gray-200"
         >
-          <template v-slot:activator="{ props }">
-            <b v-bind="props">
-              {{ value.username }}
-            </b>
-          </template>
-          <span>
-            <span v-if="value.profile && value.profile.first_name">{{
-              value.profile.first_name
-            }}</span>
-            <span v-if="value.profile && value.profile.last_name">
-              {{ value.profile.last_name }}</span
+          <p class="w-12 lg:w-4 text-xs p-2 lg:p-0">
+            User
+            <span class="font-semibold">{{ item.requested_by }}</span>
+            requested an access to your project
+            <span class="font-semibold">{{ item.project_name }}.</span>
+          </p>
+          <div
+            class="flex w-12 lg:w-4 align-items-center flex-wrap lg:flex-nowrap"
+          >
+            <p
+              v-tooltip.top="{ value: $filters.datetime(item.expire) }"
+              class="opacity-80 text-xs w-12 lg:w-4 p-2 lg:p-1"
             >
-          </span>
-        </v-tooltip>
-        <b v-else>
-          {{ value.username }}
-        </b>
-      </template>
-      <template #item.expire="{ value }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <span v-bind="props">{{ $filters.remainingtime(value) }}</span>
-          </template>
-          <span>{{ $filters.datetime(value) }}</span>
-        </v-tooltip>
-      </template>
-      <template #item.permissions="{ item }">
-        <v-select
-          :items="['read', 'write', 'owner']"
-          v-model="permissions[item.id]"
-          return-object
-        >
-        </v-select>
-      </template>
-      <template #item.confirm="{ item }">
-        <div class="justify-center px-0">
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <span v-bind="props">
-                <v-chip
-                  :disabled="!canAcceptAccessRequest(item.user.id, item.expire)"
-                  @click="acceptRequest(item)"
-                  elevation="0"
-                  color="green"
-                  class="white--text"
-                >
-                  accept
-                </v-chip>
-              </span>
-            </template>
-            <span>Accept request</span>
-          </v-tooltip>
+              Expiring in {{ $filters.remainingtime(item.expire) }}
+            </p>
+            <AppDropdown
+              :options="[
+                {
+                  value: 'owner',
+                  label: 'Manage',
+                  description: 'Can edit and remove projects in the workspace'
+                },
+                {
+                  value: 'write',
+                  label: 'Write',
+                  description: 'Can edit projects in the workspace'
+                },
+                {
+                  value: 'read',
+                  label: 'Read only',
+                  description: 'Can view projects in the workspace'
+                }
+              ]"
+              v-model="permissions[item.id]"
+              class="w-6 lg:w-5 p-1"
+            />
+            <div class="flex justify-content-end w-6 lg:w-4 p-1">
+              <PButton
+                :disabled="!canCancelAccessRequest(item.user.id)"
+                icon="ti ti-x"
+                rounded
+                aria-label="Disallow"
+                severity="danger"
+                class="mr-2"
+                @click="cancelRequest(item)"
+              />
+              <PButton
+                :disabled="!canAcceptAccessRequest(item.user.id, item.expire)"
+                icon="ti ti-check"
+                rounded
+                aria-label="Accept"
+                severity="success"
+                @click="acceptRequest(item)"
+              />
+            </div>
+          </div>
         </div>
       </template>
-      <template #item.cancel="{ item }">
-        <div class="justify-center">
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <span v-bind="props">
-                <v-chip
-                  :disabled="!canCancelAccessRequest(item.user.id)"
-                  @click="cancelRequest(item)"
-                  elevation="0"
-                  color="red"
-                  class="white--text"
-                >
-                  cancel
-                </v-chip>
-              </span>
-            </template>
-            <span>Cancel access request</span>
-          </v-tooltip>
-        </div>
-      </template>
-    </v-data-table> -->
-    <button
-      ref="hidden-btn"
-      id="accept-request-access-btn"
-      style="visibility: hidden"
-    />
-  </v-layout>
+    </template>
+    <template #empty>
+      <p class="text-center p-4 m-0">No access requests found</p>
+    </template>
+  </PDataView>
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
+import { DataViewPageEvent } from 'primevue/dataview'
 import { defineComponent } from 'vue'
 
+import AppDropdown from '@/common/components/AppDropdown.vue'
 import { getErrorMessage } from '@/common/error_utils'
 import { isAtLeastProjectRole, ProjectRole } from '@/common/permission_utils'
-import { GetProjectAccessRequestsPayload } from '@/modules'
+import { GetAccessRequestsPayload } from '@/modules'
 import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
@@ -155,52 +118,15 @@ export default defineComponent({
       loading: false,
       options: {
         // Default is order_params=expire ASC
-        sortBy: ['expire'],
-        sortDesc: [false],
+        sortBy: 'expire',
+        sortDesc: false,
         itemsPerPage: 10,
         page: 1
       },
-      permissions: {},
-      tableHeaders: [
-        {
-          text: 'User',
-          value: 'user',
-          align: 'left',
-          sortable: false,
-          tooltip: 'Request from user'
-        },
-        {
-          text: 'Expire',
-          value: 'expire',
-          align: 'left',
-          sortable: false,
-          tooltip: 'Project access request expiration date'
-        },
-        {
-          text: 'Permissions',
-          value: 'permissions',
-          align: 'right',
-          sortable: false,
-          width: 60
-        },
-        {
-          text: ' ',
-          value: 'confirm',
-          align: 'right',
-          sortable: false,
-          width: 60
-        },
-        {
-          text: '',
-          value: 'cancel',
-          align: 'right',
-          sortable: false,
-          width: 60
-        }
-      ],
-      originalValue: null
+      permissions: {}
     }
   },
+  components: { AppDropdown },
   computed: {
     ...mapState(useProjectStore, [
       'project',
@@ -209,11 +135,14 @@ export default defineComponent({
     ]),
     ...mapState(useUserStore, ['loggedUser'])
   },
+  created() {
+    this.fetchItems()
+  },
   methods: {
     ...mapActions(useProjectStore, [
       'cancelProjectAccessRequest',
       'acceptProjectAccessRequest',
-      'getProjectAccessRequests'
+      'getAccessRequests'
     ]),
     ...mapActions(useNotificationStore, ['error']),
 
@@ -244,9 +173,6 @@ export default defineComponent({
     },
     async acceptRequest(request) {
       try {
-        const el = this.$refs['hidden-btn']
-        el.value = this.permissions[request.id]
-        el.dispatchEvent(new Event('click', {}))
         const data = {
           permissions: this.permissions[request.id]
         }
@@ -275,86 +201,34 @@ export default defineComponent({
     async fetchItems() {
       this.loading = true
       try {
-        const payload: GetProjectAccessRequestsPayload = {
+        const payload: GetAccessRequestsPayload = {
           namespace: this.project.namespace,
           params: {
+            project_name: this.project.name,
             page: this.options.page,
             per_page: this.options.itemsPerPage,
             order_params:
               this.options.sortBy[0] &&
               `${this.options.sortBy[0]} ${
                 this.options.sortDesc[0] ? 'DESC' : 'ASC'
-              }`,
-            project_name: this.project.name
+              }`
           }
         }
-        await this.getProjectAccessRequests(payload)
+        await this.getAccessRequests(payload)
         this.accessRequests.forEach((request) => {
           this.permissions[request.id] = 'read'
         })
       } finally {
         this.loading = false
       }
+    },
+    onPage(e: DataViewPageEvent) {
+      this.options.page = e.page + 1
+      this.options.itemsPerPage = e.rows
+      this.fetchItems()
     }
   }
 })
 </script>
 
-<style lang="scss" scoped>
-.no-shrink {
-  flex: 0 0 auto;
-}
-
-label {
-  font-weight: 500;
-}
-
-:deep(*) {
-  .v-data-table__overflow {
-    margin: 0.5em 0;
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    padding: 0.5em;
-    background-color: #f9f9f9;
-
-    .v-datatable {
-      background-color: transparent;
-    }
-  }
-}
-
-.div {
-  b {
-    margin-right: 10px;
-  }
-
-  span {
-    margin-right: 3px;
-    font-size: 12px;
-  }
-}
-
-.private-public-btn {
-  font-size: 12px;
-  padding-left: 20px;
-  padding-right: 20px;
-
-  span {
-    font-weight: 700;
-  }
-}
-
-.private-public-text {
-  font-size: 14px;
-}
-
-.public-private-zone {
-  margin-top: 20px;
-  margin-bottom: 20px;
-
-  button {
-    margin-right: 20px;
-    margin-top: 1px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
index c311653f..dd4dc5d7 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
@@ -5,88 +5,118 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-layout class="no-shrink column">
-    <label class="mt-4 text-grey-darken-1">Manage Access:</label>
-    <slot name="banner" />
-    <v-data-table
-      :headers="header"
-      :items="displayedValues"
-      no-data-text="No users"
-      :hide-default-footer="displayedValues.length <= 10"
-    >
-      <template #header.permissions="{ header }">
-        <v-tooltip v-if="header.tooltip" location="top">
-          <template v-slot:activator="{ props }">
-            <span v-bind="props">
-              {{ header.text }}
-            </span>
-          </template>
-          <span>
-            {{ header.tooltip }}
-          </span>
-        </v-tooltip>
-        <span v-else>
-          {{ header.text }}
-        </span>
-      </template>
-
-      <template #item.user="{ modelValue }">
-        <v-tooltip
-          location="top"
-          v-if="modelValue.profile.first_name || modelValue.profile.last_name"
+  <div>
+    <AppContainer>
+      <AppSection>
+        <PDataView
+          :value="displayedValues"
+          :data-key="'id'"
+          :pt="{
+            header: {
+              // small header
+              class: 'px-4 py-2'
+            }
+          }"
         >
-          <template v-slot:activator="{ props }">
-            <b v-bind="props">
-              {{ modelValue.username }}
-            </b>
+          <template #header>
+            <div class="w-11 grid grid-nogutter">
+              <!-- Visible on lg breakpoint > -->
+              <div
+                v-for="col in columns.filter((item) => !item.fixed)"
+                :class="['text-xs hidden lg:flex', `col-${col.cols ?? 4}`]"
+                :key="col.text"
+              >
+                {{ col.text }}
+              </div>
+              <!-- else -->
+              <div class="col-12 flex lg:hidden">Members</div>
+            </div>
           </template>
-          <span>
-            <span v-if="modelValue.profile.first_name">{{
-              modelValue.profile.first_name
-            }}</span>
-            <span v-if="modelValue.profile.last_name">
-              {{ modelValue.profile.last_name }}</span
-            >
-          </span>
-        </v-tooltip>
-        <b v-else>
-          {{ modelValue.username }}
-        </b>
-      </template>
-
-      <template #item.permissions="{ item }">
-        <v-select
-          :model-value="actualPermissions(item)"
-          :items="permissionStates"
-          @update:model-value="(e) => valueChanged(item, e)"
-          :disabled="!isProjectOwner"
-          hide-details
-          label="reader"
-          single-line
-          class="input-selection"
-          style="width: 120px"
-        >
-        </v-select>
-      </template>
 
-      <template #item.remove="{ item }">
-        <div class="justify-center px-0">
-          <v-btn
-            :disabled="!canRemoveUser(item.user.id)"
-            @click="removeUser(item.user)"
-            icon
-          >
-            <v-icon color="red darken-3">delete</v-icon>
-          </v-btn>
-        </div>
-      </template>
-    </v-data-table>
-    <button
-      ref="hidden-input"
-      id="change-permissions-input"
-      style="visibility: hidden"
-    />
-  </v-layout>
+          <!-- table rows -->
+          <template #list="slotProps">
+            <div
+              v-for="item in slotProps.items"
+              :key="item.id"
+              class="flex align-items-center hover:bg-gray-50 border-bottom-1 border-gray-200 text-sm px-4 py-2 mt-0"
+            >
+              <div class="w-11 grid grid-nogutter">
+                <!-- Columns, we are using data view instead table, it is better handling of responsive state -->
+                <div
+                  v-for="col in columns.filter((item) => !item.fixed)"
+                  :key="col.value"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 4}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">
+                    <PAvatar
+                      v-if="col.value === 'email'"
+                      :label="(item.username ?? '').charAt(0).toUpperCase()"
+                      shape="circle"
+                      :pt="{
+                        root: {
+                          class:
+                            'surface-ground mr-2 font-semibold text-color-forest',
+                          style: {
+                            borderRadius: '50%'
+                          }
+                        }
+                      }"
+                    />
+                    <AppDropdown
+                      v-if="col.value === 'permissions'"
+                      :options="permissionStates"
+                      :model-value="actualPermissions(item)"
+                      @update:model-value="(e) => valueChanged(item, e)"
+                      :disabled="item.user.id === loggedUser.id"
+                      class="w-6 lg:w-full"
+                    />
+                    <template v-else
+                      >{{ item[col.value] }}
+                      <span
+                        v-if="
+                          col.value === 'email' &&
+                          item.user.id === loggedUser.id
+                        "
+                        >(me)</span
+                      ></template
+                    >
+                  </span>
+                </div>
+                <!-- actions -->
+              </div>
+              <div class="w-1 flex justify-content-end">
+                <PButton
+                  icon="ti ti-trash"
+                  severity="secondary"
+                  text
+                  rounded
+                  @click.stop="removeUser(item.user)"
+                  class="text-xl p-0"
+                  :style="{
+                    visibility: canRemoveUser(item.user.id)
+                      ? 'visible'
+                      : 'hidden'
+                  }"
+                />
+              </div>
+            </div>
+          </template>
+          <template #empty>
+            <div class="w-full text-center p-4">
+              <span>No members found.</span>
+            </div>
+          </template>
+        </PDataView>
+      </AppSection>
+    </AppContainer>
+    <AppContainer v-if="$slots.banner"><slot name="banner" /></AppContainer>
+  </div>
 </template>
 
 <script lang="ts">
@@ -100,11 +130,23 @@ import union from 'lodash/union'
 import { mapState, mapActions } from 'pinia'
 import { defineComponent } from 'vue'
 
+import AppContainer from '@/common/components/AppContainer.vue'
+import AppDropdown from '@/common/components/AppDropdown.vue'
+import AppSection from '@/common/components/AppSection.vue'
+import { DropdownOption } from '@/common/components/types'
 import { isAtLeastProjectRole, ProjectRole } from '@/common/permission_utils'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
 import { UserSearchParams } from '@/modules/user/types'
 
+interface ColumnItem {
+  text: string
+  value: string
+  cols?: number
+  fixed?: boolean
+  textClass?: string
+}
+
 export default defineComponent({
   props: {
     modelValue: Object
@@ -114,29 +156,29 @@ export default defineComponent({
       // search data
       isLoading: false,
       users: [],
-      header: [
+      columns: [
         {
-          text: 'User',
-          value: 'user',
-          align: 'left',
-          sortable: false
+          text: 'Email address',
+          value: 'email',
+          textClass: 'font-semibold',
+          cols: 5
         },
         {
-          text: 'Permissions',
+          text: 'Username',
+          value: 'username',
+          cols: 5
+        },
+        {
+          text: 'Project permissions',
           value: 'permissions',
-          width: 60,
-          align: 'left',
-          sortable: false,
-          tooltip: 'Has permission to change project settings'
+          cols: 2
         },
         {
           text: 'Remove',
           value: 'remove',
-          align: 'right',
-          sortable: false,
-          width: 60
+          fixed: true
         }
-      ],
+      ] as ColumnItem[],
       originalValue: null,
       clonedValue: null
     }
@@ -148,14 +190,30 @@ export default defineComponent({
       'project',
       'isProjectOwner'
     ]),
-
-    permissionStates() {
-      return ['owner', 'writer', 'reader']
+    permissionStates(): DropdownOption[] {
+      return [
+        {
+          value: 'owner',
+          label: 'Manage',
+          description: 'Can edit and remove projects in the workspace'
+        },
+        {
+          value: 'writer',
+          label: 'Write',
+          description: 'Can edit projects in the workspace'
+        },
+        {
+          value: 'reader',
+          label: 'Read only',
+          description: 'Can view projects in the workspace'
+        }
+      ]
     },
     displayedValues() {
       const { ownersnames, readersnames, writersnames } = this.modelValue
       const users = this.users.map((user) => ({
         username: user.username,
+        email: user.email,
         user,
         owner: ownersnames?.includes(user.username),
         read: readersnames?.includes(user.username),
@@ -220,10 +278,6 @@ export default defineComponent({
       )
     },
     valueChanged(user, permission) {
-      const el = this.$refs['hidden-input']
-      el.value = permission
-      el.dispatchEvent(new Event('click', {}))
-
       if (permission === 'owner') {
         this.setOwnerPermission(user)
       } else if (permission === 'writer') {
@@ -240,7 +294,7 @@ export default defineComponent({
       } else if (this.project.access.readers.includes(item.user.id)) {
         return 'reader'
       }
-      return ''
+      return undefined
     },
     removeUser(user) {
       // remove user.username from owners, writers and readers
@@ -252,7 +306,6 @@ export default defineComponent({
       })
       // emit change of value
       this.emit(this.clonedValue)
-
       this.users.splice(this.users.indexOf(user), 1)
     },
     setWritePermission(user) {
@@ -302,7 +355,7 @@ export default defineComponent({
         'readersnames'
       ])
       const current = {
-        ...pick(this.value, [
+        ...pick(this.modelValue, [
           'ownersnames',
           'writersnames',
           'readersnames',
@@ -325,69 +378,9 @@ export default defineComponent({
         JSON.stringify({ ...this.modelValue, ...modifiedValues })
       )
     }
-  }
+  },
+  components: { AppContainer, AppSection, AppDropdown }
 })
 </script>
 
-<style lang="scss" scoped>
-.no-shrink {
-  flex: 0 0 auto;
-}
-
-label {
-  font-weight: 500;
-}
-
-:deep(*) .v-data-table__overflow {
-  margin: 0.5em 0;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  padding: 0.5em;
-  background-color: #f9f9f9;
-
-  .v-datatable {
-    background-color: transparent;
-  }
-}
-
-.v-list {
-  :deep(.v-list-item) {
-    min-height: unset;
-  }
-}
-
-.div {
-  b {
-    margin-right: 10px;
-  }
-
-  span {
-    margin-right: 3px;
-    font-size: 12px;
-  }
-}
-
-.private-public-btn {
-  font-size: 12px;
-  padding-left: 20px;
-  padding-right: 20px;
-
-  span {
-    font-weight: 700;
-  }
-}
-
-.private-public-text {
-  font-size: 14px;
-}
-
-.public-private-zone {
-  margin-top: 20px;
-  margin-bottom: 20px;
-
-  button {
-    margin-right: 20px;
-    margin-top: 1px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
index 761658c9..546de507 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
@@ -19,6 +19,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
       @row-click="rowClick"
       @page="onPage"
+      :pt="{
+        loadingOverlay: {
+          class: 'bg-primary-reverse opacity-50'
+        },
+        bodyRow: {
+          class: 'text-xs hover:bg-gray-50 cursor-pointer'
+        }
+      }"
     >
       <template v-for="col in columns" :key="col.field">
         <PColumn
@@ -64,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 value: $filters.datetime(slotProps.data.updated),
                 pt: { root: { 'data-cy': 'project-form-updated' } }
               }"
-              class="text-color-secondary text-xs mt-0"
+              class="text-color-secondary mt-0"
             >
               Updated {{ $filters.timediff(slotProps.data.updated) }}
             </p>
diff --git a/web-app/packages/lib/src/modules/project/components/index.ts b/web-app/packages/lib/src/modules/project/components/index.ts
index c1cc2c97..0e109187 100644
--- a/web-app/packages/lib/src/modules/project/components/index.ts
+++ b/web-app/packages/lib/src/modules/project/components/index.ts
@@ -11,7 +11,7 @@ export { default as FileIcon } from './FileIcon.vue'
 export { default as FolderDiff } from './FolderDiff.vue'
 export { default as PermissionInfo } from './PermissionInfo.vue'
 export { default as ProjectAccessRequests } from './ProjectAccessRequests.vue'
-export { default as ProjectAccessRequestTable } from './ProjectAccessRequestTable.vue'
+export { default as AccessRequestTable } from './AccessRequestTable.vue'
 export { default as ProjectForm } from './ProjectForm.vue'
 export { default as ProjectPermissionsTemplate } from './ProjectPermissionsTemplate.vue'
 export { default as ProjectShareDialog } from './ProjectShareDialog.vue'
@@ -20,7 +20,7 @@ export { default as ProjectShareButtonTemplate } from './ProjectShareButtonTempl
 export { default as ProjectsTable } from './ProjectsTable.vue'
 export { default as ProjectsTableDataLoader } from './ProjectsTableDataLoader.vue'
 export { default as UploadPanel } from './UploadPanel.vue'
-export { default as ProjectAccessRequestTableTemplate } from './ProjectAccessRequestTableTemplate.vue'
+export { default as AccessRequestTableTemplate } from './AccessRequestTableTemplate.vue'
 export { default as FileDetailSidebar } from './FileDetailSidebar.vue'
 export { default as VersionDetailSidebar } from './VersionDetailSidebar.vue'
 export { default as CommunityBanner } from './CommunityBanner.vue'
diff --git a/web-app/packages/lib/src/modules/project/store.ts b/web-app/packages/lib/src/modules/project/store.ts
index 9aae18f2..398af288 100644
--- a/web-app/packages/lib/src/modules/project/store.ts
+++ b/web-app/packages/lib/src/modules/project/store.ts
@@ -27,9 +27,9 @@ import {
   FetchProjectVersionsPayload,
   ProjectVersion,
   ProjectVersionsPayload,
-  ProjectAccessRequest,
+  AccessRequest,
   GetUserAccessRequestsPayload,
-  GetProjectAccessRequestsPayload,
+  GetAccessRequestsPayload,
   DownloadPayload,
   DeleteProjectPayload,
   ProjectsSortingParams
@@ -45,7 +45,7 @@ export interface UploadFilesPayload {
 }
 
 export interface ProjectState {
-  accessRequests: ProjectAccessRequest[]
+  accessRequests: AccessRequest[]
   accessRequestsCount: number
   project: EnhancedProjectDetail
   projects: ProjectListItem[]
@@ -355,7 +355,7 @@ export const useProjectStore = defineStore('projectModule', {
       }
     },
 
-    async getProjectAccessRequests(payload: GetProjectAccessRequestsPayload) {
+    async getAccessRequests(payload: GetAccessRequestsPayload) {
       if (payload.namespace) {
         await this.fetchNamespaceAccessRequests({
           namespace: payload.namespace,
diff --git a/web-app/packages/lib/src/modules/project/types.ts b/web-app/packages/lib/src/modules/project/types.ts
index 96c4ca91..1a60ceb7 100644
--- a/web-app/packages/lib/src/modules/project/types.ts
+++ b/web-app/packages/lib/src/modules/project/types.ts
@@ -142,7 +142,7 @@ export interface ProjectParams {
   namespace: string
 }
 
-export interface ProjectAccessRequest {
+export interface AccessRequest {
   expire: string
   id: number
   namespace: string
@@ -152,15 +152,14 @@ export interface ProjectAccessRequest {
   user: UserSearch
 }
 
-export type ProjectAccessRequestResponse =
-  PaginatedResponse<ProjectAccessRequest>
+export type ProjectAccessRequestResponse = PaginatedResponse<AccessRequest>
 
 export interface ProjectAccessRequestParams extends PaginatedRequestParamsApi {
   project_name?: string
 }
 
 export interface AccessRequestsPayload extends PaginatedResponseDefaults {
-  accessRequests: ProjectAccessRequest[]
+  accessRequests: AccessRequest[]
 }
 
 export interface GetUserAccessRequestsPayload {
@@ -176,8 +175,7 @@ export interface AcceptProjectAccessRequestData {
   permissions: ProjectPermissionName
 }
 
-export interface GetProjectAccessRequestsPayload
-  extends GetUserAccessRequestsPayload {
+export interface GetAccessRequestsPayload extends GetUserAccessRequestsPayload {
   namespace?: string
 }
 
diff --git a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
index 1974db82..a617a598 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -23,9 +23,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </app-section>
     </app-container>
 
-    <app-container>
+    <app-container
+      v-if="
+        project &&
+        $route.name === 'project-tree' &&
+        project.permissions &&
+        project.permissions.upload
+      "
+    >
       <app-panel-toggleable :collapsed="dataTableOpen">
-        <template #header>Upload files</template>
+        <template #title>Upload files</template>
         <div class="flex flex-column lg:flex-row">
           <div
             class="flex flex-column align-items-center w-12 lg:w-6 mb-4 lg:mb-0 lg:mr-4 border-round-xl surface-ground p-4"
@@ -54,16 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </p>
           </div>
           <div class="w-12 lg:w-6 border-round-xl surface-ground">
-            <drop-area
-              v-if="
-                project &&
-                $route.name === 'project-tree' &&
-                project.permissions &&
-                project.permissions.upload
-              "
-              :location="location"
-              data-cy="project-drop-area"
-            >
+            <drop-area :location="location" data-cy="project-drop-area">
             </drop-area>
           </div>
         </div>
@@ -103,7 +101,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             <div
               v-for="item in slotProps.items"
               :key="item.id"
-              class="grid grid-nogutter px-4 py-2 mt-0 border-bottom-1 border-gray-200 text-sm hover:bg-gray-200 cursor-pointer"
+              class="grid grid-nogutter px-4 py-2 mt-0 border-bottom-1 border-gray-200 text-sm hover:bg-gray-50 cursor-pointer"
               @click.prevent="rowClick(item.link)"
             >
               <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index 85818e86..4c3cb349 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -5,65 +5,78 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-layout class="settings column">
+  <div>
+    <app-container v-if="showAccessRequests && accessRequestsCount > 0">
+      <app-section
+        ><template #title
+          >Requests
+          <span class="text-color-secondary"
+            >({{ accessRequestsCount }})</span
+          ></template
+        ><project-access-requests
+      /></app-section>
+    </app-container>
     <slot
       name="permissions"
       :settings="settings"
       :key-prop="key"
       :save-project="saveProject"
     ></slot>
-    <project-access-requests v-if="showAccessRequests" />
-    <v-layout class="public-private-zone">
-      <v-container>
-        <v-row>
-          <v-col>
-            <span class="private-public-text" v-if="settings.access.public">
-              <b>This is public project</b><br />
-              <span class="description-text"
+
+    <app-container>
+      <app-panel-toggleable>
+        <template #header
+          ><h3 class="font-semibold text-color text-sm">Advanced</h3></template
+        >
+        <div class="flex align-items-center text-sm py-2">
+          <div class="flex-grow-1">
+            <template v-if="settings.access.public">
+              <p class="font-semibold py-1 m-0">This is public project</p>
+              <span class="text-xs opacity-80"
                 >Hide this project from everyone.</span
               >
-            </span>
-            <span class="private-public-text" v-else>
-              <b>This is private project</b><br />
-              <span class="description-text"
+            </template>
+            <template v-else>
+              <p class="font-semibold py-1 m-0">This is private project</p>
+              <span class="text-xs opacity-80"
                 >Make this project visible to anyone.</span
               >
-            </span>
-          </v-col>
-          <v-col>
-            <v-btn
+            </template>
+          </div>
+          <div class="flex-shrink-0">
+            <PButton
               @click="confirmPublicPrivate()"
-              class="private-public-btn"
-              variant="outlined"
+              severity="secondary"
+              outlined
             >
-              <span v-if="settings.access.public">Make private</span>
-              <span v-else>Make public</span>
-            </v-btn>
-          </v-col>
-        </v-row>
-        <slot name="operations"></slot>
-        <v-row
+              <template v-if="settings.access.public">Make private</template>
+              <template v-else>Make public</template>
+            </PButton>
+          </div>
+        </div>
+        <div
+          class="flex align-items-center text-sm py-2"
+          v-if="$slots.operations"
+        >
+          <slot name="operations"></slot>
+        </div>
+        <div
+          class="flex align-items-center text-sm py-2"
           v-if="project && project.permissions && project.permissions.delete"
         >
-          <v-col>
-            <span class="private-public-text">
-              <b>Delete project</b><br />
-              <span class="description-text">All data will be lost</span></span
-            >
-          </v-col>
-          <v-col self-align="end">
-            <v-btn
-              @click="confirmDelete"
-              class="private-public-btn"
-              variant="outlined"
+          <div class="flex-grow-1">
+            <p class="font-semibold m-0 py-1">Delete project</p>
+            <span class="text-xs opacity-80">All data will be lost</span>
+          </div>
+          <div class="flex-shrink-0">
+            <PButton @click="confirmDelete" severity="danger">
+              Delete project</PButton
             >
-              <span>Delete</span>
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-layout>
-  </v-layout>
+          </div>
+        </div>
+      </app-panel-toggleable>
+    </app-container>
+  </div>
 </template>
 
 <script lang="ts">
@@ -71,7 +84,11 @@ import debounce from 'lodash/debounce'
 import { mapActions, mapState } from 'pinia'
 import { PropType, defineComponent } from 'vue'
 
+import AppContainer from '@/common/components/AppContainer.vue'
+import AppPanelToggleable from '@/common/components/AppPanelToggleable.vue'
+import AppSection from '@/common/components/AppSection.vue'
 import { getErrorMessage } from '@/common/error_utils'
+import { ConfirmDialogProps, ProjectAccess } from '@/modules'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 import { useNotificationStore } from '@/modules/notification/store'
@@ -82,7 +99,10 @@ import { useUserStore } from '@/modules/user/store'
 export default defineComponent({
   name: 'ProjectSettingsViewTemplate',
   components: {
-    ProjectAccessRequests
+    ProjectAccessRequests,
+    AppContainer,
+    AppSection,
+    AppPanelToggleable
   },
   props: {
     namespace: String,
@@ -99,13 +119,13 @@ export default defineComponent({
   },
   data() {
     return {
-      settings: {},
+      settings: {} as { access?: ProjectAccess },
       key: 0
     }
   },
   computed: {
     ...mapState(useUserStore, ['loggedUser']),
-    ...mapState(useProjectStore, ['project'])
+    ...mapState(useProjectStore, ['project', 'accessRequestsCount'])
   },
   watch: {
     project: {
@@ -133,7 +153,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useProjectStore, ['deleteProject', 'saveProjectSettings']),
-    ...mapActions(useDialogStore, ['show']),
+    ...mapActions(useDialogStore, { showDialog: 'show' }),
     ...mapActions(useNotificationStore, ['error']),
 
     saveProject(newSettingsAccessValues) {
@@ -161,10 +181,13 @@ export default defineComponent({
     }, 2000),
     togglePublicPrivate() {
       this.settings.access.public = !this.settings.access.public
+      this.saveSettings(this.settings)
     },
     confirmDelete() {
-      const props = {
-        text: `Are you sure to delete project: ${this.projectName}? All files will be lost. <br> <br> Type in project name to confirm:`,
+      const props: ConfirmDialogProps = {
+        text: `Are you sure to delete project: ${this.projectName}?`,
+        description: 'All files will be lost. Type in project name to confirm:',
+        severity: 'danger',
         confirmText: 'Delete',
         confirmField: {
           label: 'Project name',
@@ -174,24 +197,39 @@ export default defineComponent({
       const listeners = {
         confirm: () => this.onDeleteProject()
       }
-      this.show({
+      this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { maxWidth: 500 } }
+        params: {
+          props,
+          listeners,
+          dialog: { header: 'Confirm delete project' }
+        }
       })
     },
     confirmPublicPrivate() {
-      const props = {
+      const props: ConfirmDialogProps = {
         text: `Do you really want to make this project ${
           this.settings.access.public ? 'private' : 'public'
         }?`,
-        confirmText: 'Yes'
+        confirmText: 'Yes',
+        description: this.settings.access.public
+          ? 'Once you make your project private it can not be accessed by the community.'
+          : 'Once you make your project public it can be accessed by the community.'
       }
       const listeners = {
         confirm: () => this.togglePublicPrivate()
       }
-      this.show({
+      this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { maxWidth: 500 } }
+        params: {
+          props,
+          listeners,
+          dialog: {
+            header: this.settings.access.public
+              ? 'Private project'
+              : 'Public project'
+          }
+        }
       })
     },
     onDeleteProject() {
@@ -203,14 +241,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.settings {
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-}
-
-.actions {
-  flex: 0 0 auto;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
index 3e78e39d..1bc3bff0 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             <!-- Visible on lg breakpoint > -->
             <div
               v-for="col in columns.filter((item) => !item.fixed)"
-              :class="['text-xs hidden lg:flex', `col-${col.cols ?? 1}`]"
+              :class="['text-xs hidden lg:flex', `col-${col.cols ?? 2}`]"
               :key="col.text"
             >
               {{ col.text }}
@@ -49,37 +49,29 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <div
             v-for="item in slotProps.items"
             :key="item.id"
-            class="flex align-items-center hover:bg-gray-200 cursor-pointer border-bottom-1 border-gray-200 text-sm px-3 py-2 mt-0"
+            class="flex align-items-center hover:bg-gray-50 cursor-pointer border-bottom-1 border-gray-200 text-sm px-3 py-2 mt-0"
             :style="[rowStyle(item)]"
             @click.prevent="!item.disabled && rowClick(item.name)"
           >
             <div class="flex-grow-1 grid grid-nogutter w-11">
               <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
-              <template
+              <div
                 v-for="col in columns.filter((item) => !item.fixed)"
                 :key="col.value"
+                :class="[
+                  'flex flex-column justify-content-center col-12',
+                  `lg:col-${col.cols ?? 2}`
+                ]"
               >
-                <div
-                  v-if="col.value === 'name'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
-                  ]"
-                >
+                <template v-if="col.value === 'name'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">
                     {{ item.name }}
                   </span>
-                </div>
-                <div
-                  v-else-if="col.value === 'created'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'created'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
@@ -91,76 +83,46 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   >
                     {{ $filters.timediff(item.created) }}
                   </span>
-                </div>
-                <div
-                  v-else-if="col.value === 'changes.added'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'changes.added'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">{{
                     item.changes.added.length
                   }}</span>
-                </div>
-                <div
-                  v-else-if="col.value === 'changes.updated'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'changes.updated'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">
                     {{ item.changes.updated.length }}
                   </span>
-                </div>
-                <div
-                  v-else-if="col.value === 'changes.removed'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'changes.removed'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">
                     {{ item.changes.removed.length }}
                   </span>
-                </div>
-                <div
-                  v-else-if="col.value === 'project_size'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'project_size'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">{{
                     $filters.filesize(item.project_size)
                   }}</span>
-                </div>
-                <div
-                  v-else
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
-                  ]"
-                >
+                </template>
+                <template v-else>
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">{{ item[col.value] }}</span>
-                </div>
-              </template>
+                </template>
+              </div>
             </div>
             <!-- actions -->
             <div class="flex w-1 flex-shrink-0 justify-content-end">
@@ -252,26 +214,24 @@ export default defineComponent({
         {
           text: 'Version',
           value: 'name',
-          textClass: 'font-semibold white-space-normal'
+          textClass: 'font-semibold white-space-normal',
+          cols: 1
         },
-        { text: 'Created', value: 'created', cols: 2 },
-        { text: 'Author', value: 'author', cols: 2 },
+        { text: 'Created', value: 'created' },
+        { text: 'Author', value: 'author' },
         {
           text: 'Files added',
-          value: 'changes.added',
-          cols: 2
+          value: 'changes.added'
         },
         {
           text: 'Files edited',
-          value: 'changes.updated',
-          cols: 2
+          value: 'changes.updated'
         },
         {
           text: 'Files removed',
-          value: 'changes.removed',
-          cols: 2
+          value: 'changes.removed'
         },
-        { text: 'Size', value: 'project_size' },
+        { text: 'Size', value: 'project_size', cols: 1 },
         { text: '', value: 'archived', fixed: true }
       ].map((item) => ({
         ...item,
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index ba97df00..a5714817 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <PButton
             severity="secondary"
             outlined
-            @click="unsubscribeDialog"
+            @click="leaveDialog"
             data-cy="project-leave-btn"
             icon="ti ti-logout"
             label="Leave project"
@@ -68,10 +68,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           }
         }"
       >
-        <PTabPanel header="Files" :pt="ptHeaderAction"></PTabPanel>
+        <PTabPanel :header="tabs[0].header" :pt="ptHeaderAction"></PTabPanel>
         <slot name="map.tab" :ptHeaderAction="ptHeaderAction" />
-        <PTabPanel header="History" :pt="ptHeaderAction"></PTabPanel>
-        <PTabPanel header="Settings" :pt="ptHeaderAction"></PTabPanel>
+        <!-- Render other tabs with header -->
+        <PTabPanel
+          v-for="tab in tabs.slice(1).filter((item) => item.header)"
+          :header="tab.header"
+          :pt="ptHeaderAction"
+          :key="tab.route"
+        ></PTabPanel>
       </PTabView>
       <router-view />
     </template>
@@ -109,7 +114,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </div>
       </app-section>
     </app-container>
-
     <div slot="right">
       <upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
     </div>
@@ -124,7 +128,7 @@ import { defineComponent, PropType } from 'vue'
 import { AppContainer, AppSection } from '@/common'
 import { waitCursor } from '@/common/html_utils'
 import { USER_ROLE_NAME_BY_ROLE, UserRole } from '@/common/permission_utils'
-import { ProjectRouteName } from '@/modules'
+import { ConfirmDialogProps, ProjectRouteName } from '@/modules'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 import { useLayoutStore } from '@/modules/layout/store'
@@ -137,6 +141,7 @@ import { useUserStore } from '@/modules/user/store'
 
 interface TabItem {
   route: string
+  header?: string
 }
 
 export default defineComponent({
@@ -170,7 +175,8 @@ export default defineComponent({
   data() {
     return {
       fetchProjectsResponseStatus: null,
-      tab: null
+      tab: null,
+      value: 'read'
     }
   },
   computed: {
@@ -181,31 +187,34 @@ export default defineComponent({
     ...mapState(useUserStore, ['currentWorkspace', 'isLoggedIn']),
 
     tabs(): TabItem[] {
-      const defaultTabs: TabItem[] = [
+      const tabs: TabItem[] = [
         {
-          route: ProjectRouteName.ProjectTree
+          route: ProjectRouteName.ProjectTree,
+          header: 'Files'
         }
       ]
 
       if (this.loggedUser) {
         // If map in slots, add route to map tab
         if (this.$slots['map.tab']) {
-          defaultTabs.push({
+          tabs.push({
             route: this.mapRoute
           })
         }
         if (this.showHistory) {
-          defaultTabs.push({
-            route: ProjectRouteName.ProjectHistory
+          tabs.push({
+            route: ProjectRouteName.ProjectHistory,
+            header: 'History'
           })
         }
         if (this.showSettings) {
-          defaultTabs.push({
-            route: ProjectRouteName.ProjectSettings
+          tabs.push({
+            route: ProjectRouteName.ProjectSettings,
+            header: 'Settings'
           })
         }
       }
-      return defaultTabs
+      return tabs
     },
 
     activeTabIndex(): number {
@@ -335,12 +344,16 @@ export default defineComponent({
           waitCursor(false)
         })
     },
-    unsubscribeDialog() {
-      const projPath = `${this.namespace}/${this.projectName}`
-      const props = {
-        text: `Are you sure to leave the project <strong>${projPath}</strong>?
-        You will not have access to it anymore.`,
-        confirmText: 'OK'
+    leaveDialog() {
+      const projPath = this.showNamespace
+        ? `${this.namespace}/${this.projectName}`
+        : this.projectName
+      const props: ConfirmDialogProps = {
+        text: `Are you sure to leave the project ${projPath}?`,
+        description: 'You will not have access to it anymore.',
+        severity: 'danger',
+        confirmText: 'Yes',
+        cancelText: 'No'
       }
       const listeners = {
         confirm: async () => {
@@ -355,7 +368,7 @@ export default defineComponent({
         params: {
           props,
           listeners,
-          dialog: { maxWidth: 500, header: 'Leave project' }
+          dialog: { header: 'Leave project' }
         }
       })
     },
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
index 41229fb9..4d9385a6 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <div>
     <app-container>
       <template v-if="!namespace">
-        <app-section ground class="pb-4">
+        <app-section ground class="pb-3">
           <!-- Title with buttons -->
           <header class="flex flex-column lg:flex-row lg:align-items-center">
             <h1 class="text-3xl font-semibold">
diff --git a/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue b/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
index 77fe96e0..7df0c71c 100644
--- a/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
+++ b/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <v-card class="table" v-if="accessRequests && accessRequestsCount > 0" flat>
     <v-card-text>
       <h3>You requested access to this projects</h3>
-      <project-access-request-table />
+      <access-request-table />
     </v-card-text>
   </v-card>
 </template>
@@ -17,12 +17,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
-import ProjectAccessRequestTable from '@/modules/project/components/ProjectAccessRequestTable.vue'
+import AccessRequestTable from '@/modules/project/components/AccessRequestTable.vue'
 import { useProjectStore } from '@/modules/project/store'
 
 export default defineComponent({
   name: 'ProfileAccessRequestsRow',
-  components: { ProjectAccessRequestTable },
+  components: { AccessRequestTable },
   computed: {
     ...mapState(useProjectStore, ['accessRequests', 'accessRequestsCount'])
   },
diff --git a/web-app/packages/lib/src/modules/user/store.ts b/web-app/packages/lib/src/modules/user/store.ts
index 6d835764..048fb025 100644
--- a/web-app/packages/lib/src/modules/user/store.ts
+++ b/web-app/packages/lib/src/modules/user/store.ts
@@ -5,7 +5,7 @@
 import isObject from 'lodash/isObject'
 import { defineStore, getActivePinia } from 'pinia'
 import Cookies from 'universal-cookie'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { isNavigationFailure } from 'vue-router'
 
 import { getErrorMessage } from '@/common/error_utils'
 import { waitCursor } from '@/common/html_utils'
diff --git a/web-app/packages/lib/vite.config.ts b/web-app/packages/lib/vite.config.ts
index 40fe71a0..79c2825e 100644
--- a/web-app/packages/lib/vite.config.ts
+++ b/web-app/packages/lib/vite.config.ts
@@ -59,6 +59,7 @@ export default defineConfig(({ mode }) => ({
       transformMixedEsModules: true
     },
     // Fix for watching, if watch:lib, disable this
+    // sourcemap: mode !== 'production',
     sourcemap: false,
     lib: {
       // Could also be a dictionary or array of multiple entry points
diff --git a/web-app/yarn.lock b/web-app/yarn.lock
index cd82f626..ed86b962 100644
--- a/web-app/yarn.lock
+++ b/web-app/yarn.lock
@@ -752,10 +752,10 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue2/-/plugin-vue2-2.2.0.tgz#7453207197d6ac2b7023cedc7133b142c604c356"
   integrity sha512-1km7zEuZ/9QRPvzXSjikbTYGQPG86Mq1baktpC4sXqsXlb02HQKfi+fl8qVS703JM7cgm24Ga9j+RwKmvFn90A==
 
-"@vitejs/plugin-vue@^4.2.3":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6"
-  integrity sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==
+"@vitejs/plugin-vue@^4.6.2":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz#057d2ded94c4e71b94e9814f92dcd9306317aa46"
+  integrity sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==
 
 "@volar/language-core@1.4.1":
   version "1.4.1"