diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index d0772d4..73fcc2b 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -25,13 +25,13 @@
             align-items: center;
         }
         .num-members {
-            font-family: 'Titillium Web', sans-serif;
+            font-family: 'Inter', sans-serif;
             font-weight: 400;
             font-size: 12 * $chat-text-size;
             color: black;
         }
         .v-btn.leave-button {
-            font-family: 'Titillium Web', sans-serif;
+            font-family: 'Inter', sans-serif;
             font-weight: 700;
             font-size: 11 * $chat-text-size;
             color: white;
@@ -81,7 +81,7 @@
         padding-right: 2 * $chat-standard-padding-s;
         padding-top: 0px;
         .typing {
-            font-family: 'Titillium Web', sans-serif;
+            font-family: 'Inter', sans-serif;
             font-weight: 300;
             font-size: 12 * $chat-text-size;
             color: #1c242a;
@@ -104,7 +104,7 @@
             overflow-y: auto;
             padding: 0 0 0 0px;
             margin: 6px 0;
-            font-family: 'Titillium Web', sans-serif;
+            font-family: 'Inter', sans-serif;
             font-weight: 300;
             font-size: 18 * $chat-text-size;
             .v-input__slot {
@@ -116,9 +116,9 @@
     }
 
     .op-button {
-        position:absolute;
-        right:-30px;
-        top:0;
+        position: relative;
+        display: inline-block;
+        vertical-align: top !important;
         .v-icon {
             color: #eeeeee;
             &:hover {
@@ -126,58 +126,18 @@
             }
         }
     }
-    .messageOut .op-button {
-        right:70%;
-    }
 }
 
 .messageJoin {
-    font-family: 'Titillium Web', sans-serif;
+    font-family: 'Inter', sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
     text-align: center;
 }
 
-.messageOut {
-    margin: 8px;
-    margin-left: 30% !important;
-    text-align: right;
-    .bubble {
-        background-color: #e5e5e5;
-        border-radius: 10px 10px 0 10px;
-        padding: 8px;
-    }
-    .audio-bubble {
-        overflow: scroll;
-    }
-    .bubble.image-bubble {
-        padding: 0px;
-        overflow: hidden;
-    }
-    .sender {
-        font-family: 'Titillium Web', sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        font-size: 10 * $chat-text-size;
-        color: rgba(#000000, 0.6);
-        display: inline-block;
-        margin-left: 40px;
-        margin-right: 8px;
-    }
-    .time {
-        font-family: 'Titillium Web', sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        font-size: 10 * $chat-text-size;
-        color: rgba(#000000, 0.6);
-        display: inline-block;
-    }
-}
-
 .messageIn {
     margin: 8px;
-    margin-right: 30% !important;
     text-align: left;
     position: relative;
     .bubble {
@@ -187,24 +147,85 @@
         border-width: 1px !important;
         border-style: solid !important;
         border-color: #eeeeee !important;
-        margin-left: 40px;
+        display: inline-block;
+        position: relative;
+        max-width: 70%;
     }
     .audio-bubble {
-        margin-left: 40px;
         overflow: scroll;
+        display: inline-block;
+        width: fit-content;
+        max-width: 70%;
     }
     .bubble.image-bubble {
         padding: 0px;
         overflow: hidden;
+        display: inline-block;
+        width: 70%;
+        max-width: 70%;
     }
     .avatar {
-        position: absolute;
-        left: -10px;
+        display: inline-block;
+        vertical-align: top !important;
+        margin-right: 10px;
         top: 0;
         border: 2px solid white;
     }
+    .senderAndTime {
+        display: block;
+    }
     .sender {
-        font-family: 'Titillium Web', sans-serif;
+        font-family: 'Inter', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        margin-left: 40px;
+        margin-right: 8px;
+        display: inline-block;
+    }
+    .time {
+        font-family: 'Inter', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
+    }
+}
+
+.messageOut {
+    margin: 8px;
+    text-align: right;
+    position: relative;
+    .bubble {
+        background-color: #e5e5e5;
+        border-radius: 10px 10px 0 10px;
+        padding: 8px;
+        display: inline-block;
+        position: relative;
+        max-width: 70%;
+    }
+    .audio-bubble {
+        overflow: scroll;
+        display: inline-block;
+        width: fit-content;
+        max-width: 70%;
+    }
+    .bubble.image-bubble {
+        padding: 0px;
+        display: inline-block;
+        width: 70%;
+        max-width: 70%;
+        .v-image {
+            border-radius: 10px 10px 0 10px;
+        }
+    }
+    .senderAndTime {
+        display: block;
+    }
+    .sender {
+        font-family: 'Inter', sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -214,7 +235,7 @@
         margin-right: 8px;
     }
     .time {
-        font-family: 'Titillium Web', sans-serif;
+        font-family: 'Inter', sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -224,7 +245,7 @@
 }
 
 .sender, .status {
-    font-family: 'Titillium Web', sans-serif;
+    font-family: 'Inter', sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
@@ -232,12 +253,13 @@
 }
 
 .message {
-    font-family: 'Titillium Web', sans-serif;
+    font-family: 'Inter', sans-serif;
     font-weight: 400;
-    font-size: 14 * $chat-text-size;
+    font-size: 16 * $chat-text-size;
     color: #000000;
     overflow-wrap: break-word;
-    white-space: pre;
+    word-wrap: break-word;
+    white-space: pre-wrap;
     .edit-marker {
         font-size: 0.8rem;
         color: #888888;
@@ -254,7 +276,7 @@
     overflow-y: auto;
     margin-bottom: 8px;
     .original-message-sender {
-        font-family: 'Titillium Web', sans-serif;
+        font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13 * $chat-text-size;
         color: #000000;
@@ -262,7 +284,7 @@
         white-space: pre;
     }
     .original-message-text {
-        font-family: 'Titillium Web', sans-serif;
+        font-family: 'Inter', sans-serif;
         font-weight: 400;
         font-size: 11 * $chat-text-size;
         color: #000000;
@@ -272,7 +294,7 @@
 }
 
 .time {
-    font-family: 'Titillium Web', sans-serif;
+    font-family: 'Inter', sans-serif;
     font-weight: 300;
     font-style: italic;
     font-size: 15 * $chat-text-size;
@@ -281,7 +303,7 @@
 }
 
 .statusEvent {
-    font-family: 'Titillium Web', sans-serif;
+    font-family: 'Inter', sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
@@ -297,28 +319,27 @@
 
 .message-operations {
     position: absolute;
-    width: auto;
+    width: fit-content;
     background-color: #e2e2e2;
-    &.incoming {
-        right: 30%;
-    }
-    &.outgoing {
-        left: 30%;
-    }
+    // &.incoming {
+    //     right: 30%;
+    // }
+    // &.outgoing {
+    //     left: 30%;
+    // }
 }
 
 .quick-reaction-container {
     position: absolute;
-    top: -18px;
-    right: 10px;
     background-color: #000000;
     border: 3px solid white;
     border-radius: 15px;
     height: 30px;
+    width: fit-content;
+    right: 10px;
+    top: -12px;
     .quick-reaction {
-        // border: 1px solid #e2e2e2;
-        // border-radius: 9px;
-        margin: 0px 2px;
+        margin: 0px 6px;
         padding: 2px;
         font-size: 10px;
         &:hover {
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 7bacc20..f01553a 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,10 +1,11 @@
 $background: #ffffff;
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
 
 $chat-background: $background;
 $chat-standard-padding: 32px;
 $chat-standard-padding-s: 16px;
 $chat-standard-padding-xs: 8px;
-$chat-text-size: 0.7pt;
+$chat-text-size: 1.0px;
 $chat-button-height: 50px;
\ No newline at end of file
diff --git a/src/components/messages/MessageIncomingAudio.vue b/src/components/messages/MessageIncomingAudio.vue
index a362fda..f4dfd6d 100644
--- a/src/components/messages/MessageIncomingAudio.vue
+++ b/src/components/messages/MessageIncomingAudio.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="messageIn">
-    <div class="audio-bubble">
-      <audio controls :src="src">Audio file</audio>
-      <QuickReactions :event="event" :reactions="reactions" />
-    </div>
-    <v-btn icon class="op-button" @click.stop="showContextMenu"
-      ><v-icon>more_vert</v-icon></v-btn
-    >
     <v-avatar class="avatar" size="32" color="#ededed">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
-    <div v-if="showSenderAndTime">
+    <div class="audio-bubble">
+      <audio controls :src="src">Audio file</audio>
+      <QuickReactions :event="event" :reactions="reactions" />
+    </div>
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
+    </div>
+    <div v-if="showSenderAndTime" class="senderAndTime">
       <div class="sender">{{ messageEventDisplayName(event) }}</div>
       <div class="time">
         {{ formatTime(event.event.origin_server_ts) }}
diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue
index 2ab81fc..70d04c6 100644
--- a/src/components/messages/MessageIncomingImage.vue
+++ b/src/components/messages/MessageIncomingImage.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="messageIn">
-    <div class="bubble image-bubble">
-      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
-      <QuickReactions :event="event" :reactions="reactions" />
-    </div>
-    <v-btn icon class="op-button" @click.stop="showContextMenu"
-      ><v-icon>more_vert</v-icon></v-btn
-    >
     <v-avatar class="avatar" size="32" color="#ededed">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
-    <div v-if="showSenderAndTime">
+    <div class="bubble image-bubble">
+      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
+      <QuickReactions :event="event" :reactions="reactions" />
+    </div>
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
+    </div>
+    <div v-if="showSenderAndTime" class="senderAndTime">
       <div class="sender">{{ messageEventDisplayName(event) }}</div>
       <div class="time">
         {{ formatTime(event.event.origin_server_ts) }}
diff --git a/src/components/messages/MessageIncomingText.vue b/src/components/messages/MessageIncomingText.vue
index 31c0c30..cf7b828 100644
--- a/src/components/messages/MessageIncomingText.vue
+++ b/src/components/messages/MessageIncomingText.vue
@@ -8,8 +8,11 @@
     </v-avatar>
 
     <div class="bubble">
+      <QuickReactions :event="event" :reactions="reactions" />
       <div class="original-message" v-if="inReplyToText">
-        <div class="original-message-sender">{{ inReplyToSender || 'Someone' }} said:</div>
+        <div class="original-message-sender">
+          {{ inReplyToSender || "Someone" }} said:
+        </div>
         <div class="original-message-text">{{ inReplyToText }}</div>
       </div>
       <div class="message">
@@ -18,13 +21,14 @@
           >(edited)</span
         >
       </div>
-      <QuickReactions :event="event" :reactions="reactions" />
       <!-- <div>{{ JSON.stringify(event) }}</div> -->
     </div>
-    <v-btn icon class="op-button" @click.stop="showContextMenu"
-      ><v-icon>more_vert</v-icon></v-btn
-    >
-    <div v-if="showSenderAndTime">
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
+    </div>
+    <div v-if="showSenderAndTime" class="senderAndTime">
       <div class="sender">{{ messageEventDisplayName(event) }}</div>
       <div class="time">
         {{ formatTime(event.event.origin_server_ts) }}
diff --git a/src/components/messages/MessageOutgoingAudio.vue b/src/components/messages/MessageOutgoingAudio.vue
index 8571179..18a837b 100644
--- a/src/components/messages/MessageOutgoingAudio.vue
+++ b/src/components/messages/MessageOutgoingAudio.vue
@@ -1,14 +1,21 @@
 <template>
   <div class="messageOut">
-      <div class="audio-bubble">
-        <audio controls :src="src">Audio file</audio>
-        <QuickReactions :event="event" :reactions="reactions" />
-      </div>
-      <!-- <div class="sender">{{ "You" }}</div> -->
-    <div class="time">
-      {{ formatTime(event.event.origin_server_ts) }}
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
     </div>
+    <div class="audio-bubble">
+      <audio controls :src="src">Audio file</audio>
+      <QuickReactions :event="event" :reactions="reactions" />
+    </div>
+    <div class="senderAndTime">
+      <!-- <div class="sender">{{ "You" }}</div> -->
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
       <div class="status">{{ event.status }}</div>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/messages/MessageOutgoingImage.vue b/src/components/messages/MessageOutgoingImage.vue
index b31697c..34c52c9 100644
--- a/src/components/messages/MessageOutgoingImage.vue
+++ b/src/components/messages/MessageOutgoingImage.vue
@@ -1,13 +1,20 @@
 <template>
   <div class="messageOut">
-      <div class="bubble image-bubble">
-        <v-img :aspect-ratio="16/9" ref="image" :src="src" cover />
-        <QuickReactions :event="event" :reactions="reactions" />
-      </div>
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
+    </div>
+    <div class="bubble image-bubble">
+      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
+      <QuickReactions :event="event" :reactions="reactions" />
+    </div>
+    <div class="senderAndTime">
       <!-- <div class="sender">{{ "You" }}</div> -->
-    <div class="time">
-      {{ formatTime(event.event.origin_server_ts) }}
-      <div class="status">{{ event.status }}</div>
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+        <div class="status">{{ event.status }}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -20,8 +27,8 @@ export default {
   mixins: [messageMixin],
   data() {
     return {
-      src: null
-    }
+      src: null,
+    };
   },
   mounted() {
     const width = this.$refs.image.$el.clientWidth;
diff --git a/src/components/messages/MessageOutgoingText.vue b/src/components/messages/MessageOutgoingText.vue
index 9ab8abb..6c3c7c1 100644
--- a/src/components/messages/MessageOutgoingText.vue
+++ b/src/components/messages/MessageOutgoingText.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="messageOut">
+    <div class="op-button" ref="opbutton">
+      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+        ><v-icon>more_vert</v-icon></v-btn
+      >
+    </div>
     <div class="bubble">
+      <QuickReactions :event="event" :reactions="reactions" />
       <div class="original-message" v-if="inReplyToText">
-        <div class="original-message-sender">{{ inReplyToSender || 'Someone' }} said:</div>
+        <div class="original-message-sender">
+          {{ inReplyToSender || "Someone" }} said:
+        </div>
         <div class="original-message-text">{{ inReplyToText }}</div>
       </div>
 
@@ -12,16 +20,14 @@
           >(edited)</span
         >
       </div>
-      <QuickReactions :event="event" :reactions="reactions" />
     </div>
-    <v-btn icon class="op-button" @click.stop="showContextMenu"
-      ><v-icon>more_vert</v-icon></v-btn
-    >
     <!-- <div class="sender">{{ "You" }}</div> -->
-    <div class="time">
-      {{ formatTime(event.event.origin_server_ts) }}
+    <div class="senderAndTime">
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
+      <div class="status">{{ event.status }}</div>
     </div>
-    <div class="status">{{ event.status }}</div>
   </div>
 </template>
 
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index d1a4d65..d880db3 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -114,8 +114,8 @@ export default {
     }
   },
   methods: {
-    showContextMenu() {
-      this.$emit("context-menu", this.event);
+    showContextMenu(buttonRef) {
+      this.$emit("context-menu", {event: this.event,anchor: buttonRef});
     },
 
     /**