diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index fddfc3309..c41d2c58e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -10,16 +10,25 @@
           :status="currentContact.availability_status"
         />
         <div class="user--profile__meta">
-          <h3 class="user--name text-truncate">
-            <span class="margin-right-smaller">{{ currentContact.name }}</span>
-            <fluent-icon
-              v-if="!isHMACVerified"
-              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-              size="14"
-              class="hmac-warning__icon"
-              icon="warning"
-            />
-          </h3>
+          <woot-button
+            variant="link"
+            color-scheme="secondary"
+            class="text-truncate"
+            @click.prevent="$emit('contact-panel-toggle')"
+          >
+            <h3 class="sub-block-title user--name text-truncate">
+              <span class="margin-right-smaller">{{
+                currentContact.name
+              }}</span>
+              <fluent-icon
+                v-if="!isHMACVerified"
+                v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+                size="14"
+                class="hmac-warning__icon"
+                icon="warning"
+              />
+            </h3>
+          </woot-button>
           <div class="conversation--header--actions text-truncate">
             <inbox-name
               v-if="hasMultipleInboxes"
@@ -201,11 +210,10 @@ export default {
 
 .user--name {
   display: inline-block;
-  font-size: var(--font-size-medium);
-  line-height: 1.3;
-  margin: 0;
+  line-height: 1.2;
   text-transform: capitalize;
-  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 .conversation--header--actions {