diff --git a/src/pages/Paramount/ViewStrategy/index.tsx b/src/pages/Paramount/ViewStrategy/index.tsx
index b4c6acc6..2d907e53 100644
--- a/src/pages/Paramount/ViewStrategy/index.tsx
+++ b/src/pages/Paramount/ViewStrategy/index.tsx
@@ -142,6 +142,10 @@ const ViewStrategy = () => {
     setModalContent(filteredTrigger);
   };
 
+  const truncateName = (name: string, maxLength: number) => {
+    return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
+  };
+
   useEffect(() => {
     if (d3Container.current) {
       d3.select(d3Container.current).selectAll('*').remove();
@@ -351,7 +355,7 @@ const ViewStrategy = () => {
           .attr('y', getYPosition(strategy.startY) - 20)
           .attr('font-size', '13px')
           //.attr('text-anchor', 'middle')
-          .text(strategy.name);
+          .text(truncateName(strategy.name, 16));
       });
 
       bucketMap = [];
@@ -362,7 +366,7 @@ const ViewStrategy = () => {
     <div style={{ display: 'flex', width: '50%' }}>
       {strategies?.length > 0 ? (
         <div className="flex flex-col overflow-scroll justify-start h-[850px]">
-          <div className="flex flex-row overflow-scroll">
+          <div className="flex flex-row overflow-y-hidden overflow-scroll">
             <div
               ref={yAxisContainer}
               style={{
@@ -378,7 +382,7 @@ const ViewStrategy = () => {
               ref={d3Container}
             />
           </div>
-          <Typography variant="p1" className="flex justify-center">
+          <Typography variant="p1" className="flex justify-center text-base">
             DPAD
           </Typography>
         </div>