diff --git a/src/app/_layout/app-main-layout/app-main-layout.component.scss b/src/app/_layout/app-main-layout/app-main-layout.component.scss
index f0fd0d86c..7db0bd823 100644
--- a/src/app/_layout/app-main-layout/app-main-layout.component.scss
+++ b/src/app/_layout/app-main-layout/app-main-layout.component.scss
@@ -1,5 +1,5 @@
 .main-app {
   height: 100%;
-  min-height: calc(100vh - 6.5rem);
+  min-height: calc(100vh - 3.5rem);
   padding: 1.5rem;
 }
diff --git a/src/app/about/about/about.component.html b/src/app/about/about/about.component.html
index 5ae708167..27a48c372 100644
--- a/src/app/about/about/about.component.html
+++ b/src/app/about/about/about.component.html
@@ -10,7 +10,6 @@
         <ul>
           <li>
             <a
-              *ngIf="facility === 'PSI'"
               href="{{ SciCatGitHub }}"
               target="blank"
               >SciCat Github Project.</a
@@ -24,7 +23,9 @@
       <mat-card-header>
         <mat-card-title>Access Conditions</mat-card-title>
       </mat-card-header>
-      <mat-card-content> {{ accessText }}</mat-card-content>
+      <mat-card-content>
+        <span [innerHTML]="accessText | linky"></span>
+      </mat-card-content>
     </mat-card>
 
     <mat-card class="example-card">
@@ -32,12 +33,12 @@
         <mat-card-title>Terms of Use</mat-card-title>
       </mat-card-header>
       <mat-card-content>
-        {{ termsText }}
+        <span [innerHTML]="termsText | linky"></span>
         <a *ngIf="facility === 'PSI'" href="{{ SNFLink }}" target="blank"
           >Open Research Data.</a
         >
         <br /><br />
-        {{ termsTextContinued }}
+        <span [innerHTML]="termsTextContinued | linky"></span>
         <a *ngIf="facility === 'PSI'" href="{{ PSIDataPolicy }}" target="blank"
           >Data Policy.</a
         >
diff --git a/src/app/about/about/about.component.ts b/src/app/about/about/about.component.ts
index 2572765b8..41c7af87f 100644
--- a/src/app/about/about/about.component.ts
+++ b/src/app/about/about/about.component.ts
@@ -31,42 +31,17 @@ export class AboutComponent implements OnInit {
     this.SNFLink =
       "http://www.snf.ch/en/theSNSF/research-policies/open_research_data/Pages/default.aspx#Guidelines%20and%20Regulations";
     this.PSIDataPolicy = "https://www.psi.ch/en/science/psi-data-policy";
-    this.aboutText =
+    this.aboutText = 
+      this.appConfig.aboutText || 
       "Scicat allows users to access data and metadata from experiments";
-    this.accessText = "Users must comply with access policy of instruments";
-    this.termsText = "Data can be used freely under the CC-BY-4.0 licence";
-    if (this.facility === "ESS") {
-      this.aboutText =
-        "Scicat is a metadata catalogue allows users to access information about experimental results, " +
-        "measured at the European Spallation Source, " +
-        "(https://esss.se/). " +
-        "Scientific datasets are linked to proposals and samples. " +
-        "Scientific datasets are linked to publications (DOI, PID). " +
-        "SciCat helps to keep track of data provenance (i.e. the steps leading to the final results). " +
-        "Scicat allows users to find data based on the metadata (both your own data and other peoples’ public data). " +
-        "In the long term, SciCat will help to automate scientific analysis workflows.";
-      this.accessText =
-        "Access to the online catalogue of open data will be given to a user," +
-        " providing the user registers with ESS " +
-        " and accepts the terms of the ESS scientific data policy ";
-      this.termsText =
-        "All scientific datasets are licensed under the CC-BY-4.0 license ";
-    } else if (this.facility === "PSI") {
-      this.aboutText =
-        "SciCat is a metadata catalog. At PSI, SciCat works in conjunction with a PetaByte archive and remote accesss system." +
-        " Together these components provide users with the ability to store, search and access their data." +
-        " SciCat is an open source project in collaboration with ESS and Max IV";
-
-      this.accessText =
-        "Access to SciCat is granted to users by the Digital User Office.";
-      this.termsTextContinued = "Additionally, PSI defines it's own ";
-      this.termsText =
-        "The Swiss National Science Foundation describes policy and guidelines on ";
-    } else if (this.facility === "MAX IV") {
-      this.aboutText =
-        "Scicat allows users to access data and metadata from experiments at MAX IV.";
-      this.accessText = "Users must comply with access policy of instruments";
-      this.termsText = "Data can be used freely under the CC-BY-4.0 licence";
-    }
+    this.accessText = 
+      this.appConfig.accessText || 
+      "Users must comply with access policy of instruments";
+    this.termsText = 
+      this.appConfig.termsText || 
+      "Data can be used freely under the CC-BY-4.0 license";
+    this.termsTextContinued = 
+      this.appConfig.termsTextContinued || 
+      "";
   }
 }
diff --git a/src/app/app-config.service.spec.ts b/src/app/app-config.service.spec.ts
index e276c8dec..7c49913bf 100644
--- a/src/app/app-config.service.spec.ts
+++ b/src/app/app-config.service.spec.ts
@@ -45,6 +45,17 @@ const appConfig: AppConfig = {
   multipleDownloadAction: "http://localhost:3012/zip",
   multipleDownloadEnabled: true,
   multipleDownloadUseAuthToken: false,
+  aboutText: "Configured about text",
+  accessText: "Configured access policy",
+  termsText: "Configured terms of use",
+  termsTextContinued: "Configured additional terms text",
+  docText: "Configured documentation Text",
+  gettingStartedExtraText: "Configured gettingStarted Text",
+  whereIsMyDataText: "Configured whereIsMyDataText",
+  howToPublishDataText: "Configured howToPublishDataText",
+  ingestManualExtraText = "Configured ingestManualExtraText",
+  whereAreMyProposalsExtraText = "Configured whereAreMyProposalsExtraText",
+  whereAreMySamplesExtraText = "Configured whereAreMySamplesExtraText",
   oAuth2Endpoints: [],
   policiesEnabled: true,
   retrieveDestinations: [],
diff --git a/src/app/app-config.service.ts b/src/app/app-config.service.ts
index c906f8a98..551cfd791 100644
--- a/src/app/app-config.service.ts
+++ b/src/app/app-config.service.ts
@@ -2,10 +2,9 @@ import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { timeout } from "rxjs/operators";
 import {
-  DatasetDetailComponentConfig,
+  datasetDetailViewLabelOption,
   DatasetsListSettings,
   LabelMaps,
-  LabelsLocalization,
   TableColumn,
 } from "state-management/models";
 
@@ -103,9 +102,18 @@ export interface AppConfig {
   labelMaps: LabelMaps;
   thumbnailFetchLimitPerPage: number;
   maxFileUploadSizeInMb?: string;
-  datasetDetailComponent?: DatasetDetailComponentConfig;
-  labelsLocalization?: LabelsLocalization;
-  dateFormat?: string;
+  datasetDetailViewLabelOption?: datasetDetailViewLabelOption;
+  aboutText?: string;
+  accessText?: string;
+  termsText?: string;
+  termsTextContinued?: string;
+  docText?: string;
+  gettingStartedExtraText?: string;
+  whereIsMyDataText?: string;
+  howToPublishDataText?: string;
+  ingestManualExtraText?: string;
+  whereAreMyProposalsExtraText?: string;
+  whereAreMySamplesExtraText?: string;
 }
 
 @Injectable()
@@ -133,10 +141,6 @@ export class AppConfigService {
   }
 
   getConfig(): AppConfig {
-    if (!this.appConfig) {
-      console.error("AppConfigService: Configuration not loaded!");
-    }
-
     return this.appConfig as AppConfig;
   }
 }
diff --git a/src/app/app-routing/lazy/dataset-details-dashboard-routing/dataset-details-dashboard.routing.module.ts b/src/app/app-routing/lazy/dataset-details-dashboard-routing/dataset-details-dashboard.routing.module.ts
index d48eeab3a..537f72088 100644
--- a/src/app/app-routing/lazy/dataset-details-dashboard-routing/dataset-details-dashboard.routing.module.ts
+++ b/src/app/app-routing/lazy/dataset-details-dashboard-routing/dataset-details-dashboard.routing.module.ts
@@ -2,21 +2,22 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { AdminGuard } from "app-routing/admin.guard";
 import { AuthGuard } from "app-routing/auth.guard";
+import { LeavingPageGuard } from "app-routing/pending-changes.guard";
 import { ServiceGuard } from "app-routing/service.guard";
 import { AdminTabComponent } from "datasets/admin-tab/admin-tab.component";
 import { DatafilesComponent } from "datasets/datafiles/datafiles.component";
 import { JsonScientificMetadataComponent } from "datasets/jsonScientificMetadata/jsonScientificMetadata.component";
+import { DatasetDetailComponent } from "datasets/dataset-detail/dataset-detail.component";
 import { DatasetFileUploaderComponent } from "datasets/dataset-file-uploader/dataset-file-uploader.component";
 import { DatasetLifecycleComponent } from "datasets/dataset-lifecycle/dataset-lifecycle.component";
 import { ReduceComponent } from "datasets/reduce/reduce.component";
 import { RelatedDatasetsComponent } from "datasets/related-datasets/related-datasets.component";
 import { LogbooksDashboardComponent } from "logbooks/logbooks-dashboard/logbooks-dashboard.component";
-import { DatasetDetailWrapperComponent } from "datasets/dataset-detail/dataset-detail-wrapper.component";
-
 const routes: Routes = [
   {
     path: "",
-    component: DatasetDetailWrapperComponent,
+    component: DatasetDetailComponent,
+    canDeactivate: [LeavingPageGuard],
   },
   {
     path: "jsonScientificMetadata",
@@ -27,7 +28,7 @@ const routes: Routes = [
     component: DatafilesComponent,
   },
   {
-    path: "relatedDatasets",
+    path: "related-datasets",
     component: RelatedDatasetsComponent,
   },
   // For reduce && logbook this is a work around because guard priority somehow doesn't work and this work around make guards excuted sequencial
diff --git a/src/app/app-routing/lazy/instruments-routing/instruments.routing.module.ts b/src/app/app-routing/lazy/instruments-routing/instruments.routing.module.ts
index 646787b7c..fdbcbe998 100644
--- a/src/app/app-routing/lazy/instruments-routing/instruments.routing.module.ts
+++ b/src/app/app-routing/lazy/instruments-routing/instruments.routing.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { AuthGuard } from "app-routing/auth.guard";
-import { leavingPageGuard } from "app-routing/pending-changes.guard";
+import { LeavingPageGuard } from "app-routing/pending-changes.guard";
 import { InstrumentDetailsComponent } from "instruments/instrument-details/instrument-details.component";
 import { InstrumentsDashboardComponent } from "instruments/instruments-dashboard/instruments-dashboard.component";
 
@@ -15,7 +15,7 @@ const routes: Routes = [
     path: ":id",
     component: InstrumentDetailsComponent,
     canActivate: [AuthGuard],
-    canDeactivate: [leavingPageGuard],
+    canDeactivate: [LeavingPageGuard],
   },
 ];
 @NgModule({
diff --git a/src/app/app-routing/lazy/samples-routing/samples.routing.module.ts b/src/app/app-routing/lazy/samples-routing/samples.routing.module.ts
index 3e3a2ed9f..cd1dd22df 100644
--- a/src/app/app-routing/lazy/samples-routing/samples.routing.module.ts
+++ b/src/app/app-routing/lazy/samples-routing/samples.routing.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { AuthGuard } from "app-routing/auth.guard";
-import { leavingPageGuard } from "app-routing/pending-changes.guard";
+import { LeavingPageGuard } from "app-routing/pending-changes.guard";
 import { SampleDashboardComponent } from "samples/sample-dashboard/sample-dashboard.component";
 import { SampleDetailComponent } from "samples/sample-detail/sample-detail.component";
 
@@ -15,7 +15,7 @@ const routes: Routes = [
     path: ":id",
     component: SampleDetailComponent,
     canActivate: [AuthGuard],
-    canDeactivate: [leavingPageGuard],
+    canDeactivate: [LeavingPageGuard],
   },
 ];
 @NgModule({
diff --git a/src/app/app-routing/pending-changes.guard.ts b/src/app/app-routing/pending-changes.guard.ts
index d5b8e15d3..991b03de1 100644
--- a/src/app/app-routing/pending-changes.guard.ts
+++ b/src/app/app-routing/pending-changes.guard.ts
@@ -1,36 +1,29 @@
-import { CanDeactivateFn } from "@angular/router";
+import { Injectable } from "@angular/core";
+import { CanDeactivate } from "@angular/router";
 import { Observable } from "rxjs";
 
 export interface EditableComponent {
   hasUnsavedChanges: () => boolean | Observable<boolean>;
+  // openLeavingPageGuardDialog(): () => void;
 }
-
-export const leavingPageGuard: CanDeactivateFn<EditableComponent> = (
-  component,
-) => {
-  const hasUnsavedChanges = component.hasUnsavedChanges();
-
-  if (typeof hasUnsavedChanges === "boolean") {
-    return hasUnsavedChanges
+/**
+ * Ensure that the user knowns about pending changes before leaving the page
+ * @export
+ * @class LeavingPageGuard
+ * @implements {CanDeactivate}
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class LeavingPageGuard implements CanDeactivate<EditableComponent> {
+  /**
+   * Needs to return either a boolean or an observable that maps to a boolean
+   */
+  canDeactivate(component: EditableComponent): Observable<boolean> | boolean {
+    return component.hasUnsavedChanges()
       ? confirm(
-          "You have unsaved changes. Press Cancel to go back and save these changes, or OK to leave without saving.",
+          "You have unsaved changes. Press Cancel to go back and save these changes, or OK to leave without saving",
         )
       : true;
   }
-
-  if (hasUnsavedChanges instanceof Observable) {
-    return new Observable<boolean>((subscriber) => {
-      hasUnsavedChanges.subscribe((unsaved) => {
-        subscriber.next(
-          !unsaved ||
-            confirm(
-              "You have unsaved changes. Press Cancel to go back and save these changes, or OK to leave without saving.",
-            ),
-        );
-        subscriber.complete();
-      });
-    });
-  }
-
-  return true;
-};
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 596e13037..729f25ab8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -121,16 +121,6 @@ const apiConfigurationFn = (
         subscriptSizing: "dynamic",
       },
     },
-    {
-      provide: DATE_PIPE_DEFAULT_OPTIONS,
-      useFactory: (appConfigService: AppConfigService) => {
-        return {
-          dateFormat:
-            appConfigService.getConfig().dateFormat || "yyyy-MM-dd HH:mm",
-        };
-      },
-      deps: [AppConfigService],
-    },
     AuthService,
     AppThemeService,
     Title,
diff --git a/src/app/datasets/batch-view/batch-view.component.html b/src/app/datasets/batch-view/batch-view.component.html
index cce14bc9f..c84f89a60 100644
--- a/src/app/datasets/batch-view/batch-view.component.html
+++ b/src/app/datasets/batch-view/batch-view.component.html
@@ -116,7 +116,7 @@
           </div>
         </mat-header-cell>
         <mat-cell *matCellDef="let dataset">
-          {{ dataset.creationTime | date }}
+          {{ dataset.creationTime | date: "yyyy-MM-dd HH:mm" }}
         </mat-cell>
       </ng-container>
 
diff --git a/src/app/datasets/dataset-detail/_dataset-detail-theme.scss b/src/app/datasets/dataset-detail/_dataset-detail-theme.scss
new file mode 100644
index 000000000..a040faf23
--- /dev/null
+++ b/src/app/datasets/dataset-detail/_dataset-detail-theme.scss
@@ -0,0 +1,44 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@mixin color($theme) {
+  $color-config: map.get($theme, "color");
+  $primary: map.get($color-config, "primary");
+  $header-1: map.get($color-config, "header-1");
+  $accent: map.get($color-config, "accent");
+  $header-2: map.get($color-config, "header-2");
+  $header-3: map.get($color-config, "header-3");
+  $header-4: map.get($color-config, "header-4");
+  mat-card {
+    .general-header {
+      background-color: mat.get-color-from-palette($primary, "lighter");
+    }
+
+    .creator-header {
+      background-color: mat.get-color-from-palette($header-1, "lighter");
+    }
+
+    .file-header {
+      background-color: mat.get-color-from-palette($accent, "lighter");
+    }
+
+    .related-header {
+      background-color: mat.get-color-from-palette($header-2, "lighter");
+    }
+
+    .derived-header {
+      background-color: mat.get-color-from-palette($header-3, "lighter");
+    }
+
+    .scientific-header {
+      background-color: mat.get-color-from-palette($header-4, "lighter");
+    }
+  }
+}
+
+@mixin theme($theme) {
+  $color-config: mat.get-color-config($theme);
+  @if $color-config != null {
+    @include color($theme);
+  }
+}
diff --git a/src/app/datasets/dataset-detail/dataset-detail.component.html b/src/app/datasets/dataset-detail/dataset-detail.component.html
new file mode 100644
index 000000000..3c3161ffe
--- /dev/null
+++ b/src/app/datasets/dataset-detail/dataset-detail.component.html
@@ -0,0 +1,464 @@
+<ng-template [ngIf]="dataset">
+  <div fxLayout="row">
+    <div fxFlex="auto">
+      <a
+        mat-raised-button
+        href="{{ appConfig.jupyterHubUrl }}"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="jupyter-button"
+        *ngIf="appConfig.jupyterHubUrl"
+      >
+        Jupyter Hub
+      </a>
+    </div>
+    <div fxFlex="auto" *ngIf="editingAllowed">
+      <mat-slide-toggle
+        class="public-toggle"
+        [checked]="dataset.isPublished"
+        (change)="onSlidePublic($event)"
+      >
+        Public
+      </mat-slide-toggle>
+    </div>
+  </div>
+  <div style="clear: both"></div>
+  <div fxLayout="row" fxLayout.xs="column" *ngIf="dataset">
+    <div [fxFlex]="(attachments$ | async)?.length > 0 ? '90%' : '100%'">
+      <mat-card [formGroup]="form" data-cy="general-info">
+        <mat-card-header class="general-header">
+          <div mat-card-avatar class="section-icon">
+            <mat-icon> description </mat-icon>
+          </div>
+          {{ "General Information" | translate }}
+        </mat-card-header>
+        <mat-card-content>
+          <table>
+            <tr>
+              <th>{{ "Dataset Name" | translate }}</th>
+              <td *ngIf="!editEnabled">{{ dataset.datasetName || "-" }}</td>
+              <td *ngIf="editEnabled && editingAllowed">
+                <mat-form-field class="full-width">
+                  <mat-label>{{ "Dataset Name" | translate }}</mat-label>
+                  <input matInput type="text" formControlName="datasetName" />
+                </mat-form-field>
+              </td>
+            </tr>
+            <tr>
+              <th>{{ "Description" | translate }}</th>
+              <td *ngIf="!editEnabled">
+                <span [innerHTML]="dataset.description || '-' | linky"></span>
+              </td>
+              <td *ngIf="editEnabled && editingAllowed">
+                <mat-form-field class="full-width">
+                  <mat-label>{{ "Description" | translate }}</mat-label>
+                  <textarea
+                    matInput
+                    rows="5"
+                    formControlName="description"
+                  ></textarea>
+                </mat-form-field>
+              </td>
+            </tr>
+            <tr>
+              <th>{{ "Pid" | translate }}</th>
+              <td>
+                {{ dataset.pid }}
+                <button
+                  mat-icon-button
+                  aria-label="copy"
+                  (click)="onCopy(dataset.pid)"
+                >
+                  <mat-icon class="copy-button">content_copy</mat-icon>
+                </button>
+              </td>
+            </tr>
+            <tr *ngIf="dataset.type as value">
+              <th>{{ "Type" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            <tr *ngIf="dataset.creationTime as value">
+              <th>{{ "Creation time" | translate }}</th>
+              <td>{{ value | date: "yyyy-MM-dd HH:mm" }}</td>
+            </tr>
+            <tr class="keywords-row">
+              <th>{{ "Keywords" | translate }}</th>
+              <td *ngIf="!editEnabled">
+                <mat-chip-set role="list" #keywordChips>
+                  <mat-chip
+                    role="listitem"
+                    *ngFor="let keyword of dataset.keywords"
+                  >
+                    {{ keyword }}
+                  </mat-chip>
+                </mat-chip-set>
+              </td>
+              <td *ngIf="editEnabled && editingAllowed">
+                <mat-form-field class="full-width">
+                  <mat-chip-grid #keywordChips formArrayName="keywords">
+                    <mat-chip-row
+                      *ngFor="let keyword of keywords.value"
+                      [removable]="true"
+                      (removed)="onRemoveKeyword(keyword)"
+                      (click)="onClickKeyword(keyword)"
+                    >
+                      {{ keyword }}
+                      <button matChipRemove>
+                        <mat-icon>cancel</mat-icon>
+                      </button>
+                    </mat-chip-row>
+                    <input
+                      [matChipInputFor]="keywordChips"
+                      [matChipInputSeparatorKeyCodes]="separatorKeyCodes"
+                      [matChipInputAddOnBlur]="true"
+                      (matChipInputTokenEnd)="onAddKeyword($event)"
+                    />
+                  </mat-chip-grid>
+                </mat-form-field>
+              </td>
+            </tr>
+            <tr *ngIf="dataset.sharedWith && dataset.sharedWith.length > 0">
+              <th>{{ "Shared With" | translate }}</th>
+              <td>
+                <mat-chip-listbox>
+                  <mat-chip-option
+                    *ngFor="let share of dataset.sharedWith"
+                    [removable]="true"
+                    (removed)="onRemoveShare(share)"
+                  >
+                    {{ share }}
+                    <button matChipRemove>
+                      <mat-icon>cancel</mat-icon>
+                    </button>
+                  </mat-chip-option>
+                </mat-chip-listbox>
+              </td>
+            </tr>
+          </table>
+        </mat-card-content>
+        <mat-card-actions align="end" *ngIf="editingAllowed">
+          <button
+            mat-raised-button
+            color="primary"
+            (click)="onEditModeEnable()"
+            *ngIf="!editEnabled"
+            data-cy="edit-general-information"
+          >
+            <mat-icon> edit </mat-icon> Edit
+          </button>
+          <button
+            *ngIf="editEnabled"
+            mat-raised-button
+            color="warn"
+            (click)="editEnabled = false"
+          >
+            Close
+          </button>
+          <button
+            *ngIf="editEnabled"
+            mat-raised-button
+            color="primary"
+            (click)="onSaveGeneralInformationChanges()"
+            data-cy="save-general-information"
+          >
+            <mat-icon> save </mat-icon> Save changes
+          </button>
+        </mat-card-actions>
+      </mat-card>
+
+      <mat-card>
+        <mat-card-header class="creator-header">
+          <div mat-card-avatar class="section-icon">
+            <mat-icon> person </mat-icon>
+          </div>
+          {{ "Creator Information" | translate }}
+        </mat-card-header>
+
+        <mat-card-content>
+          <table>
+            <tr *ngIf="dataset.owner as value">
+              <th>{{ "Owner" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            <tr *ngIf="dataset['principalInvestigator'] as value">
+              <th>{{ "Principal Investigator" | translate }}</th>
+              <td><span [innerHTML]="value | linky"></span></td>
+            </tr>
+            <tr *ngIf="dataset['investigator'] as value">
+              <th>{{ "Investigator" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            <tr *ngIf="dataset.orcidOfOwner as value">
+              <th>{{ "Orcid" | translate }}</th>
+              <td><span [innerHTML]="value | linky"></span></td>
+            </tr>
+            <tr *ngIf="dataset.contactEmail as value">
+              <th>{{ "Contact Email" | translate }}</th>
+              <td><span [innerHTML]="value | linky"></span></td>
+            </tr>
+            <tr *ngIf="dataset.ownerGroup as value">
+              <th>{{ "Owner Group" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            <tr *ngIf="dataset.accessGroups as value">
+              <th>{{ "Access Groups" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+          </table>
+        </mat-card-content>
+      </mat-card>
+
+      <mat-card>
+        <mat-card-header class="file-header">
+          <div mat-card-avatar class="section-icon">
+            <mat-icon> folder </mat-icon>
+          </div>
+          {{ "File Information" | translate }}
+        </mat-card-header>
+
+        <mat-card-content>
+          <table>
+            <tr *ngIf="dataset.sourceFolder as value">
+              <th>{{ "Source Folder" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            <tr *ngIf="dataset.size as value">
+              <th>{{ "Size" | translate }}</th>
+              <td>{{ value | filesize }}</td>
+            </tr>
+            <tr *ngIf="dataset['dataFormat'] as value">
+              <th>{{ "Data Format" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+          </table>
+        </mat-card-content>
+      </mat-card>
+
+      <mat-card>
+        <mat-card-header class="related-header">
+          <div mat-card-avatar class="section-icon">
+            <mat-icon> library_books </mat-icon>
+          </div>
+          {{ "Related Documents" | translate }}
+        </mat-card-header>
+
+        <mat-card-content>
+          <table>
+            <tr *ngIf="dataset['proposalId'] && proposal">
+              <th>{{ "Proposal" | translate }}</th>
+              <td>
+                <a (click)="onClickProposal(proposal.proposalId)">{{
+                  proposal.title
+                }}</a>
+              </td>
+            </tr>
+            <tr
+              *ngIf="
+                dataset['proposalId'] &&
+                !proposal &&
+                appConfig.datasetDetailsShowMissingProposalId
+              "
+            >
+              <th>{{ "Proposal Id" | translate }}</th>
+              <td>{{ dataset["proposalId"] }}</td>
+            </tr>
+            <tr *ngIf="dataset['sampleId'] && sample">
+              <th>{{ "Sample" | translate }}</th>
+              <td>
+                <a (click)="onClickSample(sample.sampleId)">
+                  <span>{{ sample.description }}</span>
+                </a>
+              </td>
+            </tr>
+            <tr *ngIf="dataset['instrumentId'] && instrument">
+              <th>{{ "Instrument" | translate }}</th>
+              <td>
+                <a (click)="onClickInstrument(instrument.pid)">
+                  {{ instrument.name }}
+                </a>
+              </td>
+            </tr>
+            <tr *ngIf="dataset['creationLocation'] as value">
+              <th>{{ "Creation Location" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            <tr *ngIf="dataset.techniques && dataset.techniques.length > 0">
+              <th>{{ "Techniques" | translate }}</th>
+              <td>
+                <div *ngFor="let technique of dataset.techniques">
+                  <span>
+                    {{ technique.name }}
+                  </span>
+                  <span
+                    *ngIf="
+                      dataset.techniques.indexOf(technique) <
+                      dataset.techniques.length - 1
+                    "
+                    >,
+                  </span>
+                </div>
+              </td>
+            </tr>
+            <tr
+              *ngIf="
+                dataset['inputDatasets'] && dataset['inputDatasets'].length > 0
+              "
+            >
+              <th>{{ "Input Datasets" | translate }}</th>
+              <td>
+                <div *ngFor="let datasetPid of dataset['inputDatasets']">
+                  <span>
+                    <a [routerLink]="['/datasets/', datasetPid]">
+                      {{ datasetPid }}
+                    </a>
+                  </span>
+                  <span
+                    *ngIf="
+                      dataset['inputDatasets'].indexOf(datasetPid) <
+                      dataset['inputDatasets'].length - 1
+                    "
+                    >,
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </mat-card-content>
+      </mat-card>
+
+      <mat-card *ngIf="dataset.type === 'derived'">
+        <mat-card-header class="derived-header">
+          <div mat-card-avatar class="section-icon">
+            <mat-icon> analytics </mat-icon>
+          </div>
+          {{ "Derived Data" | translate }}
+        </mat-card-header>
+
+        <mat-card-content>
+          <table>
+            <tr *ngIf="dataset['usedSoftware'] as value">
+              <th>{{ "Software Used" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+            <tr *ngIf="dataset['jobParameters'] as value">
+              <th>{{ "Job Parameters" | translate }}</th>
+              <td>{{ value | json }}</td>
+            </tr>
+            <tr *ngIf="dataset['jobLogData'] as value">
+              <th>{{ "Job Log Data" | translate }}</th>
+              <td>{{ value }}</td>
+            </tr>
+          </table>
+        </mat-card-content>
+      </mat-card>
+
+      <mat-card>
+        <mat-card-header class="scientific-header">
+          <div mat-card-avatar class="section-icon">
+            <mat-icon> science </mat-icon>
+          </div>
+          {{ "Scientific Metadata" | translate }}
+        </mat-card-header>
+        <mat-card-content>
+          <ng-template
+            [ngIf]="appConfig.tableSciDataEnabled"
+            [ngIfElse]="jsonView"
+          >
+            <ng-template #metadataView>
+              <div [ngSwitch]="appConfig.metadataStructure">
+                <tree-view
+                  *ngSwitchCase="'tree'"
+                  [metadata]="dataset['scientificMetadata']"
+                ></tree-view>
+                <metadata-view
+                  *ngSwitchDefault
+                  [metadata]="dataset['scientificMetadata']"
+                >
+                </metadata-view>
+              </div>
+            </ng-template>
+            <mat-tab-group
+              class="metadataGroup"
+              *ngIf="editingAllowed; else metadataView"
+            >
+              <mat-tab>
+                <ng-template mat-tab-label>
+                  <mat-icon> list </mat-icon> View
+                </ng-template>
+                <ng-container *ngTemplateOutlet="metadataView"> </ng-container>
+              </mat-tab>
+              <mat-tab
+                class="editTab"
+                *ngIf="editingAllowed"
+                [hidden]="!appConfig.editMetadataEnabled"
+              >
+                <ng-template mat-tab-label>
+                  <mat-icon> edit </mat-icon> Edit
+                </ng-template>
+                <div [ngSwitch]="appConfig.metadataStructure">
+                  <tree-edit
+                    *ngSwitchCase="'tree'"
+                    [metadata]="dataset['scientificMetadata']"
+                    (save)="onSaveMetadata($event)"
+                    (hasUnsavedChanges)="onHasUnsavedChanges($event)"
+                  >
+                  </tree-edit>
+                  <metadata-edit
+                    *ngSwitchDefault
+                    [metadata]="dataset['scientificMetadata']"
+                    (save)="onSaveMetadata($event)"
+                  >
+                  </metadata-edit>
+                </div>
+              </mat-tab>
+            </mat-tab-group>
+          </ng-template>
+
+          <ng-template #jsonView>
+            <ngx-json-viewer
+              [json]="dataset['scientificMetadata']"
+              [expanded]="false"
+            ></ngx-json-viewer>
+          </ng-template>
+        </mat-card-content>
+      </mat-card>
+      <mat-card *ngIf="appConfig.jsonMetadataEnabled">
+        <mat-card-content>
+          <button mat-stroked-button (click)="show = !show">
+            {{ (show ? "Hide Metadata" : "Show Metadata") | translate }}
+          </button>
+
+          <br />
+
+          <div *ngIf="show" class="jsonViewOverFlow">
+            <ngx-json-viewer
+              [json]="datasetWithout$ | async"
+              [expanded]="false"
+            >
+            </ngx-json-viewer>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+
+    <div
+      [fxFlex]="(attachments$ | async)?.length > 0 ? '10%' : '0'"
+      *ngIf="attachments$ | async as attachments"
+    >
+      <ng-container *ngFor="let da of attachments">
+        <mat-card>
+          <img
+            data-cy="attachment-thumbnail"
+            mat-card-image
+            [src]="getImageUrl(da.thumbnail)"
+            (click)="openAttachment(da.thumbnail)"
+            class="thumbnail-image"
+          />
+          <mat-card-actions class="caption-text">{{
+            da.caption
+          }}</mat-card-actions>
+        </mat-card>
+      </ng-container>
+    </div>
+  </div>
+</ng-template>
diff --git a/src/app/datasets/dataset-detail/dataset-detail.component.scss b/src/app/datasets/dataset-detail/dataset-detail.component.scss
new file mode 100644
index 000000000..14d17981e
--- /dev/null
+++ b/src/app/datasets/dataset-detail/dataset-detail.component.scss
@@ -0,0 +1,67 @@
+mat-card {
+  margin: 1em;
+
+  .section-icon {
+    height: auto !important;
+    width: auto !important;
+
+    mat-icon {
+      vertical-align: middle;
+    }
+  }
+  .caption-text {
+    word-break: break-all;
+  }
+
+  table {
+    th {
+      min-width: 10rem;
+      padding-right: 0.5rem;
+      text-align: left;
+    }
+
+    td {
+      width: 100%;
+      padding: 0.5rem 0;
+
+      .sample-edit {
+        padding-left: 0.5rem;
+
+        mat-icon {
+          font-size: medium;
+        }
+      }
+
+      .sample-edit:hover {
+        cursor: pointer;
+      }
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .keywords-row {
+      .add-keyword-chip:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+.jupyter-button {
+  margin: 1em 0 0 1em;
+}
+.public-toggle {
+  margin: 1em 1em 0 0;
+  float: right;
+}
+.attachment-card {
+  display: flex;
+  align-items: center;
+}
+.thumbnail-image {
+  cursor: pointer;
+  max-width: 14em; /* Set maximum width */
+  width: 100%; /* Make it responsive within the card */
+  height: auto; /* Maintain aspect ratio */
+}
diff --git a/src/app/datasets/dataset-detail/dataset-detail.component.spec.ts b/src/app/datasets/dataset-detail/dataset-detail.component.spec.ts
new file mode 100644
index 000000000..0a3ee66de
--- /dev/null
+++ b/src/app/datasets/dataset-detail/dataset-detail.component.spec.ts
@@ -0,0 +1,378 @@
+import { DatafilesComponent } from "../../datasets/datafiles/datafiles.component";
+import { DatasetDetailComponent } from "./dataset-detail.component";
+import { LinkyPipe } from "ngx-linky";
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+import {
+  ComponentFixture,
+  inject,
+  TestBed,
+  waitForAsync,
+} from "@angular/core/testing";
+import { SharedScicatFrontendModule } from "shared/shared.module";
+import { MatTableModule } from "@angular/material/table";
+import { MatChipInputEvent, MatChipsModule } from "@angular/material/chips";
+import { Observable, of } from "rxjs";
+import { MatDialogRef } from "@angular/material/dialog";
+import { MatCardModule } from "@angular/material/card";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatButtonModule } from "@angular/material/button";
+import { MatTabsModule } from "@angular/material/tabs";
+import { NgxJsonViewerModule } from "ngx-json-viewer";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { MockStore } from "@ngrx/store/testing";
+import { Store, StoreModule } from "@ngrx/store";
+import {
+  addKeywordFilterAction,
+  clearFacetsAction,
+  updatePropertyAction,
+} from "state-management/actions/datasets.actions";
+import {
+  MatSlideToggle,
+  MatSlideToggleChange,
+} from "@angular/material/slide-toggle";
+import { ActivatedRoute, Router } from "@angular/router";
+import { MockActivatedRoute, mockDataset } from "shared/MockStubs";
+import { DialogComponent } from "shared/modules/dialog/dialog.component";
+import { AppConfigService } from "app-config.service";
+import { AttachmentService } from "shared/services/attachment.service";
+import { OutputDatasetObsoleteDto } from "@scicatproject/scicat-sdk-ts-angular";
+import {
+  TranslateLoader,
+  TranslateModule,
+  TranslationObject,
+} from "@ngx-translate/core";
+class MockTranslateLoader implements TranslateLoader {
+  getTranslation(): Observable<TranslationObject> {
+    return of({});
+  }
+}
+
+describe("DatasetDetailComponent", () => {
+  let component: DatasetDetailComponent;
+  let fixture: ComponentFixture<DatasetDetailComponent>;
+
+  const router = {
+    navigateByUrl: jasmine.createSpy("navigateByUrl"),
+  };
+
+  const getConfig = () => ({
+    datasetDetailViewLabelOption: {
+      currentLabel: "test",
+    },
+  });
+
+  let store: MockStore;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      imports: [
+        BrowserAnimationsModule,
+        MatButtonModule,
+        MatCardModule,
+        MatChipsModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatTableModule,
+        MatTabsModule,
+        NgxJsonViewerModule,
+        SharedScicatFrontendModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader,
+          },
+        }),
+        StoreModule.forRoot({}),
+      ],
+      providers: [AttachmentService],
+      declarations: [DatasetDetailComponent, DatafilesComponent, LinkyPipe],
+    });
+    TestBed.overrideComponent(DatasetDetailComponent, {
+      set: {
+        providers: [
+          { provide: Router, useValue: router },
+          {
+            provide: AppConfigService,
+            useValue: {
+              getConfig,
+            },
+          },
+          { provide: ActivatedRoute, useClass: MockActivatedRoute },
+        ],
+      },
+    });
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(inject([Store], (mockStore: MockStore) => {
+    store = mockStore;
+    fixture = TestBed.createComponent(DatasetDetailComponent);
+    component = fixture.componentInstance;
+    component.dataset = {
+      pid: "testPid",
+      isPublished: false,
+    } as unknown as OutputDatasetObsoleteDto;
+    fixture.detectChanges();
+  }));
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("#onClickKeyword()", () => {
+    it("should update datasets keyword filter and navigate to datasets table", () => {
+      const dispatchSpy = spyOn(store, "dispatch");
+      const keyword = "test";
+      component.dataset = mockDataset;
+      component.onClickKeyword(keyword);
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(2);
+      expect(dispatchSpy).toHaveBeenCalledWith(clearFacetsAction());
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        addKeywordFilterAction({ keyword }),
+      );
+      expect(router.navigateByUrl).toHaveBeenCalledWith("/datasets");
+    });
+  });
+
+  describe("#onAddKeyword()", () => {
+    it("should add property keywords if it does not exist already", () => {
+      const event = {
+        chipInput: {
+          inputElement: {
+            value: "test",
+          },
+        },
+        value: "test",
+      };
+      const pid = "testPid";
+      component.dataset = mockDataset;
+      component.dataset.pid = pid;
+      component.onEditModeEnable();
+      component.onAddKeyword(event as MatChipInputEvent);
+
+      expect(component.keywords).toBeTruthy();
+      expect(component.keywords.length).toBe(1);
+      expect(component.form.value.keywords.length).toBe(1);
+    });
+
+    it("should do nothing if keyword already exists", () => {
+      const event = {
+        chipInput: {
+          inputElement: {
+            value: "test",
+          },
+        },
+        value: "test",
+      };
+      component.dataset = mockDataset;
+      component.dataset.keywords = ["test"];
+      component.onEditModeEnable();
+      expect(component.keywords.value.length).toBe(1);
+      expect(component.form.value.keywords.length).toBe(1);
+      component.onAddKeyword(event as MatChipInputEvent);
+
+      expect(component.keywords.value.length).toBe(1);
+      expect(component.form.value.keywords.length).toBe(1);
+    });
+
+    it("should add a keyword if the keyword does not exist", () => {
+      const event = {
+        chipInput: {
+          inputElement: {
+            value: "test",
+          },
+        },
+        value: "test",
+      };
+      const pid = "testPid";
+      component.dataset = mockDataset;
+      component.dataset.pid = pid;
+      component.dataset.keywords = [];
+      component.onEditModeEnable();
+      expect(component.keywords.value.length).toBe(0);
+      expect(component.form.value.keywords.length).toBe(0);
+      component.onAddKeyword(event as MatChipInputEvent);
+
+      expect(component.keywords.value.length).toBe(1);
+      expect(component.form.value.keywords.length).toBe(1);
+    });
+  });
+
+  describe("#onRemoveKeyword()", () => {
+    it("should do nothing if the keyword does not exist", () => {
+      const dispatchSpy = spyOn(store, "dispatch");
+
+      const keyword = "test";
+      component.dataset = mockDataset;
+      component.dataset.keywords = [];
+      component.onRemoveKeyword(keyword);
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(0);
+    });
+
+    it("should dispatch an updatePropertyAction if the keyword does exist", () => {
+      const keyword = "test";
+      const pid = "testPid";
+      component.dataset = mockDataset;
+      component.dataset.pid = pid;
+      component.dataset.keywords = [keyword];
+      component.onEditModeEnable();
+      expect(component.keywords.value.length).toBe(1);
+      expect(component.form.value.keywords.length).toBe(1);
+      component.onRemoveKeyword(keyword);
+
+      expect(component.keywords.value.length).toBe(0);
+      expect(component.form.value.keywords.length).toBe(0);
+    });
+  });
+
+  describe("#onSaveGeneralInformationChanges()", () => {
+    it("should dispatch an updatePropertyAction", () => {
+      const dispatchSpy = spyOn(store, "dispatch");
+
+      const keyword = "test";
+      const pid = "testPid";
+      component.dataset = mockDataset;
+      component.dataset.pid = pid;
+      component.dataset.keywords = [keyword];
+      component.dataset.datasetName = "Test dataset name";
+      component.dataset.description = "Test dataset description";
+      component.onEditModeEnable();
+      expect(component.keywords.value.length).toBe(1);
+      expect(component.form.value.keywords.length).toBe(1);
+      component.onSaveGeneralInformationChanges();
+
+      const property = {
+        keywords: component.dataset.keywords,
+        datasetName: component.dataset.datasetName,
+        description: component.dataset.description,
+      };
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(1);
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        updatePropertyAction({ pid, property }),
+      );
+    });
+  });
+
+  describe("#onSlidePublic()", () => {
+    it("should dispatch a updatePropertyAction", () => {
+      const dispatchSpy = spyOn(store, "dispatch");
+      const pid = "testPid";
+      component.dataset = mockDataset;
+      component.dataset.pid = pid;
+      const event = new MatSlideToggleChange({} as MatSlideToggle, true);
+      const property = { isPublished: true };
+      component.onSlidePublic(event);
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(1);
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        updatePropertyAction({ pid, property }),
+      );
+    });
+  });
+
+  describe("#onRemoveShare()", () => {
+    it("should do nothing if dataset is undefined", () => {
+      const dispatchSpy = spyOn(store, "dispatch");
+
+      component.dataset = undefined;
+      const share = "test";
+      component.onRemoveShare(share);
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(0);
+    });
+
+    it("should do nothing if dataset is defined and group does not exist", () => {
+      const dispatchSpy = spyOn(store, "dispatch");
+
+      component.dataset = mockDataset;
+      component.dataset.sharedWith = [];
+      const share = "test";
+      component.onRemoveShare(share);
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(0);
+    });
+
+    it("should dispatch an updatePropertyAction if dataset is defined and group exists", () => {
+      const dispatchSpy = spyOn(store, "dispatch");
+
+      const pid = "testPid";
+      const share = "test";
+      component.dataset = {
+        pid,
+        isPublished: false,
+        sharedWith: [share],
+      } as unknown as OutputDatasetObsoleteDto;
+      const dialogOpenSpy = spyOn(component.dialog, "open").and.returnValue({
+        afterClosed: () => of("ok"),
+      } as MatDialogRef<DialogComponent>);
+      component.onRemoveShare(share);
+
+      const property = { sharedWith: [] };
+      expect(dialogOpenSpy).toHaveBeenCalledTimes(1);
+      expect(dispatchSpy).toHaveBeenCalledTimes(1);
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        updatePropertyAction({ pid, property }),
+      );
+    });
+  });
+
+  describe("#onClickInstrument()", () => {
+    it("should navigate to an instrument", () => {
+      const instrumentId = "testId";
+
+      component.onClickInstrument(instrumentId);
+
+      expect(router.navigateByUrl).toHaveBeenCalledWith(
+        "/instruments/" + instrumentId,
+      );
+    });
+  });
+
+  describe("#onClickProposal()", () => {
+    it("should navigate to a proposal", () => {
+      const proposalId = "ABC123";
+      component.onClickProposal(proposalId);
+
+      expect(router.navigateByUrl).toHaveBeenCalledWith(
+        "/proposals/" + proposalId,
+      );
+    });
+  });
+
+  describe("#onClickSample()", () => {
+    it("should navigate to a sample", () => {
+      const sampleId = "testId";
+      component.onClickSample(sampleId);
+
+      expect(router.navigateByUrl).toHaveBeenCalledWith("/samples/" + sampleId);
+    });
+  });
+
+  describe("#onSaveMetadata()", () => {
+    it("should dispatch an updatePropertyAction", () => {
+      const dispatchSpy = spyOn(store, "dispatch");
+
+      const pid = "testPid";
+      component.dataset = mockDataset;
+      component.dataset.pid = pid;
+      const metadata = {};
+      const property = { scientificMetadata: metadata };
+      component.onSaveMetadata(metadata);
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(1);
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        updatePropertyAction({ pid, property }),
+      );
+    });
+  });
+});
diff --git a/src/app/datasets/dataset-detail/dataset-detail.component.ts b/src/app/datasets/dataset-detail/dataset-detail.component.ts
new file mode 100644
index 000000000..ca5287d33
--- /dev/null
+++ b/src/app/datasets/dataset-detail/dataset-detail.component.ts
@@ -0,0 +1,323 @@
+import { Component, OnInit, OnDestroy, Inject } from "@angular/core";
+import { ENTER, COMMA, SPACE } from "@angular/cdk/keycodes";
+import { MatChipInputEvent } from "@angular/material/chips";
+
+import { MatDialog } from "@angular/material/dialog";
+// import { SampleEditComponent } from "datasets/sample-edit/sample-edit.component";
+import { DialogComponent } from "shared/modules/dialog/dialog.component";
+import { combineLatest, fromEvent, Observable, Subscription } from "rxjs";
+import { Store } from "@ngrx/store";
+
+import { showMessageAction } from "state-management/actions/user.actions";
+import {
+  selectCurrentAttachments,
+  selectCurrentDataset,
+  selectCurrentDatasetWithoutFileInfo,
+} from "state-management/selectors/datasets.selectors";
+import {
+  selectCurrentUser,
+  selectIsAdmin,
+  selectIsLoading,
+  selectProfile,
+} from "state-management/selectors/user.selectors";
+import { map } from "rxjs/operators";
+import {
+  addKeywordFilterAction,
+  clearFacetsAction,
+  updatePropertyAction,
+} from "state-management/actions/datasets.actions";
+import { Router } from "@angular/router";
+import { selectCurrentProposal } from "state-management/selectors/proposals.selectors";
+import { MatSlideToggleChange } from "@angular/material/slide-toggle";
+import { EditableComponent } from "app-routing/pending-changes.guard";
+import { AppConfigService } from "app-config.service";
+import { selectCurrentSample } from "state-management/selectors/samples.selectors";
+import { selectCurrentInstrument } from "state-management/selectors/instruments.selectors";
+import {
+  FormArray,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from "@angular/forms";
+import { Message, MessageType } from "state-management/models";
+import { DOCUMENT } from "@angular/common";
+import {
+  Instrument,
+  OutputDatasetObsoleteDto,
+  ProposalClass,
+  ReturnedUserDto,
+  SampleClass,
+} from "@scicatproject/scicat-sdk-ts-angular";
+import { AttachmentService } from "shared/services/attachment.service";
+import { TranslateService } from "@ngx-translate/core";
+
+/**
+ * Component to show details for a data set, using the
+ * form component
+ * @export
+ * @class DatasetDetailComponent
+ */
+@Component({
+  selector: "dataset-detail",
+  templateUrl: "./dataset-detail.component.html",
+  styleUrls: ["./dataset-detail.component.scss"],
+  standalone: false,
+})
+export class DatasetDetailComponent
+  implements OnInit, OnDestroy, EditableComponent
+{
+  private subscriptions: Subscription[] = [];
+  private _hasUnsavedChanges = false;
+  form: FormGroup;
+  userProfile$ = this.store.select(selectProfile);
+  isAdmin$ = this.store.select(selectIsAdmin);
+  accessGroups$: Observable<string[]> = this.userProfile$.pipe(
+    map((profile) => (profile ? profile.accessGroups : [])),
+  );
+
+  appConfig = this.appConfigService.getConfig();
+
+  dataset: OutputDatasetObsoleteDto | undefined;
+  datasetWithout$ = this.store.select(selectCurrentDatasetWithoutFileInfo);
+  attachments$ = this.store.select(selectCurrentAttachments);
+  loading$ = this.store.select(selectIsLoading);
+  instrument: Instrument | undefined;
+  proposal: ProposalClass | undefined;
+  sample: SampleClass | undefined;
+  user: ReturnedUserDto | undefined;
+  editingAllowed = false;
+  editEnabled = false;
+  show = false;
+  readonly separatorKeyCodes: number[] = [ENTER, COMMA, SPACE];
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    public appConfigService: AppConfigService,
+    public dialog: MatDialog,
+    private attachmentService: AttachmentService,
+    private translateService: TranslateService,
+    private store: Store,
+    private router: Router,
+    private fb: FormBuilder,
+  ) {
+    this.translateService.use(
+      this.appConfig.datasetDetailViewLabelOption?.currentLabelSet,
+    );
+  }
+
+  ngOnInit() {
+    this.form = this.fb.group({
+      datasetName: new FormControl("", [Validators.required]),
+      description: new FormControl("", [Validators.required]),
+      keywords: this.fb.array([]),
+    });
+
+    this.subscriptions.push(
+      this.store.select(selectCurrentDataset).subscribe((dataset) => {
+        this.dataset = dataset;
+        if (this.dataset) {
+          combineLatest([this.accessGroups$, this.isAdmin$]).subscribe(
+            ([groups, isAdmin]) => {
+              this.editingAllowed =
+                groups.indexOf(this.dataset.ownerGroup) !== -1 || isAdmin;
+            },
+          );
+        }
+      }),
+    );
+
+    this.subscriptions.push(
+      this.store.select(selectCurrentInstrument).subscribe((instrument) => {
+        this.instrument = instrument;
+      }),
+    );
+
+    this.subscriptions.push(
+      this.store.select(selectCurrentProposal).subscribe((proposal) => {
+        this.proposal = proposal;
+      }),
+    );
+
+    this.subscriptions.push(
+      this.store.select(selectCurrentSample).subscribe((sample) => {
+        this.sample = sample;
+      }),
+    );
+
+    // Prevent user from reloading page if there are unsave changes
+    this.subscriptions.push(
+      fromEvent(window, "beforeunload").subscribe((event) => {
+        if (this.hasUnsavedChanges()) {
+          event.preventDefault();
+        }
+      }),
+    );
+
+    this.subscriptions.push(
+      this.store.select(selectCurrentUser).subscribe((user) => {
+        if (user) {
+          this.user = user;
+        }
+      }),
+    );
+  }
+
+  onEditModeEnable() {
+    this.form = this.fb.group({
+      datasetName: this.dataset.datasetName || "",
+      description: this.dataset.description || "",
+      keywords: this.fb.array(this.dataset.keywords || []),
+    });
+    this.editEnabled = true;
+  }
+
+  hasUnsavedChanges() {
+    return this._hasUnsavedChanges;
+  }
+
+  onClickKeyword(keyword: string) {
+    this.store.dispatch(clearFacetsAction());
+    this.store.dispatch(addKeywordFilterAction({ keyword }));
+    this.router.navigateByUrl("/datasets");
+  }
+
+  get keywords(): FormArray {
+    return this.form.controls.keywords as FormArray;
+  }
+
+  onAddKeyword(event: MatChipInputEvent): void {
+    const input = event.chipInput.inputElement;
+    const value = event.value;
+
+    if ((value || "").trim() && this.dataset) {
+      const keyword = value.trim().toLowerCase();
+      if (this.keywords.value.indexOf(keyword) === -1) {
+        this.keywords.push(this.fb.control(keyword));
+
+        // Reset the input value
+        if (input) {
+          input.value = "";
+        }
+      }
+    }
+  }
+
+  onRemoveKeyword(keyword: string): void {
+    const index = this.keywords.value.indexOf(keyword);
+    if (index >= 0) {
+      this.keywords.removeAt(index);
+    }
+  }
+
+  onSaveGeneralInformationChanges() {
+    const pid = this.dataset.pid;
+
+    if (pid) {
+      const property = {
+        datasetName: this.form.value.datasetName,
+        description: this.form.value.description,
+        keywords: this.keywords.value,
+      };
+
+      this.store.dispatch(updatePropertyAction({ pid, property }));
+    }
+
+    this.editEnabled = false;
+  }
+
+  onRemoveShare(share: string): void {
+    const dialogRef = this.dialog.open(DialogComponent, {
+      width: "auto",
+      data: {
+        title: `Really remove ${share}?`,
+        question: `If you click 'Ok', ${share} will no longer be able to access this Dataset.`,
+      },
+    });
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result && this.dataset) {
+        const index = this.dataset.sharedWith.indexOf(share);
+        if (index >= 0) {
+          const pid = this.dataset.pid;
+          const sharedWith: string[] = [...this.dataset.sharedWith];
+          sharedWith.splice(index, 1);
+          const property = { sharedWith };
+          this.store.dispatch(updatePropertyAction({ pid, property }));
+        }
+      }
+    });
+  }
+
+  onClickInstrument(instrumentId: string): void {
+    const pid = encodeURIComponent(instrumentId);
+    this.router.navigateByUrl("/instruments/" + pid);
+  }
+
+  onClickProposal(proposalId: string): void {
+    const id = encodeURIComponent(proposalId);
+    this.router.navigateByUrl("/proposals/" + id);
+  }
+
+  onClickSample(sampleId: string): void {
+    const id = encodeURIComponent(sampleId);
+    this.router.navigateByUrl("/samples/" + id);
+  }
+
+  onSlidePublic(event: MatSlideToggleChange) {
+    if (this.dataset) {
+      const pid = this.dataset.pid;
+      const property = { isPublished: event.checked };
+      this.store.dispatch(updatePropertyAction({ pid, property }));
+    }
+  }
+
+  onSaveMetadata(metadata: Record<string, any>) {
+    if (this.dataset) {
+      const pid = this.dataset.pid;
+      const property = { scientificMetadata: metadata };
+      this.store.dispatch(updatePropertyAction({ pid, property }));
+    }
+  }
+
+  onHasUnsavedChanges($event: boolean) {
+    this._hasUnsavedChanges = $event;
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((subscription) => {
+      subscription.unsubscribe();
+    });
+  }
+
+  onCopy(pid: string) {
+    const selectionBox = this.document.createElement("textarea");
+    selectionBox.style.position = "fixed";
+    selectionBox.style.left = "0";
+    selectionBox.style.top = "0";
+    selectionBox.style.opacity = "0";
+    selectionBox.value = pid;
+    this.document.body.appendChild(selectionBox);
+    selectionBox.focus();
+    selectionBox.select();
+    this.document.execCommand("copy");
+    this.document.body.removeChild(selectionBox);
+
+    const message = new Message(
+      "Dataset PID has been copied to your clipboard",
+      MessageType.Success,
+      5000,
+    );
+    this.store.dispatch(showMessageAction({ message }));
+  }
+  base64MimeType(encoded: string): string {
+    return this.attachmentService.base64MimeType(encoded);
+  }
+
+  getImageUrl(encoded: string) {
+    return this.attachmentService.getImageUrl(encoded);
+  }
+
+  openAttachment(encoded: string) {
+    this.attachmentService.openAttachment(encoded);
+  }
+}
diff --git a/src/app/datasets/dataset-details-dashboard/dataset-details-dashboard.component.ts b/src/app/datasets/dataset-details-dashboard/dataset-details-dashboard.component.ts
index 5b9f41941..81647ca0f 100644
--- a/src/app/datasets/dataset-details-dashboard/dataset-details-dashboard.component.ts
+++ b/src/app/datasets/dataset-details-dashboard/dataset-details-dashboard.component.ts
@@ -168,7 +168,7 @@ export class DatasetDetailsDashboardComponent
                 enabled: true,
               },
               {
-                location: "./relatedDatasets",
+                location: "./related-datasets",
                 label: TAB.relatedDatasets,
                 icon: "folder",
                 enabled: true,
diff --git a/src/app/datasets/dataset-lifecycle/dataset-lifecycle.component.html b/src/app/datasets/dataset-lifecycle/dataset-lifecycle.component.html
index 845dde9e0..56d6d6506 100644
--- a/src/app/datasets/dataset-lifecycle/dataset-lifecycle.component.html
+++ b/src/app/datasets/dataset-lifecycle/dataset-lifecycle.component.html
@@ -13,7 +13,7 @@
             <table class="lifecycle-table" *ngIf="dataset.datasetlifecycle">
               <tr *ngIf="dataset.creationTime as value">
                 <th>Creation Date</th>
-                <td>{{ value | date }}</td>
+                <td>{{ value | date: "yyyy-MM-dd" }}</td>
               </tr>
               <tr
                 *ngIf="
@@ -22,7 +22,7 @@
                 "
               >
                 <th>End of Embargo Period</th>
-                <td>{{ value | date }}</td>
+                <td>{{ value | date: "yyyy-MM-dd" }}</td>
               </tr>
               <tr
                 *ngIf="
@@ -31,7 +31,7 @@
                 "
               >
                 <th>Publication Date</th>
-                <td>{{ value | date }}</td>
+                <td>{{ value | date: "yyyy-MM-dd" }}</td>
               </tr>
               <tr
                 *ngIf="
@@ -40,7 +40,7 @@
                 "
               >
                 <th>Data Deletion Date</th>
-                <td>{{ value | date }}</td>
+                <td>{{ value | date: "yyyy-MM-dd" }}</td>
               </tr>
               <tr
                 *ngIf="
@@ -49,7 +49,7 @@
                 "
               >
                 <th>Archive Retention Date</th>
-                <td>{{ value | date }}</td>
+                <td>{{ value | date: "yyyy-MM-dd" }}</td>
               </tr>
             </table>
           </div>
diff --git a/src/app/datasets/dataset-table/dataset-table.component.html b/src/app/datasets/dataset-table/dataset-table.component.html
index fe8299015..9aa6f3dd9 100644
--- a/src/app/datasets/dataset-table/dataset-table.component.html
+++ b/src/app/datasets/dataset-table/dataset-table.component.html
@@ -176,7 +176,8 @@
       </mat-header-cell>
       <mat-cell *matCellDef="let dataset">
         <div fxLayout="column">
-          <div>{{ dataset.creationTime | date }}</div>
+          <div>{{ dataset.creationTime | date: "yyyy-MM-dd" }}</div>
+          <div>{{ dataset.creationTime | date: "EEE HH:mm" }}</div>
         </div>
       </mat-cell>
     </ng-container>
diff --git a/src/app/datasets/datasets.module.ts b/src/app/datasets/datasets.module.ts
index 2cebf8218..b0330d5c5 100644
--- a/src/app/datasets/datasets.module.ts
+++ b/src/app/datasets/datasets.module.ts
@@ -51,7 +51,7 @@ import { DashboardComponent } from "./dashboard/dashboard.component";
 import { DatablocksComponent } from "./datablocks-table/datablocks-table.component";
 import { DatafilesComponent } from "./datafiles/datafiles.component";
 import { JsonScientificMetadataComponent } from "./jsonScientificMetadata/jsonScientificMetadata.component";
-import { DatasetDetailComponent } from "./dataset-detail/dataset-detail/dataset-detail.component";
+import { DatasetDetailComponent } from "./dataset-detail/dataset-detail.component";
 import { DatasetTableComponent } from "./dataset-table/dataset-table.component";
 import { DatasetsFilterComponent } from "./datasets-filter/datasets-filter.component";
 import { AddDatasetDialogComponent } from "./add-dataset-dialog/add-dataset-dialog.component";
@@ -90,8 +90,7 @@ import { CdkDrag, CdkDragHandle, CdkDropList } from "@angular/cdk/drag-drop";
 import { FiltersModule } from "shared/modules/filters/filters.module";
 import { userReducer } from "state-management/reducers/user.reducer";
 import { MatSnackBarModule } from "@angular/material/snack-bar";
-import { DatasetDetailDynamicComponent } from "./dataset-detail/dataset-detail-dynamic/dataset-detail-dynamic.component";
-import { DatasetDetailWrapperComponent } from "./dataset-detail/dataset-detail-wrapper.component";
+import { TranslateModule } from "@ngx-translate/core";
 @NgModule({
   imports: [
     CommonModule,
@@ -154,6 +153,7 @@ import { DatasetDetailWrapperComponent } from "./dataset-detail/dataset-detail-w
     CdkDrag,
     CdkDragHandle,
     FiltersModule,
+    TranslateModule,
   ],
   declarations: [
     BatchViewComponent,
@@ -161,9 +161,7 @@ import { DatasetDetailWrapperComponent } from "./dataset-detail/dataset-detail-w
     DatablocksComponent,
     JsonScientificMetadataComponent,
     DatafilesComponent,
-    DatasetDetailWrapperComponent,
     DatasetDetailComponent,
-    DatasetDetailDynamicComponent,
     DatasetTableComponent,
     DatasetsFilterComponent,
     PublishComponent,
@@ -202,7 +200,7 @@ import { DatasetDetailWrapperComponent } from "./dataset-detail/dataset-detail-w
     DatablocksComponent,
     JsonScientificMetadataComponent,
     DatafilesComponent,
-    DatasetDetailWrapperComponent,
+    DatasetDetailComponent,
     DatasetTableComponent,
     DatasetsFilterComponent,
   ],
diff --git a/src/app/datasets/reduce/reduce.component.html b/src/app/datasets/reduce/reduce.component.html
index d70d7e645..9236d3d8d 100644
--- a/src/app/datasets/reduce/reduce.component.html
+++ b/src/app/datasets/reduce/reduce.component.html
@@ -195,7 +195,7 @@ <h4>Description</h4>
                 </div>
               </mat-header-cell>
               <mat-cell *matCellDef="let dataset">
-                {{ dataset.createdAt | date }}
+                {{ dataset.createdAt | date: "yyyy-MM-dd, EEE HH:mm" }}
               </mat-cell>
             </ng-container>
 
diff --git a/src/app/datasets/sample-edit/sample-edit.component.html b/src/app/datasets/sample-edit/sample-edit.component.html
index ad37628f8..cffc792b7 100644
--- a/src/app/datasets/sample-edit/sample-edit.component.html
+++ b/src/app/datasets/sample-edit/sample-edit.component.html
@@ -56,7 +56,7 @@ <h1 mat-dialog-title>Edit Dataset Sample</h1>
         Creation Time
       </mat-header-cell>
       <mat-cell *matCellDef="let row">
-        {{ row.createdAt | date }}
+        {{ row.createdAt | date: "yyyy-MM-dd, hh:mm" }}
       </mat-cell>
     </ng-container>
 
diff --git a/src/app/help/help.module.ts b/src/app/help/help.module.ts
index 86524c575..7421c82cd 100644
--- a/src/app/help/help.module.ts
+++ b/src/app/help/help.module.ts
@@ -3,9 +3,10 @@ import { CommonModule } from "@angular/common";
 import { HelpComponent } from "./help/help.component";
 import { MatCardModule } from "@angular/material/card";
 import { RouterModule } from "@angular/router";
+import { LinkyModule } from "ngx-linky";
 
 @NgModule({
   declarations: [HelpComponent],
-  imports: [CommonModule, MatCardModule, RouterModule],
+  imports: [CommonModule, MatCardModule, LinkyModule, RouterModule],
 })
 export class HelpModule {}
diff --git a/src/app/help/help/help.component.html b/src/app/help/help/help.component.html
index 4474f5343..016fe7112 100644
--- a/src/app/help/help/help.component.html
+++ b/src/app/help/help/help.component.html
@@ -4,11 +4,7 @@
       <mat-card-title>Where is the official documentation?</mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      This is our
-      <a href="https://scicatproject.github.io/" target="blank"
-        >documentation homepage</a
-      >. Following the documentation link (blue button at top left) you will
-      find detailed information for Users, Developers, Operators and Ingestors
+      <span [innerHTML]="docText | linky"></span>
     </mat-card-content>
   </mat-card>
 </p>
@@ -23,39 +19,19 @@
       <a href="{{ gettingStarted }}" target="blank">Getting Started Guide</a>
       {{ helpMessages.gettingStarted }}
     </mat-card-content>
-  </mat-card>
-</p>
-
-<p>
-  <mat-card class="help-card" *ngIf="facility !== 'PSI'">
-    <mat-card-header>
-      <mat-card-title>Where is my data?</mat-card-title>
-    </mat-card-header>
     <mat-card-content>
-      Your data is stored and can be accessed by logging into
-      {{ facility }} using sftp to download a file. Alternatively, individual
-      datafiles can be downloaded by clicking on a datafiles tab for a given
-      dataset, however this is not recommended for large datasets
+      <span [innerHTML]="gettingStartedExtraText | linky"></span>
     </mat-card-content>
   </mat-card>
 </p>
 
 <p>
-  <mat-card class="help-card" *ngIf="facility === 'PSI'">
+  <mat-card class="help-card">
     <mat-card-header>
       <mat-card-title>Where is my data?</mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      The data catalog keeps the *metadata* for your raw and derived datasets.
-      The actual files comprising the datasets are however stored outside the
-      catalog. Often the data will reside initially on disk. The data catalog
-      allows you to archive these files. In this way the files on disk will be
-      copied to tape and can be retrieved later to a location of your choice.
-      Here are the
-      <a href="https://scicatproject.github.io/documentation/Users/Jobs.html"
-        >details on the archive and retrieve workflows</a
-      >
-      see
+      <span [innerHTML]="whereIsMyDataText | linky"></span>
     </mat-card-content>
   </mat-card>
 </p>
@@ -66,8 +42,7 @@
       <mat-card-title>How can I publish a dataset?</mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      Select datasets in the dataset table and add to <b>Cart</b>. Once in
-      <b>Cart</b>, click <b>Publish</b> and follow instructions.
+      <span [innerHTML]="howToPublishDataText | linky"></span>
     </mat-card-content>
   </mat-card>
 </p>
@@ -82,6 +57,9 @@
       <a href="{{ ingestManual }}" target="blank">Ingest Manual</a>
       {{ helpMessages.ingestManual }}
     </mat-card-content>
+    <mat-card-content>
+      <span [innerHTML]="ingestManualExtraText | linky"></span>
+    </mat-card-content>
   </mat-card>
 </p>
 
@@ -94,6 +72,9 @@
       Once logged in, you can see your proposals at
       <a routerLink="/proposals" routerLinkActive="active">Proposals</a>
     </mat-card-content>
+    <mat-card-content>
+      <span [innerHTML]="whereAreMyProposalsExtraText | linky"></span>
+    </mat-card-content>
   </mat-card>
 </p>
 
@@ -106,5 +87,8 @@
       Once logged in, you can see your samples at
       <a routerLink="/samples" routerLinkActive="active">Samples</a>
     </mat-card-content>
+    <mat-card-content>
+      <span [innerHTML]="whereAreMySamplesExtraText | linky"></span>
+    </mat-card-content>
   </mat-card>
 </p>
diff --git a/src/app/help/help/help.component.spec.ts b/src/app/help/help/help.component.spec.ts
index 9e6ed8ba1..c317fa8fd 100644
--- a/src/app/help/help/help.component.spec.ts
+++ b/src/app/help/help/help.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { HelpComponent } from "./help.component";
 import { MatCardModule } from "@angular/material/card";
+import { LinkyModule } from "ngx-linky";
 import { AppConfigService, HelpMessages } from "app-config.service";
 
 const getConfig = () => ({
@@ -18,7 +19,7 @@ describe("HelpComponent", () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [HelpComponent],
-      imports: [MatCardModule],
+      imports: [MatCardModule, LinkyModule],
     });
     TestBed.overrideComponent(HelpComponent, {
       set: {
diff --git a/src/app/help/help/help.component.ts b/src/app/help/help/help.component.ts
index 58823a5f8..2f264a60d 100644
--- a/src/app/help/help/help.component.ts
+++ b/src/app/help/help/help.component.ts
@@ -13,6 +13,13 @@ export class HelpComponent implements OnInit {
   gettingStarted: string | null = null;
   shoppingCartEnabled = false;
   helpMessages: HelpMessages;
+  docText = "";
+  gettingStartedExtraText = "";
+  whereIsMyDataText = "";
+  howToPublishDataText = "";
+  ingestManualExtraText = "";
+  whereAreMyProposalsExtraText = "";
+  whereAreMySamplesExtraText = "";
   constructor(public appConfigService: AppConfigService) {}
 
   ngOnInit() {
@@ -24,5 +31,29 @@ export class HelpComponent implements OnInit {
     );
     this.gettingStarted = this.appConfig.gettingStarted;
     this.shoppingCartEnabled = this.appConfig.shoppingCartEnabled;
+    this.docText = 
+      this.appConfig.docText || 
+      "This is our documentation homepage https://scicatproject.github.io/. Following the documentation link (blue button at top left) you will find detailed information for Users, Developers, Operators and Ingestors.";
+    this.gettingStartedExtraText = 
+      this.appConfig.gettingStartedExtraText || 
+      "";
+    let rawText = 
+      this.appConfig.whereIsMyDataText || 
+      "Your data is stored and can be accessed by logging into {{ facility }} using sftp to download a file. Alternatively, individual datafiles can be downloaded by clicking on a datafiles tab for a given dataset, however this is not recommended for large datasets.";
+    this.whereIsMyDataText = rawText.replace(
+      "{{ facility }}", this.facility
+    );
+    this.howToPublishDataText = 
+      this.appConfig.howToPublishDataText || 
+      "Select datasets in the dataset table and add to <b>Cart</b>. Once in <b>Cart</b>, click <b>Publish</b> and follow instructions."; 
+    this.ingestManualExtraText = 
+      this.appConfig.ingestManualExtraText || 
+      "";
+    this.whereAreMyProposalsExtraText = 
+      this.appConfig.whereAreMyProposalsExtraText || 
+      "";
+    this.whereAreMySamplesExtraText = 
+      this.appConfig.whereAreMySamplesExtraText || 
+      "";
   }
 }
diff --git a/src/app/jobs/jobs-detail/jobs-detail.component.html b/src/app/jobs/jobs-detail/jobs-detail.component.html
index e7eacda48..ac4678930 100644
--- a/src/app/jobs/jobs-detail/jobs-detail.component.html
+++ b/src/app/jobs/jobs-detail/jobs-detail.component.html
@@ -21,14 +21,14 @@
             <mat-icon> brightness_high </mat-icon>
             Creation Time
           </th>
-          <td>{{ value | date }}</td>
+          <td>{{ value | date: "yyyy-MM-dd HH:mm" }}</td>
         </tr>
         <tr *ngIf="job.executionTime as value">
           <th>
             <mat-icon> gavel </mat-icon>
             Execution Time
           </th>
-          <td>{{ value | date }}</td>
+          <td>{{ value | date: "yyyy-MM-dd HH:mm" }}</td>
         </tr>
         <tr *ngIf="job.jobParams as value">
           <th>
@@ -42,7 +42,7 @@
             <mat-icon> markunread </mat-icon>
             Date Of Last Message
           </th>
-          <td>{{ value | date }}</td>
+          <td>{{ value | date: "yyyy-MM-dd HH:mm" }}</td>
         </tr>
         <tr *ngIf="job.datasetList as value">
           <th>
@@ -58,14 +58,14 @@
             <mat-icon> calendar_today </mat-icon>
             Created At
           </th>
-          <td>{{ value | date }}</td>
+          <td>{{ value | date: "yyyy-MM-dd HH:mm" }}</td>
         </tr>
         <tr *ngIf="job.updatedAt as value">
           <th>
             <mat-icon> calendar_today </mat-icon>
             Updated At
           </th>
-          <td>{{ value | date }}</td>
+          <td>{{ value | date: "yyyy-MM-dd HH:mm" }}</td>
         </tr>
       </table>
     </mat-card-content>
diff --git a/src/app/logbooks/logbooks-detail/logbooks-detail.component.html b/src/app/logbooks/logbooks-detail/logbooks-detail.component.html
index 904a49666..6dea84c13 100644
--- a/src/app/logbooks/logbooks-detail/logbooks-detail.component.html
+++ b/src/app/logbooks/logbooks-detail/logbooks-detail.component.html
@@ -28,7 +28,7 @@
         </div>
       </mat-header-cell>
       <mat-cell *matCellDef="let message">
-        {{ message.origin_server_ts | date }}
+        {{ message.origin_server_ts | date: "yyyy-MM-dd, EEE HH:mm" }}
       </mat-cell>
     </ng-container>
 
diff --git a/src/app/logbooks/logbooks-table/logbooks-table.component.html b/src/app/logbooks/logbooks-table/logbooks-table.component.html
index 5a83d3ca0..8095e4e12 100644
--- a/src/app/logbooks/logbooks-table/logbooks-table.component.html
+++ b/src/app/logbooks/logbooks-table/logbooks-table.component.html
@@ -28,7 +28,10 @@
         </mat-header-cell>
         <mat-cell *matCellDef="let logbook">
           <div fxLayout="column" *ngIf="logbook.messages.length > 0">
-            {{ logbook.messages[0].origin_server_ts | date }}
+            {{
+              logbook.messages[0].origin_server_ts
+                | date: "yyyy-MM-dd, EEE HH:mm"
+            }}
           </div>
           <div fxLayout="column" *ngIf="logbook.messages.length === 0">
             No entries.
diff --git a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html
index fc59f5856..43f7b09fe 100644
--- a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html
+++ b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.html
@@ -24,4 +24,4 @@
   style="height: 70vh"
   class="mat-elevation-z2"
 >
-</dynamic-mat-table>
+</shared-table>
diff --git a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.spec.ts b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.spec.ts
index e04620099..77fcac220 100644
--- a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.spec.ts
+++ b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.spec.ts
@@ -19,18 +19,19 @@ import { EffectsModule } from "@ngrx/effects";
 import { HttpClient } from "@angular/common/http";
 import { ScicatDataService } from "shared/services/scicat-data-service";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import {
-  DatasetsService,
-  ProposalClass,
-} from "@scicatproject/scicat-sdk-ts-angular";
-import { BehaviorSubject } from "rxjs";
+import { DatasetsService } from "@scicatproject/scicat-sdk-ts-angular";
 
 describe("ProposalDashboardComponent", () => {
   let component: ProposalDashboardComponent;
   let fixture: ComponentFixture<ProposalDashboardComponent>;
 
   const getConfig = () => ({});
-  const dataSource = new BehaviorSubject<ProposalClass[]>([]);
+  const dataSource = new MockScicatDataSource(
+    new MockAppConfigService(null) as unknown as AppConfigService,
+    null,
+    null,
+    { collections: null, columns: null },
+  );
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
diff --git a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts
index e0f8c0368..ec2b26977 100644
--- a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts
+++ b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.ts
@@ -1,6 +1,3 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { BehaviorSubject, Subscription } from "rxjs";
-import { TableField } from "shared/modules/dynamic-material-table/models/table-field.model";
 import {
   ITableSetting,
   TableSettingEventType,
@@ -144,7 +141,10 @@ export class ProposalDashboardComponent implements OnInit, OnDestroy {
   tablesSettings: object;
 
   constructor(
-    private store: Store,
+    private appConfigService: AppConfigService,
+    private cdRef: ChangeDetectorRef,
+    private dataService: ScicatDataService,
+    private exportService: ExportExcelService,
     private router: Router,
     private route: ActivatedRoute,
   ) {}
diff --git a/src/app/proposals/proposal-detail/proposal-detail.component.html b/src/app/proposals/proposal-detail/proposal-detail.component.html
index 78f5127d2..144227aa0 100644
--- a/src/app/proposals/proposal-detail/proposal-detail.component.html
+++ b/src/app/proposals/proposal-detail/proposal-detail.component.html
@@ -4,41 +4,23 @@
       <div mat-card-avatar class="section-icon">
         <mat-icon> description </mat-icon>
       </div>
-      {{ "General Information" | translate }}
+      General Information
     </mat-card-header>
 
     <mat-card-content>
       <table>
         <tr>
-          <th>{{ "Title" | translate }}</th>
+          <th>Title</th>
           <td>{{ proposal.title }}</td>
         </tr>
         <tr>
-          <th>{{ "Abstract" | translate }}</th>
+          <th>Abstract</th>
           <td>{{ proposal.abstract }}</td>
         </tr>
         <tr>
-          <th>{{ "Proposal Id" | translate }}</th>
+          <th>Identifier</th>
           <td>{{ proposal.proposalId }}</td>
         </tr>
-        <tr data-cy="proposal-type">
-          <th>{{ "Proposal Type" | translate }}</th>
-          <!-- TODO: Change this to just proposal.type when new sdk is merged -->
-          <td>{{ proposal["type"] }}</td>
-        </tr>
-        <tr
-          *ngIf="
-            proposal['parentProposalId'] && parentProposal$
-              | async as parentProposal
-          "
-        >
-          <th>{{ "Parent proposal" | translate }}</th>
-          <td>
-            <a (click)="onClickProposal(parentProposal.proposalId)">{{
-              parentProposal.title
-            }}</a>
-          </td>
-        </tr>
         <ng-template
           [ngIf]="
             proposal.MeasurementPeriodList &&
@@ -53,7 +35,7 @@
             let-first="first"
           >
             <tr *ngIf="first">
-              <th>{{ "Start Time" | translate }}</th>
+              <th>Start Time</th>
               <td>
                 {{ period.start | date }}
               </td>
@@ -67,11 +49,29 @@
             let-last="last"
           >
             <tr *ngIf="last">
-              <th>{{ "End Time" | translate }}</th>
+              <th>End Time</th>
               <td>{{ period.end | date }}</td>
             </tr>
           </ng-template>
         </ng-template>
+        <tr data-cy="proposal-type">
+          <th>Type</th>
+          <!-- TODO: Change this to just proposal.type when new sdk is merged -->
+          <td>{{ proposal["type"] }}</td>
+        </tr>
+        <tr
+          *ngIf="
+            proposal['parentProposalId'] && parentProposal$
+              | async as parentProposal
+          "
+        >
+          <th>Parent proposal</th>
+          <td>
+            <a (click)="onClickProposal(parentProposal.proposalId)">{{
+              parentProposal.title
+            }}</a>
+          </td>
+        </tr>
       </table>
     </mat-card-content>
   </mat-card>
@@ -81,13 +81,13 @@
       <div mat-card-avatar class="section-icon">
         <mat-icon> person </mat-icon>
       </div>
-      {{ "Creator Information" | translate }}
+      Creator Information
     </mat-card-header>
 
     <mat-card-content>
       <table>
         <tr>
-          <th>{{ "Main proposer" | translate }}</th>
+          <th>Main proposer</th>
           <td *ngIf="proposal.firstname && proposal.lastname; else noName">
             <a href="mailto:{{ proposal.email }}"
               >{{ proposal.firstname }} {{ proposal.lastname }}</a
@@ -100,7 +100,7 @@
           </ng-template>
         </tr>
         <tr *ngIf="proposal.pi_firstname && proposal.pi_lastname">
-          <th>{{ "Principal Investigator" | translate }}</th>
+          <th>Principal investigator</th>
           <td *ngIf="proposal.pi_email; else withoutEmail">
             <a href="mailto:{{ proposal.pi_email }}"
               >{{ proposal.pi_firstname }} {{ proposal.pi_lastname }}</a
@@ -122,7 +122,7 @@
       <div mat-card-avatar class="section-icon">
         <mat-icon> science </mat-icon>
       </div>
-      {{ "Metadata" | translate }}
+      Metadata
     </mat-card-header>
     <mat-card-content>
       <ng-template [ngIf]="appConfig.tableSciDataEnabled" [ngIfElse]="jsonView">
diff --git a/src/app/proposals/proposal-detail/proposal-detail.component.spec.ts b/src/app/proposals/proposal-detail/proposal-detail.component.spec.ts
index dedd01543..890919ca7 100644
--- a/src/app/proposals/proposal-detail/proposal-detail.component.spec.ts
+++ b/src/app/proposals/proposal-detail/proposal-detail.component.spec.ts
@@ -7,17 +7,6 @@ import { MatButtonModule } from "@angular/material/button";
 import { NgxJsonViewerModule } from "ngx-json-viewer";
 import { AppConfigService } from "app-config.service";
 import { StoreModule } from "@ngrx/store";
-import {
-  TranslateLoader,
-  TranslateModule,
-  TranslationObject,
-} from "@ngx-translate/core";
-import { Observable, of } from "rxjs";
-class MockTranslateLoader implements TranslateLoader {
-  getTranslation(): Observable<TranslationObject> {
-    return of({});
-  }
-}
 
 const getConfig = () => ({
   jsonMetadataEnabled: true,
@@ -36,23 +25,12 @@ describe("ProposalsDetailComponent", () => {
         MatIconModule,
         NgxJsonViewerModule,
         StoreModule.forRoot({}),
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: MockTranslateLoader,
-          },
-        }),
       ],
       declarations: [ProposalDetailComponent],
     });
     TestBed.overrideComponent(ProposalDetailComponent, {
       set: {
-        providers: [
-          {
-            provide: AppConfigService,
-            useValue: { getConfig },
-          },
-        ],
+        providers: [{ provide: AppConfigService, useValue: { getConfig } }],
       },
     });
     TestBed.compileComponents();
diff --git a/src/app/proposals/proposal-detail/proposal-detail.component.ts b/src/app/proposals/proposal-detail/proposal-detail.component.ts
index d6d0577fa..fdeaa28a8 100644
--- a/src/app/proposals/proposal-detail/proposal-detail.component.ts
+++ b/src/app/proposals/proposal-detail/proposal-detail.component.ts
@@ -21,7 +21,6 @@ import {
   selectProfile,
 } from "state-management/selectors/user.selectors";
 import { clearProposalsStateAction } from "state-management/actions/proposals.actions";
-import { TranslateService } from "@ngx-translate/core";
 
 @Component({
   selector: "proposal-detail",
@@ -47,12 +46,9 @@ export class ProposalDetailComponent implements OnInit, OnDestroy {
 
   constructor(
     public appConfigService: AppConfigService,
-    private translateService: TranslateService,
     private store: Store,
     private router: Router,
-  ) {
-    this.translateService.use("proposalDefault");
-  }
+  ) {}
 
   ngOnInit(): void {
     // Prevent user from reloading page if there are unsave changes
diff --git a/src/app/proposals/proposal-logbook/proposal-logbook.component.html b/src/app/proposals/proposal-logbook/proposal-logbook.component.html
index 7b1c2afa6..e4334ed93 100644
--- a/src/app/proposals/proposal-logbook/proposal-logbook.component.html
+++ b/src/app/proposals/proposal-logbook/proposal-logbook.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="logbook$ | async as logbook">
+<ng-container *ngIf="logbook">
   <div
     *ngIf="(logbook.logbook | keyvalue)?.length !== 0 && logbook.logbook?.name"
   >
diff --git a/src/app/proposals/proposal-logbook/proposal-logbook.component.ts b/src/app/proposals/proposal-logbook/proposal-logbook.component.ts
index 286bba2d1..a251957f5 100644
--- a/src/app/proposals/proposal-logbook/proposal-logbook.component.ts
+++ b/src/app/proposals/proposal-logbook/proposal-logbook.component.ts
@@ -7,8 +7,8 @@ import {
   AfterViewChecked,
 } from "@angular/core";
 import { Store } from "@ngrx/store";
-import { Subscription } from "rxjs";
-import { selectLogbooksDashboardPageViewModel } from "state-management/selectors/logbooks.selectors";
+import { Observable, Subscription, take } from "rxjs";
+import { selectCurrentLogbook } from "state-management/selectors/logbooks.selectors";
 import {
   fetchLogbookAction,
   setTextFilterAction,
@@ -41,11 +41,11 @@ export interface LogbookData {
 export class ProposalLogbookComponent
   implements OnInit, OnDestroy, AfterViewChecked
 {
-  logbook$ = this.store.select(selectLogbooksDashboardPageViewModel);
+  logbook$: Observable<any | null> = this.store.select(selectCurrentLogbook);
   appConfig = this.appConfigService.getConfig();
   subscriptions: Subscription[] = [];
 
-  @Input() proposalId: string;
+  @Input() logbook: LogbookData | null = null; // Still accepting input from parent if provided
 
   constructor(
     public appConfigService: AppConfigService,
@@ -87,7 +87,13 @@ export class ProposalLogbookComponent
   }
 
   ngOnInit() {
-    this.store.dispatch(fetchLogbookAction({ name: this.proposalId }));
+    if (!this.logbook) {
+      this.logbook$.pipe(take(1)).subscribe((logbook) => {
+        if (logbook && logbook.name) {
+          this.store.dispatch(fetchLogbookAction({ name: logbook.name }));
+        }
+      });
+    }
   }
 
   ngAfterViewChecked() {
diff --git a/src/app/proposals/proposals.module.ts b/src/app/proposals/proposals.module.ts
index 71bb4e59a..c983f10cb 100644
--- a/src/app/proposals/proposals.module.ts
+++ b/src/app/proposals/proposals.module.ts
@@ -35,9 +35,6 @@ import { MatNativeDateModule } from "@angular/material/core";
 import { LogbookEffects } from "state-management/effects/logbooks.effects";
 import { logbooksReducer } from "state-management/reducers/logbooks.reducer";
 import { ProposalLogbookComponent } from "./proposal-logbook/proposal-logbook.component";
-import { RelatedProposalsComponent } from "./related-proposals/related-proposals.component";
-import { ProposalDatasetsComponent } from "./proposal-datasets/proposal-datasets.component";
-import { TranslateModule } from "@ngx-translate/core";
 
 @NgModule({
   imports: [
@@ -63,7 +60,6 @@ import { TranslateModule } from "@ngx-translate/core";
     SharedScicatFrontendModule,
     StoreModule.forFeature("proposals", proposalsReducer),
     StoreModule.forFeature("logbooks", logbooksReducer),
-    TranslateModule,
   ],
   declarations: [
     ViewProposalPageComponent,
@@ -71,8 +67,6 @@ import { TranslateModule } from "@ngx-translate/core";
     ProposalFilterComponent,
     ProposalDashboardComponent,
     ProposalLogbookComponent,
-    RelatedProposalsComponent,
-    ProposalDatasetsComponent,
   ],
   exports: [],
   providers: [DatePipe, FileSizePipe, SlicePipe],
diff --git a/src/app/proposals/view-proposal-page/view-proposal-page.component.html b/src/app/proposals/view-proposal-page/view-proposal-page.component.html
index 8e27c1e71..13acc0cce 100644
--- a/src/app/proposals/view-proposal-page/view-proposal-page.component.html
+++ b/src/app/proposals/view-proposal-page/view-proposal-page.component.html
@@ -1,54 +1,38 @@
-<mat-tab-group
-  (selectedTabChange)="onTabChanged($event.index)"
-  [selectedIndex]="selectedTabIndex"
-  *ngIf="vm$ | async as vm"
->
+<mat-tab-group *ngIf="vm$ | async as vm">
   <mat-tab>
     <ng-template mat-tab-label>
       <mat-icon> details </mat-icon>
-      {{ "Details" | translate }}
+      Details
     </ng-template>
-    <ng-template matTabContent
-      ><proposal-detail [proposal]="proposal"></proposal-detail
-    ></ng-template>
+    <proposal-detail [proposal]="proposal"></proposal-detail>
   </mat-tab>
 
   <mat-tab>
     <ng-template mat-tab-label>
       <mat-icon> folder </mat-icon>
-      {{ "Datasets" | translate }}
+      Datasets
     </ng-template>
 
-    <ng-template matTabContent>
-      <app-proposal-datasets
-        *ngIf="proposal"
-        [proposalId]="proposal.proposalId"
-      ></app-proposal-datasets>
-    </ng-template>
-  </mat-tab>
-
-  <mat-tab>
-    <ng-template mat-tab-label>
-      <mat-icon data-cy="related-proposals"> folder </mat-icon>
-      {{ "Related Proposals" | translate }}
-    </ng-template>
-
-    <ng-template matTabContent>
-      <app-related-proposals *ngIf="proposal"></app-related-proposals>
-    </ng-template>
+    <div class="dataset-table">
+      <app-table
+        [data]="tableData"
+        [columns]="tableColumns"
+        [paginate]="tablePaginate"
+        [currentPage]="vm.currentPage"
+        [dataCount]="vm.datasetCount"
+        [dataPerPage]="vm.datasetsPerPage"
+        (pageChange)="onPageChange($event)"
+        (rowClick)="onRowClick($event)"
+      ></app-table>
+    </div>
   </mat-tab>
 
   <mat-tab *ngIf="appConfig.logbookEnabled">
     <ng-template mat-tab-label>
       <mat-icon> book </mat-icon>
-      {{ "Logbook" | translate }}
+      Logbook
     </ng-template>
 
-    <ng-template matTabContent>
-      <app-proposal-logbook
-        *ngIf="proposal"
-        [proposalId]="proposal.proposalId"
-      ></app-proposal-logbook>
-    </ng-template>
+    <app-proposal-logbook [logbook]="logbook$ | async"></app-proposal-logbook>
   </mat-tab>
 </mat-tab-group>
diff --git a/src/app/proposals/view-proposal-page/view-proposal-page.component.spec.ts b/src/app/proposals/view-proposal-page/view-proposal-page.component.spec.ts
index 66d6730e9..5684ff2b6 100644
--- a/src/app/proposals/view-proposal-page/view-proposal-page.component.spec.ts
+++ b/src/app/proposals/view-proposal-page/view-proposal-page.component.spec.ts
@@ -1,27 +1,32 @@
 import { ViewProposalPageComponent } from "./view-proposal-page.component";
-import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import {
+  ComponentFixture,
+  TestBed,
+  inject,
+  waitForAsync,
+} from "@angular/core/testing";
 import { NO_ERRORS_SCHEMA } from "@angular/core";
-import { MockActivatedRoute } from "shared/MockStubs";
+import {
+  MockStore,
+  MockActivatedRoute,
+  createMock,
+  mockDataset,
+  mockProposal,
+} from "shared/MockStubs";
 import { Router, ActivatedRoute } from "@angular/router";
-import { StoreModule } from "@ngrx/store";
+import { StoreModule, Store } from "@ngrx/store";
 import { DatePipe, SlicePipe } from "@angular/common";
 import { FileSizePipe } from "shared/pipes/filesize.pipe";
+import {
+  changeDatasetsPageAction,
+  fetchProposalDatasetsAction,
+} from "state-management/actions/proposals.actions";
+import { PageChangeEvent } from "shared/modules/table/table.component";
 import { MatTabsModule } from "@angular/material/tabs";
 import { MatIconModule } from "@angular/material/icon";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { AppConfigService } from "app-config.service";
-import {
-  TranslateLoader,
-  TranslateModule,
-  TranslationObject,
-} from "@ngx-translate/core";
-import { Observable, of } from "rxjs";
-
-class MockTranslateLoader implements TranslateLoader {
-  getTranslation(): Observable<TranslationObject> {
-    return of({});
-  }
-}
+import { DatasetClass } from "@scicatproject/scicat-sdk-ts-angular";
 
 const getConfig = () => ({
   logbookEnabled: true,
@@ -34,6 +39,8 @@ describe("ViewProposalPageComponent", () => {
   const router = {
     navigateByUrl: jasmine.createSpy("navigateByUrl"),
   };
+  let store: MockStore;
+  let dispatchSpy;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -43,12 +50,6 @@ describe("ViewProposalPageComponent", () => {
         BrowserAnimationsModule,
         MatIconModule,
         MatTabsModule,
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: MockTranslateLoader,
-          },
-        }),
         StoreModule.forRoot({}),
       ],
       providers: [DatePipe, FileSizePipe, SlicePipe],
@@ -71,6 +72,10 @@ describe("ViewProposalPageComponent", () => {
     fixture.detectChanges();
   });
 
+  beforeEach(inject([Store], (mockStore: MockStore) => {
+    store = mockStore;
+  }));
+
   afterEach(() => {
     fixture.destroy();
   });
@@ -78,4 +83,57 @@ describe("ViewProposalPageComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  describe("#formatTableData()", () => {
+    it("should return empty array if there are no datasets", () => {
+      const data = component.formatTableData(null);
+
+      expect(data).toEqual([]);
+    });
+
+    it("should return an array of data objects if there are datasets", () => {
+      const datasets = [mockDataset];
+      const data = component.formatTableData(datasets);
+
+      expect(data.length).toEqual(1);
+    });
+  });
+
+  describe("#onPageChange()", () => {
+    it("should dispatch a changeDatasetsPageAction and a fetchProposalDatasetsAction", () => {
+      dispatchSpy = spyOn(store, "dispatch");
+
+      const proposal = mockProposal;
+      proposal.proposalId = "testId";
+      component.proposal = proposal;
+      const event: PageChangeEvent = {
+        pageIndex: 0,
+        pageSize: 25,
+        length: 25,
+      };
+      component.onPageChange(event);
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(2);
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        changeDatasetsPageAction({
+          page: event.pageIndex,
+          limit: event.pageSize,
+        }),
+      );
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        fetchProposalDatasetsAction({ proposalId: proposal.proposalId }),
+      );
+    });
+  });
+
+  describe("#onRowClick()", () => {
+    it("should navigate to a dataset", () => {
+      const dataset = createMock<DatasetClass>({});
+      const pid = encodeURIComponent(dataset.pid);
+      component.onRowClick(dataset);
+
+      expect(router.navigateByUrl).toHaveBeenCalledTimes(1);
+      expect(router.navigateByUrl).toHaveBeenCalledWith("/datasets/" + pid);
+    });
+  });
 });
diff --git a/src/app/proposals/view-proposal-page/view-proposal-page.component.ts b/src/app/proposals/view-proposal-page/view-proposal-page.component.ts
index f1ff0c17a..e4a5bebd4 100644
--- a/src/app/proposals/view-proposal-page/view-proposal-page.component.ts
+++ b/src/app/proposals/view-proposal-page/view-proposal-page.component.ts
@@ -4,13 +4,36 @@ import { Store } from "@ngrx/store";
 import { Subscription } from "rxjs";
 import {
   fetchProposalAction,
+  fetchProposalDatasetsAction,
+  changeDatasetsPageAction,
   fetchParentProposalAction,
   clearProposalsStateAction,
 } from "state-management/actions/proposals.actions";
 import { selectViewProposalPageViewModel } from "state-management/selectors/proposals.selectors";
+import {
+  TableColumn,
+  PageChangeEvent,
+} from "shared/modules/table/table.component";
+import { DatePipe, SlicePipe } from "@angular/common";
+import { FileSizePipe } from "shared/pipes/filesize.pipe";
+import { fetchLogbookAction } from "state-management/actions/logbooks.actions";
 import { AppConfigService } from "app-config.service";
-import { ProposalClass } from "@scicatproject/scicat-sdk-ts-angular";
-import { TranslateService } from "@ngx-translate/core";
+import { selectLogbooksDashboardPageViewModel } from "state-management/selectors/logbooks.selectors";
+import {
+  DatasetClass,
+  OutputDatasetObsoleteDto,
+  ProposalClass,
+} from "@scicatproject/scicat-sdk-ts-angular";
+
+export interface TableData {
+  pid: string;
+  name: string;
+  sourceFolder: string;
+  size: string;
+  creationTime: string | null;
+  owner: string;
+  location: string;
+}
 
 @Component({
   selector: "view-proposal-page",
@@ -19,19 +42,32 @@ import { TranslateService } from "@ngx-translate/core";
 })
 export class ViewProposalPageComponent implements OnInit, OnDestroy {
   vm$ = this.store.select(selectViewProposalPageViewModel);
+  logbook$ = this.store.select(selectLogbooksDashboardPageViewModel);
   appConfig = this.appConfigService.getConfig();
+
   proposal: ProposalClass;
+
   subscriptions: Subscription[] = [];
-  public selectedTabIndex = 0;
+
+  tablePaginate = true;
+  tableData: TableData[] = [];
+  tableColumns: TableColumn[] = [
+    { name: "name", icon: "portrait", sort: false, inList: true },
+    { name: "sourceFolder", icon: "explore", sort: false, inList: true },
+    { name: "size", icon: "save", sort: false, inList: true },
+    { name: "creationTime", icon: "calendar_today", sort: false, inList: true },
+    { name: "owner", icon: "face", sort: false, inList: true },
+    { name: "location", icon: "explore", sort: false, inList: true },
+  ];
 
   constructor(
     public appConfigService: AppConfigService,
+    private datePipe: DatePipe,
+    private filesizePipe: FileSizePipe,
     private route: ActivatedRoute,
-    private store: Store,
     private router: Router,
-    private translateService: TranslateService,
-  ) {
-    this.translateService.use("proposalDefault");
+    private slicePipe: SlicePipe,
+    private store: Store,
   }
 
   ngOnInit() {
@@ -42,7 +78,7 @@ export class ViewProposalPageComponent implements OnInit, OnDestroy {
 
           if (
             this.proposal["parentProposalId"] &&
-            this.selectedTabIndex === 0
+            this.proposal["parentProposalId"] !== ""
           ) {
             this.fetchProposalRelatedDocuments();
           }
@@ -53,22 +89,13 @@ export class ViewProposalPageComponent implements OnInit, OnDestroy {
     this.subscriptions.push(
       this.route.params.subscribe((params) => {
         this.store.dispatch(fetchProposalAction({ proposalId: params.id }));
-        this.resetTabs();
+        this.store.dispatch(
+          fetchProposalDatasetsAction({ proposalId: params.id }),
+        );
+        this.store.dispatch(fetchLogbookAction({ name: params.id }));
       }),
     );
-  }
-
-  onTabChanged(newIndex: number): void {
-    this.selectedTabIndex = newIndex;
-
-    // Clear the query params when we change tab
-    this.router.navigate([], {
-      queryParams: {},
-    });
-  }
 
-  resetTabs(): void {
-    this.selectedTabIndex = 0;
   }
 
   fetchProposalRelatedDocuments(): void {
diff --git a/src/app/publisheddata/publisheddata-details/publisheddata-details.component.html b/src/app/publisheddata/publisheddata-details/publisheddata-details.component.html
index 03c53a276..2e04f39e9 100644
--- a/src/app/publisheddata/publisheddata-details/publisheddata-details.component.html
+++ b/src/app/publisheddata/publisheddata-details/publisheddata-details.component.html
@@ -20,7 +20,7 @@
           >
             <tr *ngIf="publishedData.registeredTime as value">
               <th>Registered Time</th>
-              <td>{{ value | date }}</td>
+              <td>{{ value | date: "yyyy-MM-dd, HH:mm" }}</td>
             </tr>
           </ng-template>
         </table>
diff --git a/src/app/samples/sample-detail/sample-detail.component.html b/src/app/samples/sample-detail/sample-detail.component.html
index cae3733f1..16fc9e192 100644
--- a/src/app/samples/sample-detail/sample-detail.component.html
+++ b/src/app/samples/sample-detail/sample-detail.component.html
@@ -25,7 +25,7 @@
               </tr>
               <tr *ngIf="sample.createdAt as value">
                 <th>Creation Time</th>
-                <td>{{ value | date }}</td>
+                <td>{{ value | date: "yyyy-MM-dd HH:mm" }}</td>
               </tr>
             </table>
           </mat-card-content>
diff --git a/src/app/shared/loaders/custom-translate.loader.ts b/src/app/shared/loaders/custom-translate.loader.ts
index 86394b0ce..7e9a25ec7 100644
--- a/src/app/shared/loaders/custom-translate.loader.ts
+++ b/src/app/shared/loaders/custom-translate.loader.ts
@@ -7,15 +7,13 @@ export class CustomTranslateLoader implements TranslateLoader {
 
   constructor(private appConfigService: AppConfigService) {}
 
-  getTranslation(lang: string): Observable<TranslationObject> {
-    if (
-      this.appConfig.labelsLocalization &&
-      this.appConfig.labelsLocalization[lang]
-    ) {
-      return of(this.appConfig.labelsLocalization[lang]);
-    }
+  getTranslation(): Observable<TranslationObject> {
+    const { currentLabelSet = "", labelSets = {} } =
+      this.appConfig?.datasetDetailViewLabelOption || {};
 
-    console.warn(`Translation for "${lang}" not found.`);
+    if (currentLabelSet in labelSets) {
+      return of(labelSets[currentLabelSet]);
+    }
     return of({});
   }
 }
diff --git a/src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.html b/src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.html
index a45e78550..e243697ac 100644
--- a/src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.html
+++ b/src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.html
@@ -36,7 +36,11 @@
   >
     <section>
       <div class="key-cell" [style.padding-left.px]="getPadding(node)">
-        <label class="label-cell">{{ node.key }}</label>
+        <button mat-icon-button disabled>
+          <mat-icon class="mat-icon-rtl-mirror" class="mat-icon-rtl-mirror">
+          </mat-icon>
+        </button>
+        <label>{{ node.key }}</label>
       </div>
       <div class="value-cell">{{ getValueRepresentation(node) }}</div>
     </section>
diff --git a/src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.scss b/src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.scss
index 9bf1daf21..13e86c996 100644
--- a/src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.scss
+++ b/src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.scss
@@ -60,19 +60,15 @@ mat-form-field {
   padding-left: 0px;
 }
 section {
-  display: grid;
-  grid-template-columns: 40% 60%;
-  gap: 1em;
+  display: table;
   width: 100%;
-  margin: 0 2em;
 }
-
 .key-cell {
-  grid-column: 1;
-  word-wrap: break-word;
+  display: table-cell;
+  margin-left: 8px;
+  width: 40%;
 }
-
 .value-cell {
-  grid-column: 2;
-  word-wrap: break-word;
+  display: table-cell;
+  width: 60%;
 }
diff --git a/src/app/shared/modules/scientific-metadata/metadata-edit/metadata-edit.component.ts b/src/app/shared/modules/scientific-metadata/metadata-edit/metadata-edit.component.ts
index 7ef2a299b..64f6a5095 100644
--- a/src/app/shared/modules/scientific-metadata/metadata-edit/metadata-edit.component.ts
+++ b/src/app/shared/modules/scientific-metadata/metadata-edit/metadata-edit.component.ts
@@ -244,7 +244,7 @@ export class MetadataEditComponent implements OnInit, OnChanges {
           typeof this.metadata[key] === "object" &&
           "value" in (this.metadata[key] as ScientificMetadata)
         ) {
-          if (this.metadata[key].unit?.length > 0) {
+          if (this.metadata[key]["unit"].length > 0) {
             field = this.formBuilder.group({
               fieldType: this.formControlFields["fieldType"](
                 MetadataTypes.quantity,
diff --git a/src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.html b/src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.html
index 39958781e..8305d23ea 100644
--- a/src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.html
+++ b/src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.html
@@ -1,22 +1,3 @@
 <div class="metadataTable" *ngIf="metadata">
-  <dynamic-mat-table
-    [tableName]="tableName"
-    [showReload]="showReloadData"
-    [dir]="direction"
-    [rowHeight]="rowHeight"
-    [columns]="columns"
-    [pending]="pending"
-    [setting]="setting"
-    [sticky]="stickyHeader"
-    [dataSource]="dataSource"
-    [pagination]="pagination"
-    [showNoData]="showNoData"
-    [rowSelectionMode]="rowSelectionMode"
-    [printConfig]="printConfig"
-    [showProgress]="showProgress"
-    [showGlobalTextSearch]="showGlobalTextSearch"
-    style="height: 60vh"
-    class="mat-elevation-z2"
-  >
-  </dynamic-mat-table>
+
 </div>
diff --git a/src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.scss b/src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.scss
index bbbbee659..301380e0c 100644
--- a/src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.scss
+++ b/src/app/shared/modules/scientific-metadata/metadata-view/metadata-view.component.scss
@@ -10,28 +10,17 @@
   .mat-column-unit {
     flex: 1 0 5em;
   }
-
-  &-header {
-    font-weight: bold;
-  }
-}
-
-mat-header-row {
-  min-height: 36px;
-}
-
-mat-row {
-  min-height: 36px;
 }
 
 .unit-input {
   display: flex;
   align-items: center;
-}
 
-.general-warning {
-  cursor: pointer;
-  margin-left: 0.5em;
+  &--warning {
+    cursor: pointer;
+    margin-left: 0.5em;
+    color: rgba(130, 4, 4, 0.6);
+  }
 }
 
 @media only screen and (max-width: 1279px) {
diff --git a/src/app/shared/modules/shared-table/_shared-table-theme.scss b/src/app/shared/modules/shared-table/_shared-table-theme.scss
index 286fa43e1..4124c88a0 100644
--- a/src/app/shared/modules/shared-table/_shared-table-theme.scss
+++ b/src/app/shared/modules/shared-table/_shared-table-theme.scss
@@ -42,15 +42,6 @@
       }
     }
   }
-
-  dynamic-mat-table {
-    mat-header-row.mat-mdc-header-row.header {
-      background-color: mat.get-color-from-palette(
-        $primary,
-        "default"
-      ) !important;
-    }
-  }
 }
 
 @mixin theme($theme) {
diff --git a/src/app/shared/pipes/pipes.module.ts b/src/app/shared/pipes/pipes.module.ts
index 08971a6c8..21c716bda 100644
--- a/src/app/shared/pipes/pipes.module.ts
+++ b/src/app/shared/pipes/pipes.module.ts
@@ -13,7 +13,6 @@ import { DynamicPipe } from "./dynamicPipe.pipe";
 import { NewDynamicPipe } from "./newDynamicPipe.pipe";
 import { DescriptionTitlePipe } from "./description-title.pipe";
 import { FormatNumberPipe } from "./format-number.pipe";
-import { ComponentTranslatePipe } from "./component-translate.pipe";
 @NgModule({
   declarations: [
     FileSizePipe,
@@ -29,7 +28,6 @@ import { ComponentTranslatePipe } from "./component-translate.pipe";
     DynamicPipe,
     NewDynamicPipe,
     DescriptionTitlePipe,
-    ComponentTranslatePipe,
   ],
   imports: [CommonModule],
   exports: [
@@ -46,7 +44,6 @@ import { ComponentTranslatePipe } from "./component-translate.pipe";
     DynamicPipe,
     NewDynamicPipe,
     DescriptionTitlePipe,
-    ComponentTranslatePipe,
   ],
 })
 export class PipesModule {}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 97ba600f1..717221e2b 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -18,8 +18,6 @@ import { ScicatDataService } from "./services/scicat-data-service";
 import { ScientificMetadataTreeModule } from "./modules/scientific-metadata-tree/scientific-metadata-tree.modules";
 import { FiltersModule } from "./modules/filters/filters.module";
 import { AttachmentService } from "./services/attachment.service";
-import { DynamicMatTableModule } from "./modules/dynamic-material-table/table/dynamic-mat-table.module";
-import { TranslateModule } from "@ngx-translate/core";
 @NgModule({
   imports: [
     BreadcrumbModule,
@@ -37,8 +35,6 @@ import { TranslateModule } from "@ngx-translate/core";
     FormsModule,
     SharedTableModule,
     ScientificMetadataTreeModule,
-    DynamicMatTableModule.forRoot({}),
-    TranslateModule,
   ],
   providers: [
     ConfigService,
@@ -61,8 +57,6 @@ import { TranslateModule } from "@ngx-translate/core";
     SharedTableModule,
     ScientificMetadataTreeModule,
     FiltersModule,
-    DynamicMatTableModule,
-    TranslateModule,
   ],
 })
 export class SharedScicatFrontendModule {}
diff --git a/src/app/state-management/actions/proposals.actions.spec.ts b/src/app/state-management/actions/proposals.actions.spec.ts
index 414454707..2cceb4fcc 100644
--- a/src/app/state-management/actions/proposals.actions.spec.ts
+++ b/src/app/state-management/actions/proposals.actions.spec.ts
@@ -9,7 +9,7 @@ import {
 describe("Proposal Actions", () => {
   describe("fetchProposalsAction", () => {
     it("should create an action", () => {
-      const action = fromActions.fetchProposalsAction({});
+      const action = fromActions.fetchProposalsAction();
       expect({ ...action }).toEqual({ type: "[Proposal] Fetch Proposals" });
     });
   });
@@ -36,7 +36,7 @@ describe("Proposal Actions", () => {
 
   describe("fetchCountAction", () => {
     it("should create an action", () => {
-      const action = fromActions.fetchCountAction({});
+      const action = fromActions.fetchCountAction();
       expect({ ...action }).toEqual({ type: "[Proposal] Fetch Count" });
     });
   });
diff --git a/src/app/state-management/actions/proposals.actions.ts b/src/app/state-management/actions/proposals.actions.ts
index 9a84bbdec..01884e7b4 100644
--- a/src/app/state-management/actions/proposals.actions.ts
+++ b/src/app/state-management/actions/proposals.actions.ts
@@ -27,10 +27,7 @@ export const fetchProposalsFailedAction = createAction(
   "[Proposal] Fetch Proposals Failed",
 );
 
-export const fetchCountAction = createAction(
-  "[Proposal] Fetch Count",
-  props<{ fields?: Record<string, unknown> }>(),
-);
+export const fetchCountAction = createAction("[Proposal] Fetch Count");
 export const fetchCountCompleteAction = createAction(
   "[Proposal] Fetch Count Complete",
   props<{ count: number }>(),
@@ -152,30 +149,3 @@ export const clearCurrentProposalStateAction = createAction(
   "[Proposal] Clear Current Proposal State",
 );
 
-export const fetchRelatedProposalsAction = createAction(
-  "[Proposal] Fetch Related Proposals",
-  props<{
-    skip?: number;
-    limit?: number;
-    search?: string;
-    sortDirection?: string;
-    sortColumn?: string;
-  }>(),
-);
-export const fetchRelatedProposalsCompleteAction = createAction(
-  "[Proposal] Fetch Related Proposals Complete",
-  props<{
-    relatedProposals: (ProposalClass & { relation: string })[];
-  }>(),
-);
-export const fetchRelatedProposalsFailedAction = createAction(
-  "[Proposal] Fetch Related Proposals Failed",
-);
-
-export const fetchRelatedProposalsCountCompleteAction = createAction(
-  "[Proposal] Fetch Related Proposals Count Complete",
-  props<{ count: number }>(),
-);
-export const fetchRelatedProposalsCountFailedAction = createAction(
-  "[Proposal] Fetch Related Proposals Count Failed",
-);
diff --git a/src/app/state-management/effects/datasets.effects.ts b/src/app/state-management/effects/datasets.effects.ts
index d6d544cba..25d80aa51 100644
--- a/src/app/state-management/effects/datasets.effects.ts
+++ b/src/app/state-management/effects/datasets.effects.ts
@@ -408,8 +408,6 @@ export class DatasetEffects {
       ofType(
         fromActions.fetchDatasetsCompleteAction,
         fromActions.fetchDatasetsFailedAction,
-        fromActions.fetchRelatedDatasetsCompleteAction,
-        fromActions.fetchRelatedDatasetsFailedAction,
         fromActions.fetchFacetCountsCompleteAction,
         fromActions.fetchFacetCountsFailedAction,
         fromActions.fetchMetadataKeysCompleteAction,
diff --git a/src/app/state-management/effects/proposals.effects.spec.ts b/src/app/state-management/effects/proposals.effects.spec.ts
index d00745f52..407fad3b1 100644
--- a/src/app/state-management/effects/proposals.effects.spec.ts
+++ b/src/app/state-management/effects/proposals.effects.spec.ts
@@ -69,7 +69,7 @@ describe("ProposalEffects", () => {
           provide: ProposalsService,
           useValue: jasmine.createSpyObj("proposalApi", [
             "proposalsControllerFullquery",
-            "proposalsControllerCount",
+            "proposalsControllerFullfacet",
             "proposalsControllerFindById",
             "proposalsControllerFindByIdAccess",
             "proposalsControllerCreateAttachment",
@@ -81,7 +81,6 @@ describe("ProposalEffects", () => {
           provide: DatasetsService,
           useValue: jasmine.createSpyObj("datasetApi", [
             "datasetsControllerFindAll",
-            "datasetsControllerCount",
           ]),
         },
       ],
@@ -99,13 +98,44 @@ describe("ProposalEffects", () => {
     describe("ofType fetchProposalsAction", () => {
       it("should result in a fetchProposalsCompleteAction and a fetchCountAction", () => {
         const proposals = [proposal];
-        const action = fromActions.fetchProposalsAction({});
+        const action = fromActions.fetchProposalsAction();
         const outcome1 = fromActions.fetchProposalsCompleteAction({
           proposals,
         });
-        const outcome2 = fromActions.fetchCountAction({
-          fields: { text: undefined },
+        const outcome2 = fromActions.fetchCountAction();
+
+        actions = hot("-a", { a: action });
+        const response = cold("-a|", { a: proposals });
+        proposalApi.proposalsControllerFullquery.and.returnValue(response);
+
+        const expected = cold("--(bc)", { b: outcome1, c: outcome2 });
+        expect(effects.fetchProposals$).toBeObservable(expected);
+      });
+
+      it("should result in a fetchProposalsFailedAction", () => {
+        const action = fromActions.fetchProposalsAction();
+        const outcome = fromActions.fetchProposalsFailedAction();
+
+        actions = hot("-a", { a: action });
+        const response = cold("-#", {});
+        proposalApi.proposalsControllerFullquery.and.returnValue(response);
+
+        const expected = cold("--b", { b: outcome });
+        expect(effects.fetchProposals$).toBeObservable(expected);
+      });
+    });
+
+    describe("ofType changePageAction", () => {
+      const page = 1;
+      const limit = 25;
+
+      it("should result in a fetchProposalsCompleteAction and a fetchCountAction", () => {
+        const proposals = [proposal];
+        const action = fromActions.changePageAction({ page, limit });
+        const outcome1 = fromActions.fetchProposalsCompleteAction({
+          proposals,
         });
+        const outcome2 = fromActions.fetchCountAction();
 
         actions = hot("-a", { a: action });
         const response = cold("-a|", { a: proposals });
@@ -116,7 +146,70 @@ describe("ProposalEffects", () => {
       });
 
       it("should result in a fetchProposalsFailedAction", () => {
-        const action = fromActions.fetchProposalsAction({});
+        const action = fromActions.changePageAction({ page, limit });
+        const outcome = fromActions.fetchProposalsFailedAction();
+
+        actions = hot("-a", { a: action });
+        const response = cold("-#", {});
+        proposalApi.proposalsControllerFullquery.and.returnValue(response);
+
+        const expected = cold("--b", { b: outcome });
+        expect(effects.fetchProposals$).toBeObservable(expected);
+      });
+    });
+
+    describe("ofType sortByColumnAction", () => {
+      const column = "test";
+      const direction = "desc";
+
+      it("should result in a fetchProposalsCompleteAction and a fetchCountAction", () => {
+        const proposals = [proposal];
+        const action = fromActions.sortByColumnAction({ column, direction });
+        const outcome1 = fromActions.fetchProposalsCompleteAction({
+          proposals,
+        });
+        const outcome2 = fromActions.fetchCountAction();
+
+        actions = hot("-a", { a: action });
+        const response = cold("-a|", { a: proposals });
+        proposalApi.proposalsControllerFullquery.and.returnValue(response);
+
+        const expected = cold("--(bc)", { b: outcome1, c: outcome2 });
+        expect(effects.fetchProposals$).toBeObservable(expected);
+      });
+
+      it("should result in a fetchProposalsFailedAction", () => {
+        const action = fromActions.sortByColumnAction({ column, direction });
+        const outcome = fromActions.fetchProposalsFailedAction();
+
+        actions = hot("-a", { a: action });
+        const response = cold("-#", {});
+        proposalApi.proposalsControllerFullquery.and.returnValue(response);
+
+        const expected = cold("--b", { b: outcome });
+        expect(effects.fetchProposals$).toBeObservable(expected);
+      });
+    });
+
+    describe("ofType clearFacetsAction", () => {
+      it("should result in a fetchProposalsCompleteAction and a fetchCountAction", () => {
+        const proposals = [proposal];
+        const action = fromActions.clearFacetsAction();
+        const outcome1 = fromActions.fetchProposalsCompleteAction({
+          proposals,
+        });
+        const outcome2 = fromActions.fetchCountAction();
+
+        actions = hot("-a", { a: action });
+        const response = cold("-a|", { a: proposals });
+        proposalApi.proposalsControllerFullquery.and.returnValue(response);
+
+        const expected = cold("--(bc)", { b: outcome1, c: outcome2 });
+        expect(effects.fetchProposals$).toBeObservable(expected);
+      });
+
+      it("should result in a fetchProposalsFailedAction", () => {
+        const action = fromActions.clearFacetsAction();
         const outcome = fromActions.fetchProposalsFailedAction();
 
         actions = hot("-a", { a: action });
@@ -131,27 +224,32 @@ describe("ProposalEffects", () => {
 
   describe("fetchCount$", () => {
     it("should result in a fetchCountCompleteAction", () => {
-      const count = 1;
-      const action = fromActions.fetchCountAction({});
+      const proposals = [proposal];
+      const action = fromActions.fetchCountAction();
       const outcome = fromActions.fetchCountCompleteAction({
-        count,
+        count: proposals.length,
       });
 
+      const responseArray = [
+        {
+          all: [{ totalSets: proposals.length }],
+        },
+      ];
       actions = hot("-a", { a: action });
-      const response = cold("-a|", { a: { count } });
-      proposalApi.proposalsControllerCount.and.returnValue(response);
+      const response = cold("-a|", { a: responseArray });
+      proposalApi.proposalsControllerFullfacet.and.returnValue(response);
 
       const expected = cold("--b", { b: outcome });
       expect(effects.fetchCount$).toBeObservable(expected);
     });
 
     it("should result in a fetchCountFailedAction", () => {
-      const action = fromActions.fetchCountAction({});
+      const action = fromActions.fetchCountAction();
       const outcome = fromActions.fetchCountFailedAction();
 
       actions = hot("-a", { a: action });
       const response = cold("-#", {});
-      proposalApi.proposalsControllerCount.and.returnValue(response);
+      proposalApi.proposalsControllerFullfacet.and.returnValue(response);
 
       const expected = cold("--b", { b: outcome });
       expect(effects.fetchCount$).toBeObservable(expected);
@@ -268,6 +366,7 @@ describe("ProposalEffects", () => {
     const proposalId = "testId";
 
     it("should result in a fetchProposalDatasetsCountCompleteAction", () => {
+      const datasets = [dataset];
       const count = 1;
       const action = fromActions.fetchProposalDatasetsCountAction({
         proposalId,
@@ -277,8 +376,8 @@ describe("ProposalEffects", () => {
       });
 
       actions = hot("-a", { a: action });
-      const response = cold("-a|", { a: { count } });
-      datasetApi.datasetsControllerCount.and.returnValue(response);
+      const response = cold("-a|", { a: datasets });
+      datasetApi.datasetsControllerFindAll.and.returnValue(response);
 
       const expected = cold("--b", { b: outcome });
       expect(effects.fetchProposalDatasetsCount$).toBeObservable(expected);
@@ -292,7 +391,7 @@ describe("ProposalEffects", () => {
 
       actions = hot("-a", { a: action });
       const response = cold("-#", {});
-      datasetApi.datasetsControllerCount.and.returnValue(response);
+      datasetApi.datasetsControllerFindAll.and.returnValue(response);
 
       const expected = cold("--b", { b: outcome });
       expect(effects.fetchProposalDatasetsCount$).toBeObservable(expected);
@@ -413,7 +512,7 @@ describe("ProposalEffects", () => {
   describe("loading$", () => {
     describe("ofType fetchProposalsAction", () => {
       it("should dispatch a loadingAction", () => {
-        const action = fromActions.fetchProposalsAction({});
+        const action = fromActions.fetchProposalsAction();
         const outcome = loadingAction();
 
         actions = hot("-a", { a: action });
@@ -425,7 +524,7 @@ describe("ProposalEffects", () => {
 
     describe("ofType fetchCountAction", () => {
       it("should dispatch a loadingAction", () => {
-        const action = fromActions.fetchCountAction({});
+        const action = fromActions.fetchCountAction();
         const outcome = loadingAction();
 
         actions = hot("-a", { a: action });
diff --git a/src/app/state-management/effects/proposals.effects.ts b/src/app/state-management/effects/proposals.effects.ts
index 439bcb9f3..97dc739bb 100644
--- a/src/app/state-management/effects/proposals.effects.ts
+++ b/src/app/state-management/effects/proposals.effects.ts
@@ -10,8 +10,6 @@ import * as fromActions from "state-management/actions/proposals.actions";
 import {
   selectFullqueryParams,
   selectDatasetsQueryParams,
-  selectCurrentProposal,
-  selectRelatedProposalsFilters,
 } from "state-management/selectors/proposals.selectors";
 import { map, mergeMap, catchError, switchMap, filter } from "rxjs/operators";
 import { ObservableInput, of } from "rxjs";
@@ -22,8 +20,6 @@ import {
 
 @Injectable()
 export class ProposalEffects {
-  currentProposal$ = this.store.select(selectCurrentProposal);
-  relatedProposalFilters$ = this.store.select(selectRelatedProposalsFilters);
   fullqueryParams$ = this.store.select(selectFullqueryParams);
   datasetQueryParams$ = this.store.select(selectDatasetsQueryParams);
 
@@ -51,27 +47,29 @@ export class ProposalEffects {
           .pipe(
             mergeMap((proposals) => [
               fromActions.fetchProposalsCompleteAction({ proposals }),
-              // TODO: Maybe this part should be refactored. Now we need to send 2 separate requests to get the data and count
-              fromActions.fetchCountAction({
-                fields: queryParam,
-              }),
+              fromActions.fetchCountAction(),
             ]),
             catchError(() => of(fromActions.fetchProposalsFailedAction())),
-          );
-      }),
+          ),
+      ),
     );
   });
 
   fetchCount$ = createEffect(() => {
     return this.actions$.pipe(
       ofType(fromActions.fetchCountAction),
-      switchMap(({ fields }) =>
-        this.proposalsService
-          .proposalsControllerCount(JSON.stringify(fields))
-          .pipe(
-            map(({ count }) => fromActions.fetchCountCompleteAction({ count })),
-            catchError(() => of(fromActions.fetchCountFailedAction())),
-          ),
+      concatLatestFrom(() => this.fullqueryParams$),
+      map(([action, params]) => params),
+      switchMap(({ query }) =>
+        this.proposalsService.proposalsControllerFullfacet(query).pipe(
+          map((res) => {
+            const { all } = res[0];
+            const allCounts = all && all.length > 0 ? all[0].totalSets : 0;
+
+            return fromActions.fetchCountCompleteAction({ count: allCounts });
+          }),
+          catchError(() => of(fromActions.fetchCountFailedAction())),
+        ),
       ),
     );
   });
@@ -125,11 +123,11 @@ export class ProposalEffects {
       ofType(fromActions.fetchProposalDatasetsCountAction),
       switchMap(({ proposalId }) =>
         this.datasetsService
-          .datasetsControllerCount(JSON.stringify({ where: { proposalId } }))
+          .datasetsControllerFindAll(JSON.stringify({ where: { proposalId } }))
           .pipe(
-            map(({ count }) =>
+            map((datasets) =>
               fromActions.fetchProposalDatasetsCountCompleteAction({
-                count,
+                count: datasets.length,
               }),
             ),
             catchError(() =>
@@ -339,8 +337,6 @@ export class ProposalEffects {
         fromActions.updateProposalPropertyFailedAction,
         fromActions.removeAttachmentCompleteAction,
         fromActions.removeAttachmentFailedAction,
-        fromActions.fetchRelatedProposalsCompleteAction,
-        fromActions.fetchRelatedProposalsFailedAction,
       ),
       switchMap(() => of(loadingCompleteAction())),
     );
diff --git a/src/app/state-management/effects/user.effects.ts b/src/app/state-management/effects/user.effects.ts
index b68513b7d..8c5d01c2e 100644
--- a/src/app/state-management/effects/user.effects.ts
+++ b/src/app/state-management/effects/user.effects.ts
@@ -216,23 +216,25 @@ export class UserEffects {
     return this.actions$.pipe(
       ofType(fromActions.logoutAction),
       filter(() => this.authService.isAuthenticated()),
-      switchMap(() => {
-        this.authService.clear();
-        return this.sharedAuthService.authControllerLogout().pipe(
-          switchMap(({ logoutURL }) => [
-            clearDatasetsStateAction(),
-            clearInstrumentsStateAction(),
-            clearJobsStateAction(),
-            clearLogbooksStateAction(),
-            clearPoliciesStateAction(),
-            clearProposalsStateAction(),
-            clearPublishedDataStateAction(),
-            clearSamplesStateAction(),
-            fromActions.logoutCompleteAction({ logoutURL }),
-          ]),
+      switchMap(() =>
+        this.sharedAuthService.authControllerLogout().pipe(
+          switchMap(({ logoutURL }) => {
+            this.authService.clear();
+            return [
+              clearDatasetsStateAction(),
+              clearInstrumentsStateAction(),
+              clearJobsStateAction(),
+              clearLogbooksStateAction(),
+              clearPoliciesStateAction(),
+              clearProposalsStateAction(),
+              clearPublishedDataStateAction(),
+              clearSamplesStateAction(),
+              fromActions.logoutCompleteAction({ logoutURL }),
+            ];
+          }),
           catchError(() => of(fromActions.logoutFailedAction())),
-        );
-      }),
+        ),
+      ),
     );
   });
 
diff --git a/src/app/state-management/models/index.ts b/src/app/state-management/models/index.ts
index ccc3d1180..4c5eb9aa5 100644
--- a/src/app/state-management/models/index.ts
+++ b/src/app/state-management/models/index.ts
@@ -21,55 +21,13 @@ export interface LabelMaps {
   [key: string]: Record<string, string>;
 }
 
-export interface LabelsLocalization {
-  datasetDefault: Record<string, string>;
-  datasetCustom: Record<string, string>;
-  proposalDefault: Record<string, string>;
+export interface datasetDetailViewLabelOption {
+  currentLabelSet: string;
+  labelSets: {
+    [key: string]: Record<string, string>;
+  };
 }
 
-export interface DatasetDetailComponentConfig {
-  enableCustomizedComponent: boolean;
-  customization: CustomizationItem[];
-}
-export enum DatasetViewFieldType {
-  TEXT = "text",
-  DATE = "date",
-  LINKY = "linky",
-  COPY = "copy",
-  TAG = "tag",
-}
-
-interface AttachmentOptions {
-  limit: number;
-  size: "small" | "medium" | "large";
-}
-type viewModeOptions = "table" | "json" | "tree";
-
-export interface CustomizationItem {
-  type: CustomizationType;
-  label: string;
-  order: number;
-  fields?: Field[];
-  options?: AttachmentOptions;
-  viewMode?: viewModeOptions;
-}
-
-export interface Field {
-  element: FieldType;
-  source: string;
-  order: number;
-}
-
-// Type alias for allowed customization types
-type CustomizationType =
-  | "regular"
-  | "scientificMetadata"
-  | "datasetJsonView"
-  | "attachments";
-
-// Type alias for allowed field types
-type FieldType = "text" | "copy" | "linky" | "tag" | "date";
-
 export interface DatasetsListSettings {
   columns: TableColumn[];
   filters: FilterConfig[];
diff --git a/src/app/state-management/reducers/proposals.reducer.spec.ts b/src/app/state-management/reducers/proposals.reducer.spec.ts
index f7b3cf8f0..b6d37e81e 100644
--- a/src/app/state-management/reducers/proposals.reducer.spec.ts
+++ b/src/app/state-management/reducers/proposals.reducer.spec.ts
@@ -99,6 +99,7 @@ describe("ProposalsReducer", () => {
     });
   });
 
+
   describe("on clearProposalsStateAction", () => {
     it("it should set proposals state to initialProposState", () => {
       const action = fromActions.clearProposalsStateAction();
diff --git a/src/app/state-management/reducers/proposals.reducer.ts b/src/app/state-management/reducers/proposals.reducer.ts
index 2711ca6dd..34302a734 100644
--- a/src/app/state-management/reducers/proposals.reducer.ts
+++ b/src/app/state-management/reducers/proposals.reducer.ts
@@ -108,6 +108,21 @@ const reducer = createReducer(
     }),
   ),
 
+  on(fromActions.clearFacetsAction, (state): ProposalsState => {
+    const limit = state.proposalFilters.limit; // Save limit
+    const proposalFilters = {
+      ...initialProposalsState.proposalFilters,
+      skip: 0,
+      limit,
+    };
+    return { ...state, proposalFilters };
+  }),
+
+  on(fromActions.changePageAction, (state, { page, limit }): ProposalsState => {
+    const skip = page * limit;
+    const proposalFilters = { ...state.proposalFilters, skip, limit };
+    return { ...state, proposalFilters };
+  }),
   on(
     fromActions.clearCurrentProposalStateAction,
     (state): ProposalsState => ({
@@ -117,19 +132,7 @@ const reducer = createReducer(
   ),
 
   on(
-    fromActions.fetchRelatedProposalsCompleteAction,
-    (state, { relatedProposals }): ProposalsState => ({
-      ...state,
-      relatedProposals,
-    }),
-  ),
-  on(
-    fromActions.fetchRelatedProposalsCountCompleteAction,
-    (state, { count }): ProposalsState => ({
-      ...state,
-      relatedProposalsCount: count,
-    }),
-  ),
+
 );
 
 export const proposalsReducer = (
diff --git a/src/app/state-management/selectors/proposals.selectors.spec.ts b/src/app/state-management/selectors/proposals.selectors.spec.ts
index bd7f3070f..405e7b565 100644
--- a/src/app/state-management/selectors/proposals.selectors.spec.ts
+++ b/src/app/state-management/selectors/proposals.selectors.spec.ts
@@ -36,14 +36,6 @@ const initialProposalsState: ProposalsState = {
   parentProposal: parentProposal,
   datasets: [],
 
-  relatedProposals: [],
-  relatedProposalsCount: 0,
-  relatedProposalsFilters: {
-    skip: 0,
-    limit: 25,
-    sortField: "creationTime:desc",
-  },
-
   proposalsCount: 0,
   datasetsCount: 0,
 
diff --git a/src/app/state-management/selectors/proposals.selectors.ts b/src/app/state-management/selectors/proposals.selectors.ts
index 8ecf76d2b..73ed093b9 100644
--- a/src/app/state-management/selectors/proposals.selectors.ts
+++ b/src/app/state-management/selectors/proposals.selectors.ts
@@ -111,29 +111,6 @@ export const selectViewProposalPageViewModel = createSelector(
   }),
 );
 
-export const selectRelatedProposalsPageViewModel = createSelector(
-  selectProposalsState,
-  ({ relatedProposals, relatedProposalsCount }) => ({
-    relatedProposals,
-    relatedProposalsCount,
-  }),
-);
-
-export const selectRelatedProposalsFilters = createSelector(
-  selectProposalsState,
-  (state) => state.relatedProposalsFilters,
-);
-
-export const selectRelatedProposalsCurrentPage = createSelector(
-  selectRelatedProposalsFilters,
-  (filters) => filters.skip / filters.limit,
-);
-
-export const selectRelatedProposalsPerPage = createSelector(
-  selectRelatedProposalsFilters,
-  (filters) => filters.limit,
-);
-
 const restrictFilter = (filter: any, allowedKeys?: string[]) => {
   const isNully = (value: any) => {
     const hasLength = typeof value === "string" || Array.isArray(value);
diff --git a/src/app/state-management/state/proposals.store.ts b/src/app/state-management/state/proposals.store.ts
index 2bb02cf1f..cc89f413b 100644
--- a/src/app/state-management/state/proposals.store.ts
+++ b/src/app/state-management/state/proposals.store.ts
@@ -27,8 +27,6 @@ export interface ProposalsState {
   proposals: ProposalClass[];
   currentProposal: ProposalClass | undefined;
   parentProposal: ProposalClass | undefined;
-  relatedProposals: (ProposalClass & { relation: string })[];
-  relatedProposalsCount: number;
   datasets: OutputDatasetObsoleteDto[];
 
   proposalsCount: number;
@@ -37,20 +35,12 @@ export interface ProposalsState {
   hasPrefilledFilters: boolean;
   proposalFilters: ProposalFilters;
   datasetFilters: ProposalDatesetFilters;
-
-  relatedProposalsFilters: {
-    skip: number;
-    limit: number;
-    sortField: string;
-  };
 }
 
 export const initialProposalsState: ProposalsState = {
   proposals: [],
   currentProposal: undefined,
   parentProposal: undefined,
-  relatedProposals: [],
-  relatedProposalsCount: 0,
   datasets: [],
 
   proposalsCount: 0,
@@ -75,10 +65,4 @@ export const initialProposalsState: ProposalsState = {
     limit: 25,
     sortField: "creationTime:desc",
   },
-
-  relatedProposalsFilters: {
-    skip: 0,
-    limit: 25,
-    sortField: "creationTime:desc",
-  },
 };