diff --git a/web-app/packages/app/components.d.ts b/web-app/packages/app/components.d.ts
index 808106d3..ad258e38 100644
--- a/web-app/packages/app/components.d.ts
+++ b/web-app/packages/app/components.d.ts
@@ -7,6 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    PDivider: typeof import('primevue/divider')['default']
+    PTabPanel: typeof import('primevue/tabpanel')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VApp: typeof import('vuetify/components')['VApp']
diff --git a/web-app/packages/app/package.json b/web-app/packages/app/package.json
index 873251cf..0b4a0579 100644
--- a/web-app/packages/app/package.json
+++ b/web-app/packages/app/package.json
@@ -38,7 +38,7 @@
     "vue": "^3.3.8",
     "vue-i18n": "^9.7.1",
     "vue-meta": "^3.0.0-alpha.10",
-    "vue-router": "^4.1.6",
+    "vue-router": "4.2.5",
     "vue-tabler-icons": "~2.20.0",
     "vuetify": "3.4.3"
   }
diff --git a/web-app/packages/app/src/App.vue b/web-app/packages/app/src/App.vue
index c1743bd0..7db90208 100644
--- a/web-app/packages/app/src/App.vue
+++ b/web-app/packages/app/src/App.vue
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         'col-12',
         'min-h-full',
         'overflow-auto',
-        drawer && !isOverlay && 'xl:col-offset-2 xl:col-10'
+        drawer && !isUnderOverlayBreakpoint && 'xl:col-offset-2 xl:col-10'
       ]"
     >
       <router-view name="header" v-slot="{ Component, route }">
@@ -37,6 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </div>
         </transition>
       </router-view>
+      <PDivider :pt="{ root: { class: 'm-0'}}"></PDivider>
       <v-card
         v-if="pingData && pingData.maintenance"
         variant="outlined"
@@ -93,7 +94,7 @@ export default defineComponent({
     ...mapState(useInstanceStore, ['pingData']),
     ...mapState(useAppStore, ['serverError']),
     ...mapState(useUserStore, ['loggedUser']),
-    ...mapState(useLayoutStore, ['drawer', 'isOverlay']),
+    ...mapState(useLayoutStore, ['drawer', 'isUnderOverlayBreakpoint']),
 
     error() {
       return this.serverError
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 8ccf5768..18875700 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <project-settings-view-template
+  Hopaa
+  <!-- <project-settings-view-template
     :namespace="namespace"
     :projectName="projectName"
     :asAdmin="asAdmin"
@@ -18,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @save-project="saveProject(...arguments)"
       />
     </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 37b06ce0..b495a588 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,7 @@ export default defineComponent({
         namespace: props.namespace,
         project: props.projectName
       }
-      const dialog = { maxWidth: 580, persistent: true }
+      const dialog = { maxWidth: 580, persistent: true, header: 'Clone project' }
       const listeners = {
         error: (error, data) => {
           formStore.handleError({
diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index 9d5917d6..0adb4523 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -5,7 +5,6 @@
 import {
   ChangePasswordView,
   FileBrowserView,
-  FileDetailView,
   FileVersionDetailView,
   ProjectVersionsView,
   VersionDetailView,
@@ -130,6 +129,23 @@ export const createRouter = (pinia: Pinia) => {
           }
         ]
       },
+      /** Redirect of unused /blob path to /tree */
+      {
+        path: '/projects/:namespace/:projectName/blob/:location?',
+        name: 'blob',
+        component: NotFoundView,
+        props: true,
+        meta: { public: true },
+        beforeEnter: (to, from, next) => {
+          next({
+            path: `/projects/${to.params.namespace}/${
+              to.params.projectName
+            }/tree${from.params.location ? `/${from.params.location}` : ''}`,
+            query: { file_path: to.params.location }
+          })
+          return
+        }
+      },
       {
         path: '/projects/:namespace/:projectName',
         name: 'project',
@@ -141,17 +157,14 @@ export const createRouter = (pinia: Pinia) => {
         props: {
           default: true
         },
+        meta: {
+          title: 'Projects'
+        },
         redirect: { name: 'project-tree' },
+
         children: [
           {
-            path: 'blob/:location*',
-            name: 'blob',
-            component: FileDetailView,
-            props: true,
-            meta: { public: true }
-          },
-          {
-            path: 'tree/:location*',
+            path: 'tree/:location?',
             name: 'project-tree',
             component: FileBrowserView,
             props: true,
@@ -170,19 +183,35 @@ export const createRouter = (pinia: Pinia) => {
             props: true
           },
           {
-            path: 'history/:version_id?',
+            path: 'history/:version_id',
             name: 'project-versions-detail',
             component: VersionDetailView,
             props: true
           },
           {
-            path: 'history/:version_id?/:path?',
+            path: 'history/:version_id/:path',
             name: 'file-version-detail',
             component: FileVersionDetailView,
             props: true,
             meta: { public: true }
           }
-        ]
+        ].map((child) => ({
+          ...child,
+          beforeEnter: (to, from, next) => {
+            // added project name to matched route
+            to.matched = to.matched.map((route) => ({
+              ...route,
+              meta: {
+                ...route.meta,
+                title:
+                  route.name === to.name
+                    ? (to.params.projectName as string)
+                    : route.meta.title
+              }
+            }))
+            next()
+          }
+        }))
       },
       {
         path: '/:pathMatch(.*)*',
diff --git a/web-app/packages/lib/.eslintrc.cjs b/web-app/packages/lib/.eslintrc.cjs
index 6eae861f..85505c99 100644
--- a/web-app/packages/lib/.eslintrc.cjs
+++ b/web-app/packages/lib/.eslintrc.cjs
@@ -21,6 +21,6 @@ module.exports = {
     'vue/no-v-for-template-key-on-child': 'error',
     'vue/no-v-for-template-key': 'off',
     'vue/no-multiple-template-root': 'off',
-    'vue/no-v-model-argument': 'off',
+    'vue/no-v-model-argument': 'off'
   }
 }
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index 5ae03a03..277dad86 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -15,11 +15,17 @@ declare module 'vue' {
     PDataView: typeof import('primevue/dataview')['default']
     PDialog: typeof import('primevue/dialog')['default']
     PDropdown: typeof import('primevue/dropdown')['default']
+    PImage: typeof import('primevue/image')['default']
+    PInlineMessage: typeof import('primevue/inlinemessage')['default']
     PInputText: typeof import('primevue/inputtext')['default']
     PMenu: typeof import('primevue/menu')['default']
     PMenubar: typeof import('primevue/menubar')['default']
     PMessage: typeof import('primevue/message')['default']
     POverlayPanel: typeof import('primevue/overlaypanel')['default']
+    PPanel: typeof import('primevue/panel')['default']
+    PSidebar: typeof import('primevue/sidebar')['default']
+    PTabPanel: typeof import('primevue/tabpanel')['default']
+    PTabView: typeof import('primevue/tabview')['default']
     PTag: typeof import('primevue/tag')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -46,20 +52,13 @@ declare module 'vue' {
     VListItem: typeof import('vuetify/components')['VListItem']
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
-    VMenu: typeof import('vuetify/components')['VMenu']
-    VPagination: typeof import('vuetify/components')['VPagination']
     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']
-    VTab: typeof import('vuetify/components')['VTab']
-    VTabs: typeof import('vuetify/components')['VTabs']
-    VTextarea: typeof import('vuetify/components')['VTextarea']
     VTextField: typeof import('vuetify/components')['VTextField']
-    VToolbar: typeof import('vuetify/components')['VToolbar']
-    VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
     VTooltip: typeof import('vuetify/components')['VTooltip']
   }
 }
diff --git a/web-app/packages/lib/package.json b/web-app/packages/lib/package.json
index b71cb5b4..937cfa99 100644
--- a/web-app/packages/lib/package.json
+++ b/web-app/packages/lib/package.json
@@ -48,7 +48,7 @@
     "primevue": "^3.43.0",
     "universal-cookie": "^4.0.4",
     "vue": "^3.3.8",
-    "vue-router": "^4.1.6",
+    "vue-router": "4.2.5",
     "vue-tabler-icons": "~2.20.0",
     "vuetify": "^3.4.3"
   },
diff --git a/web-app/packages/lib/src/assets/Icon/24/QGIS.svg b/web-app/packages/lib/src/assets/Icon/24/QGIS.svg
new file mode 100644
index 00000000..9d41a106
--- /dev/null
+++ b/web-app/packages/lib/src/assets/Icon/24/QGIS.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8762 12.798H15.4034L13.2646 10.627H10.6442V13.2121L12.8762 15.4962V12.798Z" fill="#004C45"/>
+<path d="M20.9819 18.4607L16.4729 13.8838H13.9335V16.5783L18.2544 21.0001H20.9819V18.4607Z" fill="#004C45"/>
+<path d="M13.2348 17.2445C12.8519 17.335 12.4538 17.3841 12.0431 17.3841C9.10569 17.3841 6.60749 14.904 6.60749 11.6884C6.60749 8.47279 9.0782 6.04734 12.0431 6.04734C15.008 6.04734 17.3689 8.47267 17.3689 11.6884C17.3689 12.2114 17.3055 12.7146 17.1881 13.1913L19.9069 15.9823C20.6079 14.7213 21 13.2551 21 11.6669C21 6.71085 17.1479 3 11.9881 3C6.85196 3 3 6.68648 3 11.6669C3 16.6717 6.85208 20.4315 11.9881 20.4315C13.3141 20.4315 14.5532 20.1811 15.6632 19.7255L13.2348 17.2445Z" fill="#004C45"/>
+</svg>
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index 78e7f08f..c3d25673 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -7,4 +7,15 @@ h4,
 h5,
 h6 {
   color: $primaryDarkColor;
+  font-weight: 600;
+}
+
+// Customization of infinite border of tabs using classes instead pt because, we want to have access to variables
+.p-tabview-nav-content {
+  border: $tabviewNavBorder;
+  border-width: $tabviewNavBorderWidth;
+}
+
+.text-color-forest {
+  color: $primaryDarkColor;
 }
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 87d51280..98cd5328 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
@@ -79,7 +79,7 @@ $colors: (
     --content-padding:#{$panelContentPadding};
     --inline-spacing:#{$inlineSpacing};
     --border-radius:#{$borderRadius};
-    --surface-ground: #EFF5F3;
+    --surface-ground: #{map-get($map: $colors, $key: light-green)};
     --surface-section:#ffffff;
     --surface-card:#ffffff;
     --surface-overlay:#ffffff;
@@ -94,5 +94,8 @@ $colors: (
     // TODO: use primary-classes primary-100 ... ??
     --light-green-color: #{map-get($colors, "light-green")};
     --deep-ocean-color: #{map-get($colors, "light-ocean")};
+    --negative-color: #{map-get($colors, "negative")};
+    --warning-color: #{map-get($colors, "warning")};
+    --positive-color: #{map-get($colors, "positive")};
     color-scheme: light;
 }
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
index 827de497..5e652f39 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
@@ -20,7 +20,7 @@ $buttonTextColor: $primaryDarkColor;
 
 /// Border of a button
 /// @group button
-$buttonBorder: 1px solid $primaryColor;
+$buttonBorder: 2px solid $primaryColor;
 
 /// Background of a button in hover state
 /// @group button
diff --git a/web-app/packages/lib/src/common/components/AppContainer.vue b/web-app/packages/lib/src/common/components/AppContainer.vue
index 18a1db7a..d90317a4 100644
--- a/web-app/packages/lib/src/common/components/AppContainer.vue
+++ b/web-app/packages/lib/src/common/components/AppContainer.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div class="app-container mx-auto py-4 px-4 xl:px-0">
+  <div class="app-container mx-auto py-3 px-4 xl:px-0">
     <slot></slot>
   </div>
 </template>
diff --git a/web-app/packages/lib/src/common/components/AppMenu.vue b/web-app/packages/lib/src/common/components/AppMenu.vue
new file mode 100644
index 00000000..e2126875
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/AppMenu.vue
@@ -0,0 +1,39 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <div>
+    <PButton
+      severity="secondary"
+      text
+      :icon="icon"
+      @click="toggleMenu"
+      aria-haspopup="true"
+      aria-controls="app-menu"
+      class="text-2xl"
+    />
+    <PMenu ref="menu" id="app-menu" :model="items" :popup="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MenuItem } from 'primevue/menuitem'
+import { ref } from 'vue'
+
+withDefaults(
+  defineProps<{
+    items: MenuItem[]
+    icon: string
+  }>(),
+  { icon: 'ti ti-sort-descending' }
+)
+
+const menu = ref<{ toggle: (event: Event) => void }>()
+
+function toggleMenu(event) {
+  menu.value.toggle(event)
+}
+</script>
diff --git a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
new file mode 100644
index 00000000..0a77edee
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
@@ -0,0 +1,51 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <PPanel
+    toggleable
+    v-bind="$props"
+    :pt="{
+      header(options) {
+        return {
+          class: [
+            'surface-section border-none p-4',
+            // Toggle border radius by open / closed panel
+            options.state.d_collapsed
+              ? 'border-round-2xl'
+              : 'border-round-top-2xl'
+          ]
+        }
+      },
+      content: {
+        class: 'border-none border-round-bottom-2xl p-4 pt-2'
+      }
+    }"
+  >
+    <template #header>
+      <h3 class="text-color-forest font-semibold m-0">
+        <slot name="header"></slot>
+      </h3>
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+    <template #icons>
+      <slot name="icons"></slot>
+    </template>
+    <slot></slot>
+    <template #togglericon="{ collapsed }">
+      <i
+        :class="[
+          'font-semibold text-color-forest ti',
+          collapsed ? 'ti-chevron-down' : 'ti-chevron-up'
+        ]"
+      ></i>
+    </template>
+  </PPanel>
+</template>
+
+<script lang="ts" setup></script>
diff --git a/web-app/packages/lib/src/common/components/AppSidebarRight.vue b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
new file mode 100644
index 00000000..4436ee22
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
@@ -0,0 +1,68 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <aside>
+    <PSidebar
+      v-model:visible="model"
+      :modal="true"
+      position="right"
+      class="w-11 lg:w-4"
+    >
+      <template #container="{ closeCallback }">
+        <div class="flex flex-column h-full">
+          <!-- Header -->
+          <div
+            class="flex align-items-center justify-content-between px-4 py-0"
+          >
+            <h4 class="flex-grow-1"><slot name="title"></slot></h4>
+            <div class="flex-shrink-0">
+              <slot name="headerButtons"></slot>
+              <PButton
+                type="button"
+                @click="closeCallback"
+                severity="secondary"
+                icon="ti ti-x"
+                text
+                rounded
+                class="p-1 text-2xl"
+              ></PButton>
+            </div>
+          </div>
+
+          <!-- content -->
+          <div class="overflow-y-auto p-4 pt-6">
+            <slot></slot>
+          </div>
+
+          <!-- foooter -->
+          <div class="mt-auto w-full p-4">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </template>
+    </PSidebar>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+const emitModelValue = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    return emitModelValue('update:modelValue')
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index db764d43..9c838114 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -6,6 +6,9 @@ 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 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/modules/dashboard/components/DashboardFullStorageWarningRow.vue b/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
index 70c88f54..ba12a426 100644
--- a/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
+++ b/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
@@ -24,7 +24,7 @@ export default defineComponent({
           100
       )
     }
-  },
+  }
 })
 </script>
 
diff --git a/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue b/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
index 2d918bc9..9a7a683e 100644
--- a/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
@@ -13,7 +13,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts" setup>
-import { AppContainer } from '@/common/components'
 import { DashboardFooter } from '@/modules/dashboard'
 </script>
 
diff --git a/web-app/packages/lib/src/modules/index.ts b/web-app/packages/lib/src/modules/index.ts
index 67c0624e..d375466e 100644
--- a/web-app/packages/lib/src/modules/index.ts
+++ b/web-app/packages/lib/src/modules/index.ts
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
+export * from './layout'
 export * from './app'
 export * from './form'
 export * from './project'
@@ -9,6 +10,5 @@ export * from './user'
 export * from './notification'
 export * from './dialog'
 export * from './dashboard'
-export * from './layout'
 export * from './instance'
 export * from './types'
diff --git a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
new file mode 100644
index 00000000..5965acdc
--- /dev/null
+++ b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
@@ -0,0 +1,60 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <PBreadcrumb
+    v-if="items.length > 0"
+    :model="items"
+    :pt="{
+      root: {
+        style: {
+          backgroundColor: 'transparent'
+        },
+        class: 'border-none'
+      }
+    }"
+  >
+    <template #item="{ item, props }">
+      <router-link
+        v-if="item.route"
+        v-slot="{ href, navigate }"
+        :to="{
+          params: item.params,
+          name: item.route
+        }"
+        custom
+      >
+        <a :href="href" v-bind="props.action" @click="navigate">
+          <span :class="[item.icon, 'text-color']" />
+          <span
+            :class="[
+              'opacity-80 text-sm',
+              item.active ? 'text-color-forest font-semibold' : 'text-color'
+            ]"
+            >{{ item.label }}</span
+          >
+        </a>
+      </router-link>
+    </template>
+  </PBreadcrumb>
+</template>
+
+<script setup lang="ts">
+import { MenuItem } from 'primevue/menuitem'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const items: MenuItem[] = route.matched
+  .filter((item) => item.meta.title)
+  .map<MenuItem>((item) => ({
+    label: item.meta.title,
+    active: route.name === item.name,
+    route: item.name,
+    params: route.params
+  }))
+</script>
+
+<style scoped lang="scss"></style>
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 30a7b99b..3659d06f 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
@@ -5,10 +5,22 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <PMenubar class="app-header pt-0 pb-2 px-4 justify-content-between">
+  <PMenubar
+    class="app-header pt-0 px-2"
+    :pt="{
+      start: {
+        class: 'w-10'
+      },
+      end: {
+        class: 'align-self-start lg:align-self-center'
+      }
+    }"
+  >
     <template #start
       ><slot name="menu">
-        <div class="flex align-items-center">
+        <div
+          class="flex flex-column lg:flex-row align-items-start lg:align-items-center"
+        >
           <PButton
             class="mr-2"
             icon="ti ti-menu-2"
@@ -18,24 +30,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             @click="setDrawer({ drawer: !drawer })"
             :pt="{ icon: { class: 'text-3xl' } }"
           />
-          <h1 class="text-3xl mb-0 mt-1">
-            <slot name="title">{{ title }}</slot>
-          </h1>
+          <app-breadcrumbs></app-breadcrumbs>
         </div>
       </slot>
     </template>
 
     <template #end>
-      <div class="flex align-items-center">
+      <div>
         <slot name="invitationsIcon"></slot>
         <PButton
-          plain
           text
-          type="button"
-          label="Toggle"
           aria-haspopup="true"
           aria-controls="app-header-profile"
-          class="text-color"
+          class="text-color p-0"
           @click="toggleMenu"
           size="small"
         >
@@ -90,7 +97,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { MenuItem } from 'primevue/menuitem'
 import { defineComponent, ref, PropType } from 'vue'
-import { useRoute } from 'vue-router'
+
+import { AppBreadcrumbs } from '.'
 
 import { useLayoutStore } from '@/modules/layout/store'
 import { useProjectStore } from '@/modules/project/store'
@@ -98,6 +106,9 @@ import { useUserStore } from '@/modules/user/store'
 
 export default defineComponent({
   name: 'app-header-template',
+  components: {
+    AppBreadcrumbs
+  },
   props: {
     renderNamespace: {
       type: Boolean,
@@ -109,7 +120,6 @@ export default defineComponent({
   },
   setup() {
     const menu = ref()
-    const route = useRoute()
 
     const toggleMenu = (event) => {
       menu.value.toggle(event)
@@ -117,8 +127,7 @@ export default defineComponent({
 
     return {
       menu,
-      toggleMenu,
-      title: route.meta.title ?? 'Dashboard'
+      toggleMenu
     }
   },
   computed: {
diff --git a/web-app/packages/lib/src/modules/layout/components/index.ts b/web-app/packages/lib/src/modules/layout/components/index.ts
index 2c66aaee..016e43f4 100644
--- a/web-app/packages/lib/src/modules/layout/components/index.ts
+++ b/web-app/packages/lib/src/modules/layout/components/index.ts
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
+export { default as AppBreadcrumbs } from './AppBreadcrumbs.vue'
 export { default as AppHeaderTemplate } from './AppHeaderTemplate.vue'
 export { default as PageView } from './PageView.vue'
 export { default as SideBarItem } from './SideBarItem.vue'
diff --git a/web-app/packages/lib/src/modules/layout/store.ts b/web-app/packages/lib/src/modules/layout/store.ts
index 1b58f51e..07938e45 100644
--- a/web-app/packages/lib/src/modules/layout/store.ts
+++ b/web-app/packages/lib/src/modules/layout/store.ts
@@ -5,10 +5,10 @@
 import { defineStore } from 'pinia'
 
 export interface LayoutState {
-  sidebarBreakpoint: number
+  overlayBreakpoint: number
   drawer: boolean
   /** If sidebar is in overlay mode (on mobile is flying over content) */
-  isOverlay: boolean
+  isUnderOverlayBreakpoint: boolean
   /** Parsed closed elements from local storage and pushed back to local storage */
   closedElements: string[]
 }
@@ -17,9 +17,9 @@ const CLOSED_ELEMENTS_KEY = 'mm-closed-elements'
 
 export const useLayoutStore = defineStore('layoutModule', {
   state: (): LayoutState => ({
-    sidebarBreakpoint: 992,
+    overlayBreakpoint: 992,
     drawer: false,
-    isOverlay: false,
+    isUnderOverlayBreakpoint: false,
     closedElements: []
   }),
   getters: {
@@ -47,11 +47,11 @@ export const useLayoutStore = defineStore('layoutModule', {
       const isSmall =
         window.matchMedia !== undefined
           ? window.matchMedia(
-              `screen and (max-width: ${this.sidebarBreakpoint}px)`
+              `screen and (max-width: ${this.overlayBreakpoint}px)`
             ).matches
-          : width < this.sidebarBreakpoint
+          : width < this.overlayBreakpoint
       this.drawer = !isSmall
-      this.isOverlay = isSmall
+      this.isUnderOverlayBreakpoint = isSmall
     },
     setDrawer(payload) {
       this.drawer = payload.drawer
diff --git a/web-app/packages/lib/src/modules/project/components/AccountAutocomplete.vue b/web-app/packages/lib/src/modules/project/components/AccountAutocomplete.vue
index 8df05921..330a3409 100644
--- a/web-app/packages/lib/src/modules/project/components/AccountAutocomplete.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccountAutocomplete.vue
@@ -94,11 +94,11 @@ import { defineComponent } from 'vue'
 import { SendIcon, UserIcon } from 'vue-tabler-icons'
 
 import { isValidEmail } from '@/common/text_utils'
+import { useUserStore } from '@/main'
 import { useProjectStore } from '@/modules/project/store'
 import UserSearchChip from '@/modules/user/components/UserSearchChip.vue'
 import { EMPTY_INVITE_ITEM } from '@/modules/user/constants'
 import { UserSearchParams } from '@/modules/user/types'
-import { useUserStore } from '@/main'
 
 export default defineComponent({
   name: 'AccountAutocomplete',
diff --git a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
index c40351e5..a68b9f96 100644
--- a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
@@ -5,33 +5,47 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-card v-on:keyup.enter="onCloneProject" data-cy="clone-dialog-card">
-    <v-card-title>
-      <span class="text-h5">Clone Project</span>
-    </v-card-title>
-    <v-card-text>
-      <v-text-field
+  <div class="py-4">
+    <span class="flex p-float-label w-full pb-3">
+      <PInputText
         autofocus
-        label="new project"
+        id="name"
         v-model="newProjectName"
+        type="text"
+        aria-describedby="text-error"
         data-cy="clone-dialog-project-name"
+        class="border-round-xl flex-grow-1"
+        :style="{ backgroundColor: 'var(--light-green-color)' }"
       />
-      <slot name="dynamic-items"></slot>
-    </v-card-text>
-    <v-card-actions>
-      <v-spacer />
-      <v-btn @click="close" data-cy="clone-dialog-close-btn"> Close </v-btn>
-      <v-btn
+      <label for="name">Project name</label>
+    </span>
+    <!-- Dynamic items to pass other inputs -->
+    <slot name="dynamic-items"></slot>
+
+    <!-- Footer -->
+    <div
+      class="flex flex-column lg:flex-row justify-content-between align-items-center pt-3"
+    >
+      <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"
+        >Cancel</PButton
+      >
+
+      <PButton
         id="clone-project-btn"
-        class="primary"
         :disabled="!newProjectName || !currentWorkspace"
         @click="onCloneProject"
-        data-cy="clone-dialog-clone-btn"
+        data-cy="project-form-create-btn"
+        class="flex w-12 lg:w-6 justify-content-center"
       >
-        Clone
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+        Clone project
+      </PButton>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/web-app/packages/lib/src/modules/project/components/DropArea.vue b/web-app/packages/lib/src/modules/project/components/DropArea.vue
index e6fda660..dd899ea7 100644
--- a/web-app/packages/lib/src/modules/project/components/DropArea.vue
+++ b/web-app/packages/lib/src/modules/project/components/DropArea.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div
-    class="drop-area"
+    class="drop-area h-full"
     :class="{ active: dragOver }"
     @dragover.prevent="onDragOver"
     @dragleave.capture="setOver(false)"
@@ -30,7 +30,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         multiple
       />
     </div>
-    <slot />
+    <slot>
+      <div
+        class="flex flex-column justify-content-center align-items-center text-center h-full p-4 pt-6"
+      >
+        <div
+          class="text-2xl surface-section border-circle p-4 text-color-forest w-5rem h-5rem rotate-180"
+        >
+          <i class="ti ti-download" />
+        </div>
+        <h4 class="text-lg font-semibold text-color-forest">
+          Drag and drop files
+        </h4>
+        <p class="text-sm opacity-80">
+          You can drop files from your computer to start uploading
+        </p>
+      </div>
+    </slot>
   </div>
 </template>
 
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
new file mode 100644
index 00000000..65e3214d
--- /dev/null
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -0,0 +1,245 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <div>
+    <AppSidebarRight v-model="sidebarVisible">
+      <template #title>{{ fileName }}</template>
+      <template #headerButtons
+        ><PButton
+          type="button"
+          @click="downloadFile"
+          severity="secondary"
+          icon="ti ti-download"
+          text
+          rounded
+          class="p-1 text-2xl"
+          data-cy="file-detail-download-btn"
+        ></PButton
+      ></template>
+
+      <div class="overflow-y-auto">
+        <PInlineMessage v-if="state" :severity="stateSeverity" class="w-full">
+          {{ stateText }}
+        </PInlineMessage>
+
+        <dl class="grid grid-nogutter">
+          <div class="col-12">
+            <dt class="text-xs opacity-80 mb-1">File</dt>
+            <dl>
+              <h3 class="text-2xl mt-0">
+                <FileIcon :file="{ ...file, name: fileName }" />{{ fileName }}
+              </h3>
+            </dl>
+          </div>
+          <div class="col-6">
+            <dt class="text-xs opacity-80 mb-1">Modified</dt>
+            <dl>
+              <span v-tooltip="$filters.datetime(file.mtime)">{{
+                $filters.timediff(file.mtime)
+              }}</span>
+            </dl>
+          </div>
+          <div class="col-6 flex flex-column align-items-end">
+            <dt class="text-xs opacity-80 mb-1">Size</dt>
+            <dl>
+              {{ $filters.filesize(file.size) }}
+              <span v-if="state === 'updated'"
+                >(new:
+                {{ $filters.filesize(upload.files[file.path].size) }})</span
+              >
+            </dl>
+          </div>
+        </dl>
+
+        <!--     render only if file is smaller than 100MB-->
+        <output
+          v-if="mimetype && file.size < 104857600"
+          class="flex flex-column align-items-center w-full py-4"
+        >
+          <PImage
+            :src="downloadLink"
+            v-if="mimetype.match('image')"
+            preview
+            imageClass="w-full"
+          />
+          <div
+            class="file-detail-code border-round-xl p-4 line-height-3 w-full"
+            v-else-if="mimetype.match('text')"
+          >
+            <span class="opacity-80 text-sm">{{ content }}</span>
+          </div>
+        </output>
+      </div>
+
+      <!-- foooter -->
+      <template #footer>
+        <PButton
+          v-if="project && project.permissions.upload && state !== 'removed'"
+          severity="danger"
+          @click="removeSelected"
+          class="flex justify-content-center w-full text-center"
+          data-cy="file-detail-remove-btn"
+        >
+          Delete file
+        </PButton>
+      </template>
+    </AppSidebarRight>
+  </div>
+</template>
+
+<script lang="ts">
+import Path from 'path'
+import { mapActions, mapState } from 'pinia'
+import { defineComponent } from 'vue'
+
+import FileIcon from './FileIcon.vue'
+
+import AppSidebarRight from '@/common/components/AppSidebarRight.vue'
+import { ProjectApi } from '@/modules/project/projectApi'
+import { useProjectStore } from '@/modules/project/store'
+
+enum State {
+  ADDED = 'added',
+  REMOVED = 'removed',
+  UPDATED = 'updated'
+}
+
+export default defineComponent({
+  name: 'FileDetailSidebar',
+  props: {
+    namespace: String,
+    projectName: String
+  },
+  computed: {
+    ...mapState(useProjectStore, ['project', 'uploads']),
+    upload() {
+      return this.uploads[this.project.path]
+    },
+    file() {
+      return (
+        this.project?.files[this.filePath] || this.upload?.files[this.filePath]
+      )
+    },
+    fileName() {
+      return Path.basename(this.file?.path)
+    },
+    downloadLink() {
+      // added random number to request avoid to browser caching files
+      return ProjectApi.constructDownloadProjectFileUrl(
+        this.namespace,
+        this.projectName,
+        encodeURIComponent(this.file?.path)
+      )
+    },
+    state(): State {
+      const diff = this.upload && this.upload.diff
+      if (diff) {
+        const path = this.file?.path
+        if (diff.added.includes(path)) {
+          return State.ADDED
+        } else if (diff.removed.includes(path)) {
+          return State.REMOVED
+        } else if (diff.updated.includes(path)) {
+          return State.UPDATED
+        }
+      }
+      return null
+    },
+    stateSeverity() {
+      const stateSeverity: Record<State, string> = {
+        added: 'success',
+        removed: 'error',
+        updated: 'info'
+      }
+      return this.state && stateSeverity[this.state]
+    },
+    stateText() {
+      const stateText: Record<State, string> = {
+        added: 'New file',
+        removed: 'Deleted file',
+        updated: 'Modified file'
+      }
+      return this.state && stateText[this.state]
+    },
+    filePath(): string {
+      return this.$route.query.file_path as string
+    },
+    sidebarVisible: {
+      get() {
+        return !!this.filePath
+      },
+      set(visible: boolean) {
+        if (visible) {
+          this.sidebarVisible = visible
+        } else {
+          this.$router.replace({ query: undefined })
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      previewUrl: '',
+      pageCount: 0,
+      currentPage: 0,
+      content: null,
+      mimetype: null as string
+    }
+  },
+  watch: {
+    file: {
+      immediate: true,
+      handler() {
+        if (this.file) {
+          this.txtPreview()
+          return
+        }
+        this.sidebarVisible = false
+      }
+    }
+  },
+  methods: {
+    ...mapActions(useProjectStore, ['deleteFiles']),
+    txtPreview() {
+      ProjectApi.getProjectFileByUrl(this.downloadLink).then((resp) => {
+        this.mimetype = resp.headers['content-type']
+        if (resp.headers['content-type'].match('text')) {
+          if (resp.data.constructor === Object) {
+            resp.data = JSON.stringify(resp.data)
+          }
+          this.content = resp.data.match(/^.*([^\n]*\n){0,50}/gi)[0]
+          if (!this.content) {
+            this.content = ''
+            return
+          }
+          if (this.content.length > 10000) {
+            this.content = this.content.substring(0, 10000)
+          }
+        } else {
+          this.content = null
+        }
+      })
+    },
+    removeSelected() {
+      this.deleteFiles({ files: [this.file.path] })
+    },
+    downloadFile() {
+      window.location.href = this.downloadLink
+    }
+  },
+  components: { AppSidebarRight, FileIcon }
+})
+</script>
+
+<style lang="scss" scoped>
+.file-detail {
+  &-code {
+    background-color: var(--light-green-color);
+    word-wrap: break-word;
+  }
+}
+</style>
diff --git a/web-app/packages/lib/src/modules/project/components/FileIcon.vue b/web-app/packages/lib/src/modules/project/components/FileIcon.vue
index 63ce726a..79c7a35a 100644
--- a/web-app/packages/lib/src/modules/project/components/FileIcon.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileIcon.vue
@@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div>
+  <div class="mr-2 text-lg">
     <template v-if="icon">
       <span>
-        <img :src="icon" />
+        <img :src="icon" width="24" height="24" />
       </span>
     </template>
     <template v-else>
-      <v-icon>{{ mdi }}</v-icon>
+      <i :class="['ti p-1', `ti-${mdi}`]" />
     </template>
   </div>
 </template>
@@ -28,9 +28,9 @@ import mIconZip from '@/assets/qgis-icons/mIconZip.svg'
 import providerQgis from '@/assets/qgis-icons/providerQgis.svg'
 
 const mdiByExtensionDict = {
-  jpg: 'image',
-  jpeg: 'image',
-  png: 'image'
+  jpg: 'photo',
+  jpeg: 'photo',
+  png: 'photo'
 }
 
 const iconByExtensionDict = {
@@ -74,7 +74,7 @@ export default defineComponent({
       } else {
         const splittedName = file.name.split('.')
         const ext = splittedName[splittedName.length - 1].toLowerCase()
-        mdi = mdiByExtensionDict[ext] ? mdiByExtensionDict[ext] : 'description'
+        mdi = mdiByExtensionDict[ext] ? mdiByExtensionDict[ext] : 'file'
       }
       return mdi
     }
diff --git a/web-app/packages/lib/src/modules/project/components/FileMenu.vue b/web-app/packages/lib/src/modules/project/components/FileMenu.vue
deleted file mode 100644
index bdc05c34..00000000
--- a/web-app/packages/lib/src/modules/project/components/FileMenu.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <!--      TODO: VUE 3 - replace offset-y boolean with offset number|string-->
-  <v-menu
-    v-model="showMenu"
-    :position-x="x"
-    :position-y="y"
-    position="absolute"
-    offset
-    :min-width="150"
-  >
-    <v-list>
-      <v-list-item @click="deleteFile">
-        <v-list-item-title>Delete</v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-
-
-<script lang="ts">
-import { mapActions } from 'pinia'
-import { defineComponent } from 'vue'
-
-import { useProjectStore } from '@/modules/project/store'
-
-export default defineComponent({
-  data() {
-    return {
-      showMenu: false,
-      x: 0,
-      y: 0,
-      file: null
-    }
-  },
-  methods: {
-    ...mapActions(useProjectStore, ['deleteFiles']),
-    open(evt, file) {
-      this.showMenu = true
-      this.x = evt.clientX
-      this.y = evt.clientY
-      this.file = file
-    },
-    deleteFile() {
-      this.deleteFiles({ files: [this.file.path] })
-    }
-  }
-})
-</script>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
index 5ca58d7f..9920eeb1 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
@@ -11,7 +11,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     :paginator="accessRequestsCount > 10"
     :loading="loading"
     :rows="options.itemsPerPage"
-    :rowsPerPageOptions="[10, 25, 50]"
     :totalRecords="accessRequestsCount"
     :data-key="'id'"
     :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
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 4e6948fb..2e825398 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -7,7 +7,7 @@ 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
+    <!-- <v-data-table
       :loading="loading"
       :headers="tableHeaders"
       :items="accessRequests"
@@ -129,7 +129,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </v-tooltip>
         </div>
       </template>
-    </v-data-table>
+    </v-data-table> -->
     <button
       ref="hidden-btn"
       id="accept-request-access-btn"
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue
index 9c5e7f33..091560b8 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue
@@ -5,20 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <action-button :disabled="false" @click="onShareProject" v-if="loggedUser">
-    <template #icon>
-      <plus-icon />
-    </template>
-    Share
-  </action-button>
+  <PButton
+    @click="onShareProject"
+    v-if="loggedUser"
+    icon="ti ti-send"
+    label="Share"
+    class="mr-2"
+  />
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { PlusIcon } from 'vue-tabler-icons'
 
-import ActionButton from '@/common/components/ActionButton.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 import ProjectShareDialog from '@/modules/project/components/ProjectShareDialog.vue'
 import { useUserStore } from '@/modules/user/store'
@@ -27,7 +26,6 @@ export default defineComponent({
   props: {
     allowInvite: Boolean
   },
-  components: { ActionButton, PlusIcon },
   computed: {
     ...mapState(useUserStore, ['loggedUser'])
   },
@@ -43,7 +41,8 @@ export default defineComponent({
       }
       const dialog = {
         maxWidth: 600,
-        persistent: true
+        persistent: true,
+        header: 'Share project'
       }
       this.show({
         component: ProjectShareDialog,
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
index 4dde8bec..5381a7a4 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
@@ -157,7 +157,7 @@ export default defineComponent({
           dialog,
           listeners: {
             error: (err, data) => this.$emit('new-project-error', err, data)
-          },
+          }
         }
       })
     }
diff --git a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
index 268ddd7b..8af58b2a 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
@@ -5,74 +5,63 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-card>
-    <v-toolbar density="compact" text theme="dark" color="primary">
-      <v-toolbar-title>Data Sync</v-toolbar-title>
-      <v-spacer />
-      <v-btn icon @click="resetUpload">
-        <v-icon>close</v-icon>
-      </v-btn>
-    </v-toolbar>
-
-    <v-card-text v-if="upload.diff && upload.diff.changes">
-      <v-layout class="stats-line">
-        <label>Removed files:</label>
-        <v-spacer />
-        <span class="red--text">{{ upload.diff.removed.length }}</span>
-        <v-icon size="small" color="red">delete</v-icon>
-      </v-layout>
-      <v-layout class="stats-line">
-        <label>Added files:</label>
-        <v-spacer />
-        <span class="green--text">{{ upload.diff.added.length }}</span>
-        <v-icon size="small" color="green">add_circle</v-icon>
-      </v-layout>
-      <v-layout class="stats-line">
-        <label>Modified files:</label>
-        <v-spacer />
-        <span class="orange--text">{{ upload.diff.updated.length }}</span>
-        <v-icon size="small" color="orange">edit</v-icon>
-      </v-layout>
-      <v-layout class="stats-line">
-        <label>Upload data size:</label>
-        <v-spacer />
-        <span>{{ $filters.filesize(uploadSize) }}</span>
-      </v-layout>
-    </v-card-text>
-    <v-card-text v-else-if="upload.diff">
-      All files are up to date!
-    </v-card-text>
-
-    <v-card-text v-if="remainingAnalyzingFiles">
-      <v-layout row>
-        <v-progress-circular
-          :size="30"
-          :width="3"
-          color="primary"
-          indeterminate
-        />
-        <v-spacer />
-        <span style="padding-right: 30px"
-          >Remaining files: {{ remainingAnalyzingFiles }}</span
+  <PDialog
+    v-model:visible="visible"
+    :position="isUnderOverlayBreakpoint ? 'topleft' : 'bottomright'"
+    class="upload-panel"
+    :pt="{
+      root: {
+        class: 'w-8 lg:w-3 mr-4 mb-4'
+      },
+      header: {
+        class: 'border-none py-2'
+      },
+      closeButton: {
+        class: 'text-color-forest'
+      }
+    }"
+  >
+    <template #header>
+      <p class="font-semibold">
+        Data Sync
+        <span v-if="upload.diff" class="text-color-secondary"
+          >({{ $filters.filesize(uploadSize) }})</span
         >
-      </v-layout>
-    </v-card-text>
-
-    <v-card-actions v-if="upload.diff && upload.diff.changes">
-      <v-spacer />
-      <action-button
-        id="update-files-btn"
-        @click="confirmUpload"
-        :disabled="upload.running || remainingAnalyzingFiles > 0"
+      </p>
+    </template>
+    <div v-if="upload.diff && upload.diff.changes">
+      <div
+        class="flex py-1 align-items-center"
+        v-for="key in ['added', 'updated', 'removed']"
+        :key="key"
       >
-        <template #icon>
-          <cloud-upload-icon />
-        </template>
-        Update
-      </action-button>
-      <v-spacer />
-    </v-card-actions>
-  </v-card>
+        <div
+          :class="[
+            'border-circle p-2 mr-1 upload-panel-diff-circle text-center',
+            `upload-panel-diff-circle--${key}`
+          ]"
+        >
+          <i :class="['ti', `ti-${diffIcon[key]}`]" class="text-xl"></i>
+        </div>
+        <span class="text-sm opacity-80 capitalize">{{ key }}</span>
+        <div
+          class="upload-panel-diff-count border-circle p-2 w-2rem h-2rem ml-auto text-center"
+        >
+          {{ upload.diff[key].length }}
+        </div>
+      </div>
+      <div class="py-4 w-full">
+        <PButton
+          id="update-files-btn"
+          @click="confirmUpload"
+          :disabled="upload.running || remainingAnalyzingFiles > 0"
+          class="flex justify-content-center w-full text-center"
+        >
+          Update Changes
+        </PButton>
+      </div>
+    </div>
+  </PDialog>
 </template>
 
 <script lang="ts">
@@ -80,13 +69,18 @@ import axios from 'axios'
 import pick from 'lodash/pick'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { CloudUploadIcon } from 'vue-tabler-icons'
 
-import ActionButton from '@/common/components/ActionButton.vue'
 import { CHUNK_SIZE, isVersionedFile } from '@/common/mergin_utils'
-import { ConfirmDialog, useDialogStore, useNotificationStore } from '@/modules'
+import {
+  ConfirmDialog,
+  useDialogStore,
+  useLayoutStore,
+  useNotificationStore
+} from '@/modules'
 import { useProjectStore } from '@/modules/project/store'
 
+type DiffKeys = 'removed' | 'added' | 'updated'
+
 export default defineComponent({
   data() {
     return {
@@ -96,13 +90,19 @@ export default defineComponent({
   props: {
     namespace: String
   },
-  components: {
-    ActionButton,
-    CloudUploadIcon
-  },
   computed: {
     ...mapState(useProjectStore, ['project', 'uploads']),
+    ...mapState(useLayoutStore, ['isUnderOverlayBreakpoint']),
+    visible: {
+      get() {
+        return !!this.upload
+      },
+      set(visible) {
+        if (visible) return visible
 
+        this.resetUpload()
+      }
+    },
     upload() {
       return this.uploads[this.project.path]
     },
@@ -118,6 +118,14 @@ export default defineComponent({
     remainingAnalyzingFiles() {
       const list = (this.upload && this.upload.analysingFiles) || []
       return list.length
+    },
+    diffIcon() {
+      const icons: Record<DiffKeys, string> = {
+        removed: 'trash',
+        added: 'plus',
+        updated: 'pencil'
+      }
+      return icons
     }
   },
   methods: {
@@ -233,27 +241,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.v-card {
-  min-width: 240px;
-}
-
-.stats-line {
-  align-items: center;
-  margin: 0.75em 0;
-
-  label {
-    font-weight: 500;
-    color: #555;
+.upload-panel {
+  &-diff-count {
+    background-color: var(--light-green-color);
   }
-
-  .spacer {
-    height: 1em;
-    border-bottom: 1px dotted #ccc;
-    margin: 0 0.5em;
-  }
-
-  .v-icon {
-    margin: 0 0.25em;
+  &-diff-circle {
+    &--removed {
+      background-color: var(--negative-color);
+    }
+    &--updated {
+      background-color: var(--warning-color);
+    }
+    &--added {
+      background-color: var(--positive-color);
+    }
   }
 }
 </style>
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 3f1f2889..cd2d3a5a 100644
--- a/web-app/packages/lib/src/modules/project/components/index.ts
+++ b/web-app/packages/lib/src/modules/project/components/index.ts
@@ -8,7 +8,6 @@ export { default as CloneDialogTemplate } from './CloneDialogTemplate.vue'
 export { default as DropArea } from './DropArea.vue'
 export { default as FileChangesetSummaryTable } from './FileChangesetSummaryTable.vue'
 export { default as FileIcon } from './FileIcon.vue'
-export { default as FileMenu } from './FileMenu.vue'
 export { default as FolderDiff } from './FolderDiff.vue'
 export { default as PermissionInfo } from './PermissionInfo.vue'
 export { default as ProjectAccessRequests } from './ProjectAccessRequests.vue'
@@ -22,3 +21,4 @@ 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 FileDetailSidebar } from './FileDetailSidebar.vue'
diff --git a/web-app/packages/lib/src/modules/project/types.ts b/web-app/packages/lib/src/modules/project/types.ts
index ac9a6815..4c3c05eb 100644
--- a/web-app/packages/lib/src/modules/project/types.ts
+++ b/web-app/packages/lib/src/modules/project/types.ts
@@ -116,6 +116,7 @@ export interface ProjectListItemFiles extends FileInfo, HistoryFileInfo {
 export interface ProjectDetail extends ProjectListItem {
   role: ProjectRoleName
   files?: ProjectListItemFiles[]
+  workspace_id: number
 }
 
 export interface PaginatedProjectsResponse extends PaginatedResponseDefaults {
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 b4235cf6..9afae92d 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -6,92 +6,138 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div>
-    <v-layout class="column">
-      <v-row>
-        <v-col class="pa-0">
-          <v-text-field
-            class="search"
-            placeholder="Find file"
-            append-icon="search"
-            v-model="searchFilter"
-            hide-details
-            style="padding-left: 7px; padding-bottom: 10px"
-            v-if="searchFilter !== '' || items.length > 0"
-          />
-        </v-col>
-      </v-row>
-      <v-data-table
-        v-if="
-          searchFilter !== '' ||
-          items.length ||
-          (project && !project.permissions.upload) ||
-          filter !== ''
-        "
-        class="file-table"
-        :headers="header"
-        :items="items"
-        color="primary"
-        no-data-text="No files found."
-        :items-per-page="itemPerPage"
-        :hide-default-footer="items.length <= itemPerPage"
-        :options="options"
-        v-model="selected"
-        item-key="path"
-        data-cy="file-browser-table"
-      >
-        <template #item.name="{ item }">
-          <router-link :to="item.link">
-            <file-icon :file="item" />
-            <span data-cy="file-browser-item">{{ item.name }}</span>
-          </router-link>
-          <v-spacer />
-          <folder-diff v-if="item.diffStats" v-bind="item.diffStats" />
-        </template>
-        <template #item.mtime="{ value }">
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <span v-bind="props">
-                <template v-if="value">
-                  {{ $filters.timediff(value) }}
-                </template>
-              </span>
-            </template>
-            <span>
-              <template v-if="value">
-                {{ $filters.datetime(value) }}
-              </template>
-            </span>
-          </v-tooltip>
-        </template>
-        <template #item.size="{ value }">
-          <template v-if="value !== undefined">
-            {{ $filters.filesize(value) }}
-          </template>
-        </template>
-      </v-data-table>
-      <v-card v-else style="-webkit-box-shadow: none; box-shadow: none">
-        <v-card-title style="padding-left: 0"
-          ><strong>
-            Well done! The next step is adding some data.
-          </strong></v-card-title
+    <!-- Searching -->
+    <app-container v-if="searchFilter !== '' || items.length > 0">
+      <app-section ground>
+        <div class="flex align-items-center">
+          <span class="p-input-icon-left flex-grow-1">
+            <i class="ti ti-search text-xl"></i>
+            <PInputText
+              placeholder="Search files"
+              v-model="searchFilter"
+              :pt="{ root: { class: 'border-round-xl w-full' } }"
+            />
+          </span>
+          <AppMenu :items="filterMenuItems" />
+        </div>
+      </app-section>
+    </app-container>
+
+    <app-container>
+      <app-panel-toggleable :collapsed="dataTableOpen">
+        <template #header>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"
+          >
+            <div class="w-full flex justify-content-end">
+              <PTag severity="success">Recommended</PTag>
+            </div>
+
+            <div
+              class="flex align-items-center justify-content-center text-2xl surface-section border-circle p-4 text-color-forest w-5rem h-5rem"
+            >
+              <img src="@/assets/Icon/24/QGIS.svg" width="24" height="24" />
+            </div>
+
+            <h4 class="text-lg font-semibold text-color-forest">
+              Mergin Maps plugin for QGIS
+            </h4>
+            <p class="text-sm opacity-80">
+              This is the easiest and recommended way.
+              <a
+                target="_blank"
+                class="text-color-forest font-semibold no-underline"
+                :href="docsLinkManageCreateProject"
+                >Learn how to use it.</a
+              >
+            </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>
+          </div>
+        </div>
+      </app-panel-toggleable>
+    </app-container>
+
+    <app-container v-if="dataTableOpen">
+      <app-section>
+        <PDataView
+          :value="items"
+          :data-key="'path'"
+          :paginator="items.length > itemPerPage"
+          :rows="itemPerPage"
+          :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
+          data-cy="file-browser-table"
+          :pt="{
+            header: {
+              class: 'px-4 py-2'
+            }
+          }"
         >
-        <v-card-text style="padding-left: 0">
-          There are two options: <br />
-          <br />
-          1. Use the Mergin Maps plugin for QGIS to upload data. This is the
-          easiest and <strong>recommended</strong> way. See the documentation on
-          <a target="_blank" :href="docsLinkManageCreateProject"
-            >how to install and use the plugin</a
-          >. <br />
-          <br />
-          2. Drag and drop files from your computer to the lower part of this
-          page. This option is convenient if your project files are already
-          fully prepared and only need uploading.
-        </v-card-text>
-      </v-card>
-      <v-spacer />
-      <file-menu ref="menu" />
-    </v-layout>
+          <template #header>
+            <div class="grid grid-nogutter">
+              <!-- Visible on lg breakpoint > -->
+              <div
+                v-for="col in columns"
+                class="col-4 text-xs hidden lg:flex"
+                :key="col.text"
+              >
+                {{ col.text }}
+              </div>
+              <!-- else -->
+              <div class="col-12 flex lg:hidden">Files</div>
+            </div>
+          </template>
+          <template #list="slotProps">
+            <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"
+              @click.prevent="rowClick(item.link)"
+            >
+              <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
+              <div class="flex align-items-center col-12 lg:col-4">
+                <p class="font-semibold">
+                  <file-icon :file="item" />{{ item.name }}
+                </p>
+              </div>
+              <div class="flex align-items-center col-12 lg:col-4">
+                <span
+                  v-if="item.mtime"
+                  v-tooltip.bottom="{ value: $filters.datetime(item.mtime) }"
+                  class="opacity-80"
+                >
+                  {{ $filters.timediff(item.mtime) }}
+                </span>
+              </div>
+              <div class="flex align-items-center col-12 lg:col-4">
+                <span class="opacity-80" v-if="item.size">{{
+                  $filters.filesize(item.size)
+                }}</span>
+              </div>
+            </div>
+          </template>
+          <template #empty>
+            <div class="w-full text-center p-4">
+              <span>No files found.</span>
+            </div>
+          </template>
+        </PDataView>
+      </app-section>
+    </app-container>
+    <!-- Sidebars -->
+    <file-detail-sidebar :namespace="namespace" :project-name="projectName" />
   </div>
 </template>
 
@@ -103,20 +149,35 @@ import orderBy from 'lodash/orderBy'
 import union from 'lodash/union'
 import Path from 'path'
 import { mapState } from 'pinia'
+import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { defineComponent } from 'vue'
 
+import {
+  AppSection,
+  AppContainer,
+  AppPanelToggleable
+} from '@/common/components'
+import AppMenu from '@/common/components/AppMenu.vue'
 import { formatDateTime } from '@/common/date_utils'
 import { dirname } from '@/common/path_utils'
 import { removeAccents } from '@/common/text_utils'
 import { useInstanceStore } from '@/modules/instance/store'
+import DropArea from '@/modules/project/components/DropArea.vue'
+import FileDetailSidebar from '@/modules/project/components/FileDetailSidebar.vue'
 import FileIcon from '@/modules/project/components/FileIcon.vue'
-import FileMenu from '@/modules/project/components/FileMenu.vue'
-import FolderDiff from '@/modules/project/components/FolderDiff.vue'
 import { useProjectStore } from '@/modules/project/store'
 
 export default defineComponent({
   name: 'FileBrowserView',
-  components: { FileIcon, FolderDiff, FileMenu },
+  components: {
+    FileIcon,
+    AppSection,
+    AppContainer,
+    AppPanelToggleable,
+    DropArea,
+    FileDetailSidebar,
+    AppMenu
+  },
   props: {
     namespace: String,
     projectName: String,
@@ -132,18 +193,16 @@ export default defineComponent({
   data() {
     return {
       options: {
-        rowsPerPage: -1
+        rowsPerPage: -1,
+        descending: false,
+        sortBy: 'name'
       },
+      // Setup this to lower number in case of testing
       itemPerPage: 50,
-      sortBy: 'name',
       searchFilter: '',
       filter: '',
       selected: [],
-      header: [
-        { text: 'Name', value: 'name' },
-        { text: 'Modified', value: 'mtime' },
-        { text: 'Size', value: 'size' }
-      ]
+      columns: [{ text: 'Name' }, { text: 'Modified' }, { text: 'Size' }]
     }
   },
   computed: {
@@ -209,14 +268,14 @@ export default defineComponent({
             removed
               .map((path) => this.project.files[path])
               .map(this.fullPathView),
-            this.sortBy,
+            this.options.sortBy,
             this.options.descending ? 'desc' : 'asc'
           )
         )
         list.push(
           ...orderBy(
             added.map((path) => this.upload.files[path]).map(this.fullPathView),
-            this.sortBy,
+            this.options.sortBy,
             this.options.descending ? 'desc' : 'asc'
           )
         )
@@ -225,7 +284,7 @@ export default defineComponent({
             updated
               .map((path) => this.upload.files[path])
               .map(this.fullPathView),
-            this.sortBy,
+            this.options.sortBy,
             this.options.descending ? 'desc' : 'asc'
           )
         )
@@ -249,11 +308,12 @@ export default defineComponent({
           escapeRegExp(removeAccents(this.searchFilter)),
           'i'
         )
+        // TODO: Replace with DataView sorting instead this order_by with lodash
         return orderBy(
           this.filterByLocation(this.projectFiles).filter(
             (f) => f.path.search(regex) !== -1
           ),
-          this.sortBy,
+          this.options.sortBy,
           this.options.descending ? 'desc' : 'asc'
         )
       }
@@ -262,21 +322,21 @@ export default defineComponent({
         items.push({
           name: '..',
           type: 'folder',
-          link: Path.normalize(Path.join(this.$route.path, '@/')),
+          link: Path.normalize(Path.join(this.$route.path, '..')),
           mtime: ''
         })
       }
       items.push(
         ...orderBy(
           this.folders,
-          this.sortBy,
+          this.options.sortBy,
           this.options.descending ? 'desc' : 'asc'
         )
       )
       items.push(
         ...orderBy(
           this.directoryFiles,
-          this.sortBy,
+          this.options.sortBy,
           this.options.descending ? 'desc' : 'asc'
         )
       )
@@ -293,6 +353,46 @@ export default defineComponent({
     },
     allSelected() {
       return this.items.every((i) => this.selected.includes(i.path))
+    },
+    dataTableOpen() {
+      return (
+        this.searchFilter !== '' ||
+        this.items.length ||
+        (this.project && !this.project.permissions.upload) ||
+        this.filter !== ''
+      )
+    },
+    filterMenuItems(): MenuItem[] {
+      return [
+        {
+          label: 'Sort by name A-Z',
+          key: 'name',
+          sortDesc: false
+        },
+        {
+          label: 'Sort by name Z-A',
+          key: 'name',
+          sortDesc: true
+        },
+        {
+          label: 'Sort by last modified',
+          key: 'mtime',
+          sortDesc: true
+        },
+        {
+          label: 'Sort by file size',
+          key: 'size',
+          sortDesc: true
+        }
+      ].map((item) => ({
+        ...item,
+        command: (e: MenuItemCommandEvent) => this.menuItemClick(e),
+        class:
+          this.options.sortBy === item.key &&
+          this.options.descending === item.sortDesc
+            ? 'bg-primary-400'
+            : ''
+      }))
     }
   },
   methods: {
@@ -361,10 +461,6 @@ export default defineComponent({
       }
       return files.map((f) => ({ ...f, name: f.path.slice(dirPrefix.length) }))
     },
-    openMenu(evt, file) {
-      // TODO: highlight
-      this.$refs.menu.open(evt, file)
-    },
     toggleAll(selected) {
       const fn = selected ? union : difference
       this.selected = fn(
@@ -373,97 +469,26 @@ export default defineComponent({
       )
     },
     changeSort(column) {
-      if (this.sortBy === column) {
+      if (this.options.sortBy === column) {
         this.options.descending = !this.options.descending
       } else {
-        this.sortBy = column
+        this.options.sortBy = column
         this.options.descending = false
       }
+    },
+    rowClick(path: string) {
+      this.$router.push({ path })
+    },
+    menuItemClick(e: MenuItemCommandEvent) {
+      this.options.sortBy = e.item.key
+      this.options.descending = e.item.sortDesc
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
-.search {
-  max-width: 260px;
-  margin: 0 0.25em;
-}
-
-.v-menu__content {
-  .v-list__tile__title {
-    text-align: right;
-  }
-}
-
-:deep(.v-data-table) {
-  tr {
-    color: #555;
-
-    &.updated {
-      color: orange;
-    }
-
-    &.removed,
-    &.rmoved {
-      color: red;
-    }
-
-    &.added,
-    &.nmoved {
-      color: green;
-    }
-
-    a,
-    .v-icon {
-      color: inherit;
-    }
-
-    .v-icon {
-      opacity: 0.75;
-    }
-  }
-
-  td {
-    text-align: left;
-
-    a {
-      text-decoration: none;
-
-      .v-icon {
-        line-height: 18px;
-        margin-right: 4px;
-      }
-    }
-  }
-
-  th,
-  tr {
-    min-width: 0;
-
-    .v-input--checkbox {
-      opacity: 0.75;
-      align-items: flex-end;
-      justify-content: flex-end;
-
-      .v-input--selection-controls__input {
-        margin: 0;
-      }
-
-      .v-icon {
-        pointer-events: none;
-      }
-    }
-  }
-}
-
-.v-speed-dial {
-  position: absolute;
-}
-
-.v-data-table {
-  :deep(.v-data-footer__select) {
-    display: none;
-  }
+.p-dataview-content div {
+  word-break: break-word;
 }
 </style>
diff --git a/web-app/packages/lib/src/modules/project/views/FileDetailView.vue b/web-app/packages/lib/src/modules/project/views/FileDetailView.vue
deleted file mode 100644
index e30678c5..00000000
--- a/web-app/packages/lib/src/modules/project/views/FileDetailView.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <div>
-    <div v-if="state" v-text="stateText" :class="['status', colors[state]]" />
-    <action-button
-      v-if="project && project.permissions.upload && state !== 'removed'"
-      @click="removeSelected"
-      data-cy="file-detail-remove-btn"
-      style="float: right"
-      colorClass="red"
-    >
-      <template #icon>
-        <trash-icon />
-      </template>
-      Remove file
-    </action-button>
-    <action-button
-      :disabled="state === 'added'"
-      :href="downloadLink"
-      data-cy="file-detail-download-btn"
-      style="float: right"
-    >
-      <template #icon>
-        <download-icon />
-      </template>
-      Download File
-    </action-button>
-
-    <v-list lines="two" subheader>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Name</v-list-item-title>
-          <v-list-item-subtitle>{{ filename }}</v-list-item-subtitle>
-        </div>
-      </v-list-item>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Size</v-list-item-title>
-          <v-list-item-subtitle>
-            {{ $filters.filesize(file.size) }}
-            <span v-if="state === 'updated'"
-              >(new:
-              {{ $filters.filesize(upload.files[file.path].size) }})</span
-            >
-          </v-list-item-subtitle>
-        </div>
-      </v-list-item>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Last update</v-list-item-title>
-          <v-list-item-subtitle
-            >{{ $filters.datetime(file.mtime) }} ({{
-              $filters.timediff(file.mtime)
-            }})
-          </v-list-item-subtitle>
-        </div>
-      </v-list-item>
-    </v-list>
-
-    <!--     render only if file is smaller than 100MB-->
-    <div class="container" v-if="mimetype && file.size < 104857600">
-      <output>
-        <img :src="downloadLink" v-if="mimetype.match('image')" />
-        <v-textarea
-          v-else-if="mimetype.match('text')"
-          :auto-grow="true"
-          :readonly="true"
-          :model-value="content"
-          variant="solo-filled"
-        >
-        </v-textarea>
-      </output>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import Path from 'path'
-import { mapActions, mapState } from 'pinia'
-import { defineComponent } from 'vue'
-// import pdf from 'vue-pdf'
-import { DownloadIcon, TrashIcon } from 'vue-tabler-icons'
-
-import ActionButton from '@/common/components/ActionButton.vue'
-import { ProjectApi } from '@/modules/project/projectApi'
-import { useProjectStore } from '@/modules/project/store'
-
-const Colors = {
-  added: 'green',
-  removed: 'red',
-  updated: 'orange'
-}
-
-export default defineComponent({
-  name: 'FileInfoView',
-  props: {
-    namespace: String,
-    projectName: String,
-    location: {
-      type: String,
-      default: ''
-    }
-  },
-  components: {
-    // pdf,
-    ActionButton,
-    DownloadIcon,
-    TrashIcon
-  },
-  computed: {
-    ...mapState(useProjectStore, ['project', 'uploads']),
-    upload() {
-      return this.uploads[this.project.path]
-    },
-    file() {
-      if (!this.project.files[this.location]) {
-        this.$router.replace({
-          name: 'project',
-          namespace: this.namespace,
-          projectName: this.projectName
-        })
-      }
-      return (
-        this.project.files[this.location] || this.upload.files[this.location]
-      )
-    },
-    filename() {
-      return Path.basename(this.file.path)
-    },
-    downloadLink() {
-      // added random number to request avoid to browser caching files
-      return ProjectApi.constructDownloadProjectFileUrl(
-        this.namespace,
-        this.projectName,
-        encodeURIComponent(this.file.path)
-      )
-    },
-    state() {
-      const diff = this.upload && this.upload.diff
-      if (diff) {
-        const path = this.file.path
-        if (diff.added.includes(path)) {
-          return 'added'
-        } else if (diff.removed.includes(path)) {
-          return 'removed'
-        } else if (diff.updated.includes(path)) {
-          return 'updated'
-        }
-      }
-      return null
-    },
-    stateText() {
-      return (
-        {
-          added: 'New file',
-          removed: 'Deleted file',
-          updated: 'Modified file'
-        }[this.state] || this.state
-      )
-    },
-    colors() {
-      return Colors
-    }
-  },
-  data() {
-    return {
-      previewUrl: '',
-      pageCount: 0,
-      currentPage: 0,
-      content: null,
-      mimetype: null as string
-    }
-  },
-  created() {
-    this.txtPreview()
-  },
-  methods: {
-    ...mapActions(useProjectStore, ['deleteFiles']),
-    txtPreview() {
-      ProjectApi.getProjectFileByUrl(this.downloadLink).then((resp) => {
-        this.mimetype = resp.headers['content-type']
-        if (resp.headers['content-type'].match('text')) {
-          if (resp.data.constructor === Object) {
-            resp.data = JSON.stringify(resp.data)
-          }
-          this.content = resp.data.match(/^.*([^\n]*\n){0,50}/gi)[0]
-          if (!this.content) {
-            this.content = ''
-            return
-          }
-          if (this.content.length > 10000) {
-            this.content = this.content.substring(0, 10000)
-          }
-        } else {
-          this.content = null
-        }
-      })
-    },
-    removeSelected() {
-      this.deleteFiles({ files: [this.file.path] })
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.status {
-  margin: 0.5em auto;
-  padding: 0 1em;
-  text-align: center;
-  color: #fff;
-  height: 2em;
-  line-height: 2em;
-}
-
-.v-list {
-  :deep(.v-list__tile) {
-    font-size: 14px;
-    color: #444;
-
-    .v-list__tile__title {
-      font-weight: 500;
-    }
-  }
-}
-
-output img {
-  max-width: 100%;
-}
-</style>
diff --git a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
index 2a43c9af..d374e8fb 100644
--- a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
@@ -132,7 +132,7 @@ export default defineComponent({
                         typeof row.old === 'undefined' ? 'N/A' : row.old
                     } else {
                       data.values[columnIdentifier] =
-                        (typeof row.old === 'undefined' ? 'N/A' : row.old) +
+                        (typeof row.old === 'undefinedchangesets/' ? 'N/A' : row.old) +
                         ' ' +
                         String.fromCharCode(parseInt('2794', 16)) +
                         ' ' +
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 0dc8f133..5c473119 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -200,7 +200,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
 .settings {
   display: flex;
   flex-direction: column;
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 6c2c8341..0ca84721 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
@@ -5,172 +5,204 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div>
-    <v-layout align-center shrink>
-      <v-spacer />
-    </v-layout>
-    <div class="text-center">
-      <v-pagination
-        v-if="showPagination && options && versionsCount > options.itemsPerPage"
-        v-model="options.page"
-        :length="Math.ceil(versionsCount / options.itemsPerPage)"
-        :total-visible="2"
-        circle
-        color="primary"
-        @update:model-value="fetchPage"
-      ></v-pagination>
-    </div>
-    <v-data-table
-      :headers="headers"
-      :items="items"
-      item-key="name"
-      :options="options"
-      :server-items-length="versionsCount"
-      v-on:update:options="paginating"
-      :hide-default-footer="true"
-      :loading="versionsLoading"
-      no-data-text="No project history"
-      color="primary"
-      data-cy="project-verision-table"
-    >
-      <!-- headers -->
-      <template v-slot:header.changes.added="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Added</span>
-        </v-tooltip>
-      </template>
-      <template v-slot:header.changes.removed="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Deleted</span>
-        </v-tooltip>
-      </template>
-      <template v-slot:header.changes.updated="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Modified</span>
-        </v-tooltip>
-      </template>
-      <!-- data -->
-      <template v-slot:item.created="{ item }">
-        <span>
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <span v-bind="props" :style="[rowStyle[item]]">{{
-                $filters.timediff(item.created)
-              }}</span>
-            </template>
-            <span>{{ $filters.datetime(item.created) }}</span>
-          </v-tooltip>
-        </span>
-      </template>
-      <template v-slot:item.author="{ item }"
-        ><span :style="[rowStyle(item)]">{{ item.author }}</span></template
+  <app-container>
+    <app-section>
+      <PDataView
+        :value="items"
+        :data-key="'name'"
+        :paginator="
+          showPagination && options && versionsCount > options.itemsPerPage
+        "
+        :rows="options.itemsPerPage"
+        :totalRecords="versionsCount"
+        :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
+        data-cy="project-verision-table"
+        lazy
+        @page="onPage"
+        :pt="{
+          header: {
+            // small header
+            class: 'px-3 py-2'
+          }
+        }"
       >
-      <template v-slot:item.name="{ item }">
-        <span data-cy="project-versions-version">
-          <router-link
+        <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 ?? 1}`]"
+              :key="col.text"
+            >
+              {{ col.text }}
+            </div>
+            <!-- else -->
+            <div class="col-12 flex lg:hidden">Versions</div>
+          </div>
+        </template>
+
+        <!-- table rows -->
+        <template #list="slotProps">
+          <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"
             :style="[rowStyle(item)]"
-            :to="
-              item.disabled
-                ? ''
-                : {
-                    name: 'project-versions-detail',
-                    params: { version_id: item.name }
-                  }
-            "
           >
-            {{ item.name }}
-          </router-link>
-        </span>
-      </template>
-      <template v-slot:item.changes.added="{ item }">
-        <span>
-          <span :style="[rowStyle(item)]" class="green--text">{{
-            item.changes.added.length
-          }}</span>
-        </span>
-      </template>
-      <template v-slot:item.changes.removed="{ item }">
-        <span>
-          <span :style="[rowStyle(item)]" class="red--text">{{
-            item.changes.removed.length
-          }}</span>
-        </span>
-      </template>
-      <template v-slot:item.changes.updated="{ item }">
-        <span>
-          <span :style="[rowStyle(item)]" class="orange--text">{{
-            item.changes.updated.length
-          }}</span>
-        </span>
-      </template>
-      <template v-slot:item.project_size="{ item }">
-        <span :style="[rowStyle(item)]">
-          {{ $filters.filesize(item.project_size) }}
-        </span>
-      </template>
-      <template v-slot:item.archived="{ item }">
-        <v-tooltip location="top">
-          <template v-slot:activator="{ props }">
-            <v-btn
-              icon
-              v-bind="props"
-              :disabled="item.disabled"
-              :style="[rowStyle(item)]"
-              data-cy="project-versions-download-btn"
-              @click="
-                downloadArchive({
-                  url:
-                    '/v1/project/download/' +
-                    namespace +
-                    '/' +
-                    projectName +
-                    '?version=' +
-                    item.name +
-                    '&format=zip'
-                })
-              "
+            <div
+              class="flex-grow-1 grid grid-nogutter w-11"
+              @click.prevent="!item.disabled && rowClick(item.name)"
             >
-              <v-icon>archive</v-icon>
-            </v-btn>
-          </template>
-          <span>Download Project Version {{ item.name }} (ZIP)</span>
-        </v-tooltip>
-      </template>
-    </v-data-table>
-    <div class="text-center">
-      <v-pagination
-        v-if="showPagination && options && versionsCount > options.itemsPerPage"
-        v-model="options.page"
-        :length="Math.ceil(versionsCount / options.itemsPerPage)"
-        :total-visible="7"
-        circle
-        color="primary"
-        @update:model-value="fetchPage"
-      ></v-pagination>
-    </div>
-    <slot name="table-footer"></slot>
-  </div>
+              <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
+              <template
+                v-for="col in columns.filter((item) => !item.fixed)"
+                :key="col.value"
+              >
+                <div
+                  v-if="col.value === 'name'"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 1}`
+                  ]"
+                >
+                  <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}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span
+                    v-tooltip.bottom="{
+                      value: $filters.datetime(item.created)
+                    }"
+                    :class="col.textClass"
+                  >
+                    {{ $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}`
+                  ]"
+                >
+                  <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}`
+                  ]"
+                >
+                  <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}`
+                  ]"
+                >
+                  <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}`
+                  ]"
+                >
+                  <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}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">{{ item[col.value] }}</span>
+                </div>
+              </template>
+            </div>
+            <!-- actions -->
+            <div class="flex w-1 flex-shrink-0 justify-content-end">
+              <PButton
+                icon="ti ti-download"
+                severity="secondary"
+                text
+                :disabled="item.disabled"
+                :style="[rowStyle(item)]"
+                data-cy="project-versions-download-btn"
+                @click="
+                  downloadArchive({
+                    url:
+                      '/v1/project/download/' +
+                      namespace +
+                      '/' +
+                      projectName +
+                      '?version=' +
+                      item.name +
+                      '&format=zip'
+                  })
+                "
+              />
+            </div>
+          </div>
+        </template>
+        <template #empty>
+          <div class="w-full text-center p-4">
+            <span>No versions found.</span>
+          </div>
+        </template>
+      </PDataView>
+      <slot name="table-footer"></slot>
+    </app-section>
+  </app-container>
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
+import { DataViewPageEvent } from 'primevue/dataview'
 import { defineComponent, PropType } from 'vue'
 
+import { AppSection, AppContainer } from '@/common/components'
 import {
   FetchProjectVersionsParams,
   ProjectVersion,
@@ -178,8 +210,20 @@ import {
 } from '@/modules'
 import { useProjectStore } from '@/modules/project/store'
 
+interface ColumnItem {
+  text: string
+  value: string
+  cols?: number
+  fixed?: boolean
+  textClass?: string
+}
+
 export default defineComponent({
   name: 'ProjectVersionsViewTemplate',
+  components: {
+    AppSection,
+    AppContainer
+  },
   props: {
     projectName: String,
     namespace: String,
@@ -196,34 +240,35 @@ export default defineComponent({
   },
   data() {
     return {
-      headers: [
-        { text: 'Version', value: 'name' },
-        { text: 'Created', value: 'created' },
-        { text: 'Author', value: 'author', sortable: false },
+      columns: [
         {
-          text: 'Added',
-          value: 'changes.added',
-          icon: 'add_circle',
-          color: 'green',
-          sortable: false
+          text: 'Version',
+          value: 'name',
+          textClass: 'font-semibold white-space-normal'
         },
+        { text: 'Created', value: 'created', cols: 2 },
+        { text: 'Author', value: 'author', cols: 2 },
         {
-          text: 'Removed',
-          value: 'changes.removed',
-          icon: 'delete',
-          color: 'red',
-          sortable: false
+          text: 'Files added',
+          value: 'changes.added',
+          cols: 2
         },
         {
-          text: 'Modified',
+          text: 'Files edited',
           value: 'changes.updated',
-          icon: 'edit',
-          color: 'orange',
-          sortable: false
+          cols: 2
+        },
+        {
+          text: 'Files removed',
+          value: 'changes.removed',
+          cols: 2
         },
-        { text: 'Size', value: 'project_size', sortable: false },
-        { text: '', value: 'archived', sortable: false }
-      ],
+        { text: 'Size', value: 'project_size' },
+        { text: '', value: 'archived', fixed: true }
+      ].map((item) => ({
+        ...item,
+        textClass: item.textClass === undefined ? 'opacity-80' : item.textClass
+      })) as ColumnItem[],
       options: {
         sortDesc: [true],
         itemsPerPage: this.defaultItemsPerPage ?? 50,
@@ -249,19 +294,11 @@ export default defineComponent({
       }))
     }
   },
-  watch: {
-    $route: 'fetchVersions'
+  created() {
+    this.fetchVersions()
   },
   methods: {
     ...mapActions(useProjectStore, ['fetchProjectVersions', 'downloadArchive']),
-    paginating(options) {
-      this.options = options
-      this.fetchVersions()
-    },
-    fetchPage(number) {
-      this.options.page = number
-      this.fetchVersions()
-    },
     rowStyle(item: ProjectVersionsItem) {
       return item.disabled && { opacity: 0.5, cursor: 'not-allowed' }
     },
@@ -276,18 +313,23 @@ export default defineComponent({
         namespace: this.namespace,
         projectName: this.projectName
       })
+    },
+    onPage(e: DataViewPageEvent) {
+      this.options.page = e.page + 1
+      this.options.itemsPerPage = e.rows
+      this.fetchVersions()
+    },
+    rowClick(name: string) {
+      this.$router.push({
+        path: `history/${name}`
+      })
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
-.v-card.table {
-  min-height: unset;
-  overflow: unset;
-}
-
-.changes {
-  flex: 0.3 1 auto;
+.p-dataview-content div {
+  word-break: break-word;
 }
 </style>
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 bbd2662a..0585743d 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -5,220 +5,157 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <page-view
-    :style="`padding-left: ${
-      drawer ? 260 : 20
-    }px; overflow-y: auto; padding-right:20px; margin-right: 0px;`"
-  >
-    <div slot="left" class="panel" />
-    <v-layout class="column fill-height project-page main-content">
-      <v-card v-if="project" style="margin-bottom: 0" variant="outlined">
-        <!-- Toolbar -->
-        <v-layout class="row align-center toolbar">
-          <div class="breadcrumbs" style="font-size: 20px">
-            <v-icon color="primary">map</v-icon>
-            <span v-if="showNamespace" class="text-primary"
-              >{{ project.namespace }} /</span
-            >
-            <router-link
-              :to="{
-                name: 'project',
-                project: project
-              }"
-            >
-              <b>{{ project.name }}</b></router-link
-            >
-
-            <router-link
-              :to="{
-                name: 'project-versions-detail'
-              }"
-              v-slot="{ href, route, navigate }"
-            >
-              <span v-if="route.params.version_id">
-                &gt;
-                <a :href="href" @click="navigate">
-                  {{ route.params.version_id }}
-                </a>
-              </span>
-            </router-link>
-            <router-link
-              :to="{ name: 'file-version-detail' }"
-              v-slot="{ href, route, navigate }"
-            >
-              <span v-if="route.params.path">
-                &gt;
-                <a :href="href" @click="navigate">
-                  {{ route.params.path }}
-                </a>
-              </span>
-            </router-link>
-          </div>
-          <v-spacer />
+  <div>
+    <template v-if="project">
+      <app-container class="flex justify-content-end xl:pb-1 lg:-mb-6">
+        <!-- Z indexes based on minus margin, its not possible to add additional buttons to tab view -->
+        <div class="relative z-1">
+          <!-- Toolbar -->
           <portal-target name="project-toolbar" class="layout row shrink" />
           <slot name="shareButton">
             <project-share-button />
           </slot>
-          <action-button
+          <PButton
+            severity="secondary"
+            outlined
             @click="downloadArchive({ url: downloadUrl })"
             data-cy="project-download-btn"
-          >
-            <template #icon>
-              <download-icon />
-            </template>
-            Download
-          </action-button>
-          <action-button
+            icon="ti ti-download"
+            class="mr-2"
+            label="Download"
+          />
+          <PButton
+            severity="secondary"
+            outlined
             @click="cloneDialog"
             v-if="canCloneProject"
             data-cy="project-clone-btn"
-          >
-            <template #icon>
-              <copy-icon />
-            </template>
-            Clone
-          </action-button>
-          <action-button
+            icon="ti ti-copy"
+            label="Clone"
+            class="mr-2"
+          />
+          <PButton
+            severity="secondary"
+            outlined
             @click="unsubscribeDialog"
             data-cy="project-leave-btn"
+            icon="ti ti-logout"
+            label="Leave project"
             v-if="canLeaveProject"
-          >
-            <template #icon>
-              <square-minus-icon />
-            </template>
-            Leave project
-          </action-button>
-        </v-layout>
+          />
+        </div>
+      </app-container>
 
-        <v-card
-          class="layout column fill-height"
-          variant="flat"
-          slider-color="primary"
-        >
-          <v-card-title>
-            <v-tabs left-active v-model="tab" show-arrows>
-              <div color="primary"></div>
-              <v-tab
-                key="files"
-                :to="{
-                  name: `project-tree`,
-                  params: { namespace: namespace, projectName: project.name }
-                }"
-                >Files
-              </v-tab>
-              <slot name="map.tab" v-if="loggedUser" />
-              <v-tab
-                key="history"
-                v-if="loggedUser && showHistory"
-                :to="{
-                  name: `project-versions`,
-                  params: { namespace: namespace, projectName: project.name }
-                }"
-                >History
-              </v-tab>
-              <v-tab
-                key="settings"
-                v-if="loggedUser && showSettings"
-                :to="{
-                  name: `project-settings`,
-                  params: { namespace: namespace, projectName: project.name }
-                }"
-                >Settings
-              </v-tab>
-            </v-tabs>
-          </v-card-title>
-          <v-divider></v-divider>
-          <router-view v-if="project" class="content-container" />
-        </v-card>
-      </v-card>
-      <v-card v-else-if="fetchProjectsResponseStatus === 403">
-        <v-layout
-          class="public-private-zone"
-          style="padding-top: 25px; padding-left: 25px"
-        >
-          <v-btn id="request-access-btn" @click="createAccessRequest"
-            >Request access
-          </v-btn>
-          <span class="private-public-text">
-            <b>This is a private project</b><br />
-            You don't have permissions to access this project.
-          </span>
-        </v-layout>
-      </v-card>
-      <v-card v-else-if="fetchProjectsResponseStatus === 404">
-        <span
-          class="private-public-text"
-          style="padding-top: 25px; padding-left: 25px"
-        >
-          <b>Project not found</b><br />
-          Please check if address is written correctly
-        </span>
-      </v-card>
-      <v-card v-else-if="fetchProjectsResponseStatus === 409">
-        <span
-          class="private-public-text"
-          style="padding-top: 25px; padding-left: 25px"
-        >
-          <b>You don't have permission to access this project</b><br />
-          You already requested access
-        </span>
-      </v-card>
-      <drop-area
-        v-if="
-          project &&
-          $route.name === 'project-tree' &&
-          project.permissions &&
-          project.permissions.upload
-        "
-        class="drop-area"
-        :location="location"
-        data-cy="project-drop-area"
+      <PTabView
+        :active-index="activeTabIndex"
+        @tab-click="(e) => tabClick(e.index)"
+        :pt="{
+          root: {
+            class: 'relative z-auto'
+          },
+          nav: {
+            style: {
+              backgroundColor: 'transparent',
+              maxWidth: '1120px'
+            },
+            class: 'mx-auto border-transparent'
+          },
+          panelContainer: {
+            style: {
+              backgroundColor: 'transparent'
+            },
+            class: 'p-0'
+          }
+        }"
       >
-        <v-layout row wrap align-center class="drag-drop-text">
-          <span>
-            <v-icon>publish</v-icon> Drag & drop here or click and select
-            file(s) to upload
-          </span>
-        </v-layout>
-      </drop-area>
-    </v-layout>
-    <div slot="right" class="panel">
+        <PTabPanel header="Files" :pt="ptHeaderAction">
+          <router-view />
+        </PTabPanel>
+        <slot name="map.tab" :ptHeaderAction="ptHeaderAction" />
+        <PTabPanel
+          v-if="tabs.some((item) => item.route === `project-versions`)"
+          header="History"
+          :pt="ptHeaderAction"
+          ><router-view />
+        </PTabPanel>
+        <PTabPanel
+          v-if="tabs.some((item) => item.route === `project-settings`)"
+          header="Settings"
+          :pt="ptHeaderAction"
+          ><router-view />
+        </PTabPanel>
+      </PTabView>
+    </template>
+    <app-container v-else-if="fetchProjectsResponseStatus">
+      <app-section v-if="fetchProjectsResponseStatus === 403">
+        <div class="flex flex-column align-items-center p-4 text-center">
+          <img src="@/assets/map-circle.svg" alt="No project" />
+          <p class="font-semibold">This is a private project</p>
+          <p class="text-sm opacity-80 mt-2 mb-4">
+            You don't have permissions to access this project.
+          </p>
+          <PButton id="request-access-btn" @click="createAccessRequest"
+            >Request access</PButton
+          >
+        </div>
+      </app-section>
+      <app-section v-else-if="fetchProjectsResponseStatus === 404">
+        <div class="flex flex-column align-items-center p-4 text-center">
+          <img src="@/assets/map-circle.svg" alt="No project" />
+          <p class="font-semibold">Project not found</p>
+          <p class="text-sm opacity-80 mt-2 mb-4">
+            Please check if address is written correctly
+          </p>
+        </div>
+      </app-section>
+      <app-section v-else-if="fetchProjectsResponseStatus === 409">
+        <div class="flex flex-column align-items-center p-4 text-center">
+          <img src="@/assets/map-circle.svg" alt="No project" />
+          <p class="font-semibold">
+            You don't have permission to access this project
+          </p>
+          <p class="text-sm opacity-80 mt-2 mb-4">
+            You already requested access
+          </p>
+        </div>
+      </app-section>
+    </app-container>
+
+    <div slot="right">
       <upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
     </div>
-  </page-view>
+  </div>
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
+import { TabPanelPassThroughOptions } from 'primevue/tabpanel'
 import { defineComponent, PropType } from 'vue'
-import { CopyIcon, DownloadIcon, SquareMinusIcon } from 'vue-tabler-icons'
 
-import ActionButton from '@/common/components/ActionButton.vue'
+import { AppContainer, AppSection } from '@/common'
 import { waitCursor } from '@/common/html_utils'
 import { USER_ROLE_NAME_BY_ROLE, UserRole } from '@/common/permission_utils'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
 import { useDialogStore } from '@/modules/dialog/store'
-import PageView from '@/modules/layout/components/PageView.vue'
 import { useLayoutStore } from '@/modules/layout/store'
 import { useNotificationStore } from '@/modules/notification/store'
-import DropArea from '@/modules/project/components/DropArea.vue'
 import ProjectShareButton from '@/modules/project/components/ProjectShareButton.vue'
 import UploadPanel from '@/modules/project/components/UploadPanel.vue'
 import { ProjectApi } from '@/modules/project/projectApi'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
 
+interface TabItem {
+  route: string
+}
+
 export default defineComponent({
   name: 'ProjectViewTemplate',
   components: {
-    ActionButton,
     ProjectShareButton,
-    PageView,
     UploadPanel,
-    DropArea,
-    CopyIcon,
-    DownloadIcon,
-    SquareMinusIcon
+    AppContainer,
+    AppSection
   },
   props: {
     /**  Show namespace (ws) label in breadcrumb of page */
@@ -237,7 +174,8 @@ export default defineComponent({
     hideCloneButton: {
       type: Boolean,
       default: false
-    }
+    },
+    mapRoute: String
   },
   data() {
     return {
@@ -252,6 +190,56 @@ export default defineComponent({
     ...mapState(useProjectStore, ['isProjectOwner']),
     ...mapState(useUserStore, ['currentWorkspace', 'isLoggedIn']),
 
+    tabs(): TabItem[] {
+      const defaultTabs: TabItem[] = [
+        {
+          route: 'project-tree'
+        }
+      ]
+
+      if (this.loggedUser) {
+        // If map in slots, add route to map tab
+        if (this.$slots['map.tab']) {
+          defaultTabs.push({
+            route: this.mapRoute
+          })
+        }
+        if (this.showHistory) {
+          defaultTabs.push({
+            route: 'project-versions'
+          })
+        }
+        if (this.showSettings) {
+          defaultTabs.push({
+            route: 'project-settings'
+          })
+        }
+      }
+      return defaultTabs
+    },
+
+    activeTabIndex(): number {
+      return this.tabs.findIndex((item) => item.route === this.$route.name)
+    },
+
+    /** Rewrite of styles for TabPanels */
+    ptHeaderAction(): TabPanelPassThroughOptions {
+      return {
+        headerAction({ context }) {
+          // Custom handling of active styles for tabs
+          return {
+            style: {
+              backgroundColor: 'transparent',
+              borderBottomColor: context.active
+                ? 'var(--forest-color)'
+                : 'transparent'
+            },
+            class: ['hover:border-400', { 'text-color-forest': context.active }]
+          }
+        }
+      }
+    },
+
     canCloneProject() {
       return this.isLoggedIn && !this.hideCloneButton
     },
@@ -271,7 +259,7 @@ export default defineComponent({
         return ProjectApi.constructDownloadProjectVersionUrl(
           this.namespace,
           this.projectName,
-          this.$route.params.version_id
+          this.$route.params.version_id as string
         )
       } else {
         return this.constructDownloadProjectUrl({
@@ -372,111 +360,26 @@ export default defineComponent({
       }
       this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { maxWidth: 500 } }
+        params: {
+          props,
+          listeners,
+          dialog: { maxWidth: 500, header: 'Leave project' }
+        }
+      })
+    },
+
+    /**
+     * Handles clicking on a tab by index.
+     *
+     * @param index - The index of the clicked tab.
+     */
+    tabClick(index: number) {
+      this.$router.push({
+        name: this.tabs[index].route
       })
     }
   }
 })
 </script>
 
-<style lang="scss" scoped>
-.project-page {
-  .drop-area {
-    max-height: 100%;
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-  }
-
-  .v-card {
-    display: flex;
-    flex-direction: column;
-    margin: 0.25em;
-    overflow: unset;
-    flex-grow: 0;
-
-    .content-container {
-      padding: 0.25em 0;
-      background-color: #fff;
-      flex: 1;
-    }
-  }
-
-  small {
-    opacity: 0.6;
-    margin-bottom: 2px;
-  }
-}
-
-.theme--light.v-card.v-sheet--outlined {
-  border: none;
-}
-
-.panel {
-  flex: 1 1;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.v-card__subtitle,
-.v-card__text,
-.v-card__title {
-  padding: 16px 0 16px 0;
-}
-
-.toolbar {
-  max-width: 100%;
-  margin-right: 0;
-  margin-left: 0;
-  flex-shrink: 0;
-  flex-grow: 0;
-  padding: 0.5em 1em;
-  background-color: #fafafa;
-  border: solid #eee;
-  border-width: 1px 0;
-
-  :deep(*) {
-    .v-text-field {
-      padding-top: 0;
-      margin-top: 0;
-      font-size: 15px;
-    }
-
-    .v-btn {
-      padding: 0 0.5em;
-      margin: 0.25em;
-      min-width: 2em;
-    }
-  }
-}
-
-.breadcrumbs {
-  color: #777;
-
-  a {
-    text-decoration: none;
-    margin: 0 0.25em;
-  }
-}
-
-.drop-area {
-  margin-top: 5px;
-  padding-left: 5px;
-
-  .drag-drop-text {
-    border: 1px dashed rgba(0, 0, 0, 0.6);
-    opacity: 0.6;
-    margin: 0.25em 0.25em 0.25em 0.25em;
-
-    span {
-      width: 100%;
-      text-align: center;
-      margin: 20px;
-    }
-
-    i {
-      transform: rotate(180deg);
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
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 3b7c73bb..b047a134 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
@@ -7,9 +7,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <app-container>
     <template v-if="!namespace">
-      <app-section ground class="py-4">
+      <app-section ground class="pb-4">
         <!-- Title with buttons -->
-        <header class="flex flex-wrap align-items-center">
+        <header class="flex flex-column lg:flex-row lg:align-items-center">
           <h1 class="text-3xl font-semibold">
             {{ header }}
           </h1>
@@ -45,20 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               :pt="{ root: { class: 'border-round-xl w-full' } }"
             />
           </span>
-          <PButton
-            severity="secondary"
-            text
-            icon="ti ti-settings"
-            @click="toggleMenu"
-            aria-haspopup="true"
-            aria-controls="projects-filters-menu"
-          />
-          <PMenu
-            ref="menu"
-            id="projects-filters-menu"
-            :model="filterMenuItems"
-            :popup="true"
-          />
+          <app-menu :items="filterMenuItems" />
         </div>
       </app-section>
       <app-section>
@@ -81,6 +68,7 @@ import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { defineComponent, ref } from 'vue'
 
 import { AppContainer, AppSection } from '@/common'
+import AppMenu from '@/common/components/AppMenu.vue'
 import { useDialogStore, useProjectStore } from '@/modules'
 import { useLayoutStore } from '@/modules/layout/store'
 import ProjectForm from '@/modules/project/components/ProjectForm.vue'
@@ -88,7 +76,7 @@ import { useUserStore } from '@/modules/user/store'
 
 export default defineComponent({
   name: 'ProjectsListView',
-  components: { AppContainer, AppSection },
+  components: { AppContainer, AppSection, AppMenu },
   props: {
     namespace: String,
     canCreateProject: Boolean
@@ -127,8 +115,8 @@ export default defineComponent({
           sortDesc: true
         },
         {
-          label: 'Sort by file size',
-          keys: 'disk_usage',
+          label: 'Sort by files size',
+          key: 'meta.size',
           sortDesc: true
         }
       ].map((item) => ({
diff --git a/web-app/packages/lib/src/modules/project/views/index.ts b/web-app/packages/lib/src/modules/project/views/index.ts
index 467ffb5e..456d8243 100644
--- a/web-app/packages/lib/src/modules/project/views/index.ts
+++ b/web-app/packages/lib/src/modules/project/views/index.ts
@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 export { default as FileBrowserView } from './FileBrowserView.vue'
-export { default as FileDetailView } from './FileDetailView.vue'
 export { default as FileVersionDetailView } from './FileVersionDetailView.vue'
 export { default as ProjectsListViewTemplate } from './ProjectsListViewTemplate.vue'
 export { default as ProjectSettingsViewTemplate } from './ProjectSettingsViewTemplate.vue'
diff --git a/web-app/packages/lib/src/shims-vue-router.d.ts b/web-app/packages/lib/src/shims-vue-router.d.ts
new file mode 100644
index 00000000..0395864a
--- /dev/null
+++ b/web-app/packages/lib/src/shims-vue-router.d.ts
@@ -0,0 +1,9 @@
+import 'vue-router'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    public?: boolean
+    allowedForNoWorkspace?: boolean
+    title?: string
+  }
+}
diff --git a/web-app/yarn.lock b/web-app/yarn.lock
index ca29a8da..cd82f626 100644
--- a/web-app/yarn.lock
+++ b/web-app/yarn.lock
@@ -3514,18 +3514,18 @@ vue-meta@^3.0.0-alpha.10:
   resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-3.0.0-alpha.10.tgz#8aa7dee8ef43edda2633d52d2d4ca0ae03352222"
   integrity sha512-rYeIGkhm1gKBcReEkPHiV6LV2Y6BZTMGTkGw1mQIZTxfFcVJL0srLZsL1zAmLeTGxMrlDYylMQEVSYRkDnwz3A==
 
-vue-router@^3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
-  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
-
-vue-router@^4.1.6:
+vue-router@4.2.5:
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.5.tgz#b9e3e08f1bd9ea363fdd173032620bc50cf0e98a"
   integrity sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-router@^3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
+  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
+
 vue-tabler-icons@^1.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/vue-tabler-icons/-/vue-tabler-icons-1.14.0.tgz#df0027906f225c1501c2d1cfa9d844f8d50bc428"