diff --git a/web/src/App.js b/web/src/App.js
index 90a15dfb..28ba3d1d 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -27,6 +27,7 @@ import ProviderListPage from "./ProviderListPage";
 import ProviderEditPage from "./ProviderEditPage";
 import ApplicationListPage from "./ApplicationListPage";
 import ApplicationEditPage from "./ApplicationEditPage";
+import Face from "./Face";
 
 const { Header, Footer } = Layout;
 
@@ -308,7 +309,19 @@ class App extends Component {
     )
   }
 
+  isDoorPages() {
+    return window.location.pathname.startsWith('/doors/');
+  }
+
   render() {
+    if (this.isDoorPages()) {
+      return (
+        <Switch>
+          <Route exact path="/doors/:applicationName" component={Face}/>
+        </Switch>
+      )
+    }
+
     return (
       <div id="parent-area">
         <BackTop />
diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index e6e8a0ec..febc95b5 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -135,6 +135,13 @@ class ApplicationEditPage extends React.Component {
             Face Preview:
           </Col>
           <Col span={22} >
+            <a style={{marginBottom: '10px'}} target="_blank" href={`/doors/${this.state.application.name}`}>
+              {
+                `${window.location.host}/doors/${this.state.application.name}`
+              }
+            </a>
+            <br/>
+            <br/>
             <div style={{width: "500px", height: "600px", border: "1px solid rgb(217,217,217)"}}>
               <Face application={this.state.application} />
             </div>
diff --git a/web/src/Face.js b/web/src/Face.js
index ad78b850..e036b8c6 100644
--- a/web/src/Face.js
+++ b/web/src/Face.js
@@ -1,15 +1,39 @@
 import React from "react";
 import {Button, Checkbox, Col, Form, Input, Row} from "antd";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
+import * as ApplicationBackend from "./backend/ApplicationBackend";
 
 class Face extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       classes: props,
+      applicationName: props.match === undefined ? null : props.match.params.applicationName,
+      application: null,
     };
   }
 
+  componentWillMount() {
+    this.getApplication();
+  }
+
+  getApplication() {
+    ApplicationBackend.getApplication("admin", this.state.applicationName)
+      .then((application) => {
+        this.setState({
+          application: application,
+        });
+      });
+  }
+
+  getApplicationObj() {
+    if (this.props.application !== undefined) {
+      return this.props.application;
+    } else {
+      return this.state.application;
+    }
+  }
+
   renderForm() {
     return (
       <Form
@@ -64,13 +88,15 @@ class Face extends React.Component {
   }
 
   render() {
+    const application = this.getApplicationObj();
+
     return (
       <Row>
         <Col span={24} style={{display: "flex", justifyContent:  "center"}} >
           <div style={{marginTop: "80px", textAlign: "center"}}>
-            <img src={this.props.application.logo} alt={this.props.application.displayName} style={{marginBottom: '50px'}}/>
+            <img src={application?.logo} alt={application?.displayName} style={{marginBottom: '50px'}}/>
             {
-              this.renderForm(this.props.application)
+              this.renderForm(application)
             }
           </div>
         </Col>