diff --git a/app/javascript/dashboard/components-next/message/MessageBubble.story.vue b/app/javascript/dashboard/components-next/message/MessageBubble.story.vue
index 041cafa63..cf70feaf2 100644
--- a/app/javascript/dashboard/components-next/message/MessageBubble.story.vue
+++ b/app/javascript/dashboard/components-next/message/MessageBubble.story.vue
@@ -41,8 +41,11 @@ const messages = [
 </script>
 
 <template>
-  <Story title="Components/Message" :layout="{ type: 'grid', width: '800' }">
-    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid gap-2">
+  <Story
+    title="Components/Messages/Text"
+    :layout="{ type: 'grid', width: '800' }"
+  >
+    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid gap-4">
       <MessageBubble v-for="message in messages" v-bind="message" />
     </div>
   </Story>
diff --git a/app/javascript/dashboard/components-next/message/MessageBubble.vue b/app/javascript/dashboard/components-next/message/MessageBubble.vue
index eb9d5893e..981e6dc70 100644
--- a/app/javascript/dashboard/components-next/message/MessageBubble.vue
+++ b/app/javascript/dashboard/components-next/message/MessageBubble.vue
@@ -20,7 +20,7 @@ const props = defineProps({
 const varaintBaseMap = {
   agent: 'bg-n-solid-blue p-3 text-n-slate-12',
   private: 'bg-n-solid-amber p-3 text-n-amber-12',
-  user: 'bg-n-alpha-2 p-3 text-n-slate-12',
+  user: 'bg-n-slate-4 p-3 text-n-slate-12',
   system: 'bg-n-alpha-1 px-2 py-0.5 text-n-slate-11 text-sm',
 };
 
@@ -54,7 +54,7 @@ const messageClass = computed(() => {
 
 <template>
   <div class="flex w-full" :class="containetFlexJustify">
-    <div class="max-w-md" :class="messageClass">
+    <div class="max-w-md text-sm" :class="messageClass">
       {{ text }}
     </div>
   </div>