diff --git a/app/components/chatbot/ChatBot.tsx b/app/components/chatbot/ChatBot.tsx
index 87de310..f141269 100644
--- a/app/components/chatbot/ChatBot.tsx
+++ b/app/components/chatbot/ChatBot.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Input } from "@/components/ui/input";
+import { Components } from "react-markdown";
 
 interface ChatBotProps {
   toggleChat?: () => void;
@@ -47,6 +48,22 @@ export default function Chatbot({ toggleChat }: ChatBotProps) {
     }
   }, [messages]);
 
+  const MarkdownComponents: Components = {
+    code: ({ node, inline, className, children, ...props }: CodeProps) => {
+      return inline ? (
+        <code {...props} className="bg-gray-200 px-1 rounded">
+          {children}
+        </code>
+      ) : (
+        <pre {...props} className="bg-gray-200 p-2 rounded">
+          <code>{children}</code>
+        </pre>
+      );
+    },
+    ul: ({ children }) => <ul className="list-disc ml-4">{children}</ul>,
+    ol: ({ children }) => <li className="list-decimal ml-4">{children}</li>,
+  };
+
   return (
     <div className="bg-green-400 text-black">
       <AnimatePresence>
@@ -94,40 +111,11 @@ export default function Chatbot({ toggleChat }: ChatBotProps) {
                       }`}
                     >
                       <ReactMarkdown
-                        children={message.content}
                         remarkPlugins={[remarkGfm]}
-                        components={{
-                          code({
-                            node,
-                            inline,
-                            className,
-                            children,
-                            ...props
-                          }: CodeProps) {
-                            return inline ? (
-                              <code
-                                {...props}
-                                className="bg-gray-200 px-1 rounded"
-                              >
-                                {children}
-                              </code>
-                            ) : (
-                              <pre
-                                {...props}
-                                className="bg-gray-200 p-2 rounded"
-                              >
-                                <code>{children}</code>
-                              </pre>
-                            );
-                          },
-                          ul: ({ children }) => (
-                            <ul className="list-disc ml-4">{children}</ul>
-                          ),
-                          ol: ({ children }) => (
-                            <li className="list-decimal ml-4">{children}</li>
-                          ),
-                        }}
-                      />
+                        components={MarkdownComponents}
+                      >
+                        {message.content}
+                      </ReactMarkdown>
                     </div>
                   </div>
                 ))}