diff --git a/src/frontend/components/messages/ConversationDropDownMenu.vue b/src/frontend/components/messages/ConversationDropDownMenu.vue
index e784320..057b861 100644
--- a/src/frontend/components/messages/ConversationDropDownMenu.vue
+++ b/src/frontend/components/messages/ConversationDropDownMenu.vue
@@ -19,14 +19,24 @@
                 </DropDownMenuItem>
             </a>
 
-            <!-- delete message history button -->
-            <DropDownMenuItem @click="onDeleteMessageHistory">
-                <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+            <!-- set custom display name button -->
+            <DropDownMenuItem @click="onSetCustomDisplayName">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                    <path fill-rule="evenodd" d="M5.25 2.25a3 3 0 0 0-3 3v4.318a3 3 0 0 0 .879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 0 0 5.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 0 0-2.122-.879H5.25ZM6.375 7.5a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z" clip-rule="evenodd" />
                 </svg>
-                <span class="text-red-500">Delete Message History</span>
+                <span>Set Custom Display Name</span>
             </DropDownMenuItem>
 
+            <!-- delete message history button -->
+            <div class="border-t">
+                <DropDownMenuItem @click="onDeleteMessageHistory">
+                    <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+                    </svg>
+                    <span class="text-red-500">Delete Message History</span>
+                </DropDownMenuItem>
+            </div>
+
         </template>
     </DropDownMenu>
 </template>
@@ -49,6 +59,7 @@ export default {
     },
     emits: [
         "conversation-deleted",
+        "set-custom-display-name",
     ],
     methods: {
         async onDeleteMessageHistory() {
@@ -70,6 +81,9 @@ export default {
             this.$emit("conversation-deleted");
 
         },
+        async onSetCustomDisplayName() {
+            this.$emit("set-custom-display-name");
+        },
     },
 }
 </script>
diff --git a/src/frontend/components/messages/ConversationViewer.vue b/src/frontend/components/messages/ConversationViewer.vue
index 32e0292..9eb2e20 100644
--- a/src/frontend/components/messages/ConversationViewer.vue
+++ b/src/frontend/components/messages/ConversationViewer.vue
@@ -63,7 +63,11 @@
 
             <!-- dropdown menu -->
             <div class="ml-auto my-auto mx-2">
-                <ConversationDropDownMenu v-if="selectedPeer" :peer="selectedPeer" @conversation-deleted="onConversationDeleted"/>
+                <ConversationDropDownMenu
+                    v-if="selectedPeer"
+                    :peer="selectedPeer"
+                    @conversation-deleted="onConversationDeleted"
+                    @set-custom-display-name="updateCustomDisplayName"/>
             </div>
 
             <!-- close button -->