From aef8e46ea4bee2248af23767d2edfa6dbeda7730 Mon Sep 17 00:00:00 2001
From: Irtiza-h30 <ihasa074@uottawa.ca>
Date: Mon, 10 Aug 2020 13:49:32 -0400
Subject: [PATCH] initial commit

---
 package-lock.json                             | 367 ++++++++++++------
 package.json                                  |   2 +-
 src/containers/AddProfile/index.js            |  16 +-
 src/containers/Profile/index.js               |   4 +-
 src/containers/Profile/index.module.scss      |   3 +
 .../components/BonjourGateway/index.js        | 270 +++++++++++++
 .../components/index.module.scss              |  21 +
 src/containers/ProfileDetails/index.js        |   9 +
 src/utils/profiles.js                         |  10 +
 9 files changed, 578 insertions(+), 124 deletions(-)
 create mode 100644 src/containers/ProfileDetails/components/BonjourGateway/index.js

diff --git a/package-lock.json b/package-lock.json
index f77f6d4..55003dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@tip-wlan/wlan-cloud-ui-library",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -14,9 +14,9 @@
       }
     },
     "@ant-design/css-animation": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.2.tgz",
-      "integrity": "sha512-bvVOe7A+r7lws58B7r+fgnQDK90cV45AXuvGx6i5CCSX1W/M3AJnHsNggDANBxEtWdNdFWcDd5LorB+RdSIlBw==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.3.tgz",
+      "integrity": "sha512-LrX0OGZtW+W6iLnTAqnTaoIsRelYeuLZWsrmBJFUXDALQphPsN8cE5DCsmoSlL0QYb94BQxINiuS70Ar/8BNgA==",
       "dev": true
     },
     "@ant-design/icons": {
@@ -40,15 +40,27 @@
       "dev": true
     },
     "@ant-design/react-slick": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-0.26.1.tgz",
-      "integrity": "sha512-1CR3vNFxAMmMb9btF6w9yT1xlrhZr6f/K+OkqoCLfWxN7h7jC16UCr1RsGBoFUdSq8bYfTr3pe6AiiCEDsALvA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-0.27.0.tgz",
+      "integrity": "sha512-dq/p/1oKgew99cNrhT6/BA4v7c7nAhPlS6IcVGVTMsp175bYxbHBT1GfY5vxZyz97YaTnzJ8s2Wql4AOnFQ+9g==",
       "dev": true,
       "requires": {
+        "@babel/runtime": "^7.10.4",
         "classnames": "^2.2.5",
         "json2mq": "^0.2.0",
         "lodash": "^4.17.15",
         "resize-observer-polyfill": "^1.5.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
       }
     },
     "@babel/code-frame": {
@@ -2373,52 +2385,65 @@
       }
     },
     "antd": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-4.3.3.tgz",
-      "integrity": "sha512-psDb3krf0nK0gkZSfxOGfJdqKbi0hzQJif7R2Cg3T6OV1nrNfc6waL4Th8mV72qq/+Ushuk0afRDaARkx9EzEg==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.5.2.tgz",
+      "integrity": "sha512-XDI4ywKpj2LfvvQjHxkdItzLH0zlVvm3wKHyko03BoSzYVinZ9MWap3PXraclb8xBKH8d/14BRJSGmIsvxzkfg==",
       "dev": true,
       "requires": {
         "@ant-design/css-animation": "^1.7.2",
         "@ant-design/icons": "^4.2.1",
-        "@ant-design/react-slick": "~0.26.1",
+        "@ant-design/react-slick": "~0.27.0",
+        "@babel/runtime": "^7.10.4",
         "array-tree-filter": "^2.1.0",
         "classnames": "^2.2.6",
         "copy-to-clipboard": "^3.2.0",
         "lodash": "^4.17.13",
         "moment": "^2.25.3",
-        "omit.js": "^1.0.2",
+        "omit.js": "^2.0.2",
         "raf": "^3.4.1",
         "rc-animate": "~3.1.0",
-        "rc-cascader": "~1.2.0",
-        "rc-checkbox": "~2.2.0",
+        "rc-cascader": "~1.3.0",
+        "rc-checkbox": "~2.3.0",
         "rc-collapse": "~2.0.0",
-        "rc-dialog": "~8.0.0",
-        "rc-drawer": "~4.0.0",
+        "rc-dialog": "~8.1.0",
+        "rc-drawer": "~4.1.0",
         "rc-dropdown": "~3.1.2",
-        "rc-field-form": "~1.4.1",
-        "rc-input-number": "~5.0.0",
-        "rc-mentions": "~1.2.0",
-        "rc-menu": "~8.3.0",
+        "rc-field-form": "~1.8.0",
+        "rc-input-number": "~6.0.0",
+        "rc-mentions": "~1.4.0",
+        "rc-menu": "~8.5.0",
         "rc-notification": "~4.4.0",
-        "rc-pagination": "~2.2.5",
-        "rc-picker": "~1.6.1",
+        "rc-pagination": "~2.4.1",
+        "rc-picker": "~1.15.1",
         "rc-progress": "~3.0.0",
-        "rc-rate": "~2.7.0",
+        "rc-rate": "~2.8.2",
         "rc-resize-observer": "^0.2.3",
-        "rc-select": "~11.0.0",
+        "rc-select": "~11.0.10",
         "rc-slider": "~9.3.0",
-        "rc-steps": "~4.0.0",
+        "rc-steps": "~4.1.0",
         "rc-switch": "~3.2.0",
-        "rc-table": "~7.7.2",
-        "rc-tabs": "~11.3.1",
+        "rc-table": "~7.8.0",
+        "rc-tabs": "~11.5.0",
+        "rc-textarea": "~0.3.0",
         "rc-tooltip": "~4.2.0",
-        "rc-tree": "~3.3.0",
-        "rc-tree-select": "~4.0.0",
+        "rc-tree": "~3.8.0",
+        "rc-tree-select": "~4.1.0",
         "rc-trigger": "~4.3.0",
-        "rc-upload": "~3.1.0",
+        "rc-upload": "~3.2.0",
         "rc-util": "^5.0.1",
         "scroll-into-view-if-needed": "^2.2.25",
         "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
       }
     },
     "anymatch": {
@@ -4383,6 +4408,18 @@
         "whatwg-url": "^7.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.15.0.tgz",
+      "integrity": "sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ==",
+      "dev": true
+    },
+    "dayjs": {
+      "version": "1.8.32",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.32.tgz",
+      "integrity": "sha512-V91aTRu5btP+uzGHaaOfodckEfBWhmi9foRP7cauAO1PTB8+tZ9o0Jec7q6TIIRY1N4q1IfiKsZunkB/AEWqMQ==",
+      "dev": true
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -10052,9 +10089,9 @@
       }
     },
     "mini-store": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-3.0.5.tgz",
-      "integrity": "sha512-A7f0+d7TEvjJNY2K+splh2OG3AhmoPoiF3VntlAcJuBzryMumOF9LAVzg8mRJPPbCkz7mlWQg9MCMQPR2auftA==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-3.0.6.tgz",
+      "integrity": "sha512-YzffKHbYsMQGUWQRKdsearR79QsMzzJcDDmZKlJBqt5JNkqpyJHYlK6gP61O36X+sLf76sO9G6mhKBe83gIZIQ==",
       "dev": true,
       "requires": {
         "hoist-non-react-statics": "^3.3.2",
@@ -10137,9 +10174,9 @@
       }
     },
     "moment": {
-      "version": "2.26.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
-      "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==",
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==",
       "dev": true
     },
     "move-concurrently": {
@@ -10665,13 +10702,10 @@
       "dev": true
     },
     "omit.js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/omit.js/-/omit.js-1.0.2.tgz",
-      "integrity": "sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.23.0"
-      }
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/omit.js/-/omit.js-2.0.2.tgz",
+      "integrity": "sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==",
+      "dev": true
     },
     "on-finished": {
       "version": "2.3.0",
@@ -11692,9 +11726,9 @@
       }
     },
     "rc-align": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.0.tgz",
-      "integrity": "sha512-0mKKfiZGo7VNiRCmnI4MTOG72pBFF0H08zebqcJyXcAm2hgAqTUtvt4I0pjMHh1WdYg+iQDjowpB5X8mZTN2vw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.1.tgz",
+      "integrity": "sha512-RQ5Fhxl0LW+zsxbY8dxAcpXdaHkHH2jzRSSpvBTS7G9LMK3T+WRcn4ovjg/eqAESM6TdTx0hfqWF2S1pO75jxQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -11717,9 +11751,9 @@
       }
     },
     "rc-cascader": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-1.2.0.tgz",
-      "integrity": "sha512-exJ6qvaZddARXOjxYQzD0oYrOhNS/WC3E0+xUtAA6yP3RA6PRtzTBWCI4Il4y58X3C+wTjkQq5q1vKxHD76QOA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-1.3.0.tgz",
+      "integrity": "sha512-wayuMo/dSZixvdpiRFZB4Q6A3omKRXQcJ3CxN02+PNiTEcRnK2KDqKUzrx7GwgMsyH5tz90lUZ91lLaEPNFv0A==",
       "dev": true,
       "requires": {
         "array-tree-filter": "^2.1.0",
@@ -11729,13 +11763,13 @@
       }
     },
     "rc-checkbox": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.2.0.tgz",
-      "integrity": "sha512-Wjh/nutLA8iIPTT1P9I9KOqlUblVe+CWa3SxMibFySnLyYbMxKNtPhwNcbADPOqzNU0AsCntTduNeJg1n0B5fg==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.3.1.tgz",
+      "integrity": "sha512-i290/iTqmZ0WtI2UPIryqT9rW6O99+an4KeZIyZDH3r+Jbb6YdddaWNdzq7g5m9zaNhJvgjf//wJtC4fvve2Tg==",
       "dev": true,
       "requires": {
-        "babel-runtime": "^6.23.0",
-        "classnames": "2.x"
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1"
       }
     },
     "rc-collapse": {
@@ -11752,20 +11786,19 @@
       }
     },
     "rc-dialog": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-8.0.1.tgz",
-      "integrity": "sha512-ZOO2F8KHN4Dkpf1KiXNPKFWaLZutIuAhQw+YCafcFrigDv50AxGivoMSC//k4yjcJr3XRQTQMlMsmdAff4dEhw==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-8.1.0.tgz",
+      "integrity": "sha512-vMVAtyxpnokh/okFcDQVLO6ymIXfoTKYKtqJ/hMtf+0WcvRn4VgVDBvGyEk5zd94k0RgwEze9o2kGw8SyjivZg==",
       "dev": true,
       "requires": {
-        "babel-runtime": "6.x",
         "rc-animate": "3.x",
         "rc-util": "^5.0.1"
       }
     },
     "rc-drawer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-4.0.1.tgz",
-      "integrity": "sha512-sQCMV7W5hBjptdHXXKC+YOvZ6sNChDN9Nudd9dA5kJ2ld83yLa54IkEYs4FIb3Ana7yl4kkrgU0B1k2baSsnzw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-4.1.0.tgz",
+      "integrity": "sha512-kjeQFngPjdzAFahNIV0EvEBoIKMOnvUsAxpkSPELoD/1DuR4nLafom5ryma+TIxGwkFJ92W6yjsMi1U9aiOTeQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -11785,9 +11818,9 @@
       }
     },
     "rc-field-form": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.4.4.tgz",
-      "integrity": "sha512-1LwZ/I3fRUDzj2JGyfwur4nZqgwybrHy3kf6aKbGeWfYkpNbZaUNkIPfjBBmCdpN6lVPKI7ftRnYtjdBaXzyaw==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.8.0.tgz",
+      "integrity": "sha512-WQyC3yBEKIWehNzkRMTBK/Lzdjronov9GsB9C9bgVcfpDqsIQSSBgGFAJMmWUAGs2IrCbgh9RBY0Ste4foHzvg==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.8.4",
@@ -11796,42 +11829,94 @@
       }
     },
     "rc-input-number": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-5.0.1.tgz",
-      "integrity": "sha512-4GgnJCjllAVNsZ9fPA+3LnoIgwUqM8QAWpyoKiTkPDN1UWapXYsPiKJCXOhnmiR0X8xpEoYHiobUaiquMliWiQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-6.0.0.tgz",
+      "integrity": "sha512-vbe+g7HvR/joknSnvLkBTi9N9I+LsV4kljfuog8WNiS7OAF3aEN0QcHSOQ4+xk6+Hx9P1tU63z2+TyEx8W/j2Q==",
       "dev": true,
       "requires": {
-        "classnames": "^2.2.0",
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
         "rc-util": "^5.0.1"
       }
     },
     "rc-mentions": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.2.0.tgz",
-      "integrity": "sha512-9d4AYMuKN4o/ND5r/82rJHMp+R+rn1b+f8ZmWsI/1NlWtMqVn9Q7yxofqbX78zgV6+nppsMvMqtduJhgQkVl0Q==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.4.0.tgz",
+      "integrity": "sha512-DIcjQZNerCZ50tnDnL6P9mpNmlGc9VFrSjXh55RzkAZOTelf061T7ZbYv0bYeSdohvAwYNr4gt3/Pe79AUsjLw==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
         "rc-menu": "^8.0.1",
+        "rc-textarea": "^0.3.0",
         "rc-trigger": "^4.3.0",
         "rc-util": "^5.0.1"
       }
     },
     "rc-menu": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-8.3.1.tgz",
-      "integrity": "sha512-4LNQ0zIL27yayQu9Xi3QOUB2yEqm5qSFwD9MzB1XnTo1JeLTLy3+D8Bm94rykvnhV6z5MYtalUTnM7ETfjExXQ==",
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-8.5.2.tgz",
+      "integrity": "sha512-GPtr7qoCynVEkFgco/9cW0z/xU33GV89Q6r8FgEkrdhaQSJzuSC+v8pv+Bll5fVGQlJyJgOVqiKk7l2Knk1jYg==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
         "mini-store": "^3.0.1",
-        "rc-animate": "^3.1.0",
-        "rc-trigger": "^4.2.0",
+        "omit.js": "^2.0.0",
+        "rc-motion": "^1.0.1",
+        "rc-trigger": "^4.4.0",
         "rc-util": "^5.0.1",
         "resize-observer-polyfill": "^1.5.0",
         "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "rc-trigger": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.4.0.tgz",
+          "integrity": "sha512-09562wc5I1JUbCdWohcFYJeLTpjKjEqH+0lY7plDtyI9yFXRngrvmqsrSJyT6Nat+C35ymD7fhwCCPq3cfUI4g==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.10.1",
+            "classnames": "^2.2.6",
+            "raf": "^3.4.1",
+            "rc-align": "^4.0.0",
+            "rc-motion": "^1.0.0",
+            "rc-util": "^5.0.1"
+          }
+        }
+      }
+    },
+    "rc-motion": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-1.0.1.tgz",
+      "integrity": "sha512-+gk3bk72678cnwqsKmLTaqLNnAdvxe97SEttyGrrGH29UHiDj1tZTRwguDEAHZ9ZW44VMLmKhr2BKZqZOBPm0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "raf": "^3.4.1",
+        "rc-util": "^5.0.6"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "rc-util": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.0.6.tgz",
+          "integrity": "sha512-uLGxF9WjbpJSjd6iDnIjl8ZeMUglpcuh1DwO26aaXh++yAmlB6eIAJMUwwJCuqJvo4quCvsDPg1VkqHILc4U0A==",
+          "dev": true,
+          "requires": {
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
       }
     },
     "rc-notification": {
@@ -11847,9 +11932,9 @@
       }
     },
     "rc-pagination": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-2.2.5.tgz",
-      "integrity": "sha512-7hMFNi8R7C/4cLKgmSpUb3BfMFdt4DLrjTixSRMpMBR5jwGfwRyoV9g9Tm6gCuCaAlVAX1QNtlM1T2UqEOW5lw==",
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-2.4.6.tgz",
+      "integrity": "sha512-1ykd3Jti+JuOFdzEFXGfVpkuH+hKxLYz3FKV6BSwnnWXLr9Y8bbm7YiTSwBmdDcOg6tinH8b4IYaKzxBWRC6EA==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -11857,16 +11942,19 @@
       }
     },
     "rc-picker": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-1.6.3.tgz",
-      "integrity": "sha512-SBaTUZDr+q89s21dF4wi8Ag+Kecv2x7QfufopV4eASm/WXWnvxIP4pCbedqP02jJQMGt290KNlIiffVNqscs5A==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-1.15.1.tgz",
+      "integrity": "sha512-YW6I91R1rMDTKpWY2yYjUk3mX4ttk7l8dx5fuojGBj86TGPj0R5vh+wFoRNzOeA4qAHcRzGWGPP60HFnoxL1TA==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
+        "date-fns": "^2.15.0",
+        "dayjs": "^1.8.30",
         "moment": "^2.24.0",
         "rc-trigger": "^4.0.0",
         "rc-util": "^5.0.1",
+        "react": "^16.0.0",
         "shallowequal": "^1.1.0"
       }
     },
@@ -11880,9 +11968,9 @@
       }
     },
     "rc-rate": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.7.0.tgz",
-      "integrity": "sha512-XD+1tnmKa3Ykm6jVX2ZiwIWdv+DG1t7LDK3dojeFoS8GgA7W3oqW5R/UpJ66qrLYpPHw9N4pYJKWySiPKtPsLQ==",
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.8.2.tgz",
+      "integrity": "sha512-f9T/D+ZwWQrWHkpidpQbnXpnVMGMC4eSRAkwuu88a8Qv1C/9LNc4AErazoh8tpnZBFqq19F3j0Glv+sDgkfEig==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -11903,14 +11991,14 @@
       }
     },
     "rc-select": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-11.0.1.tgz",
-      "integrity": "sha512-gC8uL83iiuQxYUlBKz+JKpBGHj0fTk1GPdLH7612cd2lRDPpjlU7LEmMRSsqopGChnu8h2GJigo43ohbFsiasQ==",
+      "version": "11.0.13",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-11.0.13.tgz",
+      "integrity": "sha512-4/GDmBkGnDhYre3Dvq5UkIRXQJW8hbGdpdH8SjquSbCktAVitYV+opd/lKI28qMcBxCgjOHgYXwZ18TF+kP2VQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-animate": "^3.0.0",
+        "rc-motion": "^1.0.1",
         "rc-trigger": "^4.3.0",
         "rc-util": "^5.0.1",
         "rc-virtual-list": "^1.1.2",
@@ -11918,9 +12006,9 @@
       }
     },
     "rc-slider": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.3.0.tgz",
-      "integrity": "sha512-9QPRjK8qFYO8L/Cn//O/K4g4dSU1glgvAdeT9qBLmjXtdYSiJ9u3YulcdbHWHo9Y3IE1dyaVm4m4ll2FWdDyqg==",
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.3.1.tgz",
+      "integrity": "sha512-c52PWPyrfJWh28K6dixAm0906L3/4MUIxqrNQA4TLnC/Z+cBNycWJUZoJerpwSOE1HdM3XDwixCsmtFc/7aWlQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -11931,9 +12019,9 @@
       }
     },
     "rc-steps": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-4.0.0.tgz",
-      "integrity": "sha512-Vy0T2sC+1ElpovEB97mYNVR5GYNYSzMiRJFumera5gZL2bH6FcxYioXcq/HYCPN//YC+b/Fs37x4G/WpGMuaVw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-4.1.2.tgz",
+      "integrity": "sha512-kTPiojPtJi12Y7whRqlydRgJXQ1u9JlvGchI6xDrmOMZVpCTLpfc/18iu+aHCtCZaSnM2ENU/9lfm/naWVFcRw==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.2",
@@ -11953,9 +12041,9 @@
       }
     },
     "rc-table": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.7.2.tgz",
-      "integrity": "sha512-LcCOYmnIKFPNFDbJpD6yUpTyQytoQL0nXoyuG4FWJROMJzmhVhpVQZ83YjFOAlZjwx0Ixz04yPkMvRq6xr9vXQ==",
+      "version": "7.8.6",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.8.6.tgz",
+      "integrity": "sha512-rHRStVTO6FYlxs5Bk9S56Vo/Jn7pX3hOtHTHP+Vu++i9SF7DroOReMIi+OJ7RA9n3jVBxyT/9+NESXgTFvPbYA==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -11967,9 +12055,9 @@
       }
     },
     "rc-tabs": {
-      "version": "11.3.2",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-11.3.2.tgz",
-      "integrity": "sha512-UQQrVmBZm/LrgS5GHPZNpzedTV5ppU1f8dvTV2TX/zmV8byaOVd2uJ9F/f4zkXTvsTLxGzFfCrb6nAn1cwSBLw==",
+      "version": "11.5.6",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-11.5.6.tgz",
+      "integrity": "sha512-Q2wqnt66SFksGXxNARLqGNMYIFH3KSm48+hMc4tq6qhgpsW104dedHcM86NUyqsQcvYWWiceUNu3TSnbe+XZnw==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -11982,6 +12070,18 @@
         "rc-util": "^5.0.0"
       }
     },
+    "rc-textarea": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-0.3.0.tgz",
+      "integrity": "sha512-vrTPkPT6wrO7EI8ouLFZZLXA1pFVrVRCnkmyyf0yRComFbcH1ogmFEGu85CjVT96rQqAiQFOe0QV3nKopZOJow==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "omit.js": "^2.0.0",
+        "rc-resize-observer": "^0.2.3"
+      }
+    },
     "rc-tooltip": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-4.2.1.tgz",
@@ -11992,35 +12092,62 @@
       }
     },
     "rc-tree": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-3.3.1.tgz",
-      "integrity": "sha512-DGyVZN4HRSrmFErn68KOISIl3z0R9EjeNyZE0sgAaa5oqpQDAEK78/lYf5k3rot1N/iFAEJKaTRJfM7eIdWGwg==",
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-3.8.5.tgz",
+      "integrity": "sha512-audXUWwxyGB/4rLI4v+KuVucbc74y5t10XYQlR5WUe1J0sQuxP19+5GTb6DgrGXPxWOC6mxmkiw/xsKissE0GA==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-animate": "^3.1.0",
+        "rc-motion": "^1.0.0",
         "rc-util": "^5.0.0",
         "rc-virtual-list": "^1.1.0"
       }
     },
     "rc-tree-select": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-4.0.1.tgz",
-      "integrity": "sha512-VehfIZgu6Xmko7YfJgshmuIdeI7u7Ar1iLkmlb69/w1HjaDnSHbV3N3xopLABAq8lTlTAnSFU2JCPcYifvTmAA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-4.1.1.tgz",
+      "integrity": "sha512-pawxt/W1chLpjtAEQe8mXI9C9DYNMGS/BR6eBmOY8cJDK6OWSa6M88S6F0jXc+A10D/CLfHAfF1ZIj7VGse+5Q==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-select": "^11.0.0",
-        "rc-tree": "^3.1.0",
-        "rc-util": "^5.0.1"
+        "rc-select": "^11.1.1",
+        "rc-tree": "^3.8.0",
+        "rc-util": "^5.0.5"
+      },
+      "dependencies": {
+        "rc-select": {
+          "version": "11.1.3",
+          "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-11.1.3.tgz",
+          "integrity": "sha512-Mf/EiYFmdWOoOget6RacSz1uAfn0hxf3wOa/YSOf7bw70EH6s80biDHQ4WPk8hNMxVRhzojlkktgmN4YxNQisQ==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.10.1",
+            "classnames": "2.x",
+            "rc-motion": "^1.0.1",
+            "rc-trigger": "^4.3.0",
+            "rc-util": "^5.0.1",
+            "rc-virtual-list": "^1.1.2",
+            "warning": "^4.0.3"
+          }
+        },
+        "rc-util": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.0.6.tgz",
+          "integrity": "sha512-uLGxF9WjbpJSjd6iDnIjl8ZeMUglpcuh1DwO26aaXh++yAmlB6eIAJMUwwJCuqJvo4quCvsDPg1VkqHILc4U0A==",
+          "dev": true,
+          "requires": {
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
       }
     },
     "rc-trigger": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.3.0.tgz",
-      "integrity": "sha512-jnGNzosXmDdivMBjPCYe/AfOXTpJU2/xQ9XukgoXDQEoZq/9lcI1r7eUIfq70WlWpLxlUEqQktiV3hwyy6Nw9g==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.3.5.tgz",
+      "integrity": "sha512-OKIrgGVHnpQ16H/nuOjANrnufHx/tw4cvCuiWSM+XflahUlcqJu6UtlQzNTZ2BoNinC/9Eopx5I38jVD+xLvew==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -12032,9 +12159,9 @@
       }
     },
     "rc-upload": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-3.1.4.tgz",
-      "integrity": "sha512-G6nqT4HMrT+mDd32ZHfcFs2eCFilMdIdteylNCHPcfoBBOKkBW4iVo7O6uFhz/8jIGNLJfR3+6S2x/lnXYYrCQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-3.2.0.tgz",
+      "integrity": "sha512-/vyOGVxl5QVM3ZE7s+GqYPbCLC/Q/vJq0sjdwnvJw01KvAR5kVOC4jbHEaU56dMss7PFGDfNzc8zO5bWYLDzVQ==",
       "dev": true,
       "requires": {
         "classnames": "^2.2.5"
@@ -12051,9 +12178,9 @@
       }
     },
     "rc-virtual-list": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-1.1.5.tgz",
-      "integrity": "sha512-roZ6HE5MNKaiop+Ic7jZS7xlMnXBLp0XBElsMbE4eEL3GnnnJAet2iXoT5wjKcKMXEVyVCD0L4yQozmH7+Kgxg==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-1.1.6.tgz",
+      "integrity": "sha512-u3+izqWL8p8bQy8nYH48qWpiGyxR/ye8D2k0zJlXmfYeL55/xh83YrzHqiDzO78uj0Ewag3nXDA0JTVrYO7ygQ==",
       "dev": true,
       "requires": {
         "classnames": "^2.2.6",
diff --git a/package.json b/package.json
index 5ef1e0b..23895fc 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.3",
     "@testing-library/user-event": "^12.0.11",
-    "antd": "^4.3.0",
+    "antd": "^4.5.2",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^25.4.0",
diff --git a/src/containers/AddProfile/index.js b/src/containers/AddProfile/index.js
index aa04db0..50a4329 100644
--- a/src/containers/AddProfile/index.js
+++ b/src/containers/AddProfile/index.js
@@ -9,12 +9,17 @@ import Container from 'components/Container';
 import Header from 'components/Header';
 import Modal from 'components/Modal';
 
-import { formatSsidProfileForm, formatApProfileForm } from 'utils/profiles';
+import {
+  formatSsidProfileForm,
+  formatApProfileForm,
+  formatBonjourGatewayForm,
+} from 'utils/profiles';
 
 import styles from './index.module.scss';
 
 import SSIDForm from '../ProfileDetails/components/SSID';
 import AccessPointForm from '../ProfileDetails/components/AccessPoint';
+import BonjourGatewayForm from '../ProfileDetails/components/BonjourGateway';
 
 const AddProfile = ({ onCreateProfile, ssidProfiles }) => {
   const layout = {
@@ -45,6 +50,11 @@ const AddProfile = ({ onCreateProfile, ssidProfiles }) => {
         formattedData = Object.assign(formattedData, formatApProfileForm(values));
       }
 
+      if (profileType === 'bonjour') {
+        formattedData.model_type = 'BonjourGatewayProfile';
+        formattedData = Object.assign(formattedData, formatBonjourGatewayForm(values));
+      }
+
       onCreateProfile(profileType, name, formattedData, formattedData.childProfileIds);
     });
   };
@@ -77,7 +87,7 @@ const AddProfile = ({ onCreateProfile, ssidProfiles }) => {
           </div>
         </Header>
 
-        <Form {...layout} form={form}>
+        <Form {...layout} form={form} initialValues={{ bonjourServices: [''] }}>
           <Card title="Profile Settings">
             <Item
               label="Type"
@@ -96,6 +106,7 @@ const AddProfile = ({ onCreateProfile, ssidProfiles }) => {
               >
                 <Option value="ssid">SSID</Option>
                 <Option value="equipment_ap">Access Point</Option>
+                <Option value="bonjour">Bonjour Gateway</Option>
               </Select>
             </Item>
             <Item
@@ -111,6 +122,7 @@ const AddProfile = ({ onCreateProfile, ssidProfiles }) => {
           {profileType === 'equipment_ap' && (
             <AccessPointForm form={form} ssidProfiles={ssidProfiles} />
           )}
+          {profileType === 'bonjour' && <BonjourGatewayForm form={form} />}
         </Form>
       </div>
     </Container>
diff --git a/src/containers/Profile/index.js b/src/containers/Profile/index.js
index 768de80..77d37ab 100644
--- a/src/containers/Profile/index.js
+++ b/src/containers/Profile/index.js
@@ -53,7 +53,9 @@ const Profile = ({ data, onReload, onLoadMore, isLastPage, onDeleteProfile }) =>
       key: 'delete',
       width: 80,
       render: (_, record) => {
-        return record.profileType === 'ssid' || record.profileType === 'equipment_ap' ? (
+        return record.profileType === 'ssid' ||
+          record.profileType === 'equipment_ap' ||
+          record.profileType === 'bonjour' ? (
           <Button
             title="delete"
             icon={<DeleteFilled />}
diff --git a/src/containers/Profile/index.module.scss b/src/containers/Profile/index.module.scss
index 0d1a870..e47129b 100644
--- a/src/containers/Profile/index.module.scss
+++ b/src/containers/Profile/index.module.scss
@@ -11,6 +11,9 @@
 
   a {
     color: #fff;
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   .LoadMore {
diff --git a/src/containers/ProfileDetails/components/BonjourGateway/index.js b/src/containers/ProfileDetails/components/BonjourGateway/index.js
new file mode 100644
index 0000000..56b52a0
--- /dev/null
+++ b/src/containers/ProfileDetails/components/BonjourGateway/index.js
@@ -0,0 +1,270 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Card, Input, Col, Tooltip, Select, Radio } from 'antd';
+import { InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import Button from 'components/Button';
+import globalStyles from 'styles/index.scss';
+import styles from '../index.module.scss';
+
+const { Item, List } = Form;
+const { TextArea } = Input;
+const { Option } = Select;
+
+const BonjourGateway = ({ form, details }) => {
+  useEffect(() => {
+    form.setFieldsValue({
+      profileDescription: details.profileDescription,
+    });
+  }, [form, details]);
+
+  return (
+    <div className={styles.ProfileDetails}>
+      <Card title="Bonjour Gateway">
+        <Item name="profileDescription" label="Description">
+          <TextArea className={globalStyles.field} rows={2} allowClear />
+        </Item>
+      </Card>
+      <List name="bonjourServices">
+        {(fields, { add, remove }) => {
+          return (
+            <Card
+              title="VLANs and Services"
+              extra={
+                <>
+                  {fields.length === 5 && (
+                    <Tooltip className={styles.ToolTip} title="Maximum 5 VLAN services">
+                      <InfoCircleOutlined />
+                    </Tooltip>
+                  )}
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      add();
+                    }}
+                    disabled={fields.length === 5}
+                  >
+                    <PlusOutlined /> Add Service Set
+                  </Button>
+                </>
+              }
+            >
+              {fields.map(field => (
+                <div className={styles.FlexDiv} key={field.key}>
+                  {fields[0] === field && (
+                    <>
+                      <Col flex="1 1 350px">
+                        <strong>Unique VLANs</strong>
+                      </Col>
+                      <Col flex="1 1 700px">
+                        <strong>Services</strong>
+                      </Col>
+                    </>
+                  )}
+
+                  <Col flex="1 1 350px">
+                    <Item noStyle name={[field.name, 'vlanIdConfiguration']} initialValue="default">
+                      <Radio.Group size="small">
+                        <Radio value="custom">Use Custom VLAN</Radio>
+                        <Radio value="default">Use Default VLAN</Radio>
+                      </Radio.Group>
+                    </Item>
+
+                    <Item noStyle shouldUpdate>
+                      {({ getFieldValue }) => {
+                        return getFieldValue([
+                          'bonjourServices',
+                          field.name,
+                          'vlanIdConfiguration',
+                        ]) === 'custom' ? (
+                          <Item
+                            name={[field.name, 'vlanId']}
+                            preserve={false}
+                            rules={[
+                              {
+                                required: true,
+                                message: 'Unique VLAN expected between 2 - 4095.',
+                              },
+                              () => ({
+                                validator(_rule, value) {
+                                  const currentId = getFieldValue([
+                                    'bonjourServices',
+                                    field.name,
+                                    'vlanId',
+                                  ]);
+
+                                  const ids = fields.map(i =>
+                                    getFieldValue(['bonjourServices', i.name, 'vlanId'])
+                                  );
+
+                                  const index = ids.findIndex(id => id === currentId);
+
+                                  ids.splice(index, 1);
+
+                                  if (
+                                    !value ||
+                                    (currentId <= 4095 &&
+                                      currentId > 1 &&
+                                      ids.indexOf(currentId) === -1)
+                                  ) {
+                                    return Promise.resolve();
+                                  }
+                                  return Promise.reject(
+                                    new Error('Unique VLAN expected between 2 - 4095.')
+                                  );
+                                },
+                              }),
+                            ]}
+                            hasFeedback
+                            wrapperCol={{ span: 25 }}
+                          >
+                            <Input placeholder="2-4095" className={globalStyles.field} />
+                          </Item>
+                        ) : (
+                          <Item wrapperCol={{ span: 25 }}>
+                            <Input className={globalStyles.field} disabled placeholder="Default" />
+                          </Item>
+                        );
+                      }}
+                    </Item>
+                  </Col>
+                  <Col flex="1 1 600px">
+                    <Item noStyle name={[field.name, 'supportAllServices']} initialValue="true">
+                      <Radio.Group size="small">
+                        <Radio value="false">Selected Services</Radio>
+                        <Radio value="true">All Services</Radio>
+                      </Radio.Group>
+                    </Item>
+                    <Item noStyle shouldUpdate>
+                      {({ getFieldValue }) => {
+                        return getFieldValue([
+                          'bonjourServices',
+                          field.name,
+                          'supportAllServices',
+                        ]) === 'false' ? (
+                          <Item
+                            name={[field.name, 'serviceNames']}
+                            rules={[
+                              {
+                                required: true,
+                                message: 'Please select your predefined services.',
+                              },
+                            ]}
+                            wrapperCol={{ span: 30 }}
+                            preserve={false}
+                          >
+                            <Select
+                              className={globalStyles.field}
+                              placeholder="Select predefined services (check to select all)"
+                              mode="multiple"
+                              listHeight={350}
+                            >
+                              <Option key="AFP" value="AFP">
+                                <Tooltip title="Apple File Sharing">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;AFP
+                              </Option>
+                              <Option key="AirPlay" value="AirPlay">
+                                <Tooltip title="AirPlay">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;AirPlay
+                              </Option>
+                              <Option key="AirPort" value="AirPort">
+                                <Tooltip title="AirPort Base Station">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;AirPort
+                              </Option>
+                              <Option key="AirPrint" value="AirPrint">
+                                <Tooltip title="Bonjour Printing">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;AirPrint
+                              </Option>
+                              <Option key="AirTunes" value="AirTunes">
+                                <Tooltip title="Remote Audio Output Protocol (RAOP)">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;AirTunes
+                              </Option>
+                              <Option key="GoogleCast" value="GoogleCast">
+                                <Tooltip title="Google Cast">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;GoogleCast
+                              </Option>
+                              <Option key="RDP" value="RDP">
+                                <Tooltip title="Windows Remote Desktop">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;RDP
+                              </Option>
+                              <Option key="SFTP" value="SFTP">
+                                <Tooltip title="Secure File Transfer Protocol over SSH">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;SFTP
+                              </Option>
+                              <Option key="SSH" value="SSH">
+                                <Tooltip title="SSH Remote Login">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;SSH
+                              </Option>
+                              <Option key="SAMBA" value="SAMBA">
+                                <Tooltip title="Server Message Block over TCP/IP">
+                                  <InfoCircleOutlined />
+                                </Tooltip>
+                                &nbsp;Samba
+                              </Option>
+                            </Select>
+                          </Item>
+                        ) : (
+                          <Item wrapperCol={{ span: 30 }}>
+                            <Select
+                              className={globalStyles.field}
+                              disabled
+                              placeholder="All Services"
+                            />
+                          </Item>
+                        );
+                      }}
+                    </Item>
+                  </Col>
+
+                  <Col>
+                    <Item>
+                      <Button
+                        className={styles.DeleteButton}
+                        type="danger"
+                        disabled={fields.length === 1}
+                        onClick={() => {
+                          remove(field.name);
+                        }}
+                      >
+                        Remove
+                      </Button>
+                    </Item>
+                  </Col>
+                </div>
+              ))}
+            </Card>
+          );
+        }}
+      </List>
+    </div>
+  );
+};
+
+BonjourGateway.propTypes = {
+  form: PropTypes.instanceOf(Object),
+  details: PropTypes.instanceOf(Object),
+};
+
+BonjourGateway.defaultProps = {
+  form: null,
+  details: {},
+};
+
+export default BonjourGateway;
diff --git a/src/containers/ProfileDetails/components/index.module.scss b/src/containers/ProfileDetails/components/index.module.scss
index bba3c73..100689f 100644
--- a/src/containers/ProfileDetails/components/index.module.scss
+++ b/src/containers/ProfileDetails/components/index.module.scss
@@ -56,6 +56,18 @@
   }
 }
 
+.FlexDiv {
+  display: flex;
+  flex-wrap: wrap;
+  & > * {
+    margin: 0;
+    margin-right: 40px;
+  }
+  & > :last-child {
+    margin-right: 0;
+  }
+}
+
 .InlineDiv {
   display: flex;
   justify-content: space-around;
@@ -112,3 +124,12 @@
     padding: 0;
   }
 }
+
+.DeleteButton {
+  margin: 20px 10px 0 0;
+}
+
+.ToolTip {
+  margin-right: 20px;
+  margin-top: 10px;
+}
diff --git a/src/containers/ProfileDetails/index.js b/src/containers/ProfileDetails/index.js
index a842a09..27c7e67 100644
--- a/src/containers/ProfileDetails/index.js
+++ b/src/containers/ProfileDetails/index.js
@@ -16,12 +16,14 @@ import {
   formatApProfileForm,
   formatRadiusForm,
   formatCaptiveForm,
+  formatBonjourGatewayForm,
 } from 'utils/profiles';
 
 import SSIDForm from './components/SSID';
 import AccessPointForm from './components/AccessPoint';
 import RadiusForm from './components/Radius';
 import CaptivePortalForm from './components/CaptivePortal';
+import BonjourGatewayForm from './components/BonjourGateway';
 
 import styles from './index.module.scss';
 
@@ -96,6 +98,12 @@ const ProfileDetails = ({
         if (profileType === 'captive_portal') {
           formattedData = Object.assign(formattedData, formatCaptiveForm(values, details));
         }
+
+        if (profileType === 'bonjour') {
+          formattedData.model_type = 'BonjourGatewayProfile';
+          formattedData = Object.assign(formattedData, formatBonjourGatewayForm(values));
+        }
+
         onUpdateProfile(values.name, formattedData, formattedData.childProfileIds);
         setIsFormDirty(false);
       })
@@ -157,6 +165,7 @@ const ProfileDetails = ({
           <CaptivePortalForm form={form} details={details} fileUpload={fileUpload} />
         )}
         {profileType === 'radius' && <RadiusForm details={details} form={form} />}
+        {profileType === 'bonjour' && <BonjourGatewayForm details={details} form={form} />}
       </Form>
     </Container>
   );
diff --git a/src/utils/profiles.js b/src/utils/profiles.js
index 383cc9c..9ecb5b1 100644
--- a/src/utils/profiles.js
+++ b/src/utils/profiles.js
@@ -62,6 +62,16 @@ export const formatApProfileForm = values => {
   return formattedData;
 };
 
+export const formatBonjourGatewayForm = values => {
+  const formattedData = { ...values };
+
+  values.bonjourServices.forEach((i, index) => {
+    formattedData.bonjourServices[index].supportAllServices = isBool(i.supportAllServices);
+  });
+
+  return formattedData;
+};
+
 export const formatRadiusForm = values => {
   const formattedData = { ...values, serviceRegionMap: {} };