diff --git a/components/_shared/image_header/ImageHeader.tsx b/components/_shared/image_header/ImageHeader.tsx
index 05f707b..0932867 100644
--- a/components/_shared/image_header/ImageHeader.tsx
+++ b/components/_shared/image_header/ImageHeader.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Scrollbar from 'react-scrollbars-custom';
 import { AR } from '../../../hooks/locale';
 import Badge from './Badge';
 import Title from './Title';
@@ -20,6 +21,15 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
   children,
   color,
 }) => {
+  let scrollbarCss;
+  if (color)
+    scrollbarCss = `
+    .ScrollbarsCustom-Thumb.ScrollbarsCustom-ThumbY {
+      background: ${color} !important;
+      opacity: 0.5;
+    }
+  `;
+
   return (
     <>
       <div className={image?.url ? `xl:grid xl:grid-cols-2` : ''}>
@@ -71,13 +81,18 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
            `}
             >
               <div className="pt-[3rem] flex flex-col h-full justify-between">
-                <div className="h-[13em]">
+                <div className="h-[13em] group">
                   <Title icon={icon} color={color}>
                     {title}
                   </Title>
-                  <p className="w-full 2xl:w-[85%] text-[#7C7C7C] line-clamp-5 ">
-                    {children}
-                  </p>
+                  <div className="w-full 2xl:w-[85%]">
+                    <style>{scrollbarCss}</style>
+                    <Scrollbar style={{ height: '7.5em' }}>
+                      <p className="text-[#7C7C7C] w-[99%] line-clamp-5 group-hover:line-clamp-none transition-all">
+                        {children}
+                      </p>
+                    </Scrollbar>
+                  </div>
                 </div>
                 <div className="pb-[3rem]">
                   <Badge text={badgeText} color={color} />
diff --git a/package-lock.json b/package-lock.json
index 52c82ae..a1dca95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "react-chartjs-2": "^4.3.1",
         "react-datepicker": "^4.8.0",
         "react-dom": "^17.0.2",
+        "react-scrollbars-custom": "^4.1.1",
         "react-simple-star-rating": "^4.0.5",
         "react-syntax-highlighter": "^15.5.0",
         "react-tooltip": "^4.2.21",
@@ -15127,6 +15128,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/cnbuilder": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cnbuilder/-/cnbuilder-3.1.0.tgz",
+      "integrity": "sha512-9sxWwwprkPNTVQnx92WYPEWCmyZRqbf9VWUYABU4rl0mLL17VAV2MvvOApkMA6bQVXRLJ8jN//8Yp6drElpLWA==",
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/xobotyi"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -39174,6 +39184,36 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-scrollbars-custom": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-scrollbars-custom/-/react-scrollbars-custom-4.1.1.tgz",
+      "integrity": "sha512-FOI1EMrdN5qziwvFAuH4saOo0+ggxeTuKLPpy6nezNdLUnDW1vCHGq0VSSfTSRstDgfXgwff5TMP9NeJ8NiFOQ==",
+      "dependencies": {
+        "cnbuilder": "^3.1.0",
+        "react-draggable": "^4.4.5",
+        "zoom-level": "^2.5.0"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/xobotyi"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/react-scrollbars-custom/node_modules/react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-simple-star-rating": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/react-simple-star-rating/-/react-simple-star-rating-4.0.5.tgz",
@@ -47149,6 +47189,15 @@
         "zen-observable": "0.8.15"
       }
     },
+    "node_modules/zoom-level": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/zoom-level/-/zoom-level-2.5.0.tgz",
+      "integrity": "sha512-7UlRWU4Q3uCMCeDVMOm7eBrIu145OqsIJ3p6zq58l8UsSYwKWxc6zEapC5YA9tIeh0oheb4cT9Kk2Wq353loFg==",
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/xobotyi"
+      }
+    },
     "node_modules/zustand": {
       "version": "3.5.11",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.5.11.tgz",
@@ -58476,6 +58525,11 @@
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
       "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
     },
+    "cnbuilder": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cnbuilder/-/cnbuilder-3.1.0.tgz",
+      "integrity": "sha512-9sxWwwprkPNTVQnx92WYPEWCmyZRqbf9VWUYABU4rl0mLL17VAV2MvvOApkMA6bQVXRLJ8jN//8Yp6drElpLWA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -77349,6 +77403,27 @@
         "react-router": "6.3.0"
       }
     },
+    "react-scrollbars-custom": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-scrollbars-custom/-/react-scrollbars-custom-4.1.1.tgz",
+      "integrity": "sha512-FOI1EMrdN5qziwvFAuH4saOo0+ggxeTuKLPpy6nezNdLUnDW1vCHGq0VSSfTSRstDgfXgwff5TMP9NeJ8NiFOQ==",
+      "requires": {
+        "cnbuilder": "^3.1.0",
+        "react-draggable": "^4.4.5",
+        "zoom-level": "^2.5.0"
+      },
+      "dependencies": {
+        "react-draggable": {
+          "version": "4.4.5",
+          "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+          "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+          "requires": {
+            "clsx": "^1.1.1",
+            "prop-types": "^15.8.1"
+          }
+        }
+      }
+    },
     "react-simple-star-rating": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/react-simple-star-rating/-/react-simple-star-rating-4.0.5.tgz",
@@ -83729,6 +83804,11 @@
         "zen-observable": "0.8.15"
       }
     },
+    "zoom-level": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/zoom-level/-/zoom-level-2.5.0.tgz",
+      "integrity": "sha512-7UlRWU4Q3uCMCeDVMOm7eBrIu145OqsIJ3p6zq58l8UsSYwKWxc6zEapC5YA9tIeh0oheb4cT9Kk2Wq353loFg=="
+    },
     "zustand": {
       "version": "3.5.11",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.5.11.tgz",
diff --git a/package.json b/package.json
index 2b8f024..9d5d9e4 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "react-chartjs-2": "^4.3.1",
     "react-datepicker": "^4.8.0",
     "react-dom": "^17.0.2",
+    "react-scrollbars-custom": "^4.1.1",
     "react-simple-star-rating": "^4.0.5",
     "react-syntax-highlighter": "^15.5.0",
     "react-tooltip": "^4.2.21",