diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index c19a162c948..c27cfcd8c91 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -11,6 +11,18 @@ export default {
       resourceType: 'Network',
       columns: ['name', 'state', 'type', 'cidr', 'ip6cidr', 'broadcasturi', 'account', 'zonename'],
       details: ['name', 'id', 'description', 'type', 'traffictype', 'vpcid', 'vlan', 'broadcasturi', 'cidr', 'ip6cidr', 'netmask', 'gateway', 'ispersistent', 'restartrequired', 'reservediprange', 'redundantrouter', 'networkdomain', 'zonename', 'account', 'domain'],
+      related: [{
+        name: 'publicip',
+        title: 'IP Addresses',
+        param: 'associatedNetworkId'
+      }],
+      tabs: [{
+        name: 'details',
+        component: () => import('@/views/common/DetailsTab.vue')
+      }, {
+        name: 'egress-rules',
+        component: () => import('@/views/network/EgressConfigure.vue')
+      }],
       actions: [
         {
           api: 'createNetwork',
@@ -51,6 +63,13 @@ export default {
       resourceType: 'Vpc',
       columns: ['name', 'state', 'displaytext', 'cidr', 'account', 'zonename'],
       details: ['name', 'id', 'displaytext', 'cidr', 'networkdomain', 'ispersistent', 'redundantvpcrouter', 'restartrequired', 'zonename', 'account', 'domain'],
+      tabs: [{
+        name: 'configure',
+        component: () => import('@/views/network/VpcConfigure.vue')
+      }, {
+        name: 'details',
+        component: () => import('@/views/common/DetailsTab.vue')
+      }],
       actions: [
         {
           api: 'createVPC',
@@ -90,6 +109,16 @@ export default {
       resourceType: 'SecurityGroup',
       columns: ['name', 'description', 'account', 'domain'],
       details: ['name', 'id', 'description', 'account', 'domain'],
+      tabs: [{
+        name: 'details',
+        component: () => import('@/views/common/DetailsTab.vue')
+      }, {
+        name: 'ingress-rules',
+        component: () => import('@/views/network/IngressRuleConfigure.vue')
+      }, {
+        name: 'egress-rules',
+        component: () => import('@/views/network/EgressRuleConfigure.vue')
+      }],
       actions: [
         {
           api: 'createSecurityGroup',
@@ -116,6 +145,16 @@ export default {
       resourceType: 'PublicIpAddress',
       columns: ['ipaddress', 'state', 'associatednetworkname', 'virtualmachinename', 'allocated', 'account', 'zonename'],
       details: ['ipaddress', 'id', 'associatednetworkname', 'virtualmachinename', 'networkid', 'issourcenat', 'isstaticnat', 'virtualmachinename', 'vmipaddress', 'vlan', 'allocated', 'account', 'zonename'],
+      tabs: [{
+        name: 'configure',
+        component: () => import('@/views/network/IpConfigure.vue')
+      }, {
+        name: 'vpn',
+        component: () => import('@/views/network/VpnDetails.vue')
+      }, {
+        name: 'details',
+        component: () => import('@/views/common/DetailsTab.vue')
+      }],
       actions: [
         {
           api: 'associateIpAddress',
@@ -124,13 +163,27 @@ export default {
           listView: true,
           args: ['networkid']
         },
+        {
+          api: 'createRemoteAccessVpn',
+          icon: 'link',
+          label: 'Enable Remote Access VPN',
+          dataView: true,
+          args: ['publicipid', 'domainid', 'account']
+        },
+        {
+          api: 'deleteRemoteAccessVpn',
+          icon: 'disconnect',
+          label: 'Disable Remove Access VPN',
+          dataView: true,
+          args: ['publicipid', 'domainid']
+        },
         {
           api: 'enableStaticNat',
           icon: 'plus-circle',
           label: 'Enable Static NAT',
           dataView: true,
           args: ['ipaddressid', 'virtualmachineid', 'vmguestip'],
-          show: (record) => { return !record.virtualmachineid }
+          show: (record) => { return !record.virtualmachineid && !record.issourcenat }
         },
         {
           api: 'disableStaticNat',
diff --git a/ui/src/views/network/EgressConfigure.vue b/ui/src/views/network/EgressConfigure.vue
new file mode 100644
index 00000000000..6cf2bdea88a
--- /dev/null
+++ b/ui/src/views/network/EgressConfigure.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    TODO: Egress view for isolated network
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/views/network/EgressRuleConfigure.vue b/ui/src/views/network/EgressRuleConfigure.vue
new file mode 100644
index 00000000000..1042e7b8be0
--- /dev/null
+++ b/ui/src/views/network/EgressRuleConfigure.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    TODO: Egress view for SG
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/views/network/IngressRuleConfigure.vue b/ui/src/views/network/IngressRuleConfigure.vue
new file mode 100644
index 00000000000..5af39b31fd8
--- /dev/null
+++ b/ui/src/views/network/IngressRuleConfigure.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    TODO: Ingress view for SG
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/views/network/IpConfigure.vue b/ui/src/views/network/IpConfigure.vue
new file mode 100644
index 00000000000..c24366b2fb1
--- /dev/null
+++ b/ui/src/views/network/IpConfigure.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    TODO: IP configure view: firewall, pf, lb
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/views/network/VpcConfigure.vue b/ui/src/views/network/VpcConfigure.vue
new file mode 100644
index 00000000000..a90fecaef93
--- /dev/null
+++ b/ui/src/views/network/VpcConfigure.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    TODO: VPC configure view
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/views/network/VpnDetails.vue b/ui/src/views/network/VpnDetails.vue
new file mode 100644
index 00000000000..c24366b2fb1
--- /dev/null
+++ b/ui/src/views/network/VpnDetails.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    TODO: IP configure view: firewall, pf, lb
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>