diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 313bfe91..84d86aef 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -74,10 +74,10 @@ const ConversationBubble = forwardRef<
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
-            className={`ml-2 mr-5 flex flex-col items-center rounded-3xl bg-gray-1000  p-3.5 ${
+            className={`ml-2 mr-5 flex flex-col items-center rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'
-                ? ' rounded-lg border border-red-2000 bg-red-1000 p-2 text-red-3000'
-                : ''
+                ? 'flex-row rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+                : 'flex-col rounded-3xl'
             }`}
           >
             {type === 'ERROR' && (
@@ -115,18 +115,14 @@ const ConversationBubble = forwardRef<
               {message}
             </ReactMarkdown>
             {DisableSourceFE || type === 'ERROR' ? null : (
-              <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
-            )}
-            <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
-              {DisableSourceFE || type === 'ERROR' ? null : (
-                <div className="py-1 px-2 text-base font-semibold">
-                  Sources:
-                </div>
-              )}
-              <div className="flex flex-row flex-wrap items-center justify-start gap-2">
-                {DisableSourceFE
-                  ? null
-                  : sources?.map((source, index) => (
+              <>
+                <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
+                <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
+                  <div className="py-1 px-2 text-base font-semibold">
+                    Sources:
+                  </div>
+                  <div className="flex flex-row flex-wrap items-center justify-start gap-2">
+                    {sources?.map((source, index) => (
                       <div
                         key={index}
                         className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
@@ -149,8 +145,10 @@ const ConversationBubble = forwardRef<
                         </p>
                       </div>
                     ))}
-              </div>
-            </div>
+                  </div>
+                </div>
+              </>
+            )}
           </div>
           <div
             className={`mr-2 flex items-center justify-center ${
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 8e395a07..b76b0222 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
     extend: {
       spacing: {