diff --git a/src/frontend/components/messages/ConversationDropDownMenu.vue b/src/frontend/components/messages/ConversationDropDownMenu.vue
index d0edbbf..e784320 100644
--- a/src/frontend/components/messages/ConversationDropDownMenu.vue
+++ b/src/frontend/components/messages/ConversationDropDownMenu.vue
@@ -9,6 +9,16 @@
         </template>
         <template v-slot:items>
 
+            <!-- call button -->
+            <a :href="`call.html?destination_hash=${peer.destination_hash}`" target="_blank">
+                <DropDownMenuItem>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                        <path fill-rule="evenodd" d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z" clip-rule="evenodd" />
+                    </svg>
+                    <span>Start a Call</span>
+                </DropDownMenuItem>
+            </a>
+
             <!-- delete message history button -->
             <DropDownMenuItem @click="onDeleteMessageHistory">
                 <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
diff --git a/src/frontend/components/messages/ConversationViewer.vue b/src/frontend/components/messages/ConversationViewer.vue
index bef9c1c..32e0292 100644
--- a/src/frontend/components/messages/ConversationViewer.vue
+++ b/src/frontend/components/messages/ConversationViewer.vue
@@ -61,21 +61,8 @@
                 </div>
             </div>
 
-            <!-- call button -->
-            <div class="ml-auto my-auto mr-2">
-                <a :href="`call.html?destination_hash=${selectedPeer.destination_hash}`" target="_blank" class="cursor-pointer">
-                    <div class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                        <div>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
-                            </svg>
-                        </div>
-                    </div>
-                </a>
-            </div>
-
-            <!-- delete button -->
-            <div class="my-auto mr-2">
+            <!-- dropdown menu -->
+            <div class="ml-auto my-auto mx-2">
                 <ConversationDropDownMenu v-if="selectedPeer" :peer="selectedPeer" @conversation-deleted="onConversationDeleted"/>
             </div>