diff --git a/platform/ui/src/components/StudyItem/StudyItem.jsx b/platform/ui/src/components/StudyItem/StudyItem.jsx
index 421ced342..c0b3ee842 100644
--- a/platform/ui/src/components/StudyItem/StudyItem.jsx
+++ b/platform/ui/src/components/StudyItem/StudyItem.jsx
@@ -37,7 +37,7 @@ const StudyItem = ({
         </div>
         <div className="flex flex-row py-1">
           <div className="pr-5 text-xl text-blue-300">{modalities}</div>
-          <div className="text-base text-blue-300">{description}</div>
+          <div className="text-base text-blue-300 break-words truncate-2-lines">{description}</div>
         </div>
       </div>
       {!!trackedSeries && (
diff --git a/platform/ui/src/gatsby-theme-docz/tailwind.css b/platform/ui/src/gatsby-theme-docz/tailwind.css
index 2857865e6..c1d38a2ef 100644
--- a/platform/ui/src/gatsby-theme-docz/tailwind.css
+++ b/platform/ui/src/gatsby-theme-docz/tailwind.css
@@ -4,3 +4,13 @@
 
 /* IMPORT CUSTOM FONT */
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');
+
+/* Trincate 2 lines utility */
+.truncate-2-lines {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.3;
+  height: 2rem;
+}