diff --git a/components/ChatInterface.tsx b/components/ChatInterface.tsx
index 69c885e..28235b0 100644
--- a/components/ChatInterface.tsx
+++ b/components/ChatInterface.tsx
@@ -1,13 +1,15 @@
 'use client';
 
 import { useChat } from '@ai-sdk/react';
-import { Container, ScrollArea, Paper, Group, TextInput, Button, Stack, Text, Box } from '@mantine/core';
+import { Container, ScrollArea, Paper, Group, TextInput, Button, Stack, Text, Box, useComputedColorScheme } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 import { MicrophoneRecorder } from './MicrophoneRecorder';
 
 export function ChatInterface() {
   const viewport = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState('');
+  const colorScheme = useComputedColorScheme('light');
+  const isDark = colorScheme === 'dark';
 
   const {
     messages,
@@ -51,7 +53,10 @@ export function ChatInterface() {
                 <Paper
                   p="sm"
                   radius="md"
-                  bg={message.role === 'user' ? 'dark.6' : 'dark.7'}
+                  bg={message.role === 'user'
+                    ? (isDark ? 'dark.6' : 'gray.1')
+                    : (isDark ? 'dark.7' : 'gray.0')
+                  }
                 >
                   <Text size="sm">
                     {/* Extract text from parts */}