diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 66460f46db..047594ea2e 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -441,7 +441,7 @@
   "leave-room-dialog.join-room.message": "Joining a new room will leave this one. Are you sure?",
   "leave-room-dialog.join-room.confirm": "Join Room",
   "leave-room-dialog.create-room.message": "Creating a new room will leave this one. Are you sure?",
-  "leave-room-dialog.create-room.confirm": "Leave Room",
+  "leave-room-dialog.create-room.confirm": "Leave and Create Room",
   "embed.load-button": "Load Room",
   "embed.presence-warning": "This room is embedded, so may be visible to visitors on other websites.",
   "tweet-dialog.tweet": "Tweet",
diff --git a/src/assets/locales/jp.json b/src/assets/locales/jp.json
index e0bfaa3be4..f4dbae5c6b 100644
--- a/src/assets/locales/jp.json
+++ b/src/assets/locales/jp.json
@@ -438,7 +438,7 @@
   "leave-room-dialog.join-room.message": "新しい部屋に参加すると,この部屋から退室します。よろしいですか？",
   "leave-room-dialog.join-room.confirm": "Join Room",
   "leave-room-dialog.create-room.message": "新しい部屋を作成し、この部屋が残ります。よろしいですか？",
-  "leave-room-dialog.create-room.confirm": "Leave Room",
+  "leave-room-dialog.create-room.confirm": "Leave and Create Room",
   "embed.load-button": "ロードルーム",
   "embed.presence-warning": "この部屋は埋め込まれているため,他のWebサイトの訪問者に表示される可能性があります。",
   "tweet-dialog.tweet": "Tweet",
diff --git a/src/assets/stylesheets/leave-room-dialog.scss b/src/assets/stylesheets/leave-room-dialog.scss
deleted file mode 100644
index 12bbef8f22..0000000000
--- a/src/assets/stylesheets/leave-room-dialog.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import 'shared';
-
-:local(.leave-room) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  a {
-    @extend %action-button;
-    margin-top: 24px;
-  }
-}
-
-
diff --git a/src/react-components/leave-room-dialog.js b/src/react-components/leave-room-dialog.js
deleted file mode 100644
index 41e6555517..0000000000
--- a/src/react-components/leave-room-dialog.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { Component } from "react";
-import DialogContainer from "./dialog-container.js";
-import styles from "../assets/stylesheets/leave-room-dialog.scss";
-import { FormattedMessage } from "react-intl";
-import PropTypes from "prop-types";
-
-export default class LeaveRoomDialog extends Component {
-  static propTypes = {
-    messageType: PropTypes.string,
-    destinationUrl: PropTypes.string
-  };
-
-  render() {
-    return (
-      <DialogContainer title="Leave Room" {...this.props}>
-        <div className={styles.leaveRoom}>
-          <div>
-            <FormattedMessage id={`leave-room-dialog.${this.props.messageType}.message`} />
-          </div>
-          <a href={this.props.destinationUrl} rel="noopener noreferrer">
-            <FormattedMessage id={`leave-room-dialog.${this.props.messageType}.confirm`} />
-          </a>
-        </div>
-      </DialogContainer>
-    );
-  }
-}
diff --git a/src/react-components/room/LeaveRoomModal.js b/src/react-components/room/LeaveRoomModal.js
new file mode 100644
index 0000000000..2a050c22e9
--- /dev/null
+++ b/src/react-components/room/LeaveRoomModal.js
@@ -0,0 +1,53 @@
+import React from "react";
+import styles from "./LeaveRoomModal.scss";
+import { useIntl, defineMessages } from "react-intl";
+import PropTypes from "prop-types";
+import { Modal } from "../modal/Modal";
+import { CloseButton } from "../input/CloseButton";
+import { Button } from "../input/Button";
+
+export const LeaveReason = {
+  joinRoom: "joinRoom",
+  createRoom: "createRoom"
+};
+
+const reasonMessages = defineMessages({
+  [LeaveReason.joinRoom]: {
+    id: "leave-room-dialog.join-room.message",
+    defaultMessage: "Joining a new room will leave this one. Are you sure?"
+  },
+  [LeaveReason.createRoom]: {
+    id: "leave-room-dialog.create-room.message",
+    defaultMessage: "Creating a new room will leave this one. Are you sure?"
+  }
+});
+
+const confirmationMessages = defineMessages({
+  [LeaveReason.joinRoom]: {
+    id: "leave-room-dialog.join-room.confirm",
+    defaultMessage: "Join Room"
+  },
+  [LeaveReason.createRoom]: {
+    id: "leave-room-dialog.create-room.confirm",
+    defaultMessage: "Leave and Create Room"
+  }
+});
+
+export function LeaveRoomModal({ reason, destinationUrl, onClose }) {
+  const intl = useIntl();
+
+  return (
+    <Modal title="Leave Room" beforeTitle={<CloseButton onClick={onClose} />} contentClassName={styles.leaveRoomModal}>
+      <p>{intl.formatMessage(reasonMessages[reason])}</p>
+      <Button as="a" preset="cancel" href={destinationUrl} rel="noopener noreferrer">
+        {intl.formatMessage(confirmationMessages[reason])}
+      </Button>
+    </Modal>
+  );
+}
+
+LeaveRoomModal.propTypes = {
+  reason: PropTypes.string,
+  destinationUrl: PropTypes.string,
+  onClose: PropTypes.func
+};
diff --git a/src/react-components/room/LeaveRoomModal.scss b/src/react-components/room/LeaveRoomModal.scss
new file mode 100644
index 0000000000..3d3a21c146
--- /dev/null
+++ b/src/react-components/room/LeaveRoomModal.scss
@@ -0,0 +1,17 @@
+:local(.leave-room-modal) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 20px;
+  line-height: 1.25;
+
+  & > * {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/react-components/room/LeaveRoomModal.stories.js b/src/react-components/room/LeaveRoomModal.stories.js
new file mode 100644
index 0000000000..7a5fc46220
--- /dev/null
+++ b/src/react-components/room/LeaveRoomModal.stories.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { RoomLayout } from "../layout/RoomLayout";
+import { LeaveReason, LeaveRoomModal } from "./LeaveRoomModal";
+
+export default {
+  title: "LeaveRoomModal",
+  parameters: {
+    layout: "fullscreen"
+  },
+  args: {
+    destinationUrl: "#"
+  }
+};
+
+export const LeaveRoom = args => <RoomLayout modal={<LeaveRoomModal reason={LeaveReason.joinRoom} {...args} />} />;
+
+export const CreateRoom = args => <RoomLayout modal={<LeaveRoomModal reason={LeaveReason.createRoom} {...args} />} />;
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 5611f08019..81aa77f00d 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -35,7 +35,6 @@ import Tip from "./tip.js";
 import WebRTCScreenshareUnsupportedDialog from "./webrtc-screenshare-unsupported-dialog.js";
 import WebVRRecommendDialog from "./webvr-recommend-dialog.js";
 import FeedbackDialog from "./feedback-dialog.js";
-import LeaveRoomDialog from "./leave-room-dialog.js";
 import ClientInfoDialog from "./client-info-dialog.js";
 import OAuthDialog from "./oauth-dialog.js";
 import TweetDialog from "./tweet-dialog.js";
@@ -95,6 +94,7 @@ import { ReactionPopoverContainer } from "./room/ReactionPopoverContainer";
 import { SafariMicModal } from "./room/SafariMicModal";
 import { RoomSignInModalContainer } from "./auth/RoomSignInModalContainer";
 import { SignInStep } from "./auth/SignInModal";
+import { LeaveReason, LeaveRoomModal } from "./room/LeaveRoomModal";
 import { RoomSidebar } from "./room/RoomSidebar";
 import { RoomSettingsSidebarContainer } from "./room/RoomSettingsSidebarContainer";
 import { AutoExitWarningModal, AutoExitReason } from "./room/AutoExitWarningModal";
@@ -1302,9 +1302,9 @@ class UIRoot extends Component {
             label: "Create Room",
             icon: HomeIcon,
             onClick: () =>
-              this.showNonHistoriedDialog(LeaveRoomDialog, {
+              this.showNonHistoriedDialog(LeaveRoomModal, {
                 destinationUrl: "/",
-                messageType: "create-room"
+                reacon: LeaveReason.createRoom
               })
           },
           {
@@ -1484,9 +1484,9 @@ class UIRoot extends Component {
                 hubChannel={this.props.hubChannel}
                 onMediaSearchResultEntrySelected={(entry, selectAction) => {
                   if (entry.type === "room") {
-                    this.showNonHistoriedDialog(LeaveRoomDialog, {
+                    this.showNonHistoriedDialog(LeaveRoomModal, {
                       destinationUrl: entry.url,
-                      messageType: "join-room"
+                      reason: LeaveReason.joinRoom
                     });
                   } else {
                     this.props.onMediaSearchResultEntrySelected(entry, selectAction);