diff --git a/ui/src/components/EntryDetailed/EntrySections.tsx b/ui/src/components/EntryDetailed/EntrySections.tsx
index 86a7dee65..5d8be67d2 100644
--- a/ui/src/components/EntryDetailed/EntrySections.tsx
+++ b/ui/src/components/EntryDetailed/EntrySections.tsx
@@ -33,7 +33,7 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery,
                         query={query}
                         updateQuery={updateQuery}
                         style={{float: "right"}}
-                        className={`queryable ${styles.dataKey}`}
+                        className={`${styles.dataKey}`}
                         applyTextEllipsis={false}
                         displayIconOnMouseOver={true}
                     />
diff --git a/ui/src/components/UI/Queryable.tsx b/ui/src/components/UI/Queryable.tsx
index 189471ee4..83b6a7153 100644
--- a/ui/src/components/UI/Queryable.tsx
+++ b/ui/src/components/UI/Queryable.tsx
@@ -17,27 +17,27 @@ interface Props {
 }
 
 const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
-    const [showCopiedNotification, setCopied] = useState(false);
+    const [showAddedNotification, setAdded] = useState(false);
     const [showTooltip, setShowTooltip] = useState(false);
     text = String(text);
 
     console.log(style);
 
     const onCopy = () => {
-        setCopied(true)
+        setAdded(true)
     };
 
     useEffect(() => {
         let timer;
-        if (showCopiedNotification) {
+        if (showAddedNotification) {
             updateQuery(query);
             timer = setTimeout(() => {
-                setCopied(false);
+                setAdded(false);
             }, 1000);
         }
         return () => clearTimeout(timer);
         // eslint-disable-next-line
-    }, [showCopiedNotification]);
+    }, [showAddedNotification]);
 
     const textElement = <span className={'Queryable-Text'}>{text}</span>;
 
@@ -47,20 +47,22 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, style, className,
                         title={`Add "${query}" to the filter`}
                     >
                         <AddCircleIcon fontSize="small" color="inherit"></AddCircleIcon>
-                        {showCopiedNotification && <span className={'Queryable-CopyNotifier'}>Added</span>}
+                        {showAddedNotification && <span className={'Queryable-CopyNotifier'}>Added</span>}
                     </span>
 				</CopyToClipboard> : null;
 
-    return <div
-        className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' Queryable-ContainerEllipsis' : ''}`}
-        style={style}
-        onMouseOver={ e => setShowTooltip(true)}
-        onMouseLeave={ e => setShowTooltip(false)}
-    >
+    return (
+        <div
+            className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' Queryable-ContainerEllipsis' : ''}`}
+            style={style}
+            onMouseOver={ e => setShowTooltip(true)}
+            onMouseLeave={ e => setShowTooltip(false)}
+        >
             {textElement}
             {copyButton}
             {useTooltip && showTooltip && <span className={'Queryable-CopyNotifier'}>{text}</span>}
-    </div>;
+        </div>
+    );
 };
 
 export default Queryable;