diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss
index 90e112d378..566f4e8a0d 100644
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@@ -14,22 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_HostSignupDialog .mx_Dialog {
-    height: 66%;
-    min-width: 50%;
-}
-
 .mx_HostSignupBaseDialog {
-    height: 100%;
-}
+    max-height: 600px;
+    width: 580px;
 
-.mx_HostSignupDialog_container {
-    height: 90%;
+    .mx_HostSignupDialog_container {
+        height: 90%;
 
-    iframe {
-        width: 100%;
-        height: 100%;
-        border: none;
-        background-color: #fff;
+        .mx_HostSignupDialog_info {
+            text-align: center;
+
+            .mx_HostSignupDialog_content {
+                margin-top: 64px;
+                margin-bottom: 45px;
+            }
+        }
+
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            background-color: #fff;
+        }
     }
 }
diff --git a/res/img/host_signup.png b/res/img/host_signup.png
new file mode 100644
index 0000000000..88fb06111d
Binary files /dev/null and b/res/img/host_signup.png differ
diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx
index 34f31e0176..cecd603904 100644
--- a/src/components/views/dialogs/HostSignupDialog.tsx
+++ b/src/components/views/dialogs/HostSignupDialog.tsx
@@ -31,6 +31,7 @@ interface IProps {
 interface IState {
     completed: boolean;
     error: string;
+    loadIframe: boolean;
 }
 
 export default class HostSignupDialog extends React.PureComponent<IProps, IState> {
@@ -43,33 +44,19 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         this.state = {
             completed: false,
             error: null,
+            loadIframe: false,
         };
 
         this.hostSignupSetupUrl = SdkConfig.get().host_signup.url;
     }
 
-    private messageHandler = (message: IPostmessage) => {
+    private messageHandler = async (message: IPostmessage) => {
         if (!this.hostSignupSetupUrl.startsWith(message.origin)) {
             return;
         }
         switch (message.data.action) {
             case PostmessageAction.HostSignupAccountDetailsRequest:
-                Modal.createDialog(
-                    QuestionDialog,
-                    {
-                        title: _t("Confirm Account Data Transfer"),
-                        description: _t(
-                            "Please accept transfer of data to the host signup wizard to continue. " +
-                            "The setup wizard will be able to access your account for the duration of the " +
-                            "setup process."),
-                        button: _t("Accept"),
-                        onFinished: result => {
-                            if (result) {
-                                return this.sendAccountDetails();
-                            }
-                        },
-                    },
-                );
+                await this.sendAccountDetails();
                 break;
             case PostmessageAction.SetupComplete:
                 // Set as completed but let the user close the modal themselves
@@ -132,8 +119,11 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         });
     }
 
-    public componentDidMount() {
+    private loadIframe = () => {
         window.addEventListener("message", this.messageHandler);
+        this.setState({
+            loadIframe: true,
+        });
     }
 
     public componentWillUnmount() {
@@ -145,16 +135,39 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
             <BaseDialog
                 className="mx_HostSignupBaseDialog"
                 onFinished={this.onFinished}
-                title={_t("Set up your own personal Element host")}
+                title=""
                 hasCancel={true}
-                fixedWidth={false}
             >
                 <div className="mx_HostSignupDialog_container">
-                    <iframe
-                        src={this.hostSignupSetupUrl}
-                        ref={this.iframeRef}
-                        sandbox="allow-forms allow-scripts allow-same-origin"
-                    />
+                    {this.state.loadIframe &&
+                        <iframe
+                            src={this.hostSignupSetupUrl}
+                            ref={this.iframeRef}
+                            sandbox="allow-forms allow-scripts allow-same-origin"
+                        />
+                    }
+                    {!this.state.loadIframe &&
+                        <div className="mx_HostSignupDialog_info">
+                            <img
+                                alt="image of planet"
+                                src={require("../../../../res/img/host_signup.png")}
+                            />
+                            <div className="mx_HostSignupDialog_content">
+                                <h1>Unlock the power of Element</h1>
+                                <p>
+                                    Congratulations! You taken your first steps into unlocking the full power of&nbsp;
+                                    the Element app. In a few minutes, you'll be able to see how powerful our&nbsp;
+                                    Matrix services are and take control of your conversation data.
+                                </p>
+                            </div>
+                            <div>
+                                <button onClick={this.props.requestClose}>Maybe later</button>
+                                <button onClick={this.loadIframe} className="mx_Dialog_primary">
+                                    Lets get started
+                                </button>
+                            </div>
+                        </div>
+                    }
                     {this.state.error &&
                         <div>
                             {this.state.error}