diff --git a/crates/collab_ui/src/contact_list.rs b/crates/collab_ui/src/contact_list.rs
index 357b3c65e0a4ca735cc0fcf2317b303b5c16479a..ba7083d60427f4b5faa10b9c93496a5fd75c1fd7 100644
--- a/crates/collab_ui/src/contact_list.rs
+++ b/crates/collab_ui/src/contact_list.rs
@@ -1087,14 +1087,11 @@ impl View for ContactList {
                     )
                     .with_child(
                         MouseEventHandler::<AddContact>::new(0, cx, |_, _| {
-                            Svg::new("icons/user_plus_16.svg")
-                                .with_color(theme.contact_list.add_contact_button.color)
-                                .constrained()
-                                .with_height(16.)
-                                .contained()
-                                .with_style(theme.contact_list.add_contact_button.container)
-                                .aligned()
-                                .boxed()
+                            render_icon_button(
+                                &theme.contact_list.add_contact_button,
+                                "icons/user_plus_16.svg",
+                            )
+                            .boxed()
                         })
                         .with_cursor_style(CursorStyle::PointingHand)
                         .on_click(MouseButton::Left, |_, cx| {
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index 2feb3d7e356c945824ae577a0ae5a136802b0fd9..103d669df1ea26c7937b9bf9b4a1d3c8fee8fa75 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -3,7 +3,7 @@ import picker from "./picker";
 import { backgroundColor, border, iconColor, player, text } from "./components";
 
 export default function contactFinder(theme: Theme) {
-  const sideMargin = 12;
+  const sideMargin = 6;
   const contactButton = {
     background: backgroundColor(theme, 100),
     color: iconColor(theme, "primary"),
@@ -33,8 +33,8 @@ export default function contactFinder(theme: Theme) {
           top: 4,
         },
         margin: {
-          left: 12,
-          right: 12,
+          left: sideMargin,
+          right: sideMargin,
         }
       }
     },
diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts
index 633d6341967bb2c46ba308dfc3df44f984f785e3..52d5a25c447988f30fc704335c026cae2b1b7a71 100644
--- a/styles/src/styleTree/contactList.ts
+++ b/styles/src/styleTree/contactList.ts
@@ -53,22 +53,20 @@ export default function contactList(theme: Theme) {
         top: 4,
       },
       margin: {
-        left: sidePadding,
-        right: sidePadding,
+        left: 6
       },
     },
     userQueryEditorHeight: 33,
     addContactButton: {
-      margin: { left: 6, right: 12 },
       color: iconColor(theme, "primary"),
-      buttonWidth: 16,
+      buttonWidth: 28,
       iconWidth: 16,
     },
     rowHeight: 28,
     sectionIconSize: 8,
     headerRow: {
       ...text(theme, "mono", "secondary", { size: "sm" }),
-      margin: { top: 14 },
+      margin: { top: 6 },
       padding: {
         left: sidePadding,
         right: sidePadding,
diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts
index 7d699fa26b3e2d55d1e868073f413751d60ce382..957f3d6c8d95e4293b80b8d5c1ea1df11abcb5ea 100644
--- a/styles/src/styleTree/contactsPopover.ts
+++ b/styles/src/styleTree/contactsPopover.ts
@@ -8,7 +8,7 @@ export default function contactsPopover(theme: Theme) {
     padding: { top: 6 },
     shadow: popoverShadow(theme),
     border: border(theme, "primary"),
-    width: 250,
-    height: 300,
+    width: 300,
+    height: 400,
   }
 }