diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
index 0d78b8333..ddc771c7e 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
@@ -257,7 +257,8 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 				// criteria: this.grantId ? this.criteria : this.getDefaultCriteria(),
 				updateDataFn: this.updateDataFn.bind(this)
 			},
-			position: { right: '0px;' }
+			position: { right: '0px;' },
+			panelClass: 'dialog-side-panel'
 		});
 
 		dialogRef.afterClosed().subscribe(result => {
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
index a1ab1f2b0..aa1e96cf4 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
@@ -397,6 +397,8 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 				updateDataFn: this.updateDataFn.bind(this)
 			},
 			position: { right: '0px;' },
+			panelClass: 'dialog-side-panel',
+			// may remove NgDialogAnimationService package
 			// animation: {
 			// 	to: "left",
 			// 	incomingOptions: {
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index b7737cc04..cc68453bc 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -189,3 +189,24 @@
 	overflow: initial;
 	box-shadow: none;
 }
+
+@keyframes slide {
+	100% {
+		right: 0;
+	}
+}
+
+.dialog-side-panel {
+	position: fixed !important;
+	bottom: 0;
+	top: 0;
+	right: -100vw;
+	width: 100vw;
+	height: 100%;
+	animation: slide .3s forwards;
+	// animation-delay: .3s;
+
+	.mat-dialog-container {
+		border-radius: 0;
+	}
+}