diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs
index 08d63dc1b4..6c900f5a07 100644
--- a/crates/collab_ui/src/collab_titlebar_item.rs
+++ b/crates/collab_ui/src/collab_titlebar_item.rs
@@ -98,13 +98,7 @@ impl View for CollabTitlebarItem {
         let status = &*status.borrow();
         if matches!(status, client::Status::Connected { .. }) {
             right_container.add_child(self.render_toggle_contacts_button(&theme, cx));
-            let avatar = ActiveCall::global(cx)
-                .read(cx)
-                .room()
-                .is_none()
-                .then(|| user.as_ref())
-                .flatten()
-                .and_then(|user| user.avatar.clone());
+            let avatar = user.as_ref().and_then(|user| user.avatar.clone());
             right_container.add_child(self.render_user_menu_button(&theme, avatar, cx));
         } else {
             right_container.add_children(self.render_connection_status(status, cx));
@@ -645,13 +639,17 @@ impl CollabTitlebarItem {
         cx: &mut ViewContext<Self>,
     ) -> AnyElement<Self> {
         let tooltip = theme.tooltip.clone();
-        let user_menu_button = &theme.titlebar;
-        let avatar_style = &user_menu_button.user_menu_button.avatar;
+        let user_menu_button_style = if avatar.is_some() {
+            &theme.titlebar.user_menu_button_online
+        } else {
+            &theme.titlebar.user_menu_button_offline
+        };
+
+        let avatar_style = &user_menu_button_style.avatar;
         Stack::new()
             .with_child(
                 MouseEventHandler::<ToggleUserMenu, Self>::new(0, cx, |state, _| {
-                    let style = user_menu_button
-                        .user_menu_button
+                    let style = user_menu_button_style
                         .user_menu
                         .inactive_state()
                         .style_for(state);
@@ -665,12 +663,13 @@ impl CollabTitlebarItem {
                             Color::transparent_black(),
                         ));
                     };
+
                     dropdown
                         .with_child(
                             Svg::new("icons/caret_down_8.svg")
-                                .with_color(theme.titlebar.user_menu_button.icon.color)
+                                .with_color(user_menu_button_style.icon.color)
                                 .constrained()
-                                .with_width(theme.titlebar.user_menu_button.icon.width)
+                                .with_width(user_menu_button_style.icon.width)
                                 .contained()
                                 .into_any(),
                         )
diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 49c93f38f3..4d7f334086 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -144,7 +144,8 @@ pub struct Titlebar {
 
 #[derive(Clone, Deserialize, Default, JsonSchema)]
 pub struct UserMenu {
-    pub user_menu_button: UserMenuButton,
+    pub user_menu_button_online: UserMenuButton,
+    pub user_menu_button_offline: UserMenuButton,
 }
 #[derive(Clone, Deserialize, Default, JsonSchema)]
 pub struct UserMenuButton {
diff --git a/styles/src/styleTree/titlebar.ts b/styles/src/styleTree/titlebar.ts
index 3aa41359fa..881600d76c 100644
--- a/styles/src/styleTree/titlebar.ts
+++ b/styles/src/styleTree/titlebar.ts
@@ -56,7 +56,7 @@ const titlebarButton = (theme: ColorScheme) => toggleable({
 * When logged in shows the user's avatar and a chevron,
 * When logged out only shows a chevron.
 */
-function userMenuButton(theme: ColorScheme) {
+function userMenuButton(theme: ColorScheme, online: boolean) {
     return {
         user_menu: titlebarButton(theme),
         avatar: {
@@ -71,13 +71,15 @@ function userMenuButton(theme: ColorScheme) {
         icon: {
             width: 11,
             height: 11,
-            color: foreground(theme.lowest)
+            color: online ? foreground(theme.lowest) : background(theme.lowest)
         }
     }
 }
 
 export function titlebar(theme: ColorScheme) {
     return {
-        userMenuButton: userMenuButton(theme)
+        userMenuButtonOnline: userMenuButton(theme, true),
+        userMenuButtonOffline: userMenuButton(theme, false)
+
     }
 }