diff --git a/frontend/components/profile/tickets/new/TicketBubble.vue b/frontend/components/profile/tickets/new/TicketBubble.vue
new file mode 100644
index 0000000..6d1f8af
--- /dev/null
+++ b/frontend/components/profile/tickets/new/TicketBubble.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    is_user: boolean;
+    date: string;
+    username: string;
+    message: string;
+    profile: string;
+    files: string[];
+};
+
+// props
+
+defineProps<Props>();
+</script>
+
+<template>
+    <div
+        class="w-full flex items-center"
+        :class="is_user ? 'justify-start' : 'justify-end'"
+    >
+        <div
+            class="w-full lg:w-1/2 bg-slate-50 border border-slate-200 rounded-xl p-5 flex items-start"
+            :class="is_user ? 'rounded-br-none' : 'rounded-bl-none'"
+        >
+            <div class="w-2/12 flex items-start justify-start">
+                <img :src="profile" class="size-16 rounded-full" />
+            </div>
+
+            <div class="w-10/12 flex flex-col items-start pt-8">
+                <div class="flex flex-col gap-0.5 w-full">
+                    <p
+                        class="text-[10px] font-semibold text-[#1677FF] line-clamp-1 text-right"
+                        style="direction: ltr"
+                    >
+                        {{ date }}
+                    </p>
+                    <p
+                        class="text-xs font-semibold text-dynamic-secondary line-clamp-1"
+                    >
+                        {{ username }}
+                    </p>
+                </div>
+                <div class="py-2 text-start">
+                    {{ message }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>