diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx
index 54abe0337..0c21c7e9c 100644
--- a/ts/components/EditProfileDialog.tsx
+++ b/ts/components/EditProfileDialog.tsx
@@ -337,7 +337,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
         setProfileName: this.state.profileName,
       },
       () => {
-        // Update settinngs in dialog complete;
+        // Update settings in dialog complete;
         // now callback to reloadactions panel avatar
         this.props.callback(this.state.avatar);
       }
diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx
index 296cd02b4..13633cacb 100644
--- a/ts/components/session/ActionsPanel.tsx
+++ b/ts/components/session/ActionsPanel.tsx
@@ -42,6 +42,16 @@ export class ActionsPanel extends React.Component<Props, State> {
         this.setState({
           avatarPath: conversation.getAvatarPath(),
         });
+        // When our primary device updates its avatar, we will need for a message sync to know about that.
+        // Once we get the avatar update, we need to refresh this react component.
+        // So we listen to changes on our profile avatar and use the updated avatarPath (done on message received).
+        conversation.on('change', () => {
+          if (conversation.changed?.profileAvatar) {
+            this.setState({
+              avatarPath: conversation.getAvatarPath(),
+            });
+          }
+        });
       }
     );
   }