diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index b8c78475e7..7e88675e93 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -405,13 +405,13 @@ $rtl-icon-map: (
 
 // Individual traits
 
-@mixin button-focus-outline {
+@mixin button-focus-outline($width: 3px) {
   &:focus {
     @include keyboard-mode {
-      box-shadow: 0px 0px 0px 3px variables.$color-ultramarine;
+      box-shadow: 0px 0px 0px $width variables.$color-ultramarine;
     }
     @include dark-keyboard-mode {
-      box-shadow: 0px 0px 0px 3px variables.$color-ultramarine-light;
+      box-shadow: 0px 0px 0px $width variables.$color-ultramarine-light;
     }
   }
 }
diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss
index a2e98e59a6..4634045d1a 100644
--- a/stylesheets/components/ConversationDetails.scss
+++ b/stylesheets/components/ConversationDetails.scss
@@ -51,6 +51,20 @@
 
   &-membership-list__member-label-button {
     @include mixins.font-body-small;
+    @include mixins.button-focus-outline(2px);
+
+    @include mixins.mouse-mode {
+      &:hover {
+        background-color: light-dark(
+          variables.$color-gray-02,
+          variables.$color-gray-90
+        );
+      }
+    }
+    font-weight: 500;
+    outline: none;
+    border-radius: 5px;
+
     display: flex;
     align-items: center;
     color: light-dark(
@@ -62,7 +76,6 @@
       height: 16px;
       width: 16px;
       margin-bottom: 1px;
-      margin-block-start: -2px;
 
       @include mixins.color-svg-themed(
         '../images/icons/v3/chevron/chevron-right.svg',
diff --git a/ts/components/conversation/conversation-details/GroupMemberLabelEditor.dom.tsx b/ts/components/conversation/conversation-details/GroupMemberLabelEditor.dom.tsx
index 5bb68a7da6..0da56454d4 100644
--- a/ts/components/conversation/conversation-details/GroupMemberLabelEditor.dom.tsx
+++ b/ts/components/conversation/conversation-details/GroupMemberLabelEditor.dom.tsx
@@ -99,17 +99,20 @@ export function GroupMemberLabelEditor({
   const emojiKey = labelEmoji ? getEmojiVariantKey(labelEmoji) : null;
   const [isSaving, setIsSaving] = useState(false);
 
+  const labelStringForSave = labelString ? labelString.trim() : labelString;
   const isDirty =
-    labelEmoji !== existingLabelEmoji || labelString !== existingLabelString;
-  const canSave = isDirty;
+    labelEmoji !== existingLabelEmoji ||
+    labelStringForSave !== existingLabelString;
+  const canSave =
+    isDirty && ((!labelEmoji && !labelStringForSave) || labelStringForSave);
   const spinner = isSaving
     ? {
         'aria-label': i18n('icu:ConversationDetails--member-label--saving'),
       }
     : undefined;
 
-  const contactLabelForMessage = labelString?.trim()
-    ? { labelEmoji, labelString: labelString.trim() }
+  const contactLabelForMessage = labelStringForSave
+    ? { labelEmoji, labelString: labelStringForSave }
     : undefined;
 
   useEffect(() => {
@@ -173,7 +176,7 @@ export function GroupMemberLabelEditor({
           </div>
           <div
             className={tw(
-              'mt-5 rounded-[27px] bg-fill-primary-pressed px-2 pt-[47px] pb-6'
+              'mt-2.5 rounded-[27px] bg-fill-primary-pressed px-2 py-6'
             )}
             ref={messageContainer}
           >
@@ -252,7 +255,7 @@ export function GroupMemberLabelEditor({
           </div>
           <div>
             {membersWithLabel.length === 0 && (
-              <div className={tw('mt-2 type-body-medium text-label-secondary')}>
+              <div className={tw('type-body-medium text-label-secondary')}>
                 {i18n('icu:ConversationDetails--member-label--no-members')}
               </div>
             )}
@@ -346,7 +349,7 @@ export function GroupMemberLabelEditor({
               {
                 conversationId: group.id,
                 labelEmoji,
-                labelString: labelString?.trim(),
+                labelString: labelStringForSave,
               },
               {
                 onSuccess() {