diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
index 65a9a60112..a198dd960b 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
@@ -1,7 +1,7 @@
-import { Checkbox, notification, Typography } from 'antd';
+import { Checkbox, notification, Tooltip, Typography } from 'antd';
 import getFilters from 'api/trace/getFilters';
 import { AxiosError } from 'axios';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Dispatch } from 'redux';
 import { getFilter, updateURL } from 'store/actions/trace/util';
@@ -11,7 +11,7 @@ import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
 
-import { CheckBoxContainer } from './styles';
+import { CheckBoxContainer, ParaGraph } from './styles';
 
 function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 	const {
@@ -155,6 +155,11 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 
 	const isCheckBoxSelected = isUserSelected;
 
+	const TooTipOverLay = useMemo(
+		(): JSX.Element => <Typography>{keyValue}</Typography>,
+		[keyValue],
+	);
+
 	return (
 		<CheckBoxContainer>
 			<Checkbox
@@ -164,7 +169,9 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 				defaultChecked
 				key={keyValue}
 			>
-				{keyValue}
+				<Tooltip overlay={TooTipOverLay}>
+					<ParaGraph ellipsis>{keyValue}</ParaGraph>
+				</Tooltip>
 			</Checkbox>
 			{isCheckBoxSelected ? (
 				<Typography>{value}</Typography>
diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/styles.ts b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/styles.ts
index 33a51a5112..4678f74ec3 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/styles.ts
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/styles.ts
@@ -1,3 +1,4 @@
+import { Typography } from 'antd';
 import styled from 'styled-components';
 
 export const CheckBoxContainer = styled.div`
@@ -9,3 +10,10 @@ export const CheckBoxContainer = styled.div`
 	margin-top: 0.5rem;
 	margin-bottom: 0.5rem;
 `;
+
+export const ParaGraph = styled(Typography.Paragraph)`
+	&&& {
+		margin: 0;
+		max-width: 8rem;
+	}
+`;
diff --git a/frontend/src/pages/Trace/styles.ts b/frontend/src/pages/Trace/styles.ts
index d6b3cfcbcd..c545b7bf1c 100644
--- a/frontend/src/pages/Trace/styles.ts
+++ b/frontend/src/pages/Trace/styles.ts
@@ -10,8 +10,8 @@ export const Container = styled.div`
 
 export const LeftContainer = styled(Card)`
 	flex: 0.5;
-	width: 95%;
-	padding-right: 0.5rem;
+	margin-right: 0.5rem;
+	width: 15rem;
 
 	.ant-card-body {
 		padding: 0;