diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index e1f57cc94c3..9ca4fd03c8f 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -152,7 +152,7 @@ export default {
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
         name: 'Tiers',
-        component: () => import('@/views/network/VpcTiers.vue')
+        component: () => import('@/views/network/VpcTiersTab.vue')
       }],
       actions: [
         {
@@ -326,7 +326,35 @@ export default {
       permission: ['listNetworkACLLists'],
       columns: ['name', 'description', 'id'],
       details: ['name', 'description', 'id'],
+      tabs: [{
+        name: 'details',
+        component: () => import('@/components/view/DetailsTab.vue')
+      }, {
+        name: 'ACL List Rules',
+        component: () => import('@/views/network/AclListRulesTab.vue'),
+        show: () => true
+      }],
       actions: [
+        {
+          api: 'createNetworkACLList',
+          icon: 'plus',
+          label: 'Add ACL List',
+          listView: true,
+          args: ['name', 'description', 'vpcid']
+        },
+        {
+          api: 'updateNetworkACLList',
+          icon: 'edit',
+          label: 'Edit ACL List',
+          dataView: true,
+          args: ['name', 'description']
+        },
+        {
+          api: 'deleteNetworkACLList',
+          icon: 'delete',
+          label: 'Delete ACL List',
+          dataView: true
+        }
       ]
     },
     {
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
new file mode 100644
index 00000000000..bb35287f6c0
--- /dev/null
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -0,0 +1,82 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-spin :spinning="fetchLoading">
+    <a-button type="dashed" style="width: 100%" icon="plus" @click="todo()">Add ACL: show modal/form and run this.. createNetworkACL</a-button>
+    <div v-for="(acl, index) in acls" :key="index">
+      {{ acl }}
+    </div>
+  </a-spin>
+</template>
+
+<script>
+import { api } from '@/api'
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'AclListRulesTab',
+  components: {
+    Status
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      acls: [],
+      fetchLoading: false
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  watch: {
+    loading (newData, oldData) {
+      if (!newData && this.resource.id) {
+        this.fetchData()
+      }
+    }
+  },
+  methods: {
+    fetchData () {
+      this.fetchLoading = true
+      api('listNetworkACLs', { aclid: this.resource.id }).then(json => {
+        this.acls = json.listnetworkaclsresponse.networkacl
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/ui/src/views/network/VpcTiers.vue b/ui/src/views/network/VpcTiers.vue
deleted file mode 100644
index e3bb16d35af..00000000000
--- a/ui/src/views/network/VpcTiers.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-// Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  The ASF licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied.  See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-<template>
-  <div>
-    TODO: VPC tiers management
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: '',
-  components: {
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style scoped>
-</style>
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
new file mode 100644
index 00000000000..f3da4676843
--- /dev/null
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -0,0 +1,84 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-spin :spinning="fetchLoading">
+    <div v-for="(network, index) in networks" :key="index">
+      <router-link :to="{ path: '/guestnetwork/' + network.id }">{{ network.name }}</router-link>
+      {{ network.cidr }}
+      <router-link :to="{ path: '/vm/?vpcid=' + resource.id + '&networkid=' + network.id }">View VMs</router-link>
+      <router-link :to="{ path: '/publicip/?isstaticnat=true' + '&associatednetworkid=' + network.id }">View SNATs</router-link>
+    </div>
+  </a-spin>
+</template>
+
+<script>
+import { api } from '@/api'
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'VpcTiersTab',
+  components: {
+    Status
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      networks: [],
+      fetchLoading: false
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  watch: {
+    loading (newData, oldData) {
+      if (!newData && this.resource.id) {
+        this.fetchData()
+      }
+    }
+  },
+  methods: {
+    fetchData () {
+      this.fetchLoading = true
+      api('listNetworks', { vpcid: this.resource.id }).then(json => {
+        this.networks = json.listnetworksresponse.network
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>