diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss
index 3de940a74..bbc9dd868 100644
--- a/css/_atlaskit_overrides.scss
+++ b/css/_atlaskit_overrides.scss
@@ -20,10 +20,25 @@
  * Override @atlaskit/modal-dialog header styling
  */
 .atlaskit-portal [role="dialog"] header {
-    .jitsi-icon svg {
-        fill: #B8C7E0;
+    .jitsi-icon {
         cursor: pointer;
     }
+
+    .jitsi-icon svg {
+        fill: #B8C7E0;
+    }
+}
+
+/**
+ * Make header close button more easily tappable on mobile.
+ */
+.mobile-browser .atlaskit-portal [role="dialog"] header .jitsi-icon {
+    display: grid;
+    place-items: center;
+    height: 48px;
+    width: 48px;
+    background: #2a3a4b;
+    border-radius: 3px;
 }
 
 /**
diff --git a/css/_chat.scss b/css/_chat.scss
index fa37a3f45..6f6f955a5 100644
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -113,8 +113,11 @@
     font-size: 24px;
     line-height: 32px;
 
-    .jitsi-icon > svg {
+    .jitsi-icon {
         cursor: pointer;
+    }
+
+    .jitsi-icon > svg {
         fill: #A4B8D1;
     }
 }
@@ -387,6 +390,7 @@
     &-header {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         margin: 16px 16px 24px;
         width: calc(100% - 32px);
         box-sizing: border-box;
@@ -395,8 +399,11 @@
         font-size: 24px;
         line-height: 32px;
 
-        .jitsi-icon > svg {
+        .jitsi-icon {
             cursor: pointer;
+        }
+
+        .jitsi-icon > svg {
             fill: #A4B8D1;
         }
     }
@@ -405,3 +412,15 @@
         width: 100%;
     }
 }
+
+/**
+ * Make header close button more easily tappable on mobile.
+ */
+.mobile-browser .chat-dialog-header .jitsi-icon {
+    display: grid;
+    place-items: center;
+    height: 48px;
+    width: 48px;
+    background: #2a3a4b;
+    border-radius: 3px;
+}
diff --git a/css/modals/embed-meeting/_embed-meeting.scss b/css/modals/embed-meeting/_embed-meeting.scss
index 3d3a7f21a..7269e4365 100644
--- a/css/modals/embed-meeting/_embed-meeting.scss
+++ b/css/modals/embed-meeting/_embed-meeting.scss
@@ -2,22 +2,6 @@
     &-dialog {
         display: flex;
         flex-direction: column;
-
-        &-header {
-            display: flex;
-            justify-content: space-between;
-            margin: 16px 16px 24px;
-            width: calc(100% - 32px);
-            color: #fff;
-            font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
-
-            & > div > svg {
-                cursor: pointer;
-                fill: #A4B8D1;
-            }
-        }
     }
 
     &-copy {
diff --git a/css/modals/invite/_invite_more.scss b/css/modals/invite/_invite_more.scss
index 710c07806..d125bfac5 100644
--- a/css/modals/invite/_invite_more.scss
+++ b/css/modals/invite/_invite_more.scss
@@ -47,22 +47,6 @@
         font-size: 15px;
         line-height: 24px;
 
-        &.header {
-            display: flex;
-            justify-content: space-between;
-            margin: 16px 16px 24px;
-            width: calc(100% - 32px);
-            color: #fff;
-            font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
-
-            & > div > svg {
-                cursor: pointer;
-                fill: #A4B8D1;
-            }
-        }
-
         &.separator {
             margin: 24px 0 24px -20px;
             padding: 0 20px;
diff --git a/react/features/embed-meeting/components/EmbedMeetingDialog.js b/react/features/embed-meeting/components/EmbedMeetingDialog.js
index 532a1171c..0943c8ce3 100644
--- a/react/features/embed-meeting/components/EmbedMeetingDialog.js
+++ b/react/features/embed-meeting/components/EmbedMeetingDialog.js
@@ -8,8 +8,6 @@ import { getInviteURL } from '../../base/connection';
 import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 
-import Header from './Header';
-
 type Props = {
 
     /**
@@ -40,9 +38,9 @@ function EmbedMeeting({ t, url }: Props) {
 
     return (
         <Dialog
-            customHeader = { Header }
             hideCancelButton = { true }
             submitDisabled = { true }
+            titleKey = { 'embedMeeting.title' }
             width = 'small'>
             <div className = 'embed-meeting-dialog'>
                 <textarea
diff --git a/react/features/embed-meeting/components/Header.js b/react/features/embed-meeting/components/Header.js
deleted file mode 100644
index 86d4db32d..000000000
--- a/react/features/embed-meeting/components/Header.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { translate } from '../../base/i18n';
-import { Icon, IconClose } from '../../base/icons';
-
-type Props = {
-
-    /**
-     * The {@link ModalDialog} closing function.
-     */
-    onClose: Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
-
-/**
- * Custom header of the {@code EmbedMeetingDialog}.
- *
- * @returns {React$Element<any>}
- */
-function Header({ onClose, t }: Props) {
-    return (
-        <div
-            className = 'embed-meeting-dialog-header'>
-            { t('embedMeeting.title') }
-            <Icon
-                onClick = { onClose }
-                src = { IconClose } />
-        </div>
-    );
-}
-
-export default translate(Header);
diff --git a/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js b/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
index f53c1860d..6a9a44329 100644
--- a/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
+++ b/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js
@@ -18,7 +18,6 @@ import { _getDefaultPhoneNumber, getInviteText, isAddPeopleEnabled, isDialOutEna
 
 import CopyMeetingLinkSection from './CopyMeetingLinkSection';
 import DialInSection from './DialInSection';
-import Header from './Header';
 import InviteByEmailSection from './InviteByEmailSection';
 import InviteContactsSection from './InviteContactsSection';
 import LiveStreamSection from './LiveStreamSection';
@@ -148,7 +147,6 @@ function AddPeopleDialog({
     return (
         <Dialog
             cancelKey = { 'dialog.close' }
-            customHeader = { Header }
             hideCancelButton = { true }
             submitDisabled = { true }
             titleKey = 'addPeople.inviteMorePrompt'
diff --git a/react/features/invite/components/add-people-dialog/web/Header.js b/react/features/invite/components/add-people-dialog/web/Header.js
deleted file mode 100644
index a52795f4e..000000000
--- a/react/features/invite/components/add-people-dialog/web/Header.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { translate } from '../../../../base/i18n';
-import { Icon, IconClose } from '../../../../base/icons';
-
-type Props = {
-
-    /**
-     * The {@link ModalDialog} closing function.
-     */
-    onClose: Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
-
-/**
- * Custom header of the {@code AddPeopleDialog}.
- *
- * @returns {React$Element<any>}
- */
-function Header({ onClose, t }: Props) {
-    return (
-        <div
-            className = 'invite-more-dialog header'>
-            { t('addPeople.inviteMorePrompt') }
-            <Icon
-                onClick = { onClose }
-                src = { IconClose } />
-        </div>
-    );
-}
-
-export default translate(Header);
diff --git a/react/features/security/components/security-dialog/Header.js b/react/features/security/components/security-dialog/Header.js
deleted file mode 100644
index d51b02230..000000000
--- a/react/features/security/components/security-dialog/Header.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { translate } from '../../../base/i18n';
-import { Icon, IconClose } from '../../../base/icons';
-
-type Props = {
-
-    /**
-     * The {@link ModalDialog} closing function.
-     */
-    onClose: Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
-
-/**
- * Custom header of the {@code SecurityDialog}.
- *
- * @returns {React$Element<any>}
- */
-function Header({ onClose, t }: Props) {
-    return (
-        <div
-            className = 'invite-more-dialog header'>
-            { t('security.securityOptions') }
-            <Icon
-                onClick = { onClose }
-                src = { IconClose } />
-        </div>
-    );
-}
-
-export default translate(Header);
diff --git a/react/features/security/components/security-dialog/SecurityDialog.js b/react/features/security/components/security-dialog/SecurityDialog.js
index 15e16d551..30943f6c7 100644
--- a/react/features/security/components/security-dialog/SecurityDialog.js
+++ b/react/features/security/components/security-dialog/SecurityDialog.js
@@ -10,7 +10,6 @@ import { connect } from '../../../base/redux';
 import { E2EESection } from '../../../e2ee/components';
 import { LobbySection } from '../../../lobby';
 
-import Header from './Header';
 import PasswordSection from './PasswordSection';
 
 type Props = {
@@ -82,7 +81,6 @@ function SecurityDialog({
 
     return (
         <Dialog
-            customHeader = { Header }
             hideCancelButton = { true }
             submitDisabled = { true }
             titleKey = 'security.securityOptions'