diff --git a/frontend/squeak-node-frontend/src/components/CreateSubscriptionDialog/CreateSubscriptionDialog.js b/frontend/squeak-node-frontend/src/components/CreateSubscriptionDialog/CreateSubscriptionDialog.js
index d18007f5..5fd01826 100644
--- a/frontend/squeak-node-frontend/src/components/CreateSubscriptionDialog/CreateSubscriptionDialog.js
+++ b/frontend/squeak-node-frontend/src/components/CreateSubscriptionDialog/CreateSubscriptionDialog.js
@@ -47,6 +47,7 @@ export default function CreateSubscriptionDialog({
 
   var [subscriptionName, setsubscriptionName] = useState('');
   var [host, setHost] = useState('');
+  var [port, setPort] = useState('');
 
   const handleChangeSubscriptionName = (event) => {
     setsubscriptionName(event.target.value);
@@ -56,14 +57,17 @@ export default function CreateSubscriptionDialog({
     setHost(event.target.value);
   };
 
+  const handleChangePort = (event) => {
+    setPort(event.target.value);
+  };
+
   const createSubscription = (subscriptionName, host, port) => {
     console.log("called createContactProfile");
 
     var createSubscriptionRequest = new CreateSubscriptionRequest()
     createSubscriptionRequest.setSubscriptionName(subscriptionName);
     createSubscriptionRequest.setHost(host);
-    // TODO: use real port here
-    // addServerRequest.setHost(0);
+    createSubscriptionRequest.setPort(port);
     console.log(createSubscriptionRequest);
 
     client.createSubscription(createSubscriptionRequest, {}, (err, response) => {
@@ -86,11 +90,16 @@ export default function CreateSubscriptionDialog({
     event.preventDefault();
     console.log( 'subscriptionName:', subscriptionName);
     console.log( 'host:', host);
+    console.log( 'port:', port);
     if (!host) {
       alert('Host cannot be empty.');
       return;
     }
-    createSubscription(subscriptionName, host);
+    if (!port) {
+      alert('Port cannot be empty.');
+      return;
+    }
+    createSubscription(subscriptionName, host, port);
     handleClose();
   }
 
@@ -99,7 +108,6 @@ export default function CreateSubscriptionDialog({
       <TextField
         id="standard-textarea"
         label="Subscription Name"
-        required
         autoFocus
         value={subscriptionName}
         onChange={handleChangeSubscriptionName}
@@ -122,6 +130,19 @@ export default function CreateSubscriptionDialog({
     )
   }
 
+  function CreatePortInput() {
+    return (
+      <TextField required
+          id="standard-textarea"
+          label="Port"
+          required
+          value={port}
+          onChange={handleChangePort}
+          inputProps={{ maxLength: 8 }}
+      />
+    )
+  }
+
   function CancelButton() {
     return (
       <Button
@@ -152,8 +173,15 @@ export default function CreateSubscriptionDialog({
   <DialogTitle id="form-dialog-title">Create Contact Profile</DialogTitle>
   <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
   <DialogContent>
-    {CreateSubscriptionNameInput()}
-    {CreateHostInput()}
+    <div>
+      {CreateSubscriptionNameInput()}
+    </div>
+    <div>
+      {CreateHostInput()}
+    </div>
+    <div>
+      {CreatePortInput()}
+    </div>
   </DialogContent>
   <DialogActions>
     {CancelButton()}
diff --git a/frontend/squeak-node-frontend/src/pages/subscriptions/Subscriptions.js b/frontend/squeak-node-frontend/src/pages/subscriptions/Subscriptions.js
index c6c25794..80248d1d 100644
--- a/frontend/squeak-node-frontend/src/pages/subscriptions/Subscriptions.js
+++ b/frontend/squeak-node-frontend/src/pages/subscriptions/Subscriptions.js
@@ -108,9 +108,10 @@ export default function Subscriptions() {
               [
                 s.getSubscriptionName(),
                 s.getHost(),
+                s.getPort(),
               ]
             )}
-           columns={["Name", "Host"]}
+           columns={["Name", "Host", "Port"]}
            options={{
              filter: false,
              print: false,