diff --git a/frontend/src/Message.tsx b/frontend/src/Message.tsx
index 5134bfd..a8d233e 100644
--- a/frontend/src/Message.tsx
+++ b/frontend/src/Message.tsx
@@ -14,6 +14,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import { MessageData, MessageMeta } from './MessageMeta';
 import { ChatBubble } from './ChatBubble';
 import { StyledMarkdown } from './StyledMarkdown';
+import { Tooltip } from '@mui/material';
 
 type MessageList = MessageData[];
 
@@ -73,20 +74,24 @@ const Message = ({ message, submitQuery, isFullWidth }: MessageInterface) => {
   return (
     <ChatBubble className="Message" isFullWidth={isFullWidth} role={message.role} sx={{ flexGrow: 1, pb: message.metadata ? 0 : "8px", m: 0, mb: 1, mt: 1, overflowX: "auto" }}>
       <CardContent ref={textFieldRef} sx={{ position: "relative", display: "flex", flexDirection: "column", overflowX: "auto" }}>
+        <Tooltip title="Copy to clipboard" placement="top" arrow>
         <IconButton
           onClick={handleCopy}
           sx={{
             position: 'absolute',
             top: 8,
             right: 8,
+            width: 24,
+            height: 24,
             bgcolor: 'background.paper',
             '&:hover': { bgcolor: 'action.hover' },
           }}
           size="small"
           color={copied ? "success" : "default"}
         >
-          {copied ? <CheckIcon /> : <ContentCopyIcon />}
+            {copied ? <CheckIcon sx={{ width: 16, height: 16 }} /> : <ContentCopyIcon sx={{ width: 16, height: 16 }} />}
         </IconButton>
+        </Tooltip>
 
         {message.role !== 'user' ?
           <StyledMarkdown