diff --git a/app/client/src/components/designSystems/appsmith/TableColumnsVisibility.tsx b/app/client/src/components/designSystems/appsmith/TableColumnsVisibility.tsx
index 175372c25fa2..dbb73590af00 100644
--- a/app/client/src/components/designSystems/appsmith/TableColumnsVisibility.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableColumnsVisibility.tsx
@@ -22,6 +22,9 @@ const DropDownWrapper = styled.div`
   z-index: 1;
   border-radius: 4px;
   border: 1px solid ${Colors.ATHENS_GRAY};
+  max-height: 500px;
+  max-width: 400px;
+  overflow: hidden scroll;
 `;
 
 const OptionWrapper = styled.div<{ selected: boolean }>`
@@ -45,6 +48,13 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
   }
 `;
 
+const StyledOption = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 90%;
+`
+
 const ButtonWrapper = styled.div`
   display: flex;
   width: 100%;
@@ -132,7 +142,7 @@ const TableColumnsVisibility = (props: TableColumnsVisibilityProps) => {
             }}
             className="t--table-column-visibility-column-toggle"
           >
-            <div className="option-title">{option.Header}</div>
+            <StyledOption className="option-title">{option.Header}</StyledOption>
             <VisibilityIcon visible={!option.isHidden} />
           </OptionWrapper>
         ))}