diff --git a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
index f50597fee..a1073d71b 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
@@ -3,19 +3,31 @@ import { computed } from 'vue';
 import BaseBubble from './Base.vue';
 import AudioChip from 'next/message/chips/Audio.vue';
 import { useMessageContext } from '../provider.js';
+import { MESSAGE_VARIANTS } from '../constants';
 
-const { attachments } = useMessageContext();
+const { attachments, variant } = useMessageContext();
 
 const attachment = computed(() => {
   return attachments.value[0];
 });
+
+const textClass = computed(() => {
+  const textClassMap = {
+    [MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-text))]',
+    [MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-text))]',
+    [MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-text))]',
+    [MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-text))]',
+  };
+  return textClassMap[variant.value] || 'text-[rgb(var(--bubble-agent-text))]';
+});
 </script>
 
 <template>
   <BaseBubble class="bg-transparent" data-bubble-name="audio">
     <AudioChip
       :attachment="attachment"
-      class="p-2 text-n-slate-12 skip-context-menu"
+      class="p-2 skip-context-menu"
+      :class="textClass"
     />
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
index 11ed3dc0a..c299518f8 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
 import { useMessageContext } from '../provider.js';
+import { MESSAGE_VARIANTS } from '../constants';
 
 defineProps({
   icon: { type: [String, Object], required: true },
@@ -20,12 +21,32 @@ defineProps({
   },
 });
 
-const { sender } = useMessageContext();
+const { sender, variant } = useMessageContext();
 const { t } = useI18n();
 
 const senderName = computed(() => {
   return sender?.value?.name || '';
 });
+
+const primaryTextClass = computed(() => {
+  const classMap = {
+    [MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-text))]',
+    [MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-text))]',
+    [MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-text))]',
+    [MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-text))]',
+  };
+  return classMap[variant.value] || 'text-[rgb(var(--bubble-agent-text))]';
+});
+
+const secondaryTextClass = computed(() => {
+  const classMap = {
+    [MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-meta))]',
+    [MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-meta))]',
+    [MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-meta))]',
+    [MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-meta))]',
+  };
+  return classMap[variant.value] || 'text-[rgb(var(--bubble-agent-meta))]';
+});
 </script>
 
 <template>
@@ -44,7 +65,11 @@ const senderName = computed(() => {
           </slot>
         </div>
         <div class="space-y-1 overflow-hidden">
-          <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+          <div
+            v-if="senderName"
+            class="text-sm truncate"
+            :class="primaryTextClass"
+          >
             {{
               t(senderTranslationKey, {
                 sender: senderName,
@@ -52,10 +77,18 @@ const senderName = computed(() => {
             }}
           </div>
           <slot>
-            <div v-if="title" class="truncate text-sm text-n-slate-12">
+            <div
+              v-if="title"
+              class="truncate text-sm"
+              :class="primaryTextClass"
+            >
               {{ title }}
             </div>
-            <div v-if="content" class="truncate text-sm text-n-slate-11">
+            <div
+              v-if="content"
+              class="truncate text-sm"
+              :class="secondaryTextClass"
+            >
               {{ content }}
             </div>
           </slot>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Image.vue b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
index 84a294e89..9b386cfe9 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Image.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
@@ -55,9 +55,12 @@ const handleImageError = () => {
     data-bubble-name="image"
     @click="toggleGallery(true)"
   >
-    <div v-if="hasError" class="flex items-center gap-1 text-center rounded-lg">
-      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
-      <p class="mb-0 text-n-slate-11">
+    <div
+      v-if="hasError"
+      class="flex items-center gap-1 text-center rounded-lg text-[rgb(var(--bubble-error-meta))]"
+    >
+      <Icon icon="i-lucide-circle-off" />
+      <p class="mb-0">
         {{ $t('COMPONENTS.MEDIA.IMAGE_UNAVAILABLE') }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
index 4c3740755..6ae919133 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -57,10 +57,10 @@ const onVideoLoadError = () => {
     />
     <div
       v-else
-      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
+      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1 text-[rgb(var(--bubble-error-meta))]"
     >
-      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
-      <p class="mb-0 text-n-slate-11">
+      <Icon icon="i-lucide-circle-off" />
+      <p class="mb-0">
         {{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
index 40b2e1fb2..f9bb12477 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
@@ -4,11 +4,11 @@ import BaseBubble from 'next/message/bubbles/Base.vue';
 import FormattedContent from './FormattedContent.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 import TranslationToggle from 'dashboard/components-next/message/TranslationToggle.vue';
-import { MESSAGE_TYPES } from '../../constants';
+import { MESSAGE_TYPES, MESSAGE_VARIANTS } from '../../constants';
 import { useMessageContext } from '../../provider.js';
 import { useTranslations } from 'dashboard/composables/useTranslations';
 
-const { content, attachments, contentAttributes, messageType } =
+const { content, attachments, contentAttributes, messageType, variant } =
   useMessageContext();
 
 const { hasTranslations, translationContent } =
@@ -36,6 +36,17 @@ const isEmpty = computed(() => {
   return !content.value && !attachments.value?.length;
 });
 
+const emptyTextClass = computed(() => {
+  const metaClassMap = {
+    [MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-meta))]',
+    [MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-meta))]',
+    [MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-meta))]',
+    [MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-meta))]',
+    [MESSAGE_VARIANTS.TEMPLATE]: 'text-[rgb(var(--bubble-bot-meta))]',
+  };
+  return metaClassMap[variant.value] || 'text-[rgb(var(--bubble-agent-meta))]';
+});
+
 const handleSeeOriginal = () => {
   renderOriginal.value = !renderOriginal.value;
 };
@@ -47,7 +58,7 @@ const handleSeeOriginal = () => {
     data-bubble-name="text"
   >
     <div class="gap-3 flex flex-col">
-      <span v-if="isEmpty" class="text-n-slate-11">
+      <span v-if="isEmpty" :class="emptyTextClass">
         {{ $t('CONVERSATION.NO_CONTENT') }}
       </span>
       <FormattedContent v-if="renderContent" :content="renderContent" />