diff --git a/src/components/messageBox/bubble.tsx b/src/components/messageBox/bubble.tsx
index 639da42..048cd00 100644
--- a/src/components/messageBox/bubble.tsx
+++ b/src/components/messageBox/bubble.tsx
@@ -23,6 +23,7 @@ export default function Bubble({ role, message, messageType }: IProps) {
                 ? 'bg-[#F5F5F5] text-black'
                 : 'bg-[#141414] text-white'
             } p-3 rounded-2xl`}
+            style={{ whiteSpace: 'pre-line' }}
           >
             <ReactMarkdown children={message} remarkPlugins={[remarkGfm]} />
           </div>
diff --git a/src/components/messageBox/errorBubble.tsx b/src/components/messageBox/errorBubble.tsx
index 987871e..2e5c429 100644
--- a/src/components/messageBox/errorBubble.tsx
+++ b/src/components/messageBox/errorBubble.tsx
@@ -7,8 +7,10 @@ export default function ErrorBubble({ error }: IProps) {
     <div className="flex justify-start">
       <div className="max-w-md mx-2 my-2">
         <div className="flex justify-start">
-          <div className="bg-[#F5F5F5] text-black font-semi-bold p-3 rounded-2xl">
-            <p className="block">Error: {error}</p>
+          <div 
+            className="bg-[#F5F5F5] text-black font-semi-bold p-3 rounded-2xl" 
+            style={{ whiteSpace: 'pre-line' }}>
+              <p className="block">Error: {error}</p>
           </div>
         </div>
       </div>