diff --git a/ui/package-lock.json b/ui/package-lock.json
index bfc77a38459..f1e70e6147c 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "primate",
-  "version": "1.3.0",
+  "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -906,24 +906,6 @@
         "regexpu-core": "^4.5.4"
       }
     },
-    "@babel/polyfill": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.4.4.tgz",
-      "integrity": "sha512-WlthFLfhQQhh+A2Gn5NSFl0Huxz36x86Jn+E9OW7ibK8edKPq+KLy4apM1yDpQ8kJOVi1OVjpP4vSDLdrI04dg==",
-      "dev": true,
-      "requires": {
-        "core-js": "^2.6.5",
-        "regenerator-runtime": "^0.13.2"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.3",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
-          "dev": true
-        }
-      }
-    },
     "@babel/preset-env": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.3.4.tgz",
@@ -1075,40 +1057,40 @@
       }
     },
     "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.22",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.22.tgz",
-      "integrity": "sha512-QmEuZsipX5/cR9JOg0fsTN4Yr/9lieYWM8AQpmRa0eIfeOcl/HLYoEa366BCGRSrgNJEexuvOgbq9jnJ22IY5g=="
+      "version": "0.2.24",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.24.tgz",
+      "integrity": "sha512-IPBT/1LdUVQpHcqdrh8uI2/86Fbu7933hkA/HweiCmP5QgF/8PecFM00gYvykxf0RZud8bg8zu+YfggDFUc1Kw=="
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.22",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.22.tgz",
-      "integrity": "sha512-Q941E4x8UfnMH3308n0qrgoja+GoqyiV846JTLoCcCWAKokLKrixCkq6RDBs8r+TtAWaLUrBpI+JFxQNX/WNPQ==",
+      "version": "1.2.24",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.24.tgz",
+      "integrity": "sha512-9uVGOEZwviZKbkOVX8nn8cErVqOHBAd1Fqd2OH7Iwu0vxGWdb3fFOMhaAyMXUHZpq1u5C9/HClCV49ci4WmJAg==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.22"
+        "@fortawesome/fontawesome-common-types": "^0.2.24"
       }
     },
     "@fortawesome/free-brands-svg-icons": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.10.2.tgz",
-      "integrity": "sha512-r5Dxr2h8f9bEI7F/gj/2v1OX9S6DMif9ZKR2VFQCSXHwahojLlOWnFILYsrjhzOISESkh6WDL9IOdkdbKM7KPw==",
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.11.1.tgz",
+      "integrity": "sha512-ptjnhaVrHU+zsAsPfQM12hh7qeRYopGj8IhYXo1v4OEp9G35PvyX0MygritBGdVf2qUPjBu7nwHvkXV3/nym6A==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.22"
+        "@fortawesome/fontawesome-common-types": "^0.2.24"
       }
     },
     "@fortawesome/free-regular-svg-icons": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.10.2.tgz",
-      "integrity": "sha512-Qk4FmwXuRDY5K2GyiKt7adCN204dTlTb0Ps3/JU4BfYoCrU43DResd1QZxfcoQJfV2kw29spZ4+BDL+9IRyj1Q==",
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.11.1.tgz",
+      "integrity": "sha512-IuVrdQvaXC6Z8YGjb91j5lnc9KRc6BD5lWSy/Ous4onQ3yYWIXPa8/u6n1B6v1j/UwUSMIlb7ot/rBWFx6ulpw==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.22"
+        "@fortawesome/fontawesome-common-types": "^0.2.24"
       }
     },
     "@fortawesome/free-solid-svg-icons": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.10.2.tgz",
-      "integrity": "sha512-9Os/GRUcy+iVaznlg8GKcPSQFpIQpAg14jF0DWsMdnpJfIftlvfaQCWniR/ex9FoOpSEOrlXqmUCFL+JGeciuA==",
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.1.tgz",
+      "integrity": "sha512-bB3hXON1K6mVOetTTg5VXZ4CAHg866p7MqenDkJ/eVcbWbGQRE45ojHEwkf37tWx3E8z6lcEameRwU9r5tGwjg==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.22"
+        "@fortawesome/fontawesome-common-types": "^0.2.24"
       }
     },
     "@fortawesome/vue-fontawesome": {
@@ -6767,9 +6749,9 @@
       }
     },
     "eslint": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.3.0.tgz",
-      "integrity": "sha512-ZvZTKaqDue+N8Y9g0kp6UPZtS4FSY3qARxBs7p4f0H0iof381XHduqVerFWtK8DPtKmemqbqCFENWSQgPR/Gow==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.4.0.tgz",
+      "integrity": "sha512-WTVEzK3lSFoXUovDHEbkJqCVPEPwbhCq4trDktNI6ygs7aO41d4cDT0JFAT5MivzZeVLWlg7vHL+bgrQv/t3vA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -8334,11 +8316,11 @@
       }
     },
     "fs-minipass": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.6.tgz",
-      "integrity": "sha512-crhvyXcMejjv3Z5d2Fa9sf5xLYVCF5O1c71QxbVnbLsmYMBEvDAftewesN/HhY03YRoA7zOMxjNGrF5svGaaeQ==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
       "requires": {
-        "minipass": "^2.2.1"
+        "minipass": "^2.6.0"
       }
     },
     "fs-write-stream-atomic": {
@@ -9675,9 +9657,9 @@
       "dev": true
     },
     "ignore-walk": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
-      "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.2.tgz",
+      "integrity": "sha512-EXyErtpHbn75ZTsOADsfx6J/FPo6/5cjev46PXrcTpd8z3BoRkXgYu9/JVqrI7tusjmwCZutGeRJeU0Wo1e4Cw==",
       "requires": {
         "minimatch": "^3.0.4"
       }
@@ -12756,18 +12738,18 @@
       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
     "minipass": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
-      "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.6.5.tgz",
+      "integrity": "sha512-ewSKOPFH9blOLXx0YSE+mbrNMBFPS+11a2b03QZ+P4LVrUHW/GAlqeYC7DBknDyMWkHzrzTpDhUvy7MUxqyrPA==",
       "requires": {
         "safe-buffer": "^5.1.2",
         "yallist": "^3.0.0"
       }
     },
     "minizlib": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
-      "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.2.tgz",
+      "integrity": "sha512-hR3At21uSrsjjDTWrbu0IMLTpnkpv8IIMFDFaoz43Tmu4LkmAXfH44vNNzpTnf+OAQQCHrb91y/wc2J4x5XgSQ==",
       "requires": {
         "minipass": "^2.2.1"
       }
@@ -13177,14 +13159,14 @@
       "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g=="
     },
     "npm-check-updates": {
-      "version": "3.1.21",
-      "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-3.1.21.tgz",
-      "integrity": "sha512-t7KygdHZ1cF2jS6kcOPiUg6s53Sq5jcOqHnddOe92qW7Xd4mh9AUT52OYYQ0YfAiP7VIdZ5379/G/atG6J0WDA==",
+      "version": "3.1.23",
+      "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-3.1.23.tgz",
+      "integrity": "sha512-Z2dkMdNgue6OPkQDPcAK62Qrwv+G1PaEmKrDrrSAiSP7pRD3u30xOVy1nLukS1XrJ2/zF8XTVxFe9/ubcvlcPQ==",
       "requires": {
         "chalk": "^2.4.2",
         "cint": "^8.2.1",
         "cli-table": "^0.3.1",
-        "commander": "^3.0.0",
+        "commander": "^3.0.1",
         "fast-diff": "^1.2.0",
         "find-up": "4.1.0",
         "get-stdin": "^7.0.0",
@@ -13192,7 +13174,7 @@
         "libnpmconfig": "^1.2.1",
         "lodash": "^4.17.15",
         "node-alias": "^1.0.4",
-        "pacote": "^9.5.4",
+        "pacote": "^9.5.8",
         "progress": "^2.0.3",
         "prompts": "^2.2.1",
         "rc-config-loader": "^2.0.4",
@@ -13204,20 +13186,20 @@
       },
       "dependencies": {
         "commander": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.0.tgz",
-          "integrity": "sha512-pl3QrGOBa9RZaslQiqnnKX2J068wcQw7j9AIaBQ9/JEp5RY6je4jKTImg0Bd+rpoONSe7GUFSgkxLeo17m3Pow=="
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.1.tgz",
+          "integrity": "sha512-UNgvDd+csKdc9GD4zjtkHKQbT8Aspt2jCBqNSPp53vAS0L1tS9sXB2TCEOPHJ7kt9bN/niWkYj8T3RQSoMXdSQ=="
         }
       }
     },
     "npm-package-arg": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.0.tgz",
-      "integrity": "sha512-zYbhP2k9DbJhA0Z3HKUePUgdB1x7MfIfKssC+WLPFMKTBZKpZh5m13PgexJjCq6KW7j17r0jHWcCpxEqnnncSA==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
+      "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
       "requires": {
-        "hosted-git-info": "^2.6.0",
+        "hosted-git-info": "^2.7.1",
         "osenv": "^0.1.5",
-        "semver": "^5.5.0",
+        "semver": "^5.6.0",
         "validate-npm-package-name": "^3.0.0"
       },
       "dependencies": {
@@ -13238,9 +13220,9 @@
       }
     },
     "npm-pick-manifest": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.0.tgz",
-      "integrity": "sha512-H+OnFudiq38Qj8P8xcesD/1Xa0Kvr2QRn1DTlephIwNfJg3P30Szc1wtpGEgdPXfAyKZKT2ajIM2X8YtCrbXrA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
+      "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
       "requires": {
         "figgy-pudding": "^3.5.1",
         "npm-package-arg": "^6.0.0",
@@ -13255,16 +13237,17 @@
       }
     },
     "npm-registry-fetch": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.0.tgz",
-      "integrity": "sha512-Jllq35Jag8dtv0M17ue74XtdQTyqKzuAYGiX9mAjOhkmNjib3bBUgK6mUY61+AHnXeSRobQkpY3/xIOS/omptw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.1.tgz",
+      "integrity": "sha512-1ZQ+yjnxc698R5h9Yje9CASapzAZr7aYDkJDdERg9xg2hOEY0vRJwskOaJAXq8N/eLavzvW4g564YAfq6zMn/A==",
       "requires": {
         "JSONStream": "^1.3.4",
         "bluebird": "^3.5.1",
         "figgy-pudding": "^3.4.1",
         "lru-cache": "^5.1.1",
         "make-fetch-happen": "^5.0.0",
-        "npm-package-arg": "^6.1.0"
+        "npm-package-arg": "^6.1.0",
+        "safe-buffer": "^5.2.0"
       }
     },
     "npm-run-path": {
@@ -15601,9 +15584,9 @@
       }
     },
     "rxjs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz",
-      "integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.3.tgz",
+      "integrity": "sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==",
       "dev": true,
       "requires": {
         "tslib": "^1.9.0"
@@ -16792,13 +16775,13 @@
       }
     },
     "tar": {
-      "version": "4.4.10",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.10.tgz",
-      "integrity": "sha512-g2SVs5QIxvo6OLp0GudTqEf05maawKUxXru104iaayWA09551tFCTI8f1Asb4lPfkBr91k07iL4c11XO3/b0tA==",
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.11.tgz",
+      "integrity": "sha512-iI4zh3ktLJKaDNZKZc+fUONiQrSn9HkCFzamtb7k8FFmVilHVob7QsLX/VySAW8lAviMzMbFw4QtFb4errwgYA==",
       "requires": {
         "chownr": "^1.1.1",
         "fs-minipass": "^1.2.5",
-        "minipass": "^2.3.5",
+        "minipass": "^2.6.4",
         "minizlib": "^1.2.1",
         "mkdirp": "^0.5.0",
         "safe-buffer": "^5.1.2",
@@ -17697,9 +17680,9 @@
       }
     },
     "vue-clipboard2": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.0.tgz",
-      "integrity": "sha512-6/Y9NJErWb4LNBLMgsJSdKb7KpF6/jqXagvKlYut6VQzQsNj6515FpwH0r5hhmeJMqaPzf1kxAw8L8Qvw/QBJQ==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
+      "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
       "requires": {
         "clipboard": "^2.0.0"
       }
@@ -17752,9 +17735,9 @@
       "dev": true
     },
     "vue-i18n": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.14.0.tgz",
-      "integrity": "sha512-utI1Rvc8i+fmmUkkKRmHaf4QQ87s7rGVL5ZZLsKvvRzmgaIr1l+GfGxxxRmsZxHpPlgeB8OxoUZ4noqZgDL6xg=="
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.14.1.tgz",
+      "integrity": "sha512-uHzw5GTFyf/TmjJXveSl3L4CG61KI4lvhKOQvx8W4Y8P2LZ3v3l/qw4KRs1C6pWyjkfY9p0rezYNFO5YzMEQ8A=="
     },
     "vue-i18n-extract": {
       "version": "0.4.14",
diff --git a/ui/package.json b/ui/package.json
index fc7d2fc670d..312badcc941 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.10.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.22",
-    "@fortawesome/free-brands-svg-icons": "^5.10.2",
-    "@fortawesome/free-regular-svg-icons": "^5.10.2",
-    "@fortawesome/free-solid-svg-icons": "^5.10.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.24",
+    "@fortawesome/free-brands-svg-icons": "^5.11.1",
+    "@fortawesome/free-regular-svg-icons": "^5.11.1",
+    "@fortawesome/free-solid-svg-icons": "^5.11.1",
     "@fortawesome/vue-fontawesome": "^0.1.7",
     "ant-design-vue": "~1.3.16",
     "axios": "^0.19.0",
@@ -26,14 +26,14 @@
     "md5": "^2.2.1",
     "moment": "^2.24.0",
     "node-emoji": "^1.10.0",
-    "npm-check-updates": "^3.1.21",
+    "npm-check-updates": "^3.1.23",
     "nprogress": "^0.2.0",
     "viser-vue": "^2.4.6",
     "vue": "^2.6.10",
-    "vue-clipboard2": "^0.3.0",
+    "vue-clipboard2": "^0.3.1",
     "vue-cropper": "0.4.9",
     "vue-flag-icon": "^1.0.6",
-    "vue-i18n": "^8.14.0",
+    "vue-i18n": "^8.14.1",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.1.3",
     "vue-svg-component-runtime": "^1.0.1",
@@ -50,11 +50,10 @@
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babel-plugin-import": "^1.12.1",
-    "eslint": "^6.3.0",
+    "eslint": "^6.4.0",
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-vue": "^5.2.3",
     "less": "^3.10.3",
-    "@babel/polyfill": "^7.4.4",
     "@kazupon/vue-i18n-loader": "^0.4.1",
     "less-loader": "^5.0.0",
     "vue-cli-plugin-i18n": "^0.6.0",
diff --git a/ui/src/components/widgets/CardView.vue b/ui/src/components/widgets/CardView.vue
new file mode 100644
index 00000000000..547860cafd1
--- /dev/null
+++ b/ui/src/components/widgets/CardView.vue
@@ -0,0 +1,66 @@
+<template>
+  <a-row :gutter="12">
+    <a-col v-for="item in items" :md="24" :lg="6" :key="item.id">
+      <a-card
+        hoverable
+        style="margin-bottom: 12px">
+        <template class="ant-card-actions" slot="actions">
+          <a-icon type="edit" />
+          <a-icon type="setting" />
+          <a-icon type="ellipsis" />
+        </template>
+        <a-card-meta>
+          <div slot="avatar">
+            <a-icon :type="$route.meta.icon" style="padding-right: 5px" />
+          </div>
+          <div slot="title">
+            <router-link :to="{ path: $route.path + '/' + item.id }" v-if="item.id">{{ item.name || item.displayname }}</router-link>
+            <span v-else>{{ item.name }}</span>
+          </div>
+          <div slot="description" style="height: 80px">
+            <status :text="item.state" displayText />
+            <div v-if="item.ipaddress">
+              <a-icon type="wifi" style="padding-right: 5px" />
+              <router-link :to="{ path: $route.path + '/' + item.id }">{{ item.ipaddress }}</router-link>
+            </div>
+            <div v-if="item.vmname">
+              <a-icon type="desktop" style="padding-right: 5px" />
+              <router-link :to="{ path: '/vm/' + item.virtualmachineid }">{{ item.vmname }}</router-link>
+            </div>
+            <div v-if="item.zonename">
+              <a-icon type="table" style="padding-right: 5px" />
+              <router-link :to="{ path: '/zone/' + item.zoneid }">{{ item.zonename }}</router-link>
+            </div>
+          </div>
+        </a-card-meta>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+
+import ChartCard from '@/components/chart/ChartCard'
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'CardView',
+  components: {
+    ChartCard,
+    Status
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/components/widgets/ListView.vue b/ui/src/components/widgets/ListView.vue
new file mode 100644
index 00000000000..9d491d99730
--- /dev/null
+++ b/ui/src/components/widgets/ListView.vue
@@ -0,0 +1,116 @@
+<template>
+  <a-table
+    :size="columns.length > 12 ? 'small' : 'medium'"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="items"
+    :rowKey="record => record.id"
+    :scroll="{ x: '100%' }"
+    :pagination="{ position: 'bottom', size: 'small', showSizeChanger: true }"
+    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+    :rowClassName="getRowClassName"
+  >
+    <template slot="footer">
+      <span v-if="hasSelected">
+        {{ `Selected ${selectedRowKeys.length} items` }}
+      </span>
+    </template>
+
+    <a slot="name" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
+      <span v-else>{{ text }}</span>
+    </a>
+    <a slot="displayname" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+    </a>
+    <a slot="username" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+    </a>
+    <a slot="ipaddress" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+    </a>
+    <a slot="vmname" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
+    </a>
+    <template slot="state" slot-scope="text">
+      <status :text="text" />
+    </template>
+
+    <a slot="account" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/account/' + record.accountid }" v-if="record.accountid">{{ text }}</router-link>
+      <router-link :to="{ path: '/account', query: { name: record.account } }" v-else>{{ text }}</router-link>
+    </a>
+    <a slot="domain" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/domain/' + record.domainid }">{{ text }}</router-link>
+    </a>
+    <a slot="zonename" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
+    </a>
+
+    <a slot="guestnetworkname" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
+    </a>
+  </a-table>
+</template>
+
+<script>
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'ListView',
+  components: {
+    Status
+  },
+  props: {
+    columns: {
+      type: Array,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      selectedRowKeys: []
+    }
+  },
+  computed: {
+    hasSelected () {
+      return this.selectedRowKeys.length > 0
+    }
+  },
+  methods: {
+    getRowClassName (record, index) {
+      if (index % 2 === 0) {
+        return 'dark-row'
+      }
+      return 'light-row'
+    },
+    onSelectChange (selectedRowKeys) {
+      console.log('selectedRowKeys changed: ', selectedRowKeys)
+      this.selectedRowKeys = selectedRowKeys
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .ant-badge-status-dot {
+  width: 14px;
+  height: 14px;
+}
+
+/deep/ .light-row {
+  background-color: #fff;
+}
+
+/deep/ .dark-row {
+  background-color: #f9f9f9;
+}
+</style>
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index b385979b6e9..c84ae3ad950 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -119,10 +119,10 @@
     "cpuallocated": "CPU Allocated for VMs",
     "cpuallocatedghz": "Allocated",
     "cpumaxdeviation": "Deviation",
-    "cpunumber": "# of CPU Cores",
+    "cpunumber": "CPU Cores",
     "cpusockets": "The Number of CPU Sockets",
     "cpuspeed": "CPU (in MHz)",
-    "cputotal": "Total",
+    "cputotal": "Total CPU",
     "cputotalghz": "Total",
     "cpuused": "CPU Utilized",
     "cpuusedghz": "Used",
@@ -156,8 +156,8 @@
     "diskiopstotal": "IOPS",
     "diskioread": "Disk Read (IO)",
     "diskiowrite": "Disk Write (IO)",
-    "diskkbsread": "Disk Read (Bytes)",
-    "diskkbswrite": "Disk Write (Bytes)",
+    "diskkbsread": "Disk Read (KBs)",
+    "diskkbswrite": "Disk Write (KBs)",
     "diskofferingdisplaytext": "Disk Offering",
     "disksize": "Disk Size (in GB)",
     "disksizeallocated": "Disk Allocated",
@@ -351,8 +351,9 @@
     "memoryLimit": "Memory limits (MiB)",
     "memoryallocated": "Memory Allocated",
     "memoryallocatedgb": "Allocated",
+    "memoryintfreekbs": "Free Memory",
     "memorymaxdeviation": "Deviation",
-    "memorytotal": "Allocated",
+    "memorytotal": "Total Memory",
     "memorytotalgb": "Total",
     "memoryused": "Used",
     "memoryusedgb": "Used",
@@ -384,9 +385,9 @@
     "networkofferingidText": "Network Offering ID",
     "networkofferingname": "Network Offering",
     "networkrate": "Network Rate (Mb/s)",
-    "networkread": "Read",
+    "networkread": "Network Incoming",
     "networktype": "Network Type",
-    "networkwrite": "Write",
+    "networkwrite": "Network Outgoing",
     "newDiskOffering": "New Disk Offering",
     "newdiskoffering": "New Offering",
     "newsize": "New Size (GB)",