diff --git a/synapse_topology/view/webui/js/actions/index.js b/synapse_topology/view/webui/js/actions/index.js
index 83d2133b69..cc7fc414a4 100644
--- a/synapse_topology/view/webui/js/actions/index.js
+++ b/synapse_topology/view/webui/js/actions/index.js
@@ -9,6 +9,7 @@ import {
   GETTING_SECRET_KEY,
   SET_DELEGATION,
   SET_DELEGATION_SERVERNAME,
+  SET_DELEGATION_PORT,
   SET_REVERSE_PROXY,
   SET_TLS,
   TESTING_TLS_CERT_PATHS,
@@ -160,6 +161,11 @@ export const set_delegation_servername = servername => ({
   servername,
 });
 
+export const set_delegation_port = port => ({
+  type: SET_DELEGATION_PORT,
+  port,
+});
+
 export const set_reverse_proxy = proxy_type => ({
   type: SET_REVERSE_PROXY,
   proxy_type,
diff --git a/synapse_topology/view/webui/js/actions/types.js b/synapse_topology/view/webui/js/actions/types.js
index 271a9395d0..3251d7ae9d 100644
--- a/synapse_topology/view/webui/js/actions/types.js
+++ b/synapse_topology/view/webui/js/actions/types.js
@@ -8,6 +8,7 @@ export const SET_SECRET_KEY = 'SET_SECRET_KEY';
 export const GETTING_SECRET_KEY = 'GETTING_SECRET_KEY';
 export const SET_DELEGATION = 'SET_DELEGATION';
 export const SET_DELEGATION_SERVERNAME = 'SET_DELEGATION_SERVERNAME';
+export const SET_DELEGATION_PORT = 'SET_DELEGATION_PORT';
 export const SET_REVERSE_PROXY = 'SET_REVERSE_PROXY';
 export const TESTING_TLS_CERT_PATHS = 'TESTING_TLS_CERT_PATHS';
 export const UPLOADING_TLS_CERT_PATHS = 'UPLOADING_TLS_CERT_PATHS';
diff --git a/synapse_topology/view/webui/js/components/DelegationPortSelection.jsx b/synapse_topology/view/webui/js/components/DelegationPortSelection.jsx
new file mode 100644
index 0000000000..d5a18589f8
--- /dev/null
+++ b/synapse_topology/view/webui/js/components/DelegationPortSelection.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import ContentWrapper from './ContentWrapper';
+
+export default ({ onClick }) => {
+  const [delegationPort, setDelegationPort] = useState("");
+  const [validInput, setValidInput] = useState(true);
+
+  const onChange = event => {
+    const val = event.target.value;
+    setValidInput(!isNaN(event.target.value) && 0 < val && val < 65535);
+    setDelegationPort(val);
+  }
+
+  return <ContentWrapper>
+    <h1>Outward facing port selection</h1>
+    <p>
+      Normally other servers will try to contact the Synapse install's server on
+      port 8448 and clients, such as riot, riotX, neo etc., will try to contact
+      the install server on port 443.
+    </p>
+    <p>
+      Delegation let's us tell those servers and clients to try a different port!
+      (Flexible!)
+      However, we can only specify one port. That one port will be used for both
+      the servers and the clients.
+    </p>
+    <p>
+      It's perfectly fine to leave the defaults. Only change them if you have a
+      real need to.
+    </p>
+    <p>
+      I would recommend an unprivileged port but I would recommend the default ports
+      more strongly.
+    </p>
+    <input
+      type="text"
+      onChange={onChange}
+      autoFocus
+      placeholder="Use Defaults"
+    ></input>
+    <div>
+      <button
+        disabled={!delegationPort || validInput ? undefined : true}
+        onClick={() => onClick(delegationPort)}
+      >Use {delegationPort ? delegationPort : "default ports"}</button>
+    </div>
+  </ContentWrapper>
+}
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/components/UI.jsx b/synapse_topology/view/webui/js/components/UI.jsx
index 22a2c7a6b1..4836d163b6 100644
--- a/synapse_topology/view/webui/js/components/UI.jsx
+++ b/synapse_topology/view/webui/js/components/UI.jsx
@@ -19,6 +19,7 @@ import {
   ERROR_UI,
   DELEGATION_SERVER_NAME_UI,
   TLS_CERTPATH_UI,
+  DELEGATION_PORT_SELECTION_UI,
 } from '../reducers/ui_constants';
 
 import Error from '../components/Error';
@@ -33,6 +34,7 @@ import DelegationServerName from '../containers/DelegationServerName';
 import ReverseProxy from '../containers/ReverseProxy';
 import TLS from '../containers/TLS';
 import TLSCertPath from '../containers/TLSCertPath';
+import DelegationPortSelection from '../containers/DelegationPortSelection';
 
 export default ({ active_ui, dispatch }) => {
   console.log(`switching to ui ${active_ui}`)
@@ -53,6 +55,8 @@ export default ({ active_ui, dispatch }) => {
       return <DelegationOptions />
     case DELEGATION_SERVER_NAME_UI:
       return <DelegationServerName />
+    case DELEGATION_PORT_SELECTION_UI:
+      return <DelegationPortSelection />
     case REVERSE_PROXY_UI:
       return <ReverseProxy />
     case TLS_UI:
diff --git a/synapse_topology/view/webui/js/containers/DelegationPortSelection.js b/synapse_topology/view/webui/js/containers/DelegationPortSelection.js
new file mode 100644
index 0000000000..24de6cc6b4
--- /dev/null
+++ b/synapse_topology/view/webui/js/containers/DelegationPortSelection.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+
+import DelegationPortSelection from '../components/DelegationPortSelection';
+
+import { advance_ui, set_delegation_port } from '../actions';
+
+const mapStateToProps = (state, ownProps) => ({
+
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClick: port => {
+    dispatch(advance_ui());
+    dispatch(set_delegation_port(port));
+  }
+});
+
+export default connect(
+  null,
+  mapDispathToProps
+)(DelegationPortSelection);
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js b/synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js
index 606e5ad75a..fce8da2018 100644
--- a/synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js
+++ b/synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js
@@ -16,6 +16,7 @@ import {
   REVERSE_PROXY_TEMPLATE_UI,
   LOADING_UI,
   TLS_CERTPATH_UI,
+  DELEGATION_PORT_SELECTION_UI,
 } from './ui_constants';
 
 import {
@@ -49,6 +50,8 @@ export default (state, action) => {
               return DELEGATION_OPTIONS_UI;
           }
         case DELEGATION_SERVER_NAME_UI:
+          return DELEGATION_PORT_SELECTION_UI;
+        case DELEGATION_PORT_SELECTION_UI:
           return TLS_UI;
         case TLS_UI:
           switch (action.option) {
diff --git a/synapse_topology/view/webui/js/reducers/reducer-base-config.js b/synapse_topology/view/webui/js/reducers/reducer-base-config.js
index a01458df49..12a1825884 100644
--- a/synapse_topology/view/webui/js/reducers/reducer-base-config.js
+++ b/synapse_topology/view/webui/js/reducers/reducer-base-config.js
@@ -47,6 +47,11 @@ export default (state = { servername: undefined }, action) => {
         ...state,
         delegation_servername: action.delegation_servername,
       }
+    case SET_DELEGATION_SERVERNAME:
+      return {
+        ...state,
+        delegation_port: action.port,
+      }
     case SET_REVERSE_PROXY:
       return {
         ...state,
diff --git a/synapse_topology/view/webui/js/reducers/state.js b/synapse_topology/view/webui/js/reducers/state.js
index e4d1af1d51..1337048a6a 100644
--- a/synapse_topology/view/webui/js/reducers/state.js
+++ b/synapse_topology/view/webui/js/reducers/state.js
@@ -10,6 +10,7 @@ const state = {
     secret_key: "asdfsadf",
     delegation_type: "local|well_known|DNS_SRV",
     delegation_server_name: "name",
+    delegation_port: "udefined|325",
     reverse_proxy: "nginx|caddy|apache|haproxy|other|none",
     tls: "acme|tls|none|reverseproxy",
     testing_cert_paths: true,
diff --git a/synapse_topology/view/webui/js/reducers/ui_constants.js b/synapse_topology/view/webui/js/reducers/ui_constants.js
index b3b35a37eb..5cf4d87b98 100644
--- a/synapse_topology/view/webui/js/reducers/ui_constants.js
+++ b/synapse_topology/view/webui/js/reducers/ui_constants.js
@@ -5,6 +5,7 @@ export const STATS_REPORT_UI = "stats_report_ui";
 export const KEY_EXPORT_UI = "key_export_ui";
 export const DELEGATION_OPTIONS_UI = "delegation_options_ui";
 export const DELEGATION_SERVER_NAME_UI = "delegation_server_name_ui";
+export const DELEGATION_PORT_SELECTION_UI = "delegation_port_selection_ui";
 export const WELL_KNOWN_UI = "well_known_ui";
 export const DNS_UI = "dns_ui";
 export const WORKER_UI = "worker_ui";