diff --git a/frontend/src/modules/Metrics/TopEndpointsTable.css b/frontend/src/modules/Metrics/TopEndpointsTable.css
new file mode 100644
index 0000000000..cbf9a84828
--- /dev/null
+++ b/frontend/src/modules/Metrics/TopEndpointsTable.css
@@ -0,0 +1,3 @@
+.topEndpointsButton {
+	white-space: normal;
+}
diff --git a/frontend/src/modules/Metrics/TopEndpointsTable.tsx b/frontend/src/modules/Metrics/TopEndpointsTable.tsx
index b4584981cd..8b5eb26b99 100644
--- a/frontend/src/modules/Metrics/TopEndpointsTable.tsx
+++ b/frontend/src/modules/Metrics/TopEndpointsTable.tsx
@@ -7,6 +7,7 @@ import { topEndpointListItem } from "../../store/actions/metrics";
 import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
 import { GlobalTime } from "Src/store/actions";
 import { StoreState } from "Src/store/reducers";
+import "./TopEndpointsTable.css";
 
 const Wrapper = styled.div`
 	padding-top: 10px;
@@ -58,7 +59,11 @@ const _TopEndpointsTable = (props: TopEndpointsTableProps) => {
 			key: "name",
 
 			render: (text: string) => (
-				<Button type="link" onClick={() => handleOnClick(text)}>
+				<Button
+					className="topEndpointsButton"
+					type="link"
+					onClick={() => handleOnClick(text)}
+				>
 					{text}
 				</Button>
 			),