diff --git a/app/components/messages/MessageBubble.vue b/app/components/messages/MessageBubble.vue
index 1eef35c..7ae6eab 100644
--- a/app/components/messages/MessageBubble.vue
+++ b/app/components/messages/MessageBubble.vue
@@ -37,6 +37,7 @@
           <ReactionPicker
             :visible="showReactionPicker"
             :position="message.fromMe ? 'top' : 'bottom'"
+            :align="message.fromMe ? 'left' : 'right'"
             @select="handleReaction"
             @close="showReactionPicker = false"
           />
diff --git a/app/components/messages/ReactionPicker.vue b/app/components/messages/ReactionPicker.vue
index 74410d8..82e9ea9 100644
--- a/app/components/messages/ReactionPicker.vue
+++ b/app/components/messages/ReactionPicker.vue
@@ -2,7 +2,10 @@
   <div
     v-if="visible"
     class="absolute z-50 bg-[var(--wa-surface)] rounded-full shadow-lg border border-[var(--wa-border)] p-1 flex items-center gap-1"
-    :class="position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'"
+    :class="[
+      position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2',
+      align === 'left' ? 'right-0' : 'left-0'
+    ]"
     @click.stop
   >
     <button
@@ -48,11 +51,13 @@
 interface Props {
   visible: boolean
   position?: 'top' | 'bottom'
+  align?: 'left' | 'right'
 }
 
 withDefaults(defineProps<Props>(), {
   visible: false,
-  position: 'top'
+  position: 'top',
+  align: 'right'
 })
 
 const emit = defineEmits<{