diff --git a/frontend/api/bbgo.js b/frontend/api/bbgo.js
index 3feae9f61..79af07600 100644
--- a/frontend/api/bbgo.js
+++ b/frontend/api/bbgo.js
@@ -8,6 +8,12 @@ export function ping(cb) {
     });
 }
 
+export function queryOutboundIP(cb) {
+    return axios.get(baseURL + '/api/outbound-ip').then(response => {
+        cb(response.data.outboundIP)
+    });
+}
+
 export function querySyncStatus(cb) {
     return axios.get(baseURL + '/api/environment/syncing').then(response => {
         cb(response.data.syncing)
@@ -71,7 +77,7 @@ export function querySessions(cb) {
 }
 
 export function querySessionSymbols(sessionName, cb) {
-    return axios.get(baseURL + `/api/sessions/${ sessionName }/symbols`, {})
+    return axios.get(baseURL + `/api/sessions/${sessionName}/symbols`, {})
         .then(response => {
             cb(response.data.symbols || [])
         });
diff --git a/frontend/pages/connect/index.js b/frontend/pages/connect/index.js
index fec46ee44..2fb993869 100644
--- a/frontend/pages/connect/index.js
+++ b/frontend/pages/connect/index.js
@@ -5,6 +5,7 @@ import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import PlainLayout from '../../layouts/PlainLayout';
 import {QRCodeSVG} from 'qrcode.react';
+import {queryOutboundIP} from '../../api/bbgo';
 
 const useStyles = makeStyles((theme) => ({
     paper: {
@@ -21,7 +22,9 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function fetchConnectUrl(cb) {
-    cb(window.location.protocol + "//" + window.location.host)
+    return queryOutboundIP((outboundIP) => {
+        cb(window.location.protocol + "//" + outboundIP + ":" + window.location.port)
+    })
 }
 
 export default function Connect() {