diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index e2a679ad1..dbad9f23f 100644
--- a/ui/desktop/src/components/GooseMessage.tsx
+++ b/ui/desktop/src/components/GooseMessage.tsx
@@ -137,7 +137,7 @@ export default function GooseMessage({
         {(displayText.trim() || imagePaths.length > 0) && (
           <div className="flex flex-col group">
             {displayText.trim() && (
-              <div ref={contentRef} className="w-full">
+              <div ref={contentRef} className="agent-message-bubble w-full">
                 <MarkdownContent content={displayText} />
               </div>
             )}
diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
index eafefb438..697fedcfd 100644
--- a/ui/desktop/src/components/UserMessage.tsx
+++ b/ui/desktop/src/components/UserMessage.tsx
@@ -260,7 +260,7 @@ export default function UserMessage({ message, onMessageUpdate }: UserMessagePro
             <div className="flex-col max-w-[85%] w-fit">
               <div className="flex flex-col group">
                 {textContent.trim() && (
-                  <div className="flex bg-text-primary text-background-primary rounded-xl py-2.5 px-4">
+                  <div className="user-message-bubble flex bg-text-primary text-background-primary rounded-xl py-2.5 px-4">
                     <div ref={contentRef}>
                       <MarkdownContent
                         content={textContent}
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 65761549b..280048b8b 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -585,6 +585,37 @@ pre:has(> code.bg-inline-code) {
   margin-bottom: 0 !important;
 }
 
+.dark .user-message-bubble {
+  background-color: #171d30;
+  color: #d2dae6;
+}
+
+.dark .user-message :is(h1, h2, h3, h4, h5, h6, strong) {
+  color: #e7ebf2 !important;
+}
+
+.dark .user-message li {
+  color: #c4cfde !important;
+}
+
+.dark .user-message li::marker {
+  color: #8798b0;
+}
+
+.dark .user-message a {
+  color: #aecfe3 !important;
+}
+
+.dark .user-message em {
+  color: #c6d9df !important;
+}
+
+.dark .agent-message-bubble {
+  background-color: #1f2126;
+  border-radius: 0.75rem;
+  padding: 0.625rem 1rem;
+}
+
 .scrollbar-thin {
   scrollbar-width: thin;
 }