diff --git a/frontend/src/components/CopyButton.tsx b/frontend/src/components/CopyButton.tsx
index 823123b2..f032fc11 100644
--- a/frontend/src/components/CopyButton.tsx
+++ b/frontend/src/components/CopyButton.tsx
@@ -20,14 +20,9 @@ type CopyButtonProps = {
 const DEFAULT_ICON_SIZE = 'w-4 h-4';
 const DEFAULT_PADDING = 'p-2';
 const DEFAULT_COPIED_DURATION = 2000;
-const DEFAULT_BG_LIGHT = '#FFFFFF';
-const DEFAULT_BG_DARK = 'transparent';
-const DEFAULT_HOVER_BG_LIGHT = '#EEEEEE';
-const DEFAULT_HOVER_BG_DARK = '#464152';
 
 export default function CopyButton({
   textToCopy,
-
   iconSize = DEFAULT_ICON_SIZE,
   padding = DEFAULT_PADDING,
   showText = false,
@@ -43,9 +38,8 @@ export default function CopyButton({
   const iconWrapperClasses = clsx(
     'flex items-center justify-center rounded-full transition-colors duration-150 ease-in-out',
     padding,
-    `bg-[${DEFAULT_BG_LIGHT}] dark:bg-[${DEFAULT_BG_DARK}]`,
     {
-      [`hover:bg-[${DEFAULT_HOVER_BG_LIGHT}] dark:hover:bg-[${DEFAULT_HOVER_BG_DARK}]`]:
+      [`bg-[#FFFFFF}] dark:bg-transparent hover:bg-[#EEEEEE] dark:hover:bg-purple-taupe`]:
         !isCopied,
       'bg-green-100 dark:bg-green-900 hover:bg-green-100 dark:hover:bg-green-900':
         isCopied,
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index dca619a2..f8bca826 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -86,10 +86,7 @@ const ConversationBubble = forwardRef<
   // const bubbleRef = useRef<HTMLDivElement | null>(null);
   const chunks = useSelector(selectChunks);
   const selectedDocs = useSelector(selectSelectedDocs);
-  const [isLikeHovered, setIsLikeHovered] = useState(false);
   const [isEditClicked, setIsEditClicked] = useState(false);
-  const [isDislikeHovered, setIsDislikeHovered] = useState(false);
-  const [isQuestionHovered, setIsQuestionHovered] = useState(false);
   const [editInputBox, setEditInputBox] = useState<string>('');
   const messageRef = useRef<HTMLDivElement>(null);
   const [shouldShowToggle, setShouldShowToggle] = useState(false);
@@ -115,11 +112,7 @@ const ConversationBubble = forwardRef<
   let bubble;
   if (type === 'QUESTION') {
     bubble = (
-      <div
-        onMouseEnter={() => setIsQuestionHovered(true)}
-        onMouseLeave={() => setIsQuestionHovered(false)}
-        className={className}
-      >
+      <div className={`group ${className}`}>
         <div className="flex flex-col items-end">
           {filesAttached && filesAttached.length > 0 && (
             <div className="mr-12 mb-4 flex flex-wrap justify-end gap-2">
@@ -188,7 +181,7 @@ const ConversationBubble = forwardRef<
                     setIsEditClicked(true);
                     setEditInputBox(message ?? '');
                   }}
-                  className={`hover:bg-light-silver mt-3 flex h-fit shrink-0 cursor-pointer items-center rounded-full p-2 pt-1.5 pl-1.5 dark:hover:bg-[#35363B] ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
+                  className={`hover:bg-light-silver mt-3 flex h-fit shrink-0 cursor-pointer items-center rounded-full p-2 pt-1.5 pl-1.5 dark:hover:bg-[#35363B] ${isEditClicked ? 'visible' : 'invisible group-hover:visible'}`}
                 >
                   <img src={Edit} alt="Edit" className="cursor-pointer" />
                 </button>
@@ -568,13 +561,7 @@ const ConversationBubble = forwardRef<
                       <>
                         <div className="relative mr-2 flex items-center justify-center">
                           <div>
-                            <div
-                              className={`flex items-center justify-center rounded-full p-2 ${
-                                isLikeHovered
-                                  ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
-                                  : 'bg-white-3000 dark:bg-transparent'
-                              }`}
-                            >
+                            <div className="bg-white-3000 dark:hover:bg-purple-taupe flex items-center justify-center rounded-full p-2 hover:bg-[#EEEEEE] dark:bg-transparent">
                               <Like
                                 className={`${feedback === 'LIKE' ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
                                 onClick={() => {
@@ -584,8 +571,6 @@ const ConversationBubble = forwardRef<
                                     handleFeedback?.('LIKE');
                                   }
                                 }}
-                                onMouseEnter={() => setIsLikeHovered(true)}
-                                onMouseLeave={() => setIsLikeHovered(false)}
                               ></Like>
                             </div>
                           </div>
@@ -593,13 +578,7 @@ const ConversationBubble = forwardRef<
 
                         <div className="relative mr-2 flex items-center justify-center">
                           <div>
-                            <div
-                              className={`flex items-center justify-center rounded-full p-2 ${
-                                isDislikeHovered
-                                  ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
-                                  : 'bg-white-3000 dark:bg-transparent'
-                              }`}
-                            >
+                            <div className="bg-white-3000 dark:hover:bg-purple-taupe flex items-center justify-center rounded-full p-2 hover:bg-[#EEEEEE] dark:bg-transparent">
                               <Dislike
                                 className={`${feedback === 'DISLIKE' ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
                                 onClick={() => {
@@ -609,8 +588,6 @@ const ConversationBubble = forwardRef<
                                     handleFeedback?.('DISLIKE');
                                   }
                                 }}
-                                onMouseEnter={() => setIsDislikeHovered(true)}
-                                onMouseLeave={() => setIsDislikeHovered(false)}
                               ></Dislike>
                             </div>
                           </div>