diff --git a/package.json b/package.json
index f6879be7..48818471 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "eventsource-parser": "^1.0.0",
+    "framer-motion": "^10.12.22",
     "next": "13.2.4",
     "openai": "^3.2.1",
     "parse-numeric-range": "^1.3.0",
diff --git a/src/components/chat/ChatMessage.tsx b/src/components/chat/ChatMessage.tsx
index 6363e87b..54d52b2b 100644
--- a/src/components/chat/ChatMessage.tsx
+++ b/src/components/chat/ChatMessage.tsx
@@ -1,9 +1,15 @@
-import { useOpenAI } from "@/context/OpenAIProvider";
+import { motion } from "framer-motion";
 import { OpenAIChatMessage } from "@/utils/OpenAI";
 import React from "react";
-import { MdPerson, MdSmartToy } from "react-icons/md";
+import {
+  MdPerson,
+  MdSmartToy,
+  MdContentCopy,
+  MdCheckCircle,
+} from "react-icons/md";
 import AssistantMessageContent from "./AssistantMessageContent";
 import UserMessageContent from "./UserMessageContent";
+import useCopyToClipboard from "../hooks/useCopyToClipboard";
 
 type Props = {
   message: OpenAIChatMessage;
@@ -11,6 +17,7 @@ type Props = {
 
 export default function ChatMessage({ message: { id, role, content } }: Props) {
   const [hover, setHover] = React.useState(false);
+  const [copied, handleCopy] = useCopyToClipboard(content);
 
   return (
     <div
@@ -20,22 +27,42 @@ export default function ChatMessage({ message: { id, role, content } }: Props) {
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
-      <div className="relative max-w-screen mx-auto flex w-full max-w-4xl flex-row items-center">
+      <div className="max-w-screen relative mx-auto flex w-full max-w-4xl flex-row items-center">
         <div
-          className={`flex sticky top-0 my-4 h-10 w-10 items-center justify-center text-4xl mr-2 self-start transition-colors ${
+          className={`sticky top-0 my-4 mr-2 flex h-10 w-10 items-center justify-center self-start text-4xl transition-colors ${
             hover ? "text-stone-300" : "text-primary/20"
           }`}
         >
           {role === "user" ? <MdPerson /> : <MdSmartToy />}
         </div>
         <div className="overflow-x-auto">
-          <div className="text-md prose w-full max-w-4xl rounded p-4 text-primary dark:prose-invert prose-code:text-primary prose-pre:bg-transparent prose-pre:p-0">
+          <div className="text-md prose w-full max-w-4xl rounded p-4 pr-16 text-primary dark:prose-invert prose-code:text-primary prose-pre:bg-transparent prose-pre:p-0">
             {role === "user" ? (
               <UserMessageContent content={content} />
             ) : (
               <AssistantMessageContent content={content} />
             )}
           </div>
+          <div
+            className={`absolute right-1 top-6 h-10 w-10 cursor-pointer text-xl transition-none duration-500 ease-in-out ${
+              copied ? "text-emerald-600" : "text-gray-500"
+            }`}
+            onClick={handleCopy}
+          >
+            {copied ? (
+              <motion.div
+                animate={{ scale: [1, 1.25, 1] }}
+                transition={{
+                  type: "tween",
+                  duration: 0.25,
+                }}
+              >
+                <MdCheckCircle />
+              </motion.div>
+            ) : (
+              <MdContentCopy />
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/hooks/useCopyToClipboard.ts b/src/components/hooks/useCopyToClipboard.ts
new file mode 100644
index 00000000..03fc929b
--- /dev/null
+++ b/src/components/hooks/useCopyToClipboard.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+type UseCopyToClipboardOutput = [boolean, () => void];
+
+const useCopyToClipboard = (textToCopy: string): UseCopyToClipboardOutput => {
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleCopy = (): void => {
+    navigator.clipboard.writeText(textToCopy);
+    setCopied(true);
+  };
+
+  useEffect(() => {
+    if (copied) {
+      const timer = setTimeout(() => {
+        setCopied(false);
+      }, 2500);
+
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+
+  return [copied, handleCopy];
+};
+
+export default useCopyToClipboard;
+