diff --git a/views/ngXosViews/hpc/src/css/main.css b/views/ngXosViews/hpc/src/css/main.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/views/ngXosViews/hpc/src/css/main.css
diff --git a/views/ngXosViews/hpc/src/index.html b/views/ngXosViews/hpc/src/index.html
new file mode 100644
index 0000000..c945c27
--- /dev/null
+++ b/views/ngXosViews/hpc/src/index.html
@@ -0,0 +1,35 @@
+<!-- browserSync -->
+<!-- bower:css -->
+<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
+<link rel="stylesheet" href="vendor/angular-chart.js/dist/angular-chart.css" />
+<!-- endbower -->
+<!-- endcss -->
+<!-- inject:css -->
+<link rel="stylesheet" href="/css/main.css">
+<link rel="stylesheet" href="/../../../xos/core/static/xosNgLib.css">
+<!-- endinject -->
+
+<div ng-app="xos.hpc" id="xosHpc" class="container-fluid">
+  <div ui-view></div>
+</div>
+
+<!-- bower:js -->
+<script src="vendor/jquery/dist/jquery.js"></script>
+<script src="vendor/angular/angular.js"></script>
+<script src="vendor/angular-mocks/angular-mocks.js"></script>
+<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
+<script src="vendor/angular-cookies/angular-cookies.js"></script>
+<script src="vendor/angular-animate/angular-animate.js"></script>
+<script src="vendor/angular-resource/angular-resource.js"></script>
+<script src="vendor/lodash/lodash.js"></script>
+<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
+<script src="vendor/Chart.js/Chart.js"></script>
+<script src="vendor/angular-chart.js/dist/angular-chart.js"></script>
+<script src="vendor/d3/d3.js"></script>
+<script src="vendor/angular-recursion/angular-recursion.js"></script>
+<!-- endbower -->
+<!-- endjs -->
+<!-- inject:js -->
+<script src="/../../../xos/core/xoslib/static/js/vendor/ngXosHelpers.js"></script>
+<script src="/.tmp/main.js"></script>
+<!-- endinject -->
\ No newline at end of file
diff --git a/views/ngXosViews/hpc/src/js/main.js b/views/ngXosViews/hpc/src/js/main.js
new file mode 100644
index 0000000..3cb769e
--- /dev/null
+++ b/views/ngXosViews/hpc/src/js/main.js
@@ -0,0 +1,107 @@
+'use strict';
+
+angular.module('xos.hpc', [
+  'ngResource',
+  'ngCookies',
+  'ui.router',
+  'xos.helpers'
+])
+.config(($stateProvider) => {
+  $stateProvider
+  .state('hpc-list', {
+    url: '/',
+    template: '<hpcs-list></hpcs-list>'
+  });
+})
+.config(function($httpProvider){
+  $httpProvider.interceptors.push('NoHyperlinks');
+})
+.service('Hpc', function($q, $http){
+  this.query = (params) => {
+    const d = $q.defer();
+
+    $http.get('/xoslib/hpcview', {params: params})
+      .then((res) => {
+        d.resolve(res.data);
+      })
+      .catch(d.reject);
+
+    return {$promise: d.promise};
+  };
+})
+.directive('hpcsList', function(){
+  return {
+    restrict: 'E',
+    scope: {},
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/hpc-list.tpl.html',
+    controller: function(Hpc){
+
+      this.routerConfig = {
+        filter: 'field',
+        order: true,
+        columns: [
+          {
+            label: 'Name',
+            prop: 'name'
+          },
+          {
+            label: 'Ip Address',
+            prop: 'ip'
+          },
+          {
+            label: 'Record Checker',
+            prop: 'watcher.DNS.msg'
+          },
+          {
+            label: 'Name Servers',
+            prop: 'nameservers',
+            type: 'arrray'
+          },
+          {
+            label: 'Dns Demux Config Age',
+            prop: 'dnsdemux_config_age'
+          },
+          {
+            label: 'Dns Redir Config Age',
+            prop: 'dnsredir_config_age'
+          }
+        ]
+      };
+
+      this.cacheConfig = {
+        filter: 'field',
+        order: true,
+        columns: [
+          {
+            label: 'Name',
+            prop: 'name'
+          },
+          {
+            label: 'Prober',
+            prop: 'watcher.HPC-hb.msg'
+          },
+          {
+            label: 'Fetcher',
+            prop: 'watcher.HPC-fetch.msg'
+          },
+          {
+            label: 'Config Age',
+            prop: 'config_age'
+          }
+        ]
+      };
+      
+      // retrieving user list
+      Hpc.query().$promise
+      .then((hpcs) => {
+        this.routers = hpcs[0].dnsdemux;
+        this.caches = hpcs[0].hpc;
+      })
+      .catch((e) => {
+        throw new Error(e);
+      });
+    }
+  };
+});
\ No newline at end of file
diff --git a/views/ngXosViews/hpc/src/sass/main.scss b/views/ngXosViews/hpc/src/sass/main.scss
new file mode 100644
index 0000000..a2e3cbe
--- /dev/null
+++ b/views/ngXosViews/hpc/src/sass/main.scss
@@ -0,0 +1,5 @@
+@import '../../../../style/sass/lib/_variables.scss';
+
+#xosHpc {
+  
+}
\ No newline at end of file
diff --git a/views/ngXosViews/hpc/src/templates/hpc-list.tpl.html b/views/ngXosViews/hpc/src/templates/hpc-list.tpl.html
new file mode 100644
index 0000000..9626563
--- /dev/null
+++ b/views/ngXosViews/hpc/src/templates/hpc-list.tpl.html
@@ -0,0 +1,14 @@
+<div class="container-fluid">
+    <div class="row">
+        <h1>Request Routers</h1>
+    </div>
+    <div class="row">
+        <xos-table config="vm.routerConfig" data="vm.routers"></xos-table>
+    </div>
+    <div class="row">
+        <h1>HyperCache</h1>
+    </div>
+    <div class="row">
+        <xos-table config="vm.cacheConfig" data="vm.caches"></xos-table>
+    </div>
+</div>
\ No newline at end of file