diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index 0adb4523..fb4670ce 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -7,7 +7,6 @@ import {
   FileBrowserView,
   FileVersionDetailView,
   ProjectVersionsView,
-  VersionDetailView,
   NotFoundView,
   VerifyEmailView,
   routeUtils,
@@ -146,6 +145,23 @@ export const createRouter = (pinia: Pinia) => {
           return
         }
       },
+      /** Redirect of unused /history/:version_id path to /history?version_id */
+      {
+        path: '/projects/:namespace/:projectName/history/:version_id',
+        name: 'project-versions-detail',
+        component: NotFoundView,
+        props: true,
+        meta: { public: true },
+        beforeEnter: (to, from, next) => {
+          next({
+            path: `/projects/${to.params.namespace}/${
+              to.params.projectName
+            }/history`,
+            query: { version_id: to.params.version_id }
+          })
+          return
+        }
+      },
       {
         path: '/projects/:namespace/:projectName',
         name: 'project',
@@ -182,12 +198,6 @@ export const createRouter = (pinia: Pinia) => {
             component: ProjectVersionsView,
             props: true
           },
-          {
-            path: 'history/:version_id',
-            name: 'project-versions-detail',
-            component: VersionDetailView,
-            props: true
-          },
           {
             path: 'history/:version_id/:path',
             name: 'file-version-detail',
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index 277dad86..45dad27f 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -7,6 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    PAccordion: typeof import('primevue/accordion')['default']
+    PAccordionTab: typeof import('primevue/accordiontab')['default']
     PAvatar: typeof import('primevue/avatar')['default']
     PBreadcrumb: typeof import('primevue/breadcrumb')['default']
     PButton: typeof import('primevue/button')['default']
@@ -14,6 +16,7 @@ declare module 'vue' {
     PDataTable: typeof import('primevue/datatable')['default']
     PDataView: typeof import('primevue/dataview')['default']
     PDialog: typeof import('primevue/dialog')['default']
+    PDivider: typeof import('primevue/divider')['default']
     PDropdown: typeof import('primevue/dropdown')['default']
     PImage: typeof import('primevue/image')['default']
     PInlineMessage: typeof import('primevue/inlinemessage')['default']
@@ -48,7 +51,6 @@ declare module 'vue' {
     VImg: typeof import('vuetify/components')['VImg']
     VLayout: typeof import('vuetify/components')['VLayout']
     VList: typeof import('vuetify/components')['VList']
-    VListGroup: typeof import('vuetify/components')['VListGroup']
     VListItem: typeof import('vuetify/components')['VListItem']
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
diff --git a/web-app/packages/lib/src/common/components/AppSidebarRight.vue b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
index 4436ee22..9443da1d 100644
--- a/web-app/packages/lib/src/common/components/AppSidebarRight.vue
+++ b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
@@ -59,7 +59,7 @@ const model = computed({
   get() {
     return props.modelValue
   },
-  set(value) {
+  set() {
     return emitModelValue('update:modelValue')
   }
 })
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 dd899ea7..33a56c73 100644
--- a/web-app/packages/lib/src/modules/project/components/DropArea.vue
+++ b/web-app/packages/lib/src/modules/project/components/DropArea.vue
@@ -63,6 +63,8 @@ import { useInstanceStore } from '@/modules/instance/store'
 import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
 
+type ExtendedFile = File & { isFile: boolean }
+
 export default defineComponent({
   props: ['location'],
   data() {
@@ -114,9 +116,9 @@ export default defineComponent({
         })
       }
       // prepare all entries because they will be not accessible after this callback ends (after 'await')
-      const entries = Array.from(evt.dataTransfer.items).map(
-        (i: DataTransferItem) => i.webkitGetAsEntry()
-      )
+      const entries = Array.from(
+        evt.dataTransfer.items as DataTransferItem[]
+      ).map((i) => i.webkitGetAsEntry())
       if (entries.some((e) => e === null)) {
         return this.error({
           text: 'Drop only files or folders'
@@ -129,9 +131,11 @@ export default defineComponent({
         this.$refs.selectFilesInput.click()
       }
     },
-    onFileSelected(evt) {
+    onFileSelected(evt: Event) {
       // prepare all entries because they will be not accessible after this callback ends (after 'await')
-      const entries = Array.from(evt.target.files).map((i: any) => {
+      const entries = Array.from(
+        (evt.target as HTMLInputElement).files as unknown as ExtendedFile[]
+      ).map((i) => {
         i.isFile = true
         return i
       })
diff --git a/web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue b/web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue
index 34aad7e6..27744186 100644
--- a/web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue
@@ -5,69 +5,76 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div>
-    <v-data-table
-      :headers="headers"
-      :items="displayedChangeset"
-      footer-props.items-per-page-options='[10, 25, {"text": "$vuetify.dataIterator.rowsPerPageAll","value": -1}]'
-      :hide-default-footer="displayedChangeset.length <= 10"
+  <div class="mt-2">
+    <PDataView
+      :value="displayedChangeset"
+      :data-key="'table'"
+      :paginator="displayedChangeset.length > itemsPerPage"
+      :rows="itemsPerPage"
+      :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
+      :pt="{
+        root: {
+          class: 'border-round-xl'
+        },
+        header: {
+          class: 'px-4 py-2'
+        }
+      }"
     >
-      <!-- headers -->
-      <template v-slot:header.insert="{ 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.delete="{ 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 #header>
+        <div class="grid grid-nogutter">
+          <div v-for="col in columns" class="col-3 text-xs" :key="col.text">
+            <i
+              v-if="col.icon"
+              :class="['ti', `ti-${col.icon}`]"
+              v-tooltip.top="col.text"
+            ></i>
+            <span v-else>{{ col.text }}</span>
+          </div>
+        </div>
       </template>
-      <template v-slot:header.update="{ 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 #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"
+        >
+          <div
+            v-for="col in columns"
+            class="flex align-items-center col-3"
+            :key="col.value"
+          >
+            {{ item[col.value] }}
+          </div>
+        </div>
       </template>
-    </v-data-table>
+    </PDataView>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { PropType, defineComponent } from 'vue'
+
+import { ProjectVersion } from '../types'
 
 export default defineComponent({
   name: 'file-changeset-summary-table',
   props: {
-    changesets: Array
+    changesets: Array as PropType<ProjectVersion['changesets']['summary']>
   },
   data() {
     return {
-      headers: [
-        { text: 'Table', value: 'table' },
+      columns: [
+        { text: 'Layer', value: 'table' },
         {
           text: 'Inserts',
-          icon: 'add_circle',
-          color: 'green',
+          icon: 'plus',
           value: 'insert'
         },
-        { text: 'Updates', icon: 'edit', color: 'orange', value: 'update' },
-        { text: 'Deletes', icon: 'delete', color: 'red', value: 'delete' }
-      ]
+        { text: 'Updates', icon: 'pencil', value: 'update' },
+        { text: 'Deletes', icon: 'trash', value: 'delete' }
+      ],
+      itemsPerPage: 10
     }
   },
   computed: {
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
index 65e3214d..a266666f 100644
--- a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           class="flex flex-column align-items-center w-full py-4"
         >
           <PImage
-            :src="downloadLink"
+            :src="downloadUrl"
             v-if="mimetype.match('image')"
             preview
             imageClass="w-full"
@@ -127,7 +127,7 @@ export default defineComponent({
     fileName() {
       return Path.basename(this.file?.path)
     },
-    downloadLink() {
+    downloadUrl() {
       // added random number to request avoid to browser caching files
       return ProjectApi.constructDownloadProjectFileUrl(
         this.namespace,
@@ -205,7 +205,7 @@ export default defineComponent({
   methods: {
     ...mapActions(useProjectStore, ['deleteFiles']),
     txtPreview() {
-      ProjectApi.getProjectFileByUrl(this.downloadLink).then((resp) => {
+      ProjectApi.getProjectFileByUrl(this.downloadUrl).then((resp) => {
         this.mimetype = resp.headers['content-type']
         if (resp.headers['content-type'].match('text')) {
           if (resp.data.constructor === Object) {
@@ -228,7 +228,7 @@ export default defineComponent({
       this.deleteFiles({ files: [this.file.path] })
     },
     downloadFile() {
-      window.location.href = this.downloadLink
+      window.location.href = this.downloadUrl
     }
   },
   components: { AppSidebarRight, FileIcon }
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 8af58b2a..6b35aa42 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </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"
+          class="upload-panel-diff-count border-circle p-2 w-2rem h-2rem ml-auto text-center text-color-forest"
         >
           {{ upload.diff[key].length }}
         </div>
diff --git a/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
new file mode 100644
index 00000000..f2b36449
--- /dev/null
+++ b/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
@@ -0,0 +1,284 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <div v-if="version">
+    <AppSidebarRight v-model="sidebarVisible">
+      <template #title>{{ queryId }}</template>
+      <template #headerButtons
+        ><PButton
+          type="button"
+          @click="downloadVersion"
+          severity="secondary"
+          icon="ti ti-download"
+          text
+          rounded
+          class="p-1 text-2xl"
+          data-cy="file-detail-download-btn"
+        ></PButton
+      ></template>
+      <dl class="grid">
+        <div class="col-12">
+          <dt class="text-xs opacity-80 mb-1">Version</dt>
+          <dl>
+            <h3 class="text-2xl mt-0">
+              {{ version.name }}
+            </h3>
+          </dl>
+          <PDivider />
+        </div>
+        <div class="col-6">
+          <dt class="text-xs opacity-80 mb-1">Author</dt>
+          <dl>
+            {{ version.author }}
+          </dl>
+        </div>
+        <div class="col-6 flex flex-column align-items-end">
+          <dt class="text-xs opacity-80 mb-1">Project size</dt>
+          <dl>
+            {{ $filters.filesize(version.project_size) }}
+          </dl>
+        </div>
+        <div class="col-12">
+          <dt class="text-xs opacity-80 mb-1">Created</dt>
+          <dl>
+            {{ $filters.datetime(version.created) }}
+          </dl>
+        </div>
+        <div class="col-12">
+          <dt class="text-xs opacity-80 mb-1">User agent</dt>
+          <dl>
+            {{ version.user_agent }}
+          </dl>
+        </div>
+      </dl>
+      <PAccordion
+        multiple
+        collapse-icon="ti ti-chevron-right"
+        expand-icon="ti ti-chevron-down"
+        :active-index="activeAccordionItems"
+        :pt="{
+          accordiontab: {
+            headerAction: {
+              class: 'surface-section border-x-none border-noround p-2'
+            },
+            content: {
+              class: 'border-none'
+            }
+          }
+        }"
+      >
+        <PAccordionTab
+          v-for="item in changeTabs"
+          :key="item.key"
+          :disabled="!changes[item.key].length"
+        >
+          <template #header>
+            <div
+              :class="[
+                'border-circle mr-1 text-center text-xs flex flex-column justify-content-center',
+                `version-detail-diff-circle version-detail-diff-circle--${item.key}`
+              ]"
+            >
+              <i :class="['ti', `ti-${item.icon}`]"></i>
+            </div>
+            <span class="text-sm opacity-80">{{ item.text }}</span>
+            <div
+              class="version-detail-diff-count border-circle p-2 w-2rem h-2rem ml-auto text-center text-color-forest text-xs"
+            >
+              {{ changes[item.key].length }}
+            </div></template
+          >
+          <div
+            v-for="change in changes[item.key]"
+            :key="change.path"
+            class="py-2 text-xs"
+          >
+            <div class="flex align-items-center justify-content-between mb-2">
+              <span class="font-semibold">{{ change.path }}</span>
+              <span>{{
+                $filters.filesize(
+                  version.changesets[change.path]
+                    ? version.changesets[change.path]['size']
+                    : change.size
+                )
+              }}</span>
+            </div>
+            <template
+              v-if="
+                version.changesets[change.path] &&
+                !version.changesets[change.path].error
+              "
+              ><router-link
+                class="text-color-forest text-underline font-semibold"
+                :to="{
+                  name: 'file-version-detail',
+                  params: {
+                    namespace: version.namespace,
+                    projectName: version.project_name,
+                    version_id: version.name,
+                    path: change.path
+                  }
+                }"
+                >Show advanced</router-link
+              >
+              <file-changeset-summary-table
+                :changesets="version.changesets[change.path]['summary']"
+              />
+            </template>
+            <div
+              v-else-if="
+                version.changesets[change.path] &&
+                version.changesets[change.path].error
+              "
+              class="text-center"
+            >
+              Details not available:
+              {{ version.changesets[change.path].error }}
+            </div>
+          </div>
+        </PAccordionTab>
+      </PAccordion>
+    </AppSidebarRight>
+  </div>
+</template>
+
+<script lang="ts">
+import { mapActions, mapState } from 'pinia'
+import { defineComponent } from 'vue'
+
+import AppSidebarRight from '@/common/components/AppSidebarRight.vue'
+import { getErrorMessage } from '@/common/error_utils'
+import { ProjectVersion } from '@/modules'
+import { useNotificationStore } from '@/modules/notification/store'
+import FileChangesetSummaryTable from '@/modules/project/components/FileChangesetSummaryTable.vue'
+import { ProjectApi } from '@/modules/project/projectApi'
+import { useProjectStore } from '@/modules/project/store'
+
+export default defineComponent({
+  name: 'VersionDetailView',
+  components: { FileChangesetSummaryTable, AppSidebarRight },
+  props: {
+    asAdmin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      version: null as ProjectVersion
+    }
+  },
+  computed: {
+    ...mapState(useProjectStore, ['project', 'versions']),
+    changeTabs() {
+      return [
+        { key: 'added', text: 'Files added', icon: 'plus' },
+        { key: 'updated', text: 'Files edited', icon: 'pencil' },
+        { key: 'removed', text: 'Files removed', icon: 'trash' }
+      ]
+    },
+    changes() {
+      return this.version?.changes
+    },
+    changesets() {
+      return this.version?.changesets
+    },
+    activeAccordionItems(): number[] {
+      return this.changeTabs.reduce<number[]>((acc, tab, index) => {
+        if (this.changes[tab.key].length > 0) {
+          acc.push(index)
+        }
+        return acc
+      }, [])
+    },
+    downloadUrl() {
+      return ProjectApi.constructDownloadProjectVersionUrl(
+        this.project.namespace,
+        this.project.name,
+        this.queryId
+      )
+    },
+    queryId(): string {
+      return this.$route.query.version_id as string
+    },
+    sidebarVisible: {
+      get() {
+        return !!this.queryId
+      },
+      set(visible: boolean) {
+        if (visible) {
+          this.sidebarVisible = visible
+        } else {
+          this.$router.replace({ query: undefined })
+        }
+      }
+    }
+  },
+  watch: {
+    queryId: {
+      immediate: true,
+      handler() {
+        if (this.queryId) {
+          this.getVersion()
+          return
+        }
+        this.sidebarVisible = false
+      }
+    }
+  },
+  methods: {
+    ...mapActions(useNotificationStore, ['error']),
+    async getVersion() {
+      try {
+        const currentVersion = this.versions?.find(
+          (v) => v.name === this.queryId
+        )
+        if (currentVersion) {
+          this.version = currentVersion
+          return
+        }
+        const response = await ProjectApi.getProjectVersion(
+          this.project.id,
+          this.queryId
+        )
+        this.version = response.data
+      } catch (err) {
+        this.error({
+          text: getErrorMessage(err, 'Failed to fetch project version')
+        })
+      }
+    },
+    downloadVersion() {
+      window.location.href = this.downloadUrl
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+// TODO:  add circles to own component
+.version-detail {
+  &-diff-count {
+    background-color: var(--light-green-color);
+    width: 24px;
+    height: 24px;
+  }
+  &-diff-circle {
+    width: 24px;
+    height: 24px;
+    &--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 cd2d3a5a..2fc104a5 100644
--- a/web-app/packages/lib/src/modules/project/components/index.ts
+++ b/web-app/packages/lib/src/modules/project/components/index.ts
@@ -22,3 +22,4 @@ export { default as ProjectsTableDataLoader } from './ProjectsTableDataLoader.vu
 export { default as UploadPanel } from './UploadPanel.vue'
 export { default as ProjectAccessRequestTableTemplate } from './ProjectAccessRequestTableTemplate.vue'
 export { default as FileDetailSidebar } from './FileDetailSidebar.vue'
+export { default as VersionDetailSidebar } from './VersionDetailSidebar.vue'
diff --git a/web-app/packages/lib/src/modules/project/projectApi.ts b/web-app/packages/lib/src/modules/project/projectApi.ts
index 6fe2a359..fa7d867c 100644
--- a/web-app/packages/lib/src/modules/project/projectApi.ts
+++ b/web-app/packages/lib/src/modules/project/projectApi.ts
@@ -21,7 +21,8 @@ import {
   PushProjectChangesParams,
   PushProjectChangesResponse,
   SaveProjectSettings,
-  UpdateProjectAccessParams
+  UpdateProjectAccessParams,
+  ProjectVersion
 } from '@/modules/project/types'
 
 export const ProjectApi = {
@@ -253,7 +254,7 @@ export const ProjectApi = {
   async getProjectVersion(
     projectId: string,
     versionName: string
-  ): Promise<AxiosResponse<string>> {
+  ): Promise<AxiosResponse<ProjectVersion>> {
     return ProjectModule.httpService.get(
       `/v1/project/version/${projectId}/${versionName}`
     )
diff --git a/web-app/packages/lib/src/modules/project/types.ts b/web-app/packages/lib/src/modules/project/types.ts
index 4c3c05eb..ec661eed 100644
--- a/web-app/packages/lib/src/modules/project/types.ts
+++ b/web-app/packages/lib/src/modules/project/types.ts
@@ -244,7 +244,8 @@ export interface ProjectVersion {
   project_name: string
   namespace: string
   user_agent: string
-  changesets: ChangesetSuccess | ChangesetError
+  changesets: ChangesetSuccess & ChangesetError
+  project_size: number
 }
 
 export interface PaginatedProjectVersionsResponse
@@ -321,3 +322,13 @@ export interface ProjectsSortingParams {
   sortBy: string
   sortDesc: boolean
 }
+
+export interface ProjectVersionFileChange {
+  changes: {
+    columns: number
+    name: string
+    new: string
+  }[]
+  table: string
+  type: 'insert' | 'update' | 'delete'
+}
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 d374e8fb..cf1af293 100644
--- a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
@@ -6,90 +6,153 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div>
-    <v-list lines="two" subheader v-if="tables">
-      <v-list-item v-bind:key="name" v-for="(value, name) in tables">
-        <div>
-          <v-list-item-title>
-            <h3 class="text-primary">{{ name }}</h3>
-          </v-list-item-title>
-          <br />
-          <v-data-table
-            :headers="value.headers"
-            :items="value.changes"
-            no-data-text="No changeset"
-            color="primary"
-            footer-props.items-per-page-options='[10, 25, {"text": "$vuetify.dataIterator.rowsPerPageAll","value": -1}]'
-            :hide-default-footer="value.changes.length <= 10"
-            disable-sort
-            style="overflow-x: auto"
-          >
-            <template #item.operationTypeHeader="{ value }">
-              <v-icon size="small" :color="actions[value].color">{{
-                actions[value].icon
-              }}</v-icon>
-            </template>
-          </v-data-table>
+    <AppContainer v-if="tables">
+      <AppSection ground class="mb-3">
+        <h2>{{ path }}</h2>
+      </AppSection>
+      <AppSection v-bind:key="name" v-for="(value, name) in tables">
+        <template #title
+          ><i class="ti ti-file-spreadsheet mb-2"></i>{{ name }}</template
+        >
+        <PDataTable
+          :value="value.changes"
+          :paginator="value.changes.length > itemsPerPage"
+          :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
+          :rows="itemsPerPage"
+          size="small"
+          :scrollable="true"
+          scroll-height="400px"
+        >
+          <template v-for="col in value.headers" :key="col.value">
+            <!-- Show icon with insert / update / delete -->
+            <PColumn
+              v-if="col.value === 'operationTypeHeader'"
+              :header="col.text"
+              style="width: 50px"
+              :pt="ptColumn"
+            >
+              <template #body="slotProps">
+                <div
+                  :class="[
+                    'border-circle mr-1 text-center text-xs flex flex-column justify-content-center',
+                    `file-version-detail-diff-circle file-version-detail-diff-circle--${
+                      slotProps.data[col.value]
+                    }`
+                  ]"
+                >
+                  <i
+                    :class="[
+                      'ti',
+                      `ti-${actions[slotProps.data[col.value]].icon}`
+                    ]"
+                  ></i>
+                </div>
+              </template>
+            </PColumn>
+            <!-- else show data -->
+            <PColumn
+              v-else
+              :header="col.text"
+              :style="{ minWidth: `${col.width}px` }"
+              :pt="ptColumn"
+            >
+              <template #body="slotProps">{{
+                slotProps.data[col.value]
+              }}</template>
+            </PColumn>
+          </template>
+          <template #empty>
+            <div class="flex flex-column align-items-center p-4 text-center">
+              <p>No changeset for current layer</p>
+            </div>
+          </template>
+        </PDataTable>
+      </AppSection>
+    </AppContainer>
+    <AppContainer v-else>
+      <AppSection class="p-4">
+        <div class="flex flex-column align-items-center text-center">
+          <h3>Changes cannot be calculated</h3>
+          <p>
+            For details please check the
+            <a
+              class="font-semibold text-underline text-color-forest"
+              :href="docsLinkManageSynchronisation"
+              target="_blank"
+              >documentation</a
+            >.
+          </p>
         </div>
-      </v-list-item>
-    </v-list>
-    <v-card v-else-if="!tables && !loading" class="mt-3" variant="tonal">
-      <v-card-title><h4>Changes cannot be calculated</h4></v-card-title>
-      <v-card-text
-        >For details please check the
-        <a :href="docsLinkManageSynchronisation" target="_blank"
-          >documentation</a
-        >.</v-card-text
-      >
-    </v-card>
+      </AppSection>
+    </AppContainer>
   </div>
 </template>
 
 <script lang="ts">
+import { AxiosResponse } from 'axios'
 import groupBy from 'lodash/groupBy'
 import isArray from 'lodash/isArray'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import AppContainer from '@/common/components/AppContainer.vue'
+import AppSection from '@/common/components/AppSection.vue'
 import { waitCursor } from '@/common/html_utils'
-import { useNotificationStore } from '@/modules'
+import { ProjectVersionFileChange, useNotificationStore } from '@/modules'
 import { useInstanceStore } from '@/modules/instance/store'
 
+interface ColumnItem {
+  text: string
+  value: string
+  width: number
+}
+
 export default defineComponent({
   name: 'FileVersionDetailView',
   props: {
     namespace: String,
     projectName: String,
     version_id: String,
-    path: String,
-    asAdmin: {
-      type: Boolean,
-      default: false
-    }
+    path: String
   },
   data() {
     return {
-      tables: null,
+      tables: null as Record<
+        string,
+        { headers?: ColumnItem[]; changes?: Record<string, string | number>[] }
+      > | null,
       loading: true,
       actions: {
-        insert: { icon: 'add_circle', color: 'green' },
-        update: { icon: 'edit', color: 'orange' },
-        delete: { icon: 'delete', color: 'red' }
-      }
+        insert: { icon: 'plus' },
+        update: { icon: 'pen' },
+        delete: { icon: 'trash' }
+      },
+      itemsPerPage: 10
     }
   },
   computed: {
     ...mapState(useInstanceStore, ['configData']),
     docsLinkManageSynchronisation() {
       return `${this.configData?.docs_url ?? ''}/manage/synchronisation`
+    },
+    ptColumn() {
+      return {
+        headerCell: {
+          style: {
+            backgroundColor: '#F8F9FA'
+          }
+        },
+        headerTitle: {
+          class: 'text-xs'
+        }
+      }
     }
   },
   created() {
     this.getChangeset()
   },
-
   methods: {
     ...mapActions(useNotificationStore, ['error']),
-
     // TODO: refactor to pinia action
     getChangeset() {
       waitCursor(true)
@@ -97,7 +160,7 @@ export default defineComponent({
         .get(
           `/v1/resource/changesets/${this.namespace}/${this.projectName}/${this.version_id}?path=${this.path}`
         )
-        .then((resp) => {
+        .then((resp: AxiosResponse<ProjectVersionFileChange[]>) => {
           if (!resp.data.length) return
           // process data grouped by tables
           this.tables = {}
@@ -112,8 +175,8 @@ export default defineComponent({
             ]
             const changes = []
             if (isArray(value)) {
-              const arrayValue = value as []
-              arrayValue.forEach((data: any) => {
+              const arrayValue = value
+              arrayValue.forEach((data) => {
                 if (data.table === 'gpkg_contents') {
                   return
                 }
@@ -125,24 +188,23 @@ export default defineComponent({
                   row.value = {}
                   if (data.type === 'insert') {
                     data.values[columnIdentifier] =
-                      typeof row.new === 'undefined' ? 'N/A' : row.new
+                      row.new === undefined ? 'N/A' : row.new
                   } else if (data.type === 'update') {
                     if (typeof row.new === 'undefined') {
                       data.values[columnIdentifier] =
-                        typeof row.old === 'undefined' ? 'N/A' : row.old
+                        row.old === undefined ? 'N/A' : row.old
                     } else {
                       data.values[columnIdentifier] =
-                        (typeof row.old === 'undefinedchangesets/' ? 'N/A' : row.old) +
+                        (row.old === undefined ? 'N/A' : row.old) +
                         ' ' +
                         String.fromCharCode(parseInt('2794', 16)) +
                         ' ' +
-                        (typeof row.new === 'undefined' ? 'N/A' : row.new)
+                        (row.new === undefined ? 'N/A' : row.new)
                     }
                   } else if (data.type === 'delete') {
                     data.values[columnIdentifier] =
-                      typeof row.old === 'undefined' ? 'N/A' : row.old
+                      row.old === undefined ? 'N/A' : row.old
                   }
-
                   if (!headers.map((h) => h.value).includes(columnIdentifier)) {
                     headers.push({
                       text: row.name,
@@ -154,7 +216,6 @@ export default defineComponent({
                 changes.push(data.values)
               })
             }
-
             _this.tables[key].headers = headers
             _this.tables[key].changes = changes
           }
@@ -170,13 +231,24 @@ export default defineComponent({
           waitCursor(false)
         })
     }
-  }
+  },
+  components: { AppContainer, AppSection }
 })
 </script>
 <style lang="scss" scoped>
-:deep(.v-data-table__wrapper) {
-  td.text-start {
-    max-width: 250px;
+.file-version-detail {
+  &-diff-circle {
+    width: 24px;
+    height: 24px;
+    &--delete {
+      background-color: var(--negative-color);
+    }
+    &--update {
+      background-color: var(--warning-color);
+    }
+    &--insert {
+      background-color: var(--positive-color);
+    }
   }
 }
 </style>
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
index 0ca84721..b20fe9a3 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
@@ -48,11 +48,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             :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)]"
+            @click.prevent="!item.disabled && rowClick(item.name)"
           >
-            <div
-              class="flex-grow-1 grid grid-nogutter w-11"
-              @click.prevent="!item.disabled && rowClick(item.name)"
-            >
+            <div class="flex-grow-1 grid grid-nogutter w-11">
               <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
               <template
                 v-for="col in columns.filter((item) => !item.fixed)"
@@ -170,7 +168,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 :disabled="item.disabled"
                 :style="[rowStyle(item)]"
                 data-cy="project-versions-download-btn"
-                @click="
+                @click.stop="
                   downloadArchive({
                     url:
                       '/v1/project/download/' +
@@ -194,6 +192,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </PDataView>
       <slot name="table-footer"></slot>
     </app-section>
+    <VersionDetailSidebar />
   </app-container>
 </template>
 
@@ -202,6 +201,8 @@ import { mapActions, mapState } from 'pinia'
 import { DataViewPageEvent } from 'primevue/dataview'
 import { defineComponent, PropType } from 'vue'
 
+import VersionDetailSidebar from '../components/VersionDetailSidebar.vue'
+
 import { AppSection, AppContainer } from '@/common/components'
 import {
   FetchProjectVersionsParams,
@@ -222,7 +223,8 @@ export default defineComponent({
   name: 'ProjectVersionsViewTemplate',
   components: {
     AppSection,
-    AppContainer
+    AppContainer,
+    VersionDetailSidebar
   },
   props: {
     projectName: String,
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 0585743d..7d92a1c5 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -68,23 +68,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           }
         }"
       >
-        <PTabPanel header="Files" :pt="ptHeaderAction">
-          <router-view />
-        </PTabPanel>
+        <PTabPanel header="Files" :pt="ptHeaderAction"></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>
+        <PTabPanel header="History" :pt="ptHeaderAction"></PTabPanel>
+        <PTabPanel header="Settings" :pt="ptHeaderAction"></PTabPanel>
       </PTabView>
+      <router-view />
     </template>
     <app-container v-else-if="fetchProjectsResponseStatus">
       <app-section v-if="fetchProjectsResponseStatus === 403">
@@ -219,7 +208,9 @@ export default defineComponent({
     },
 
     activeTabIndex(): number {
-      return this.tabs.findIndex((item) => item.route === this.$route.name)
+      return this.tabs.findIndex((item) =>
+        this.$route.matched.some((m) => m.name === item.route)
+      )
     },
 
     /** Rewrite of styles for TabPanels */
diff --git a/web-app/packages/lib/src/modules/project/views/VersionDetailView.vue b/web-app/packages/lib/src/modules/project/views/VersionDetailView.vue
deleted file mode 100644
index 0daf9ca9..00000000
--- a/web-app/packages/lib/src/modules/project/views/VersionDetailView.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <div v-if="version">
-    <portal to="download-button">
-      <v-tooltip location="top">
-        <template v-slot:activator="{ props }">
-          <v-btn icon v-bind="props" :href="downloadUrl">
-            <v-icon>archive</v-icon>
-          </v-btn>
-        </template>
-        <span>Download Project Version {{ version.name }} (ZIP)</span>
-      </v-tooltip>
-    </portal>
-    <v-list lines="two" subheader>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Version</v-list-item-title>
-          <v-list-item-subtitle>{{ version.name }}</v-list-item-subtitle>
-        </div>
-      </v-list-item>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Author</v-list-item-title>
-          <v-list-item-subtitle>{{ version.author }}</v-list-item-subtitle>
-        </div>
-      </v-list-item>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Project Size</v-list-item-title>
-          <v-list-item-subtitle
-            >{{ $filters.filesize(version.project_size) }}
-          </v-list-item-subtitle>
-        </div>
-      </v-list-item>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Created</v-list-item-title>
-          <v-list-item-subtitle
-            >{{ $filters.datetime(version.created) }}
-          </v-list-item-subtitle>
-        </div>
-      </v-list-item>
-      <v-list-item>
-        <div>
-          <v-list-item-title>User Agent</v-list-item-title>
-          <v-list-item-subtitle>{{ version.user_agent }}</v-list-item-subtitle>
-        </div>
-      </v-list-item>
-    </v-list>
-    <v-list class="files" expand>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Files changes:</v-list-item-title>
-        </div>
-      </v-list-item>
-      <v-list-group
-        data-cy="version-detail-groups"
-        v-for="{ key, text, icon } in changeHeader"
-        :key="key"
-        no-action
-      >
-        <!--                v-if="changes[key].length"-->
-        <template v-slot:activator>
-          <div>
-            <v-list-item-title>
-              <v-icon size="small" v-text="icon" class="mr-2" />
-              <span>{{ text }} ({{ changes[key].length }})</span>
-            </v-list-item-title>
-          </div>
-        </template>
-
-        <div
-          class="v-list__tile v-list-item-file"
-          v-for="item in changes[key]"
-          :key="item.path"
-          no-action
-        >
-          <div :class="colors[key]">
-            {{ item.path
-            }}{{
-              $filters.filesize(
-                version.changesets[item.path]
-                  ? version.changesets[item.path]['size']
-                  : item.size
-              )
-            }}
-            <template v-if="version.changesets[item.path]">
-              <div v-if="!version.changesets[item.path].error">
-                <router-link
-                  class="show-advanced"
-                  :to="{
-                    name: 'file-version-detail',
-                    params: {
-                      namespace: version.namespace,
-                      projectName: version.project_name,
-                      version_id: version.name,
-                      path: item.path
-                    }
-                  }"
-                >
-                  <v-btn data-cy="version-detail-advanced-btn">
-                    <span>Show advanced</span>
-                  </v-btn>
-                </router-link>
-                <file-changeset-summary-table
-                  :changesets="version.changesets[item.path]['summary']"
-                />
-              </div>
-              <div v-else class="text-primary">
-                Details not available: {{ version.changesets[item.path].error }}
-              </div>
-            </template>
-          </div>
-        </div>
-      </v-list-group>
-    </v-list>
-  </div>
-</template>
-
-<script lang="ts">
-import { mapActions, mapState } from 'pinia'
-import { defineComponent } from 'vue'
-
-import { getErrorMessage } from '@/common/error_utils'
-import { useNotificationStore } from '@/modules/notification/store'
-import FileChangesetSummaryTable from '@/modules/project/components/FileChangesetSummaryTable.vue'
-import { ProjectApi } from '@/modules/project/projectApi'
-import { useProjectStore } from '@/modules/project/store'
-
-const Colors = {
-  added: 'green--text',
-  removed: 'red--text',
-  updated: 'orange--text'
-}
-
-export default defineComponent({
-  name: 'VersionDetailView',
-  components: { FileChangesetSummaryTable },
-  props: {
-    version_id: {
-      type: String,
-      default: ''
-    },
-    asAdmin: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      version: null
-    }
-  },
-  created() {
-    this.getVersion()
-  },
-  computed: {
-    ...mapState(useProjectStore, ['project', 'versions']),
-    colors() {
-      return Colors
-    },
-    changeHeader() {
-      return [
-        { key: 'added', text: 'Added', icon: 'add_circle' },
-        { key: 'removed', text: 'Removed', icon: 'delete' },
-        { key: 'updated', text: 'Modified', icon: 'edit' }
-      ]
-    },
-    changes() {
-      return this.version?.changes
-    },
-    downloadUrl() {
-      return ProjectApi.constructDownloadProjectVersionUrl(
-        this.project.namespace,
-        this.project.name,
-        this.version_id
-      )
-    }
-  },
-  watch: {
-    $route: 'getVersion'
-  },
-  methods: {
-    ...mapActions(useNotificationStore, ['error']),
-    async getVersion() {
-      try {
-        const currentVersion = this.versions?.find(
-          (v) => v.name === this.version_id
-        )
-        if (currentVersion) {
-          this.version = currentVersion
-          return
-        }
-        const response = await ProjectApi.getProjectVersion(
-          this.project.id,
-          this.version_id
-        )
-        this.version = response.data
-      } catch (err) {
-        this.error({
-          text: getErrorMessage(err, 'Failed to fetch project version')
-        })
-      }
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.status {
-  margin: 0.5em auto;
-  padding: 0 1em;
-  text-align: center;
-  color: #fff;
-  height: 2em;
-  line-height: 2em;
-  border-radius: 1em;
-  float: right;
-}
-
-.v-list-item-file {
-  min-height: 48px;
-  height: auto;
-}
-
-.v-list {
-  :deep(.v-list-item) {
-    font-size: 14px;
-    color: #444;
-
-    .v-list-item__title {
-      font-weight: 500;
-    }
-  }
-
-  &.files {
-    :deep(.v-list-group__items) {
-      .v-list-item {
-        padding-left: 20px;
-      }
-    }
-  }
-}
-
-.show-advanced {
-  font-style: unset;
-
-  button {
-    font-size: 12px;
-    margin-left: 30px;
-  }
-}
-</style>
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 456d8243..cc59c8ed 100644
--- a/web-app/packages/lib/src/modules/project/views/index.ts
+++ b/web-app/packages/lib/src/modules/project/views/index.ts
@@ -8,5 +8,4 @@ export { default as ProjectsListViewTemplate } from './ProjectsListViewTemplate.
 export { default as ProjectSettingsViewTemplate } from './ProjectSettingsViewTemplate.vue'
 export { default as ProjectVersionsView } from './ProjectVersionsView.vue'
 export { default as ProjectViewTemplate } from './ProjectViewTemplate.vue'
-export { default as VersionDetailView } from './VersionDetailView.vue'
 export { default as ProjectVersionsViewTemplate } from './ProjectVersionsViewTemplate.vue'