diff --git a/background.html b/background.html
index c96479b8f..8a8ebab26 100644
--- a/background.html
+++ b/background.html
@@ -139,10 +139,10 @@
 
   <!-- DIALOGS-->
   <!-- <script type='text/javascript' src='js/views/update_group_dialog_view.js'></script> -->
-  <script type='text/javascript' src='js/views/invite_contacts_dialog_view.js'></script>
-  <script type='text/javascript' src='js/views/admin_leave_closed_group_dialog_view.js'></script>
+  <!-- <script type='text/javascript' src='js/views/invite_contacts_dialog_view.js'></script> -->
+  <!-- <script type='text/javascript' src='js/views/admin_leave_closed_group_dialog_view.js'></script> -->
 
-  <script type='text/javascript' src='js/views/user_details_dialog_view.js'></script>
+  <!-- <script type='text/javascript' src='js/views/user_details_dialog_view.js'></script> -->
   <script type='text/javascript' src='js/views/session_id_reset_view.js'></script>
 
   <!-- CRYPTO -->
diff --git a/js/background.js b/js/background.js
index f5c382516..db2bec6c6 100644
--- a/js/background.js
+++ b/js/background.js
@@ -448,11 +448,11 @@
     //   }
     // });
 
-    Whisper.events.on('leaveClosedGroup', async groupConvo => {
-      if (appView) {
-        appView.showLeaveGroupDialog(groupConvo);
-      }
-    });
+    // Whisper.events.on('leaveClosedGroup', async groupConvo => {
+    //   if (appView) {
+    //     appView.showLeaveGroupDialog(groupConvo);
+    //   }
+    // });
 
     Whisper.Notifications.on('click', (id, messageId) => {
       window.showWindow();
@@ -471,28 +471,28 @@
       });
     });
 
-    Whisper.events.on('onShowUserDetails', async ({ userPubKey }) => {
-      const conversation = await window
-        .getConversationController()
-        .getOrCreateAndWait(userPubKey, 'private');
-
-      const avatarPath = conversation.getAvatarPath();
-      const profile = conversation.getLokiProfile();
-      const displayName = profile && profile.displayName;
-
-      if (appView) {
-        appView.showUserDetailsDialog({
-          profileName: displayName,
-          pubkey: userPubKey,
-          avatarPath,
-          onStartConversation: () => {
-            window.inboxStore.dispatch(
-              window.actionsCreators.openConversationExternal(conversation.id)
-            );
-          },
-        });
-      }
-    });
+    // Whisper.events.on('onShowUserDetails', async ({ userPubKey }) => {
+    //   const conversation = await window
+    //     .getConversationController()
+    //     .getOrCreateAndWait(userPubKey, 'private');
+
+    //   const avatarPath = conversation.getAvatarPath();
+    //   const profile = conversation.getLokiProfile();
+    //   const displayName = profile && profile.displayName;
+
+    //   if (appView) {
+    //     appView.showUserDetailsDialog({
+    //       profileName: displayName,
+    //       pubkey: userPubKey,
+    //       avatarPath,
+    //       onStartConversation: () => {
+    //         window.inboxStore.dispatch(
+    //           window.actionsCreators.openConversationExternal(conversation.id)
+    //         );
+    //       },
+    //     });
+    //   }
+    // });
 
 
     Whisper.events.on('password-updated', () => {
diff --git a/js/views/app_view.js b/js/views/app_view.js
index fd477ffe1..d15c3aa23 100644
--- a/js/views/app_view.js
+++ b/js/views/app_view.js
@@ -117,12 +117,12 @@
 
       this.el.prepend(resetSessionIDDialog.el);
     },
-    showUserDetailsDialog(options) {
-      // eslint-disable-next-line no-param-reassign
-      options.theme = this.getThemeObject();
-      const dialog = new Whisper.UserDetailsDialogView(options);
-      this.el.prepend(dialog.el);
-    },
+    // showUserDetailsDialog(options) {
+    //   // eslint-disable-next-line no-param-reassign
+    //   options.theme = this.getThemeObject();
+    //   const dialog = new Whisper.UserDetailsDialogView(options);
+    //   this.el.prepend(dialog.el);
+    // },
     getThemeObject() {
       const themeSettings = storage.get('theme-setting') || 'light';
       const theme = themeSettings === 'light' ? window.lightTheme : window.darkTheme;
diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx
index 137331bf2..2501db815 100644
--- a/ts/components/UserDetailsDialog.tsx
+++ b/ts/components/UserDetailsDialog.tsx
@@ -5,6 +5,10 @@ import { SessionModal } from './session/SessionModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton';
 import { SessionIdEditable } from './session/SessionIdEditable';
 import { DefaultTheme } from 'styled-components';
+import { ConversationController } from '../session/conversations';
+import { ConversationTypeEnum } from '../models/conversation';
+import { Session } from 'electron';
+import { SessionWrapperModal } from './session/SessionWrapperModal';
 
 interface Props {
   i18n: any;
@@ -12,7 +16,7 @@ interface Props {
   avatarPath: string;
   pubkey: string;
   onClose: any;
-  onStartConversation: any;
+  // onStartConversation: any;
   theme: DefaultTheme;
 }
 
@@ -35,7 +39,7 @@ export class UserDetailsDialog extends React.Component<Props, State> {
     const { i18n } = this.props;
 
     return (
-      <SessionModal
+      <SessionWrapperModal
         title={this.props.profileName}
         onClose={this.closeDialog}
         theme={this.props.theme}
@@ -43,6 +47,8 @@ export class UserDetailsDialog extends React.Component<Props, State> {
         <div className="avatar-center">
           <div className="avatar-center-inner">{this.renderAvatar()}</div>
         </div>
+
+        <div className="spacer-md"></div>
         <SessionIdEditable editable={false} text={this.props.pubkey} />
 
         <div className="session-modal__button-group__center">
@@ -53,7 +59,7 @@ export class UserDetailsDialog extends React.Component<Props, State> {
             onClick={this.onClickStartConversation}
           />
         </div>
-      </SessionModal>
+      </SessionWrapperModal>
     );
   }
 
@@ -95,8 +101,14 @@ export class UserDetailsDialog extends React.Component<Props, State> {
     this.props.onClose();
   }
 
-  private onClickStartConversation() {
-    this.props.onStartConversation();
+  private async onClickStartConversation() {
+    // this.props.onStartConversation();
+    const conversation = await ConversationController.getInstance().getOrCreateAndWait(this.props.pubkey, ConversationTypeEnum.PRIVATE);
+
+    window.inboxStore?.dispatch(
+      window.actionsCreators.openConversationExternal(conversation.id)
+    );
+
     this.closeDialog();
   }
 }
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 6223f6c43..fb7b86a51 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -71,10 +71,10 @@ import { useTheme, withTheme } from 'styled-components';
 import { MessageMetadata } from './message/MessageMetadata';
 import { PubKey } from '../../session/types';
 import { ToastUtils, UserUtils } from '../../session/utils';
-import { ConversationController } from '../../session/conversations';
 import { MessageRegularProps } from '../../models/messageType';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { addSenderAsModerator, removeSenderFromModerator } from '../../interactions/message';
+import { UserDetailsDialog } from '../UserDetailsDialog';
 
 // Same as MIN_WIDTH in ImageGrid.tsx
 const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
@@ -467,8 +467,8 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       conversationType,
       direction,
       isPublic,
-      onShowUserDetails,
       firstMessageOfSeries,
+      updateSessionConversationModal
     } = this.props;
 
     if (collapseMetadata || conversationType !== 'group' || direction === 'outgoing') {
@@ -480,15 +480,24 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       return <div style={{ marginInlineEnd: '60px' }} />;
     }
 
+    const onAvatarClick = () => {
+      updateSessionConversationModal(<UserDetailsDialog 
+        i18n={window.i18n}
+        profileName={userName}
+        avatarPath={authorAvatarPath || ''}
+        pubkey={authorPhoneNumber}
+        onClose={() => updateSessionConversationModal(null)}
+        theme={this.props.theme}
+      />)
+    }
+
     return (
       <div className="module-message__author-avatar">
         <Avatar
           avatarPath={authorAvatarPath}
           name={userName}
           size={AvatarSize.S}
-          onAvatarClick={() => {
-            onShowUserDetails(authorPhoneNumber);
-          }}
+          onAvatarClick={onAvatarClick}
           pubkey={authorPhoneNumber}
         />
         {isPublic && isAdmin && (
diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx
index 84c353262..b60523bf3 100644
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/ts/components/session/conversation/SessionConversation.tsx
@@ -451,9 +451,22 @@ export class SessionConversation extends React.Component<Props, State> {
       onDownloadAttachment: this.saveAttachment,
       messageContainerRef: this.messageContainerRef,
       onDeleteSelectedMessages: this.deleteSelectedMessages,
+      updateSessionConversationModal: this.updateSessionConversationModal
     };
   }
 
+
+  /**
+   * Setting this to a JSX element that will be rendered if non-null.
+   * @param update Value to set the modal state to
+   */
+  private updateSessionConversationModal (update: JSX.Element | null) {
+    this.setState({
+      ...this.state,
+      modal: update
+    })
+  }
+
   public getRightPanelProps() {
     const { selectedConversationKey } = this.props;
     const conversation = ConversationController.getInstance().getOrThrow(selectedConversationKey);
diff --git a/ts/components/session/conversation/SessionMessagesList.tsx b/ts/components/session/conversation/SessionMessagesList.tsx
index 15b761ac1..824c99d34 100644
--- a/ts/components/session/conversation/SessionMessagesList.tsx
+++ b/ts/components/session/conversation/SessionMessagesList.tsx
@@ -47,6 +47,7 @@ interface Props {
   onClickAttachment: (attachment: any, message: any) => void;
   onDownloadAttachment: ({ attachment }: { attachment: any }) => void;
   onDeleteSelectedMessages: () => Promise<void>;
+  updateSessionConversationModal: (modal: JSX.Element | null) => any;
 }
 
 export class SessionMessagesList extends React.Component<Props, State> {
@@ -320,6 +321,8 @@ export class SessionMessagesList extends React.Component<Props, State> {
       };
     }
 
+    messageProps.updateSessionConversationModal = this.props.updateSessionConversationModal
+
     return <Message {...messageProps} key={messageProps.id} />;
   }
 
diff --git a/ts/models/messageType.ts b/ts/models/messageType.ts
index 0f09aa499..9f2262d28 100644
--- a/ts/models/messageType.ts
+++ b/ts/models/messageType.ts
@@ -228,6 +228,8 @@ export interface MessageRegularProps {
   onCopyPubKey?: () => void;
   onBanUser?: () => void;
   onUnbanUser?: () => void;
+  // setModal?: any;
+  updateSessionConversationModal: (modal: JSX.Element | null) => any;
 
   onShowDetail: () => void;
   onShowUserDetails: (userPubKey: string) => void;