diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
index 4efdb0876..8fa4881d6 100644
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
@@ -1,3 +1,23 @@
 i-bs {
     cursor: move;
 }
+
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
index 359346867..b89b6e4a8 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -2,6 +2,26 @@
   overflow-wrap: anywhere;
 }
 
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}
+
 .doc-img-container {
   position: relative;
 }
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index dce77802e..6f2260e47 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -2,6 +2,26 @@
   font-size: 90%;
 }
 
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}
+
 .doc-img {
   object-fit: cover;
   object-position: top left;