diff --git a/ui/src/components/chat/CanvasChat.vue b/ui/src/components/chat/CanvasChat.vue
index 086fea9..baa8ed0 100644
--- a/ui/src/components/chat/CanvasChat.vue
+++ b/ui/src/components/chat/CanvasChat.vue
@@ -14,6 +14,9 @@ const chatStyleVariables = computed(() => ({
   '--chat-input-box-color': ui.chatInputBoxColor,
   '--chat-accent-color': ui.chatAccentColor,
   '--chat-background-color': ui.chatBackgroundColor,
+  '--chat-font-color': ui.chatFontColor,
+  '--chat-font-family': ui.chatFontFamily || 'inherit', // Fallback to inherit if empty
+  '--chat-font-size': ui.chatFontSize ? `${ui.chatFontSize}px` : 'inherit', // Fallback to inherit
 }))
 
 function scrollBottom () {
@@ -58,8 +61,13 @@ watch(() => chat.items.length, scrollBottom)
         <div :class="m.owner==='yo' ? 'flex justify-end' : 'flex justify-start'" v-if="m.type==='text'">
           <div
             class="max-w-lg rounded-lg px-4 py-2 shadow break-words"
-            :class="m.owner==='yo' ? 'text-white' : 'text-gray-900'"
-            :style="{ backgroundColor: m.owner === 'yo' ? 'var(--chat-own-message-color)' : 'var(--chat-agent-message-color)' }">
+            :class="m.owner === 'yo' ? '' : ''"
+            :style="{
+              backgroundColor: m.owner === 'yo' ? 'var(--chat-own-message-color)' : 'var(--chat-agent-message-color)',
+              color: 'var(--chat-font-color)',
+              fontFamily: 'var(--chat-font-family)',
+              fontSize: 'var(--chat-font-size)'
+            }">
             {{ m.text }}
           </div>
         </div>
@@ -77,7 +85,14 @@ watch(() => chat.items.length, scrollBottom)
         rows="1"
         placeholder="Escribí un mensaje… (Enter para enviar, Shift+Enter salto)"
         class="flex-1 resize-none rounded-lg border p-3 focus:outline-none focus:ring-2 custom-scroll"
-        :style="{ backgroundColor: 'var(--chat-input-box-color)', borderColor: 'var(--chat-accent-color)', '--tw-ring-color': 'var(--chat-accent-color)' }"
+        :style="{
+          backgroundColor: 'var(--chat-input-box-color)',
+          borderColor: 'var(--chat-accent-color)',
+          '--tw-ring-color': 'var(--chat-accent-color)',
+          color: 'var(--chat-font-color)',
+          fontFamily: 'var(--chat-font-family)',
+          fontSize: 'var(--chat-font-size)'
+        }"
       />
       <button type="submit" class="px-4 py-2 rounded-lg text-white transition" :style="{ backgroundColor: 'var(--chat-accent-color)' }">
         ➤
diff --git a/ui/src/stores/useUi.js b/ui/src/stores/useUi.js
index ae48302..e987a2a 100644
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -36,6 +36,9 @@ const appearanceSettingKeys = [
   'chatInputBoxColor',
   'chatAccentColor',
   'chatBackgroundColor',
+  'chatFontColor',
+  'chatFontFamily',
+  'chatFontSize',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -117,6 +120,10 @@ export const useUi = defineStore('ui', {
       chatInputBoxColor: '#FFFFFF',
       chatAccentColor: '#1976D2',
       chatBackgroundColor: '#F4F4F4',
+      // Chat UI fonts
+      chatFontColor: '#000000',
+      chatFontFamily: '',
+      chatFontSize: 14,
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -279,6 +286,20 @@ export const useUi = defineStore('ui', {
       this.chatBackgroundColor = color
       _saveAppearanceState(this)
     },
+
+    // Actions for chat UI fonts
+    setChatFontColor(color) {
+      this.chatFontColor = color
+      _saveAppearanceState(this)
+    },
+    setChatFontFamily(font) {
+      this.chatFontFamily = font
+      _saveAppearanceState(this)
+    },
+    setChatFontSize(size) {
+      this.chatFontSize = Number(size)
+      _saveAppearanceState(this)
+    },
   },
 })
 
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index ea4f379..19b89be 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -124,6 +124,29 @@
           <input type="color" id="chatBackgroundColor" v-model="ui.chatBackgroundColor" @input="ui.setChatBackgroundColor($event.target.value)"
                  class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
         </div>
+
+        <!-- Chat Font Color -->
+        <div class="setting-item">
+          <label for="chatFontColor" class="block text-sm font-medium mb-1">Chat Font Color</label>
+          <input type="color" id="chatFontColor" v-model="ui.chatFontColor" @input="ui.setChatFontColor($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+
+        <!-- Chat Font Family -->
+        <div class="setting-item">
+          <label for="chatFontFamily" class="block text-sm font-medium mb-1">Chat Font Family</label>
+          <input type="text" id="chatFontFamily" v-model="ui.chatFontFamily" @input="ui.setChatFontFamily($event.target.value)"
+                 class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
+                 placeholder="e.g., Arial, sans-serif">
+        </div>
+
+        <!-- Chat Font Size -->
+        <div class="setting-item">
+          <label for="chatFontSize" class="block text-sm font-medium mb-1">Chat Font Size (px)</label>
+          <input type="number" id="chatFontSize" v-model.number="ui.chatFontSize" @input="ui.setChatFontSize(Number($event.target.value))"
+                 class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
+                 min="8" max="32" step="1">
+        </div>
       </div>
     </section>