diff --git a/.env b/.env
index 0582fd1e34..04cd8521ff 100644
--- a/.env
+++ b/.env
@@ -1,2 +1 @@
 VUE_APP_DATA_TIMEOUT=500
-VUE_APP_GENERAL_CONFIG=http://localhost:5681/config
diff --git a/.env.development b/.env.development
index d641ef60f3..743453e720 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 NODE_ENV=development
-VUE_APP_MOCK_API_ENABLED=true
+VUE_APP_MOCK_API_ENABLED=false
 VUE_APP_KUMA_CONFIG=/dev-api-config.json
diff --git a/src/App.vue b/src/App.vue
index 682c5e9341..0c318a8c39 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -113,6 +113,15 @@ export default {
 
             // fetch the config
             this.$store.dispatch('getConfig')
+              .then(() => {
+                const config = this.$store.getters.getConfig
+                const mode = config.mode
+
+                // set Kuma's current mode in localStorage.
+                // if the mode is `global`, this denotes that it's
+                // running in Multicluster mode.
+                localStorage.setItem('kumaMode', mode)
+              })
 
             // set the selected mesh in localStorage
             const mesh = () => {
diff --git a/src/components/Global/Header.vue b/src/components/Global/Header.vue
index 4eb8c471bb..cbc034286b 100644
--- a/src/components/Global/Header.vue
+++ b/src/components/Global/Header.vue
@@ -21,10 +21,18 @@
           v-if="showStatus"
           class="py-1 md:py-0 md:px-4"
         >
-          <status
-            :active="guiStatus"
-            :content="statusContent"
-          />
+          <status :active="guiStatus">
+            <template slot="content">
+              <span>{{ statusContent }}</span>
+              <KBadge
+                v-if="multicluster"
+                appearance="success"
+                class="status-badge"
+              >
+                Multicluster
+              </KBadge>
+            </template>
+          </status>
         </div>
       </div>
     </div>
@@ -52,7 +60,9 @@ export default {
       // this checks the status of the API itself
       status: 'getStatus',
       // the currently selected mesh
-      currentMesh: 'getSelectedMesh'
+      currentMesh: 'getSelectedMesh',
+      // the status of multicluster
+      multicluster: 'getMulticlusterStatus'
     }),
     showStatus () {
       return !this.$route.meta.hideStatus && this.status === 'OK'
@@ -63,8 +73,11 @@ export default {
   },
   methods: {
     getGuiStatus () {
+      // these localStorage items are set on app launch
       const env = localStorage.getItem('kumaEnv')
       const apiUrl = localStorage.getItem('kumaApiUrl')
+
+      // get the other values from our state
       const tagline = this.$store.getters.getTagline
       const version = this.$store.getters.getVersion
 
@@ -116,6 +129,23 @@ export default {
   margin-left: auto;
 }
 
+.status-badge {
+  --KBadgeWidth: auto;
+  --KBadgePaddingX: var(--spacing-sm);
+}
+
+@media screen and (min-width: 990px) {
+  .status-badge {
+    margin-left: var(--spacing-sm);
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .status-badge {
+    margin-top: var(--spacing-sm);
+  }
+}
+
 @media screen and (max-width: 599px) {
   .upgrade-check-wrapper {
     display: none;
diff --git a/src/components/Sidebar/MenuList.vue b/src/components/Sidebar/MenuList.vue
index ad9ff1a8b2..32ec13513b 100644
--- a/src/components/Sidebar/MenuList.vue
+++ b/src/components/Sidebar/MenuList.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="menu-list">
-    <template v-for="item in menuItems">
+    <template v-for="item in filteredItems">
       <li
         v-if="!item.hidden"
         :key="item.name"
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 export default {
   name: 'MenuList',
@@ -45,7 +45,22 @@ export default {
     }
   },
   computed: {
-    ...mapState(['selectedMesh'])
+    ...mapState(['selectedMesh']),
+    ...mapGetters({
+      multicluster: 'getMulticlusterStatus'
+    }),
+    filteredItems () {
+      const items = this.menuItems
+      const mode = this.multicluster
+
+      return items.filter(item => {
+        if (mode) {
+          return true
+        }
+
+        return (typeof item.multicluster === 'undefined' || item.multicluster === false)
+      })
+    }
   },
   watch: {
     selectedMesh () {
diff --git a/src/components/Sidebar/SidebarMenu.vue b/src/components/Sidebar/SidebarMenu.vue
index 8952f0d286..60d37c51b4 100644
--- a/src/components/Sidebar/SidebarMenu.vue
+++ b/src/components/Sidebar/SidebarMenu.vue
@@ -74,7 +74,7 @@ export default {
   margin-bottom: 18px;
 
   &.first {
-    margin: 18px 0 0;
+    margin: 18px 0;
   }
 
   &.last {
diff --git a/src/components/Sidebar/menu.js b/src/components/Sidebar/menu.js
index f5c2cd63c6..4524a1f257 100644
--- a/src/components/Sidebar/menu.js
+++ b/src/components/Sidebar/menu.js
@@ -17,13 +17,41 @@ export default {
           link: '/meshes',
           title: false,
           pathFlip: true
-          // root: true
         },
+        {
+          name: 'Remote CPs',
+          link: '/remote-cp',
+          title: false,
+          root: true
+          // multicluster: true
+        }
+      ]
+    },
+    {
+      name: 'Dataplane Types',
+      id: 'dataplanes',
+      skipRbac: true,
+      items: [
         {
           name: 'Dataplanes',
+          title: true
+        },
+        {
+          name: 'All Dataplanes',
           link: '/dataplanes',
           title: false
-          // root: true
+        },
+        {
+          name: 'Ingress',
+          link: '/ingress-dataplanes',
+          title: false
+          // multicluster: true
+        },
+        {
+          name: 'Gateway',
+          link: '/gateway-dataplanes',
+          title: false
+          // multicluster: true
         }
       ]
     },
diff --git a/src/components/Skeletons/DataOverview.vue b/src/components/Skeletons/DataOverview.vue
index fdcf5df442..faa4d6d130 100644
--- a/src/components/Skeletons/DataOverview.vue
+++ b/src/components/Skeletons/DataOverview.vue
@@ -65,7 +65,7 @@
           >
             <div
               class="entity-status"
-              :class="{ 'is-offline': (rowValue.toLowerCase() === 'offline') }"
+              :class="{ 'is-offline': (rowValue.toString().toLowerCase() === 'offline' || rowValue === false) }"
             >
               <span class="entity-status__dot" />
               <span class="entity-status__label">{{ rowValue }}</span>
@@ -309,10 +309,7 @@ export default {
   },
   methods: {
     tableRowHandler (e, row, type) {
-      this.$emit('tableAction', {
-        name: row.name,
-        mesh: row.mesh
-      })
+      this.$emit('tableAction', row)
     }
   }
 }
diff --git a/src/components/Skeletons/YamlView.vue b/src/components/Skeletons/YamlView.vue
index a4f4df983c..cfc672f0a9 100644
--- a/src/components/Skeletons/YamlView.vue
+++ b/src/components/Skeletons/YamlView.vue
@@ -180,7 +180,7 @@ export default {
       return !this.isEmpty && !this.hasError && !this.isLoading
     },
     activeTab: {
-      get (test) {
+      get () {
         const env = this.environment
 
         return {
@@ -206,6 +206,7 @@ export default {
         delete sourceObj.type
         delete sourceObj.name
 
+        newObj.apiVersion = 'kuma.io/v1alpha1'
         newObj.kind = type
         newObj.metadata = {
           name: name
diff --git a/src/components/Utils/EntityURLControl.vue b/src/components/Utils/EntityURLControl.vue
index 44ec7c8121..3d6d676803 100644
--- a/src/components/Utils/EntityURLControl.vue
+++ b/src/components/Utils/EntityURLControl.vue
@@ -1,22 +1,27 @@
 <template>
-  <KClipboardProvider v-slot="{ copyToClipboard }">
-    <KPop placement="bottom">
-      <KButton
-        appearance="secondary"
-        size="small"
-        @click="() => { copyToClipboard(url) }"
-      >
-        <KIcon
-          slot="icon"
-          icon="externalLink"
-        />
-        {{ copyButtonText }}
-      </KButton>
-      <div slot="content">
-        <p>{{ confirmationText }}</p>
-      </div>
-    </KPop>
-  </KClipboardProvider>
+  <div class="entity-url-control">
+    <KClipboardProvider
+      v-if="shouldDisplay"
+      v-slot="{ copyToClipboard }"
+    >
+      <KPop placement="bottom">
+        <KButton
+          appearance="secondary"
+          size="small"
+          @click="() => { copyToClipboard(url) }"
+        >
+          <KIcon
+            slot="icon"
+            icon="externalLink"
+          />
+          {{ copyButtonText }}
+        </KButton>
+        <div slot="content">
+          <p>{{ confirmationText }}</p>
+        </div>
+      </KPop>
+    </KClipboardProvider>
+  </div>
 </template>
 
 <script>
@@ -35,6 +40,19 @@ export default {
       type: String,
       default: 'URL copied to clipboard!'
     }
+  },
+  computed: {
+    shouldDisplay () {
+      const mesh = this.$route.params.mesh || null
+
+      // we only want to display the copy button when the user has filtered
+      // the view by mesh and not all meshes
+      if (mesh && mesh !== 'all') {
+        return true
+      }
+
+      return false
+    }
   }
 }
 </script>
diff --git a/src/components/Utils/Status.vue b/src/components/Utils/Status.vue
index be0e988d90..8147b1cd6b 100644
--- a/src/components/Utils/Status.vue
+++ b/src/components/Utils/Status.vue
@@ -4,10 +4,9 @@
       class="status__dot"
       :class="{ 'is-active': active }"
     />
-    <span
-      class="status__label"
-      v-html="content"
-    />
+    <span class="status__label">
+      <slot name="content" />
+    </span>
   </div>
 </template>
 
@@ -27,7 +26,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .status {
   display: flex;
   align-items: center;
@@ -46,9 +45,13 @@ export default {
   border-radius: 100%;
   margin-right: 6px;
   background-color: var(--status-color);
+
+  &.is-active {
+    --status-color: var(--green-1);
+  }
 }
 
-.status__dot.is-active {
-  --status-color: var(--green-1);
+.status__label {
+
 }
 </style>
diff --git a/src/router.js b/src/router.js
index 1220aa96f8..ef6307ccfe 100644
--- a/src/router.js
+++ b/src/router.js
@@ -92,7 +92,7 @@ export default (store) => {
     },
     // App
 
-    // meshes
+    // overview
     {
       path: '/overview',
       alias: '/',
@@ -103,6 +103,16 @@ export default (store) => {
         breadcrumb: 'Overview'
       }
     },
+    // remote CPs
+    {
+      path: '/remote-cp',
+      name: 'remote-cp',
+      component: () => import(/* webpackChunkName: "remote-cp" */ '@/views/Entities/RemoteCP'),
+      meta: {
+        title: 'Remote CPs',
+        breadcrumb: 'Remote CPs'
+      }
+    },
     // all Meshes
     {
       path: '/meshes',
@@ -138,7 +148,7 @@ export default (store) => {
       params: { mesh: ':mesh' },
       component: () => import(/* webpackChunkName: "shell-default" */ '@/views/Shell'),
       children: [
-        // dataplanes
+        // all dataplanes
         {
           path: 'dataplanes',
           name: 'dataplanes',
@@ -148,6 +158,26 @@ export default (store) => {
           },
           component: () => import(/* webpackChunkName: "dataplanes" */ '@/views/Entities/Dataplanes')
         },
+        // ingress dataplanes
+        {
+          path: 'ingress-dataplanes',
+          name: 'ingress-dataplanes',
+          component: () => import(/* webpackChunkName: "dataplanes-ingress" */ '@/views/Entities/IngressDataplanes'),
+          meta: {
+            title: 'Ingress Dataplanes',
+            breadcrumb: 'Ingress Dataplanes'
+          }
+        },
+        // gateway dataplanes
+        {
+          path: 'gateway-dataplanes',
+          name: 'gateway-dataplanes',
+          component: () => import(/* webpackChunkName: "dataplanes-gateway" */ '@/views/Entities/GatewayDataplanes'),
+          meta: {
+            title: 'Gateway Dataplanes',
+            breadcrumb: 'Gateway Dataplanes'
+          }
+        },
         // traffic permissions
         {
           path: 'traffic-permissions',
diff --git a/src/services/kuma.js b/src/services/kuma.js
index fb691c754a..0eb0527f82 100644
--- a/src/services/kuma.js
+++ b/src/services/kuma.js
@@ -25,7 +25,7 @@ export default class Kuma {
   }
 
   getConfig () {
-    return this.client.getConfig()
+    return this.client.getConfig('/')
   }
 
   /**
@@ -35,6 +35,15 @@ export default class Kuma {
     return this.client.get(`/${model}`, { params })
   }
 
+  /**
+   * Multicluster
+   */
+
+  // get local CPs
+  getLocalCPs (params) {
+    return this.client.get('/status/clusters', { params })
+  }
+
   /**
    * Meshes
    */
@@ -67,11 +76,20 @@ export default class Kuma {
     return this.client.get(`/meshes/${name}/dataplanes/${dataplane}`, { params })
   }
 
-  // get dataplane overviews by mesh
-  getDataplaneOverviewsFromMesh (mesh, dataplane, params) {
+  /**
+   * Dataplane Overviews
+   */
+
+  // get a specific dataplane overview from its associated mesh
+  getDataplaneOverviewFromMesh (mesh, dataplane, params) {
     return this.client.get(`/meshes/${mesh}/dataplanes+insights/${dataplane}`, { params })
   }
 
+  // get all dataplane overviews from a specific mesh
+  getAllDataplaneOverviewsFromMesh (mesh, params) {
+    return this.client.get(`/meshes/${mesh}/dataplanes+insights`, { params })
+  }
+
   // get all dataplane overviews
   getAllDataplaneOverviews (params) {
     return this.client.get('/dataplanes+insights', { params })
diff --git a/src/services/mock.js b/src/services/mock.js
index 75a593c3eb..0d62f4d1e2 100644
--- a/src/services/mock.js
+++ b/src/services/mock.js
@@ -5,99 +5,144 @@ export default class Mock {
     const mockDelay = 0
 
     this.mock = new MockAdapter(axios, { delayResponse: mockDelay })
-    this.mock.injectMocks = () => { return this.mock }
+    this.mock.injectMocks = () => {
+      return this.mock
+    }
   }
 
   setupPluginMocks () {
     this.mock
       .injectMocks() // additional mocks added from RestClient
-      .onAny().passThrough()
+      .onAny()
+      .passThrough()
   }
 
   setupMockEndpoints () {
-    console.warn('%c ✨You are mocking api requests.',
-      'background: gray; color: white; display: block; padding: 0.25rem;')
+    console.warn(
+      '%c ✨You are mocking api requests.',
+      'background: gray; color: white; display: block; padding: 0.25rem;'
+    )
 
     this.mock
-      // .onGet('/meshes').reply(200, {
-      //   total: 3,
-      //   items: [
-      //     {
-      //       mtls: {
-      //         ca: {
-      //           builtin: {}
-      //         }
-      //       },
-      //       name: 'default',
-      //       type: 'Mesh'
-      //     },
-      //     {
-      //       mtls: {
-      //         ca: {
-      //           builtin: {}
-      //         }
-      //       },
-      //       name: 'mesh-01',
-      //       type: 'Mesh'
-      //     },
-      //     {
-      //       mtls: {
-      //         ca: {
-      //           builtin: {}
-      //         }
-      //       },
-      //       name: 'kong-mania-12',
-      //       type: 'Mesh'
-      //     },
-      //     {
-      //       mtls: {
-      //         ca: {
-      //           builtin: {}
-      //         }
-      //       },
-      //       name: 'hello-world',
-      //       type: 'Mesh'
-      //     }
-      //   ],
-      //   next: null
-      // })
-      // .onGet('/meshes/default').reply(200, {
-      //   type: 'Mesh',
-      //   name: 'default',
-      //   mtls: {
-      //     ca: {
-      //       builtin: {}
-      //     }
-      //   }
-      // })
-      // .onGet('/meshes/mesh-01').reply(200, {
-      //   type: 'Mesh',
-      //   name: 'mesh-01',
-      //   mtls: {
-      //     ca: {
-      //       builtin: {}
-      //     }
-      //   }
-      // })
-      // .onGet('/meshes/kong-mania-12').reply(200, {
-      //   type: 'Mesh',
-      //   name: 'kong-mania-12',
-      //   mtls: {
-      //     ca: {
-      //       builtin: {}
-      //     }
-      //   }
-      // })
-      // .onGet('/meshes/hello-world').reply(200, {
-      //   type: 'Mesh',
-      //   name: 'hello-world',
-      //   mtls: {
-      //     ca: {
-      //       builtin: {}
-      //     }
-      //   }
-      // })
-      .onGet('/meshes/default/dataplanes').reply(200, {
+      .onGet('/meshes')
+      .reply(200, {
+        total: 3,
+        items: [
+          {
+            type: 'Mesh',
+            name: 'default',
+            creationTime: '2020-06-19T12:18:02.097986-04:00',
+            modificationTime: '2020-06-19T12:18:02.097986-04:00'
+          },
+          {
+            type: 'Mesh',
+            name: 'mesh-01',
+            creationTime: '2020-06-19T12:18:02.097986-04:00',
+            modificationTime: '2020-06-19T12:18:02.097986-04:00',
+            mtls: {
+              enabledBackend: 'ca-1',
+              backends: [
+                {
+                  name: 'ca-1',
+                  type: 'provided',
+                  dpCert: {
+                    rotation: {
+                      expiration: '1d'
+                    }
+                  },
+                  conf: {
+                    cert: {
+                      secret: 'name-of-secret'
+                    },
+                    key: {
+                      secret: 'name-of-secret'
+                    }
+                  }
+                }
+              ]
+            }
+          },
+          {
+            type: 'Mesh',
+            name: 'kong-mania-12',
+            creationTime: '2020-06-19T12:18:02.097986-04:00',
+            modificationTime: '2020-06-19T12:18:02.097986-04:00'
+          },
+          {
+            type: 'Mesh',
+            name: 'hello-world',
+            creationTime: '2020-06-19T12:18:02.097986-04:00',
+            modificationTime: '2020-06-19T12:18:02.097986-04:00'
+          }
+        ],
+        next: null
+      })
+      .onGet('/meshes/default')
+      .reply(200, {
+        name: 'default',
+        type: 'Mesh',
+        creationTime: '2020-06-19T12:18:02.097986-04:00',
+        modificationTime: '2020-06-19T12:18:02.097986-04:00',
+        mtls: {
+          ca: {
+            builtin: {}
+          }
+        }
+      })
+      .onGet('/meshes/mesh-01')
+      .reply(200, {
+        type: 'Mesh',
+        name: 'mesh-01',
+        creationTime: '2020-06-19T12:18:02.097986-04:00',
+        modificationTime: '2020-06-19T12:18:02.097986-04:00',
+        mtls: {
+          enabledBackend: 'ca-1',
+          backends: [
+            {
+              name: 'ca-1',
+              type: 'provided',
+              dpCert: {
+                rotation: {
+                  expiration: '1d'
+                }
+              },
+              conf: {
+                cert: {
+                  secret: 'name-of-secret'
+                },
+                key: {
+                  secret: 'name-of-secret'
+                }
+              }
+            }
+          ]
+        }
+      })
+      .onGet('/meshes/kong-mania-12')
+      .reply(200, {
+        type: 'Mesh',
+        name: 'kong-mania-12',
+        creationTime: '2020-06-19T12:18:02.097986-04:00',
+        modificationTime: '2020-06-19T12:18:02.097986-04:00',
+        mtls: {
+          ca: {
+            builtin: {}
+          }
+        }
+      })
+      .onGet('/meshes/hello-world')
+      .reply(200, {
+        type: 'Mesh',
+        name: 'hello-world',
+        creationTime: '2020-06-19T12:18:02.097986-04:00',
+        modificationTime: '2020-06-19T12:18:02.097986-04:00',
+        mtls: {
+          ca: {
+            builtin: {}
+          }
+        }
+      })
+      .onGet('/dataplanes').reply(200, {
         total: 2,
         items: [
           {
@@ -115,54 +160,306 @@ export default class Mock {
         ],
         next: null
       })
-      .onGet('/meshes/default/dataplanes/test-dp-02').reply(200, {
+      .onGet('/meshes/default/dataplanes')
+      .reply(200, {
+        total: 2,
         items: [
+          {
+            mesh: 'default',
+            name: 'hello-world-foobar-002',
+            type: 'Dataplane',
+            networking: {
+              address: '10.0.0.1',
+              gateway: {
+                tags: {
+                  service: 'kong'
+                }
+              },
+              outbound: {
+                port: '33033',
+                service: 'backend'
+              }
+            }
+          },
           {
             mesh: 'default',
             name: 'test-dp-02',
-            networking: {},
-            type: 'Dataplane'
+            type: 'Dataplane',
+            networking: {
+              address: '192.168.64.8',
+              inbound: [
+                {
+                  port: 10001
+                }
+              ],
+              ingress: [
+                {
+                  service: 'frontend.kuma-demo.svc:8080',
+                  tags: {
+                    app: 'kuma-demo-frontend',
+                    env: 'prod',
+                    'pod-template-hash': '69c9fd4bd',
+                    protocol: 'http',
+                    version: 'v8'
+                  }
+                },
+                {
+                  service: 'backend.kuma-demo.svc:3001',
+                  tags: {
+                    app: 'kuma-demo-backend',
+                    env: 'prod',
+                    'pod-template-hash': 'd7cb6b576',
+                    protocol: 'http',
+                    version: 'v0'
+                  }
+                },
+                {
+                  service: 'postgres.kuma-demo.svc:5432',
+                  tags: {
+                    app: 'postgres',
+                    'pod-template-hash': '65df766577',
+                    protocol: 'tcp'
+                  }
+                },
+                {
+                  service: 'redis.kuma-demo.svc:6379',
+                  tags: {
+                    app: 'redis',
+                    'pod-template-hash': '78ff699f7',
+                    protocol: 'tcp',
+                    role: 'master',
+                    tier: 'backend'
+                  }
+                }
+              ]
+            }
           }
-        ]
+        ],
+        next: null
       })
-      .onGet('/meshes/default/dataplanes/test-dp-02').reply(200, {
+      .onGet('/meshes/default/dataplanes/test-dp-02')
+      .reply(200, {
         type: 'Dataplane',
         mesh: 'default',
         name: 'test-dp-02',
+        networking: {
+          address: '192.168.64.8',
+          inbound: [
+            {
+              port: 10001
+            }
+          ],
+          ingress: [
+            {
+              service: 'frontend.kuma-demo.svc:8080',
+              tags: {
+                app: 'kuma-demo-frontend',
+                env: 'prod',
+                'pod-template-hash': '69c9fd4bd',
+                protocol: 'http',
+                version: 'v8'
+              }
+            },
+            {
+              service: 'backend.kuma-demo.svc:3001',
+              tags: {
+                app: 'kuma-demo-backend',
+                env: 'prod',
+                'pod-template-hash': 'd7cb6b576',
+                protocol: 'http',
+                version: 'v0'
+              }
+            },
+            {
+              service: 'postgres.kuma-demo.svc:5432',
+              tags: {
+                app: 'postgres',
+                'pod-template-hash': '65df766577',
+                protocol: 'tcp'
+              }
+            },
+            {
+              service: 'redis.kuma-demo.svc:6379',
+              tags: {
+                app: 'redis',
+                'pod-template-hash': '78ff699f7',
+                protocol: 'tcp',
+                role: 'master',
+                tier: 'backend'
+              }
+            }
+          ]
+        }
+      })
+      .onGet('/meshes/default/dataplanes/ingress-dp-test-123')
+      .reply(200, {
+        type: 'Dataplane',
+        mesh: 'default',
+        name: 'ingress-dp-test-123',
         creationTime: '2020-06-02T09:33:09.208372-04:00',
         modificationTime: '2020-06-02T09:33:09.208372-04:00',
         networking: {
-          address: '10.0.0.1',
+          address: '192.168.64.8',
           inbound: [
             {
-              port: 10000,
-              servicePort: 9000,
+              port: 10001
+            }
+          ],
+          ingress: [
+            {
+              service: 'frontend.kuma-demo.svc:8080',
               tags: {
-                env: 'dev',
-                service: 'kuma-example-backend',
-                tag01: 'value01',
-                reallyLongTagLabelHere: 'a-really-long-tag-value-here'
+                app: 'kuma-demo-frontend',
+                env: 'prod',
+                'pod-template-hash': '69c9fd4bd',
+                protocol: 'http',
+                version: 'v8'
+              }
+            },
+            {
+              service: 'backend.kuma-demo.svc:3001',
+              tags: {
+                app: 'kuma-demo-backend',
+                env: 'prod',
+                'pod-template-hash': 'd7cb6b576',
+                protocol: 'http',
+                version: 'v0'
+              }
+            },
+            {
+              service: 'postgres.kuma-demo.svc:5432',
+              tags: {
+                app: 'postgres',
+                'pod-template-hash': '65df766577',
+                protocol: 'tcp'
+              }
+            },
+            {
+              service: 'redis.kuma-demo.svc:6379',
+              tags: {
+                app: 'redis',
+                'pod-template-hash': '78ff699f7',
+                protocol: 'tcp',
+                role: 'master',
+                tier: 'backend'
               }
             }
           ]
         }
       })
-      .onGet('/meshes/default/dataplanes+insights/test-dp-02').reply(200, {
+      .onGet('/dataplanes+insights', { params: { ingress: true } }).reply(200, {
+        total: 2,
+        items: [
+          {
+            type: 'DataplaneOverview',
+            mesh: 'default',
+            name: 'ingress-dp-test-123',
+            creationTime: '2020-06-29T09:27:46.05334-04:00',
+            modificationTime: '2020-06-29T09:27:46.05334-04:00',
+            dataplane: {
+              networking: {
+                address: '192.168.64.8',
+                inbound: [
+                  {
+                    port: 10001
+                  }
+                ],
+                ingress: [
+                  {
+                    service: 'frontend.kuma-demo.svc:8080',
+                    tags: {
+                      app: 'kuma-demo-frontend',
+                      env: 'prod',
+                      'pod-template-hash': '69c9fd4bd',
+                      protocol: 'http',
+                      version: 'v8'
+                    }
+                  },
+                  {
+                    service: 'backend.kuma-demo.svc:3001',
+                    tags: {
+                      app: 'kuma-demo-backend',
+                      env: 'prod',
+                      'pod-template-hash': 'd7cb6b576',
+                      protocol: 'http',
+                      version: 'v0'
+                    }
+                  },
+                  {
+                    service: 'postgres.kuma-demo.svc:5432',
+                    tags: {
+                      app: 'postgres',
+                      'pod-template-hash': '65df766577',
+                      protocol: 'tcp'
+                    }
+                  },
+                  {
+                    service: 'redis.kuma-demo.svc:6379',
+                    tags: {
+                      app: 'redis',
+                      'pod-template-hash': '78ff699f7',
+                      protocol: 'tcp',
+                      role: 'master',
+                      tier: 'backend'
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ],
+        next: null
+      })
+      .onGet('/meshes/default/dataplanes+insights/ingress-dp-test-123')
+      .reply(200, {
         type: 'DataplaneOverview',
         mesh: 'default',
-        name: 'test-dp-02',
+        name: 'ingress-dp-test-123',
         dataplane: {
           networking: {
-            address: '172.21.0.5',
+            address: '192.168.64.8',
             inbound: [
               {
-                port: 7070,
-                servicePort: 7070,
+                port: 10001
+              }
+            ],
+            ingress: [
+              {
+                service: 'frontend.kuma-demo.svc:8080',
                 tags: {
-                  env: 'dev',
-                  service: 'kuma-example-backend',
-                  tag01: 'value01',
-                  reallyLongTagLabelHere: 'a-really-long-tag-value-here'
+                  app: 'kuma-demo-frontend',
+                  env: 'prod',
+                  'pod-template-hash': '69c9fd4bd',
+                  protocol: 'http',
+                  version: 'v8'
+                }
+              },
+              {
+                service: 'backend.kuma-demo.svc:3001',
+                tags: {
+                  app: 'kuma-demo-backend',
+                  env: 'prod',
+                  'pod-template-hash': 'd7cb6b576',
+                  protocol: 'http',
+                  version: 'v0'
+                }
+              },
+              {
+                service: 'postgres.kuma-demo.svc:5432',
+                tags: {
+                  app: 'postgres',
+                  'pod-template-hash': '65df766577',
+                  protocol: 'tcp'
+                }
+              },
+              {
+                service: 'redis.kuma-demo.svc:6379',
+                tags: {
+                  app: 'redis',
+                  'pod-template-hash': '78ff699f7',
+                  protocol: 'tcp',
+                  role: 'master',
+                  tier: 'backend'
                 }
               }
             ]
@@ -198,17 +495,8 @@ export default class Mock {
           ]
         }
       })
-      .onGet('/meshes/default/dataplanes/hello-world-foobar-002').reply(200, {
-        items: [
-          {
-            mesh: 'default',
-            name: 'hello-world-foobar-002',
-            networking: {},
-            type: 'Dataplane'
-          }
-        ]
-      })
-      .onGet('/meshes/default/dataplanes/hello-world-foobar-002').reply(200, {
+      .onGet('/meshes/default/dataplanes/hello-world-foobar-002')
+      .reply(200, {
         type: 'Dataplane',
         mesh: 'default',
         name: 'hello-world-foobar-002',
@@ -230,17 +518,18 @@ export default class Mock {
           ]
         }
       })
-      .onGet('/meshes/default/dataplanes+insights/hello-world-foobar-002').reply(200, {
+      .onGet('/meshes/default/dataplanes+insights/hello-world-foobar-002')
+      .reply(200, {
         type: 'DataplaneOverview',
         mesh: 'default',
         name: 'hello-world-foobar-002',
         dataplane: {
           networking: {
-            address: '172.21.0.5',
+            address: '10.0.0.1',
             inbound: [
               {
-                port: 7070,
-                servicePort: 7070,
+                port: 10000,
+                servicePort: 9000,
                 tags: {
                   env: 'dev',
                   service: 'kuma-example-backend',
@@ -286,7 +575,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/traffic-traces').reply(200, {
+      .onGet('/meshes/default/traffic-traces')
+      .reply(200, {
         total: 2,
         items: [
           {
@@ -321,7 +611,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-traces/tt-1').reply(200, {
+      .onGet('/meshes/default/traffic-traces/tt-1')
+      .reply(200, {
         type: 'TrafficTrace',
         mesh: 'mesh-1',
         name: 'tt-1',
@@ -338,7 +629,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-traces/traffic-trace-02').reply(200, {
+      .onGet('/meshes/default/traffic-traces/traffic-trace-02')
+      .reply(200, {
         type: 'TrafficTrace',
         mesh: 'mesh-1',
         name: 'traffic-trace-02',
@@ -355,7 +647,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/traffic-traces').reply(200, {
+      .onGet('/traffic-traces')
+      .reply(200, {
         total: 5,
         items: [
           {
@@ -435,7 +728,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/health-checks').reply(200, {
+      .onGet('/meshes/default/health-checks')
+      .reply(200, {
         total: 7,
         items: [
           {
@@ -629,7 +923,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/health-checks/web-to-backend').reply(200, {
+      .onGet('/meshes/default/health-checks/web-to-backend')
+      .reply(200, {
         type: 'HealthCheck',
         mesh: 'default',
         name: 'web-to-backend',
@@ -656,7 +951,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/health-checks/web-to-banana').reply(200, {
+      .onGet('/meshes/default/health-checks/web-to-banana')
+      .reply(200, {
         type: 'HealthCheck',
         mesh: 'default',
         name: 'web-to-banana',
@@ -683,7 +979,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/health-checks/hello-health-check').reply(200, {
+      .onGet('/meshes/default/health-checks/hello-health-check')
+      .reply(200, {
         type: 'HealthCheck',
         mesh: 'default',
         name: 'hello-health-check',
@@ -710,7 +1007,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/health-checks/testing-health-checks').reply(200, {
+      .onGet('/meshes/default/health-checks/testing-health-checks')
+      .reply(200, {
         type: 'HealthCheck',
         mesh: 'default',
         name: 'testing-health-checks',
@@ -737,7 +1035,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/health-checks/health-check-0023').reply(200, {
+      .onGet('/meshes/default/health-checks/health-check-0023')
+      .reply(200, {
         type: 'HealthCheck',
         mesh: 'default',
         name: 'health-check-0023',
@@ -764,7 +1063,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/health-checks/health-check-12345').reply(200, {
+      .onGet('/meshes/default/health-checks/health-check-12345')
+      .reply(200, {
         type: 'HealthCheck',
         mesh: 'default',
         name: 'health-check-12345',
@@ -791,7 +1091,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/health-checks/foo-bar-baz-123').reply(200, {
+      .onGet('/meshes/default/health-checks/foo-bar-baz-123')
+      .reply(200, {
         type: 'HealthCheck',
         mesh: 'default',
         name: 'foo-bar-baz-123',
@@ -818,7 +1119,9 @@ export default class Mock {
           }
         }
       })
-      .onGet('/health-checks').reply(200, {
+      .onGet('/health-checks')
+      .reply(200, {
+        total: 7,
         items: [
           {
             type: 'HealthCheck',
@@ -1011,7 +1314,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/fault-injections').reply(200, {
+      .onGet('/meshes/default/fault-injections')
+      .reply(200, {
         total: 2,
         items: [
           {
@@ -1082,7 +1386,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/fault-injections/web-to-backend.kuma-system').reply(200, {
+      .onGet('/meshes/default/fault-injections/web-to-backend.kuma-system')
+      .reply(200, {
         type: 'FaultInjection',
         mesh: 'default',
         name: 'web-to-backend.kuma-system',
@@ -1115,7 +1420,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/fault-injections/fi1.kuma-system').reply(200, {
+      .onGet('/meshes/default/fault-injections/fi1.kuma-system')
+      .reply(200, {
         type: 'FaultInjection',
         mesh: 'default',
         name: 'fi1.kuma-system',
@@ -1148,7 +1454,9 @@ export default class Mock {
           }
         }
       })
-      .onGet('/fault-injections').reply(200, {
+      .onGet('/fault-injections')
+      .reply(200, {
+        total: 2,
         items: [
           {
             type: 'FaultInjection',
@@ -1218,7 +1526,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/proxytemplates').reply(200, {
+      .onGet('/proxytemplates')
+      .reply(200, {
         total: 2,
         items: [
           {
@@ -1233,14 +1542,13 @@ export default class Mock {
               }
             ],
             conf: {
-              imports: [
-                'default-proxy'
-              ],
+              imports: ['default-proxy'],
               resources: [
                 {
                   name: 'raw-name',
                   version: 'raw-version',
-                  resource: "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
+                  resource:
+                    "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
                 }
               ]
             }
@@ -1257,21 +1565,21 @@ export default class Mock {
               }
             ],
             conf: {
-              imports: [
-                'default-proxy'
-              ],
+              imports: ['default-proxy'],
               resources: [
                 {
                   name: 'raw-name',
                   version: 'raw-version',
-                  resource: "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
+                  resource:
+                    "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
                 }
               ]
             }
           }
         ]
       })
-      .onGet('/meshes/default/proxytemplates').reply(200, {
+      .onGet('/meshes/default/proxytemplates')
+      .reply(200, {
         total: 1,
         items: [
           {
@@ -1286,21 +1594,21 @@ export default class Mock {
               }
             ],
             conf: {
-              imports: [
-                'default-proxy'
-              ],
+              imports: ['default-proxy'],
               resources: [
                 {
                   name: 'raw-name',
                   version: 'raw-version',
-                  resource: "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
+                  resource:
+                    "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
                 }
               ]
             }
           }
         ]
       })
-      .onGet('/meshes/helloworld/proxytemplates').reply(200, {
+      .onGet('/meshes/helloworld/proxytemplates')
+      .reply(200, {
         total: 1,
         items: [
           {
@@ -1315,22 +1623,21 @@ export default class Mock {
               }
             ],
             conf: {
-              imports: [
-                'default-proxy'
-              ],
+              imports: ['default-proxy'],
               resources: [
                 {
                   name: 'raw-name',
                   version: 'raw-version',
-                  resource: "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
+                  resource:
+                    "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
                 }
               ]
             }
           }
         ]
       })
-      .onGet('/meshes/default/proxytemplates/pt-1').reply(200, {
-        total: 1,
+      .onGet('/meshes/default/proxytemplates/pt-1')
+      .reply(200, {
         type: 'ProxyTemplate',
         mesh: 'default',
         name: 'pt-1',
@@ -1342,19 +1649,19 @@ export default class Mock {
           }
         ],
         conf: {
-          imports: [
-            'default-proxy'
-          ],
+          imports: ['default-proxy'],
           resources: [
             {
               name: 'raw-name',
               version: 'raw-version',
-              resource: "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
+              resource:
+                "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
             }
           ]
         }
       })
-      .onGet('/meshes/helloworld/proxytemplates/pt-123').reply(200, {
+      .onGet('/meshes/helloworld/proxytemplates/pt-123')
+      .reply(200, {
         type: 'ProxyTemplate',
         mesh: 'helloworld',
         name: 'pt-123',
@@ -1366,19 +1673,19 @@ export default class Mock {
           }
         ],
         conf: {
-          imports: [
-            'default-proxy'
-          ],
+          imports: ['default-proxy'],
           resources: [
             {
               name: 'raw-name',
               version: 'raw-version',
-              resource: "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
+              resource:
+                "'@type': type.googleapis.com/envoy.api.v2.Cluster\nconnectTimeout: 5s\nloadAssignment:\n  clusterName: localhost:8443\n  endpoints:\n    - lbEndpoints:\n        - endpoint:\n            address:\n              socketAddress:\n                address: 127.0.0.1\n                portValue: 8443\nname: localhost:8443\ntype: STATIC\n"
             }
           ]
         }
       })
-      .onGet('/meshes/default/traffic-logs').reply(200, {
+      .onGet('/meshes/default/traffic-logs')
+      .reply(200, {
         total: 2,
         items: [
           {
@@ -1429,7 +1736,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-logs/tl-1').reply(200, {
+      .onGet('/meshes/default/traffic-logs/tl-1')
+      .reply(200, {
         type: 'TrafficLog',
         mesh: 'mesh-1',
         name: 'tl-1',
@@ -1454,7 +1762,8 @@ export default class Mock {
           backend: 'file'
         }
       })
-      .onGet('/meshes/default/traffic-logs/tl-123').reply(200, {
+      .onGet('/meshes/default/traffic-logs/tl-123')
+      .reply(200, {
         type: 'TrafficLog',
         mesh: 'mesh-1',
         name: 'tl-123',
@@ -1479,7 +1788,8 @@ export default class Mock {
           backend: 'file'
         }
       })
-      .onGet('/traffic-permissions').reply(200, {
+      .onGet('/traffic-permissions')
+      .reply(200, {
         total: 3,
         items: [
           {
@@ -1560,12 +1870,13 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-permissions').reply(200, {
+      .onGet('/meshes/mesh-01/traffic-permissions')
+      .reply(200, {
         total: 3,
         items: [
           {
             type: 'TrafficPermission',
-            mesh: 'default',
+            mesh: 'mesh-01',
             name: 'tp-1',
             sources: [
               {
@@ -1584,7 +1895,7 @@ export default class Mock {
           },
           {
             type: 'TrafficPermission',
-            mesh: 'default',
+            mesh: 'mesh-01',
             name: 'tp-1234',
             sources: [
               {
@@ -1603,7 +1914,7 @@ export default class Mock {
           },
           {
             type: 'TrafficPermission',
-            mesh: 'default',
+            mesh: 'mesh-01',
             name: 'tp-alpha-tango-donut',
             sources: [
               {
@@ -1622,7 +1933,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-permissions/tp-1').reply(200, {
+      .onGet('/meshes/mesh-01/traffic-permissions/tp-1')
+      .reply(200, {
         type: 'TrafficPermission',
         mesh: 'mesh-1',
         name: 'tp-1',
@@ -1643,7 +1955,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-permissions/tp-1234').reply(200, {
+      .onGet('/meshes/mesh-01/traffic-permissions/tp-1234')
+      .reply(200, {
         type: 'TrafficPermission',
         mesh: 'mesh-1',
         name: 'tp-1234',
@@ -1664,7 +1977,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/traffic-permissions/tp-alpha-tango-donut').reply(200, {
+      .onGet('/meshes/mesh-01/traffic-permissions/tp-alpha-tango-donut')
+      .reply(200, {
         type: 'TrafficPermission',
         mesh: 'mesh-1',
         name: 'tp-alpha-tango-donut',
@@ -1685,7 +1999,8 @@ export default class Mock {
           }
         ]
       })
-      .onGet('/meshes/default/circuit-breakers').reply(200, {
+      .onGet('/meshes/default/circuit-breakers')
+      .reply(200, {
         total: 2,
         items: [
           {
@@ -1787,7 +2102,8 @@ export default class Mock {
         ],
         next: null
       })
-      .onGet('/circuit-breakers').reply(200, {
+      .onGet('/circuit-breakers')
+      .reply(200, {
         total: 2,
         items: [
           {
@@ -1889,12 +2205,14 @@ export default class Mock {
         ],
         next: null
       })
-      .onGet('/meshes/alpha-tango-mesh/circuit-breakers').reply(200, {
+      .onGet('/meshes/alpha-tango-mesh/circuit-breakers')
+      .reply(200, {
         total: 0,
         items: [],
         next: null
       })
-      .onGet('/meshes/default/circuit-breakers/cb1').reply(200, {
+      .onGet('/meshes/default/circuit-breakers/cb1')
+      .reply(200, {
         type: 'CircuitBreaker',
         mesh: 'default',
         name: 'cb1',
@@ -1942,7 +2260,8 @@ export default class Mock {
           }
         }
       })
-      .onGet('/meshes/default/circuit-breakers/cb2').reply(200, {
+      .onGet('/meshes/default/circuit-breakers/cb2')
+      .reply(200, {
         type: 'CircuitBreaker',
         mesh: 'default',
         name: 'cb2',
@@ -1990,6 +2309,31 @@ export default class Mock {
           }
         }
       })
-      .onAny().passThrough()
+      // Remote CPs
+      .onGet('/status/clusters')
+      .reply(200, [
+        {
+          active: false,
+          name: 'http://127.0.0.1:5681',
+          url: 'http://172.18.0.1:5681'
+        },
+        {
+          active: true,
+          name: 'http://172.18.0.2:5681',
+          url: 'http://172.18.0.2:5681'
+        },
+        {
+          active: false,
+          name: 'http://172.18.0.3:5681',
+          url: 'http://172.18.0.3:5681'
+        }
+      ])
+      // config
+      .onGet('/config')
+      .reply(200, {
+        mode: 'global'
+      })
+      .onAny()
+      .passThrough()
   }
 }
diff --git a/src/services/restClient.js b/src/services/restClient.js
index af653f1dec..444119cc4b 100644
--- a/src/services/restClient.js
+++ b/src/services/restClient.js
@@ -49,10 +49,11 @@ export default class RestClient {
    * our app with the API URL endpoint and simple info.
    */
   static kumaClientConfig () {
-    const configUrl = process.env.VUE_APP_GENERAL_CONFIG
+    const configUrl = `${localStorage.getItem('kumaApiUrl')}/config`
 
     return axios.create({
       baseURL: configUrl,
+      headers: this.headers,
       ...this.axiosConfig
     })
   }
diff --git a/src/store/index.js b/src/store/index.js
index 18d24c8800..0333d754f2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -49,7 +49,8 @@ export default (api) => {
       selectedTab: '#overview',
       selectedTableRow: null,
       storedWizardData: null,
-      itemQueryNamespace: 'item'
+      itemQueryNamespace: 'item',
+      totalClusters: 0
     },
     getters: {
       getOnboardingStatus: (state) => state.onboardingComplete,
@@ -88,7 +89,13 @@ export default (api) => {
       getSelectedTableRow: (state) => state.selectedTableRow,
       getEnvironment: (state) => state.environment,
       getStoredWizardData: (state) => state.storedWizardData,
-      getItemQueryNamespace: (state) => state.itemQueryNamespace
+      getItemQueryNamespace: (state) => state.itemQueryNamespace,
+      getMulticlusterStatus: (state) => {
+        const status = (state.config.mode.mode === 'global')
+
+        return status
+      },
+      getClusterCount: (state) => state.totalClusters
     },
     mutations: {
       SET_ONBOARDING_STATUS: (state, status) => (state.onboardingComplete = status),
@@ -116,6 +123,7 @@ export default (api) => {
       SET_TOTAL_TRAFFIC_TRACE_COUNT_FROM_MESH: (state, count) => (state.totalTrafficTraceCountFromMesh = count),
       SET_TOTAL_FAULT_INJECTION_COUNT_FROM_MESH: (state, count) => (state.totalFaultInjectionCountFromMesh = count),
       SET_TOTAL_CIRCUIT_BREAKER_COUNT_FROM_MESH: (state, count) => (state.totalCircuitBreakerCountFromMesh = count),
+      SET_TOTAL_CLUSTER_COUNT: (state, count) => (state.totalClusters = count),
       SET_ANY_DP_OFFLINE: (state, status) => (state.anyDataplanesOffline = status),
       SET_VERSION: (state, version) => (state.version = version),
       SET_TAGLINE: (state, tagline) => (state.tagline = tagline),
@@ -170,6 +178,16 @@ export default (api) => {
        * the unneeded listing of max 100 items.
        */
 
+      // get total clusters (Remote CPs) when in multicluster
+      fetchTotalClusterCount ({ commit }) {
+        return api.getLocalCPs()
+          .then(response => {
+            const total = response.length
+
+            commit('SET_TOTAL_CLUSTER_COUNT', total)
+          })
+      },
+
       // get the total number of meshes
       fetchMeshTotalCount ({ commit, state }) {
         const params = {
@@ -479,7 +497,7 @@ export default (api) => {
               const itemName = items[i].name
               const itemMesh = items[i].mesh
 
-              const itemStatus = await api.getDataplaneOverviewsFromMesh(itemMesh, itemName)
+              const itemStatus = await api.getDataplaneOverviewFromMesh(itemMesh, itemName)
                 .then(response => {
                   const items = response.dataplaneInsight.subscriptions
 
diff --git a/src/views/Entities/Dataplanes.vue b/src/views/Entities/Dataplanes.vue
index 595d24991a..1465990ef6 100644
--- a/src/views/Entities/Dataplanes.vue
+++ b/src/views/Entities/Dataplanes.vue
@@ -95,10 +95,10 @@
                   class="tag-cols"
                 >
                   <span>
-                    {{ key }}:
+                    {{ val.label }}:
                   </span>
                   <span>
-                    {{ val }}
+                    {{ val.value }}
                   </span>
                 </span>
               </p>
@@ -201,6 +201,7 @@ export default {
           { label: 'Status', key: 'status' },
           { label: 'Name', key: 'name' },
           { label: 'Mesh', key: 'mesh' },
+          { label: 'DP Type', key: 'type' },
           { label: 'Tags', key: 'tags' },
           { label: 'Last Connected', key: 'lastConnected' },
           { label: 'Last Updated', key: 'lastUpdated' },
@@ -260,11 +261,15 @@ export default {
       const entity = this.entity
 
       const shareUrl = () => {
-        if (this.$route.query.ns) {
-          return this.$route.fullPath
+        if (entity.basicData) {
+          if (this.$route.query.ns) {
+            return this.$route.fullPath
+          }
+
+          return `${urlRoot}${this.$route.fullPath}?ns=${entity.basicData.name}`
         }
 
-        return `${urlRoot}${this.$route.fullPath}?ns=${entity.name}`
+        return null
       }
 
       return shareUrl()
@@ -325,12 +330,12 @@ export default {
        */
       const endpoint = () => {
         if (mesh === 'all') {
-          return this.$api.getAllDataplanes(params)
+          return this.$api.getAllDataplaneOverviews(params)
         } else if ((query && query.length) && mesh !== 'all') {
-          return this.$api.getDataplaneOverviewsFromMesh(mesh, query)
+          return this.$api.getDataplaneOverviewFromMesh(mesh, query)
         }
 
-        return this.$api.getAllDataplanesFromMesh(mesh)
+        return this.$api.getAllDataplaneOverviewsFromMesh(mesh, params)
       }
 
       /**
@@ -338,7 +343,7 @@ export default {
        * and then collecting them into an array.
        */
       const dpFetcher = (mesh, name, finalArr) => {
-        this.$api.getDataplaneOverviewsFromMesh(mesh, name)
+        this.$api.getDataplaneOverviewFromMesh(mesh, name)
           .then(response => {
             const placeholder = 'n/a'
 
@@ -351,49 +356,101 @@ export default {
             const updateTimes = []
 
             /**
-             * Iterate through the networking inbound or gateway data
+             * Dataplane type conditions
              */
-            const inbound = response.dataplane.networking.inbound
-            const gateway = response.dataplane.networking.gateway
+            const inbound = response.dataplane.networking.inbound || null
+            const gateway = response.dataplane.networking.gateway || null
+            const ingress = response.dataplane.networking.ingress || null
 
-            if (inbound || gateway) {
+            /**
+             * Determine the type of Dataplane it is
+             */
+            const dataplaneType = () => {
+              if (gateway) {
+                return 'Gateway'
+              } else if (ingress) {
+                return 'Ingress'
+              }
+
+              return 'Standard'
+            }
+
+            /**
+             * Handle our tag collections based on the dataplane type.
+             * Currently, this is collecting all tags found in case
+             * there is a condition where inbound, gateway, or ingress
+             * might all be present as opposed to one group.
+             */
+            if (inbound || gateway || ingress) {
+              const final = []
+
+              // inbound tags
               if (inbound) {
-                /** inbound */
                 for (let i = 0; i < inbound.length; i++) {
-                  const rawTags = inbound[i].tags
+                  const rawTags = inbound[i].tags || null
 
-                  const final = []
-                  const tagKeys = Object.keys(rawTags)
-                  const tagVals = Object.values(rawTags)
+                  if (rawTags) {
+                    const tagKeys = Object.keys(rawTags)
+                    const tagVals = Object.values(rawTags)
 
-                  for (let x = 0; x < tagKeys.length; x++) {
-                    final.push({
-                      label: tagKeys[x],
-                      value: tagVals[x]
-                    })
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
                   }
+                }
+              }
+
+              // gateway tags
+              if (gateway) {
+                const gatewayItems = gateway.tags || null
 
-                  tags = final
+                if (gatewayItems) {
+                  for (let i = 0; i < Object.keys(gatewayItems).length; i++) {
+                    const tagKeys = Object.keys(gatewayItems)
+                    const tagVals = Object.values(gatewayItems)
+
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
+                  }
                 }
-              } else if (gateway) {
-                /** gateway */
-                const items = gateway.tags
+              }
 
-                for (let i = 0; i < Object.keys(items).length; i++) {
-                  const final = []
-                  const tagKeys = Object.keys(items)
-                  const tagVals = Object.values(items)
+              // ingress tags
+              if (ingress) {
+                for (let i = 0; i < ingress.length; i++) {
+                  const ingressTags = ingress[i].tags || null
+                  const ingressService = ingress[i].service || null
 
-                  for (let x = 0; x < tagKeys.length; x++) {
+                  if (ingressService) {
                     final.push({
-                      label: tagKeys[x],
-                      value: tagVals[x]
+                      label: 'service',
+                      value: ingressService
                     })
                   }
 
-                  tags = final
+                  if (ingressTags) {
+                    const tagKeys = Object.keys(ingressTags)
+                    const tagVals = Object.values(ingressTags)
+
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
+                  }
                 }
               }
+
+              // define the new list
+              tags = final
             } else {
               tags = 'none'
             }
@@ -477,7 +534,7 @@ export default {
               lastConnected: lastConnected,
               lastUpdated: lastUpdated,
               totalUpdates: totalUpdates,
-              type: 'dataplane'
+              type: dataplaneType()
             })
 
             this.sortEntities(finalArr)
@@ -584,7 +641,7 @@ export default {
                 let data = null
 
                 try {
-                  const res = await this.$api.getDataplaneOverviewsFromMesh(entityMesh, entity.name)
+                  const res = await this.$api.getDataplaneOverviewFromMesh(entityMesh, entity.name)
 
                   if (res.dataplaneInsight.mTLS) {
                     const mtls = res.dataplaneInsight.mTLS
@@ -623,16 +680,91 @@ export default {
                 return data
               }
 
-              // determine between inbound and gateway modes
-              // and then get the tags from which condition applies.
-              const tagSrc = (response.networking.inbound && response.networking.inbound.length > 0)
-                ? response.networking.inbound[0].tags
-                : response.networking.gateway.tags
+              // combine all tags into a single object
+              const fullTagSrc = () => {
+                const src = response.networking || null
+                const inbound = src.inbound || null
+                const gateway = src.gateway || null
+                const ingress = src.ingress || null
+
+                if (inbound || gateway || ingress) {
+                  const final = []
+
+                  // inbound tags
+                  if (inbound) {
+                    for (let i = 0; i < inbound.length; i++) {
+                      const rawTags = inbound[i].tags || null
+
+                      if (rawTags) {
+                        const tagKeys = Object.keys(rawTags)
+                        const tagVals = Object.values(rawTags)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  // gateway tags
+                  if (gateway) {
+                    const gatewayItems = gateway.tags || null
+
+                    if (gatewayItems) {
+                      for (let i = 0; i < Object.keys(gatewayItems).length; i++) {
+                        const tagKeys = Object.keys(gatewayItems)
+                        const tagVals = Object.values(gatewayItems)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  // ingress tags
+                  if (ingress) {
+                    for (let i = 0; i < ingress.length; i++) {
+                      const ingressTags = ingress[i].tags || null
+                      const ingressService = ingress[i].service || null
+
+                      if (ingressService) {
+                        final.push({
+                          label: 'service',
+                          value: ingressService
+                        })
+                      }
+
+                      if (ingressTags) {
+                        const tagKeys = Object.keys(ingressTags)
+                        const tagVals = Object.values(ingressTags)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  return final
+                }
+
+                return null
+              }
 
               const newEntity = async () => {
                 return {
                   basicData: { ...getSome(response, selected) },
-                  tags: { ...tagSrc },
+                  tags: { ...fullTagSrc() },
                   mtls: await getMTLSData()
                 }
               }
diff --git a/src/views/Entities/GatewayDataplanes.vue b/src/views/Entities/GatewayDataplanes.vue
new file mode 100644
index 0000000000..fdb2f5bda7
--- /dev/null
+++ b/src/views/Entities/GatewayDataplanes.vue
@@ -0,0 +1,810 @@
+<template>
+  <div class="gateway-dataplanes">
+    <FrameSkeleton>
+      <DataOverview
+        :page-size="pageSize"
+        :has-error="hasError"
+        :is-loading="isLoading"
+        :empty-state="empty_state"
+        :display-data-table="true"
+        :table-data="tableData"
+        :table-data-is-empty="tableDataIsEmpty"
+        table-data-function-text="View"
+        table-data-row="name"
+        @tableAction="tableAction"
+        @reloadData="loadData"
+      >
+        <template slot="additionalControls">
+          <KButton
+            class="add-dp-button"
+            appearance="primary"
+            size="small"
+            :to="dataplaneWizardRoute"
+          >
+            <span class="custom-control-icon">
+              +
+            </span>
+            Create Dataplane
+          </KButton>
+          <KButton
+            v-if="this.$route.query.ns"
+            class="back-button"
+            appearance="primary"
+            size="small"
+            :to="{
+              name: 'gateway-dataplanes'
+            }"
+          >
+            <span class="custom-control-icon">
+              &larr;
+            </span>
+            View All
+          </KButton>
+        </template>
+        <template slot="pagination">
+          <Pagination
+            :has-previous="previous.length > 0"
+            :has-next="hasNext"
+            @next="goToNextPage"
+            @previous="goToPreviousPage"
+          />
+        </template>
+      </DataOverview>
+      <Tabs
+        v-if="isEmpty === false"
+        :has-error="hasError"
+        :is-loading="isLoading"
+        :tabs="tabs"
+        initial-tab-override="overview"
+      >
+        <template slot="tabHeader">
+          <div>
+            <h3>{{ tabGroupTitle }}</h3>
+          </div>
+          <div>
+            <EntityURLControl :url="shareUrl" />
+          </div>
+        </template>
+        <template slot="overview">
+          <LabelList
+            :has-error="entityHasError"
+            :is-loading="entityIsLoading"
+            :is-empty="entityIsEmpty"
+          >
+            <!-- basic information -->
+            <div>
+              <ul>
+                <li
+                  v-for="(val, key) in entity.basicData"
+                  :key="key"
+                >
+                  <h4>{{ key }}</h4>
+                  <p>
+                    {{ val }}
+                  </p>
+                </li>
+              </ul>
+            </div>
+            <!-- tag information -->
+            <div>
+              <h4>Tags</h4>
+              <p>
+                <span
+                  v-for="(val, key) in entity.tags"
+                  :key="key"
+                  class="tag-cols"
+                >
+                  <span>
+                    {{ val.label }}:
+                  </span>
+                  <span>
+                    {{ val.value }}
+                  </span>
+                </span>
+              </p>
+            </div>
+          </LabelList>
+        </template>
+        <template slot="yaml">
+          <YamlView
+            :title="entityOverviewTitle"
+            :has-error="entityHasError"
+            :is-loading="entityIsLoading"
+            :is-empty="entityIsEmpty"
+            :content="rawEntity"
+          />
+        </template>
+        <template slot="mtls">
+          <LabelList
+            :has-error="entityHasError"
+            :is-loading="entityIsLoading"
+            :is-empty="entityIsEmpty"
+          >
+            <ul v-if="entity.mtls">
+              <li
+                v-for="(val, key) in entity.mtls"
+                :key="key"
+              >
+                <h4>{{ val.label }}</h4>
+                <p>
+                  {{ val.value }}
+                </p>
+              </li>
+            </ul>
+            <KAlert
+              v-else
+              appearance="danger"
+            >
+              <template slot="alertMessage">
+                This Dataplane does not yet have mTLS configured &mdash;
+                <a
+                  :href="`https://kuma.io/docs/${version}/documentation/security/#certificates`"
+                  class="external-link"
+                  target="_blank"
+                >
+                  Learn About Certificates in Kuma
+                </a>
+              </template>
+            </KAlert>
+          </LabelList>
+        </template>
+      </Tabs>
+    </FrameSkeleton>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getSome, humanReadableDate, getOffset } from '@/helpers'
+import EntityURLControl from '@/components/Utils/EntityURLControl'
+import sortEntities from '@/mixins/EntitySorter'
+import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
+import Pagination from '@/components/Pagination'
+import DataOverview from '@/components/Skeletons/DataOverview'
+import Tabs from '@/components/Utils/Tabs'
+import YamlView from '@/components/Skeletons/YamlView'
+import LabelList from '@/components/Utils/LabelList'
+
+export default {
+  name: 'GatewayDataplanes',
+  metaInfo: {
+    title: 'Gateway Dataplanes'
+  },
+  components: {
+    EntityURLControl,
+    FrameSkeleton,
+    Pagination,
+    DataOverview,
+    Tabs,
+    YamlView,
+    LabelList
+  },
+  mixins: [
+    sortEntities
+  ],
+  data () {
+    return {
+      isLoading: true,
+      isEmpty: false,
+      hasError: false,
+      entityIsLoading: true,
+      entityIsEmpty: false,
+      entityHasError: false,
+      tableDataIsEmpty: false,
+      empty_state: {
+        title: 'No Data',
+        message: 'There are no Gateway Dataplanes present.'
+      },
+      tableData: {
+        headers: [
+          { key: 'actions', hideLabel: true },
+          { label: 'Status', key: 'status' },
+          { label: 'Name', key: 'name' },
+          { label: 'Mesh', key: 'mesh' },
+          { label: 'DP Type', key: 'type' },
+          { label: 'Tags', key: 'tags' },
+          { label: 'Last Connected', key: 'lastConnected' },
+          { label: 'Last Updated', key: 'lastUpdated' },
+          { label: 'Total Updates', key: 'totalUpdates' }
+        ],
+        data: []
+      },
+      tabs: [
+        {
+          hash: '#overview',
+          title: 'Overview'
+        },
+        {
+          hash: '#mtls',
+          title: 'Certificate Insights'
+        },
+        {
+          hash: '#yaml',
+          title: 'YAML'
+        }
+      ],
+      entity: [],
+      rawEntity: null,
+      firstEntity: null,
+      pageSize: this.$pageSize,
+      pageOffset: null,
+      next: null,
+      hasNext: false,
+      previous: [],
+      tabGroupTitle: null,
+      entityNamespace: null,
+      entityOverviewTitle: null,
+      showmTLSTab: false
+    }
+  },
+  computed: {
+    ...mapGetters({
+      environment: 'getEnvironment',
+      queryNamespace: 'getItemQueryNamespace'
+    }),
+    dataplaneWizardRoute () {
+      // we change the route to the Dataplane
+      // wizard based on environment.
+      if (this.environment === 'universal') {
+        return { name: 'universal-dataplane' }
+      } else {
+        return { name: 'kubernetes-dataplane' }
+      }
+    },
+    version () {
+      const storedVersion = this.$store.getters.getVersion
+
+      return (storedVersion !== null) ? storedVersion : 'latest'
+    },
+    shareUrl () {
+      const urlRoot = `${window.location.origin}#`
+      const entity = this.entity
+
+      const shareUrl = () => {
+        if (entity.basicData) {
+          if (this.$route.query.ns) {
+            return this.$route.fullPath
+          }
+
+          return `${urlRoot}${this.$route.fullPath}?ns=${entity.basicData.name}`
+        }
+
+        return null
+      }
+
+      return shareUrl()
+    }
+  },
+  watch: {
+    '$route' (to, from) {
+      this.loadData()
+    }
+  },
+  beforeMount () {
+    this.loadData()
+  },
+  methods: {
+    init () {
+      this.loadData()
+    },
+    goToPreviousPage () {
+      this.pageOffset = this.previous.pop()
+      this.next = null
+
+      this.loadData()
+    },
+    goToNextPage () {
+      this.previous.push(this.pageOffset)
+      this.pageOffset = this.next
+      this.next = null
+
+      this.loadData()
+    },
+    tableAction (ev) {
+      const data = ev
+
+      // reset back to the first tab
+      this.$store.dispatch('updateSelectedTab', this.tabs[0].hash)
+
+      // set the active table row
+      this.$store.dispatch('updateSelectedTableRow', data.name)
+
+      // load the data into the tabs
+      this.getEntity(data)
+    },
+    loadData () {
+      this.isLoading = true
+
+      const mesh = this.$route.params.mesh || null
+      const query = this.$route.query.ns || null
+
+      const params = {
+        // size: this.pageSize,
+        gateway: true
+        // offset: this.pageOffset
+      }
+
+      /**
+       * determine which endpoint to use based on the mesh.
+       * we are either fetching entities from one mesh, or fetching
+       * all of them from all meshes and collecting them into the view.
+       */
+      const endpoint = () => {
+        if (mesh === 'all') {
+          return this.$api.getAllDataplaneOverviews(params)
+        } else if ((query && query.length) && mesh !== 'all') {
+          return this.$api.getDataplaneOverviewFromMesh(mesh, query)
+        }
+
+        return this.$api.getAllDataplaneOverviewsFromMesh(mesh, params)
+      }
+
+      /**
+       * the function used for fetching dataplanes from a mesh
+       * and then collecting them into an array.
+       */
+      const dpFetcher = (mesh, name, finalArr) => {
+        this.$api.getDataplaneOverviewFromMesh(mesh, name)
+          .then(response => {
+            const placeholder = 'n/a'
+
+            let lastConnected
+            let lastUpdated
+            let tags = placeholder
+            let totalUpdates = []
+            let status = 'Offline'
+            const connectTimes = []
+            const updateTimes = []
+
+            /**
+             * Dataplane type conditions
+             */
+            const inbound = response.dataplane.networking.inbound || null
+            const gateway = response.dataplane.networking.gateway || null
+            const ingress = response.dataplane.networking.ingress || null
+
+            /**
+             * Determine the type of Dataplane it is
+             */
+            const dataplaneType = () => {
+              if (gateway) {
+                return 'Gateway'
+              } else if (ingress) {
+                return 'Ingress'
+              }
+
+              return 'Standard'
+            }
+
+            /**
+             * Handle our tag collections based on the dataplane type.
+             * Currently, this is collecting all tags found in case
+             * there is a condition where inbound, gateway, or ingress
+             * might all be present as opposed to one group.
+             */
+            if (inbound || gateway || ingress) {
+              const final = []
+
+              // inbound tags
+              if (inbound) {
+                for (let i = 0; i < inbound.length; i++) {
+                  const rawTags = inbound[i].tags || null
+
+                  if (rawTags) {
+                    const tagKeys = Object.keys(rawTags)
+                    const tagVals = Object.values(rawTags)
+
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
+                  }
+                }
+              }
+
+              // gateway tags
+              if (gateway) {
+                const gatewayItems = gateway.tags || null
+
+                if (gatewayItems) {
+                  for (let i = 0; i < Object.keys(gatewayItems).length; i++) {
+                    const tagKeys = Object.keys(gatewayItems)
+                    const tagVals = Object.values(gatewayItems)
+
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
+                  }
+                }
+              }
+
+              // ingress tags
+              if (ingress) {
+                for (let i = 0; i < ingress.length; i++) {
+                  const ingressTags = ingress[i].tags || null
+                  const ingressService = ingress[i].service || null
+
+                  if (ingressService) {
+                    final.push({
+                      label: 'service',
+                      value: ingressService
+                    })
+                  }
+
+                  if (ingressTags) {
+                    const tagKeys = Object.keys(ingressTags)
+                    const tagVals = Object.values(ingressTags)
+
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
+                  }
+                }
+              }
+
+              // define the new list
+              tags = final
+            } else {
+              tags = 'none'
+            }
+
+            /**
+             * Iterate through the subscriptions
+             */
+            if (response.dataplaneInsight.subscriptions && response.dataplaneInsight.subscriptions.length) {
+              response.dataplaneInsight.subscriptions.forEach(item => {
+                const responsesSent = item.status.total.responsesSent || 0
+                const connectTime = item.connectTime || placeholder
+                const lastUpdateTime = item.status.lastUpdateTime || placeholder
+                const disconnectTime = item.disconnectTime || null
+
+                totalUpdates.push(responsesSent)
+                connectTimes.push(connectTime)
+                updateTimes.push(lastUpdateTime)
+
+                if (connectTime && connectTime.length && !disconnectTime) {
+                  status = 'Online'
+                } else {
+                  status = 'Offline'
+                }
+              })
+
+              // get the sum of total updates (with some precautions)
+              totalUpdates = totalUpdates.reduce((a, b) => a + b)
+
+              // select the most recent LAST CONNECTED timestamp
+              const selectedTime = connectTimes.reduce((a, b) => {
+                if (a && b) {
+                  return a.MeasureDate > b.MeasureDate ? a : b
+                }
+
+                return null
+              })
+
+              // select the most recent LAST UPDATED timestamnp
+              const selectedUpdateTime = updateTimes.reduce((a, b) => {
+                if (a && b) {
+                  return a.MeasureDate > b.MeasureDate ? a : b
+                }
+
+                return null
+              })
+
+              // format each reduced value as a date to compare against
+              const selectedTimeAsDate = new Date(selectedTime)
+              const selectedUpdateTimeAsDate = new Date(selectedUpdateTime)
+
+              /**
+               * @todo refactor this to use a function instead
+               */
+
+              // formatted time for LAST CONNECTED (if there is a value present)
+              if (selectedTime && !isNaN(selectedTimeAsDate)) {
+                lastConnected = humanReadableDate(selectedTimeAsDate)
+              } else {
+                lastConnected = 'never'
+              }
+
+              // formatted time for LAST UPDATED (if there is a value present)
+              if (selectedUpdateTime && !isNaN(selectedUpdateTimeAsDate)) {
+                lastUpdated = humanReadableDate(selectedUpdateTimeAsDate)
+              } else {
+                lastUpdated = 'never'
+              }
+            } else {
+              // if there are no subscriptions, set them all to a fallback
+              lastConnected = 'never'
+              lastUpdated = 'never'
+              totalUpdates = 0
+            }
+
+            // assemble the table data
+            finalArr.push({
+              name: response.name,
+              mesh: response.mesh,
+              tags: tags,
+              status: status,
+              lastConnected: lastConnected,
+              lastUpdated: lastUpdated,
+              totalUpdates: totalUpdates,
+              type: dataplaneType()
+            })
+
+            this.sortEntities(finalArr)
+
+            return finalArr
+          })
+          .catch(error => {
+            console.error(error)
+          })
+      }
+
+      const getDataplanes = () => {
+        return endpoint()
+          .then(response => {
+            const items = () => {
+              const r = response
+
+              if ('total' in r) {
+                if (r.total !== 0 && r.items && r.items.length > 0) {
+                  return this.sortEntities(r.items)
+                }
+
+                return null
+              }
+
+              return r
+            }
+
+            if (items()) {
+              // check to see if the `next` url is present
+              if (response.next) {
+                this.next = getOffset(response.next)
+                this.hasNext = true
+              } else {
+                this.hasNext = false
+              }
+
+              const final = []
+              const itemSelect = query
+                ? items()
+                : items()[0]
+
+              // set the first item as the default for initial load
+              this.firstEntity = itemSelect.name
+
+              // load the YAML entity for the first item on page load
+              this.getEntity(itemSelect)
+
+              // set the selected table row for the first item on page load
+              this.$store.dispatch('updateSelectedTableRow', this.firstEntity)
+
+              if ((query && query.length) && (mesh && mesh.length)) {
+                dpFetcher(mesh, query, final)
+              } else {
+                items().forEach(item => {
+                  dpFetcher(item.mesh, item.name, final)
+                })
+              }
+
+              this.tableData.data = final
+              this.tableDataIsEmpty = false
+              this.isEmpty = false
+            } else {
+              this.tableData.data = []
+              this.tableDataIsEmpty = true
+              this.isEmpty = true
+
+              this.getEntity(null)
+            }
+          })
+          .catch(error => {
+            this.hasError = true
+            this.isEmpty = true
+
+            console.error(error)
+          })
+          .finally(() => {
+            setTimeout(() => {
+              this.isLoading = false
+            }, process.env.VUE_APP_DATA_TIMEOUT)
+          })
+      }
+
+      getDataplanes()
+    },
+    getEntity (entity) {
+      this.entityIsLoading = true
+      this.entityIsEmpty = false
+
+      const mesh = this.$route.params.mesh
+
+      if (entity && entity !== null) {
+        const entityMesh = (mesh === 'all')
+          ? entity.mesh
+          : mesh
+
+        return this.$api.getDataplaneFromMesh(entityMesh, entity.name)
+          .then(response => {
+            if (response) {
+              const selected = ['type', 'name', 'mesh']
+
+              // get mTLS data if it's present
+              const getMTLSData = async () => {
+                let data = null
+
+                try {
+                  const res = await this.$api.getDataplaneOverviewFromMesh(entityMesh, entity.name)
+
+                  if (res.dataplaneInsight.mTLS) {
+                    const mtls = res.dataplaneInsight.mTLS
+
+                    const rawExpDate = new Date(mtls.certificateExpirationTime)
+                    // this prevents any weird date shifting
+                    const fixedExpDate = new Date(
+                      rawExpDate.getTime() +
+                      rawExpDate.getTimezoneOffset() * 60000
+                    )
+                    // assembled to display date and time (in 24-hour format)
+                    const assembledExpDate = `
+                      ${fixedExpDate.toLocaleDateString('en-US')} ${fixedExpDate.getHours()}:${fixedExpDate.getMinutes()}:${fixedExpDate.getSeconds()}
+                    `
+
+                    data = {
+                      certificateExpirationTime: {
+                        label: 'Expiration Time',
+                        // value: new Date(mtls.certificateExpirationTime).toLocaleDateString('en-US')
+                        value: assembledExpDate
+                      },
+                      lastCertificateRegeneration: {
+                        label: 'Last Generated',
+                        value: humanReadableDate(mtls.lastCertificateRegeneration)
+                      },
+                      certificateRegenerations: {
+                        label: 'Regenerations',
+                        value: mtls.certificateRegenerations
+                      }
+                    }
+                  }
+                } catch (error) {
+                  console.log(error)
+                }
+
+                return data
+              }
+
+              // combine all tags into a single object
+              const fullTagSrc = () => {
+                const src = response.networking || null
+                const inbound = src.inbound || null
+                const gateway = src.gateway || null
+                const ingress = src.ingress || null
+
+                if (inbound || gateway || ingress) {
+                  const final = []
+
+                  // inbound tags
+                  if (inbound) {
+                    for (let i = 0; i < inbound.length; i++) {
+                      const rawTags = inbound[i].tags || null
+
+                      if (rawTags) {
+                        const tagKeys = Object.keys(rawTags)
+                        const tagVals = Object.values(rawTags)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  // gateway tags
+                  if (gateway) {
+                    const gatewayItems = gateway.tags || null
+
+                    if (gatewayItems) {
+                      for (let i = 0; i < Object.keys(gatewayItems).length; i++) {
+                        const tagKeys = Object.keys(gatewayItems)
+                        const tagVals = Object.values(gatewayItems)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  // ingress tags
+                  if (ingress) {
+                    for (let i = 0; i < ingress.length; i++) {
+                      const ingressTags = ingress[i].tags || null
+                      const ingressService = ingress[i].service || null
+
+                      if (ingressService) {
+                        final.push({
+                          label: 'service',
+                          value: ingressService
+                        })
+                      }
+
+                      if (ingressTags) {
+                        const tagKeys = Object.keys(ingressTags)
+                        const tagVals = Object.values(ingressTags)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  return final
+                }
+
+                return null
+              }
+
+              const newEntity = async () => {
+                return {
+                  basicData: { ...getSome(response, selected) },
+                  tags: { ...fullTagSrc() },
+                  mtls: await getMTLSData()
+                }
+              }
+
+              newEntity().then(i => {
+                this.entity = i
+                this.entityNamespace = i.basicData.name
+                this.tabGroupTitle = `Mesh: ${i.basicData.name}`
+                this.entityOverviewTitle = `Entity Overview for ${i.basicData.name}`
+              })
+
+              this.rawEntity = response
+            } else {
+              this.entity = null
+              this.entityIsEmpty = true
+            }
+          })
+          .catch(error => {
+            this.entityHasError = true
+            console.error(error)
+          })
+          .finally(() => {
+            setTimeout(() => {
+              this.entityIsLoading = false
+            }, process.env.VUE_APP_DATA_TIMEOUT)
+          })
+      } else {
+        setTimeout(() => {
+          this.entityIsEmpty = true
+          this.entityIsLoading = false
+        }, process.env.VUE_APP_DATA_TIMEOUT)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-dp-button {
+  background-color: var(--logo-green) !important;
+}
+</style>
diff --git a/src/views/Entities/IngressDataplanes.vue b/src/views/Entities/IngressDataplanes.vue
new file mode 100644
index 0000000000..fc2cde2694
--- /dev/null
+++ b/src/views/Entities/IngressDataplanes.vue
@@ -0,0 +1,810 @@
+<template>
+  <div class="ingress-dataplanes">
+    <FrameSkeleton>
+      <DataOverview
+        :page-size="pageSize"
+        :has-error="hasError"
+        :is-loading="isLoading"
+        :empty-state="empty_state"
+        :display-data-table="true"
+        :table-data="tableData"
+        :table-data-is-empty="tableDataIsEmpty"
+        table-data-function-text="View"
+        table-data-row="name"
+        @tableAction="tableAction"
+        @reloadData="loadData"
+      >
+        <template slot="additionalControls">
+          <KButton
+            class="add-dp-button"
+            appearance="primary"
+            size="small"
+            :to="dataplaneWizardRoute"
+          >
+            <span class="custom-control-icon">
+              +
+            </span>
+            Create Dataplane
+          </KButton>
+          <KButton
+            v-if="this.$route.query.ns"
+            class="back-button"
+            appearance="primary"
+            size="small"
+            :to="{
+              name: 'ingress-dataplanes'
+            }"
+          >
+            <span class="custom-control-icon">
+              &larr;
+            </span>
+            View All
+          </KButton>
+        </template>
+        <template slot="pagination">
+          <Pagination
+            :has-previous="previous.length > 0"
+            :has-next="hasNext"
+            @next="goToNextPage"
+            @previous="goToPreviousPage"
+          />
+        </template>
+      </DataOverview>
+      <Tabs
+        v-if="isEmpty === false"
+        :has-error="hasError"
+        :is-loading="isLoading"
+        :tabs="tabs"
+        initial-tab-override="overview"
+      >
+        <template slot="tabHeader">
+          <div>
+            <h3>{{ tabGroupTitle }}</h3>
+          </div>
+          <div>
+            <EntityURLControl :url="shareUrl" />
+          </div>
+        </template>
+        <template slot="overview">
+          <LabelList
+            :has-error="entityHasError"
+            :is-loading="entityIsLoading"
+            :is-empty="entityIsEmpty"
+          >
+            <!-- basic information -->
+            <div>
+              <ul>
+                <li
+                  v-for="(val, key) in entity.basicData"
+                  :key="key"
+                >
+                  <h4>{{ key }}</h4>
+                  <p>
+                    {{ val }}
+                  </p>
+                </li>
+              </ul>
+            </div>
+            <!-- tag information -->
+            <div>
+              <h4>Tags</h4>
+              <p>
+                <span
+                  v-for="(val, key) in entity.tags"
+                  :key="key"
+                  class="tag-cols"
+                >
+                  <span>
+                    {{ val.label }}:
+                  </span>
+                  <span>
+                    {{ val.value }}
+                  </span>
+                </span>
+              </p>
+            </div>
+          </LabelList>
+        </template>
+        <template slot="yaml">
+          <YamlView
+            :title="entityOverviewTitle"
+            :has-error="entityHasError"
+            :is-loading="entityIsLoading"
+            :is-empty="entityIsEmpty"
+            :content="rawEntity"
+          />
+        </template>
+        <template slot="mtls">
+          <LabelList
+            :has-error="entityHasError"
+            :is-loading="entityIsLoading"
+            :is-empty="entityIsEmpty"
+          >
+            <ul v-if="entity.mtls">
+              <li
+                v-for="(val, key) in entity.mtls"
+                :key="key"
+              >
+                <h4>{{ val.label }}</h4>
+                <p>
+                  {{ val.value }}
+                </p>
+              </li>
+            </ul>
+            <KAlert
+              v-else
+              appearance="danger"
+            >
+              <template slot="alertMessage">
+                This Dataplane does not yet have mTLS configured &mdash;
+                <a
+                  :href="`https://kuma.io/docs/${version}/documentation/security/#certificates`"
+                  class="external-link"
+                  target="_blank"
+                >
+                  Learn About Certificates in Kuma
+                </a>
+              </template>
+            </KAlert>
+          </LabelList>
+        </template>
+      </Tabs>
+    </FrameSkeleton>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getSome, humanReadableDate, getOffset } from '@/helpers'
+import EntityURLControl from '@/components/Utils/EntityURLControl'
+import sortEntities from '@/mixins/EntitySorter'
+import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
+import Pagination from '@/components/Pagination'
+import DataOverview from '@/components/Skeletons/DataOverview'
+import Tabs from '@/components/Utils/Tabs'
+import YamlView from '@/components/Skeletons/YamlView'
+import LabelList from '@/components/Utils/LabelList'
+
+export default {
+  name: 'IngressDataplanes',
+  metaInfo: {
+    title: 'Ingress Dataplanes'
+  },
+  components: {
+    EntityURLControl,
+    FrameSkeleton,
+    Pagination,
+    DataOverview,
+    Tabs,
+    YamlView,
+    LabelList
+  },
+  mixins: [
+    sortEntities
+  ],
+  data () {
+    return {
+      isLoading: true,
+      isEmpty: false,
+      hasError: false,
+      entityIsLoading: true,
+      entityIsEmpty: false,
+      entityHasError: false,
+      tableDataIsEmpty: false,
+      empty_state: {
+        title: 'No Data',
+        message: 'There are no Ingress Dataplanes present.'
+      },
+      tableData: {
+        headers: [
+          { key: 'actions', hideLabel: true },
+          { label: 'Status', key: 'status' },
+          { label: 'Name', key: 'name' },
+          { label: 'Mesh', key: 'mesh' },
+          { label: 'DP Type', key: 'type' },
+          { label: 'Tags', key: 'tags' },
+          { label: 'Last Connected', key: 'lastConnected' },
+          { label: 'Last Updated', key: 'lastUpdated' },
+          { label: 'Total Updates', key: 'totalUpdates' }
+        ],
+        data: []
+      },
+      tabs: [
+        {
+          hash: '#overview',
+          title: 'Overview'
+        },
+        {
+          hash: '#mtls',
+          title: 'Certificate Insights'
+        },
+        {
+          hash: '#yaml',
+          title: 'YAML'
+        }
+      ],
+      entity: [],
+      rawEntity: null,
+      firstEntity: null,
+      pageSize: this.$pageSize,
+      pageOffset: null,
+      next: null,
+      hasNext: false,
+      previous: [],
+      tabGroupTitle: null,
+      entityNamespace: null,
+      entityOverviewTitle: null,
+      showmTLSTab: false
+    }
+  },
+  computed: {
+    ...mapGetters({
+      environment: 'getEnvironment',
+      queryNamespace: 'getItemQueryNamespace'
+    }),
+    dataplaneWizardRoute () {
+      // we change the route to the Dataplane
+      // wizard based on environment.
+      if (this.environment === 'universal') {
+        return { name: 'universal-dataplane' }
+      } else {
+        return { name: 'kubernetes-dataplane' }
+      }
+    },
+    version () {
+      const storedVersion = this.$store.getters.getVersion
+
+      return (storedVersion !== null) ? storedVersion : 'latest'
+    },
+    shareUrl () {
+      const urlRoot = `${window.location.origin}#`
+      const entity = this.entity
+
+      const shareUrl = () => {
+        if (entity.basicData) {
+          if (this.$route.query.ns) {
+            return this.$route.fullPath
+          }
+
+          return `${urlRoot}${this.$route.fullPath}?ns=${entity.basicData.name}`
+        }
+
+        return null
+      }
+
+      return shareUrl()
+    }
+  },
+  watch: {
+    '$route' (to, from) {
+      this.loadData()
+    }
+  },
+  beforeMount () {
+    this.loadData()
+  },
+  methods: {
+    init () {
+      this.loadData()
+    },
+    goToPreviousPage () {
+      this.pageOffset = this.previous.pop()
+      this.next = null
+
+      this.loadData()
+    },
+    goToNextPage () {
+      this.previous.push(this.pageOffset)
+      this.pageOffset = this.next
+      this.next = null
+
+      this.loadData()
+    },
+    tableAction (ev) {
+      const data = ev
+
+      // reset back to the first tab
+      this.$store.dispatch('updateSelectedTab', this.tabs[0].hash)
+
+      // set the active table row
+      this.$store.dispatch('updateSelectedTableRow', data.name)
+
+      // load the data into the tabs
+      this.getEntity(data)
+    },
+    loadData () {
+      this.isLoading = true
+
+      const mesh = this.$route.params.mesh || null
+      const query = this.$route.query.ns || null
+
+      const params = {
+        // size: this.pageSize,
+        ingress: true
+        // offset: this.pageOffset
+      }
+
+      /**
+       * determine which endpoint to use based on the mesh.
+       * we are either fetching entities from one mesh, or fetching
+       * all of them from all meshes and collecting them into the view.
+       */
+      const endpoint = () => {
+        if (mesh === 'all') {
+          return this.$api.getAllDataplaneOverviews(params)
+        } else if ((query && query.length) && mesh !== 'all') {
+          return this.$api.getDataplaneOverviewFromMesh(mesh, query)
+        }
+
+        return this.$api.getAllDataplaneOverviewsFromMesh(mesh, params)
+      }
+
+      /**
+       * the function used for fetching dataplanes from a mesh
+       * and then collecting them into an array.
+       */
+      const dpFetcher = (mesh, name, finalArr) => {
+        this.$api.getDataplaneOverviewFromMesh(mesh, name)
+          .then(response => {
+            const placeholder = 'n/a'
+
+            let lastConnected
+            let lastUpdated
+            let tags = placeholder
+            let totalUpdates = []
+            let status = 'Offline'
+            const connectTimes = []
+            const updateTimes = []
+
+            /**
+             * Dataplane type conditions
+             */
+            const inbound = response.dataplane.networking.inbound || null
+            const gateway = response.dataplane.networking.gateway || null
+            const ingress = response.dataplane.networking.ingress || null
+
+            /**
+             * Determine the type of Dataplane it is
+             */
+            const dataplaneType = () => {
+              if (gateway) {
+                return 'Gateway'
+              } else if (ingress) {
+                return 'Ingress'
+              }
+
+              return 'Standard'
+            }
+
+            /**
+             * Handle our tag collections based on the dataplane type.
+             * Currently, this is collecting all tags found in case
+             * there is a condition where inbound, gateway, or ingress
+             * might all be present as opposed to one group.
+             */
+            if (inbound || gateway || ingress) {
+              const final = []
+
+              // inbound tags
+              if (inbound) {
+                for (let i = 0; i < inbound.length; i++) {
+                  const rawTags = inbound[i].tags || null
+
+                  if (rawTags) {
+                    const tagKeys = Object.keys(rawTags)
+                    const tagVals = Object.values(rawTags)
+
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
+                  }
+                }
+              }
+
+              // gateway tags
+              if (gateway) {
+                const gatewayItems = gateway.tags || null
+
+                if (gatewayItems) {
+                  for (let i = 0; i < Object.keys(gatewayItems).length; i++) {
+                    const tagKeys = Object.keys(gatewayItems)
+                    const tagVals = Object.values(gatewayItems)
+
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
+                  }
+                }
+              }
+
+              // ingress tags
+              if (ingress) {
+                for (let i = 0; i < ingress.length; i++) {
+                  const ingressTags = ingress[i].tags || null
+                  const ingressService = ingress[i].service || null
+
+                  if (ingressService) {
+                    final.push({
+                      label: 'service',
+                      value: ingressService
+                    })
+                  }
+
+                  if (ingressTags) {
+                    const tagKeys = Object.keys(ingressTags)
+                    const tagVals = Object.values(ingressTags)
+
+                    for (let x = 0; x < tagKeys.length; x++) {
+                      final.push({
+                        label: tagKeys[x],
+                        value: tagVals[x]
+                      })
+                    }
+                  }
+                }
+              }
+
+              // define the new list
+              tags = final
+            } else {
+              tags = 'none'
+            }
+
+            /**
+             * Iterate through the subscriptions
+             */
+            if (response.dataplaneInsight.subscriptions && response.dataplaneInsight.subscriptions.length) {
+              response.dataplaneInsight.subscriptions.forEach(item => {
+                const responsesSent = item.status.total.responsesSent || 0
+                const connectTime = item.connectTime || placeholder
+                const lastUpdateTime = item.status.lastUpdateTime || placeholder
+                const disconnectTime = item.disconnectTime || null
+
+                totalUpdates.push(responsesSent)
+                connectTimes.push(connectTime)
+                updateTimes.push(lastUpdateTime)
+
+                if (connectTime && connectTime.length && !disconnectTime) {
+                  status = 'Online'
+                } else {
+                  status = 'Offline'
+                }
+              })
+
+              // get the sum of total updates (with some precautions)
+              totalUpdates = totalUpdates.reduce((a, b) => a + b)
+
+              // select the most recent LAST CONNECTED timestamp
+              const selectedTime = connectTimes.reduce((a, b) => {
+                if (a && b) {
+                  return a.MeasureDate > b.MeasureDate ? a : b
+                }
+
+                return null
+              })
+
+              // select the most recent LAST UPDATED timestamnp
+              const selectedUpdateTime = updateTimes.reduce((a, b) => {
+                if (a && b) {
+                  return a.MeasureDate > b.MeasureDate ? a : b
+                }
+
+                return null
+              })
+
+              // format each reduced value as a date to compare against
+              const selectedTimeAsDate = new Date(selectedTime)
+              const selectedUpdateTimeAsDate = new Date(selectedUpdateTime)
+
+              /**
+               * @todo refactor this to use a function instead
+               */
+
+              // formatted time for LAST CONNECTED (if there is a value present)
+              if (selectedTime && !isNaN(selectedTimeAsDate)) {
+                lastConnected = humanReadableDate(selectedTimeAsDate)
+              } else {
+                lastConnected = 'never'
+              }
+
+              // formatted time for LAST UPDATED (if there is a value present)
+              if (selectedUpdateTime && !isNaN(selectedUpdateTimeAsDate)) {
+                lastUpdated = humanReadableDate(selectedUpdateTimeAsDate)
+              } else {
+                lastUpdated = 'never'
+              }
+            } else {
+              // if there are no subscriptions, set them all to a fallback
+              lastConnected = 'never'
+              lastUpdated = 'never'
+              totalUpdates = 0
+            }
+
+            // assemble the table data
+            finalArr.push({
+              name: response.name,
+              mesh: response.mesh,
+              tags: tags,
+              status: status,
+              lastConnected: lastConnected,
+              lastUpdated: lastUpdated,
+              totalUpdates: totalUpdates,
+              type: dataplaneType()
+            })
+
+            this.sortEntities(finalArr)
+
+            return finalArr
+          })
+          .catch(error => {
+            console.error(error)
+          })
+      }
+
+      const getDataplanes = () => {
+        return endpoint()
+          .then(response => {
+            const items = () => {
+              const r = response
+
+              if ('total' in r) {
+                if (r.total !== 0 && r.items && r.items.length > 0) {
+                  return this.sortEntities(r.items)
+                }
+
+                return null
+              }
+
+              return r
+            }
+
+            if (items()) {
+              // check to see if the `next` url is present
+              if (response.next) {
+                this.next = getOffset(response.next)
+                this.hasNext = true
+              } else {
+                this.hasNext = false
+              }
+
+              const final = []
+              const itemSelect = query
+                ? items()
+                : items()[0]
+
+              // set the first item as the default for initial load
+              this.firstEntity = itemSelect.name
+
+              // load the YAML entity for the first item on page load
+              this.getEntity(itemSelect)
+
+              // set the selected table row for the first item on page load
+              this.$store.dispatch('updateSelectedTableRow', this.firstEntity)
+
+              if ((query && query.length) && (mesh && mesh.length)) {
+                dpFetcher(mesh, query, final)
+              } else {
+                items().forEach(item => {
+                  dpFetcher(item.mesh, item.name, final)
+                })
+              }
+
+              this.tableData.data = final
+              this.tableDataIsEmpty = false
+              this.isEmpty = false
+            } else {
+              this.tableData.data = []
+              this.tableDataIsEmpty = true
+              this.isEmpty = true
+
+              this.getEntity(null)
+            }
+          })
+          .catch(error => {
+            this.hasError = true
+            this.isEmpty = true
+
+            console.error(error)
+          })
+          .finally(() => {
+            setTimeout(() => {
+              this.isLoading = false
+            }, process.env.VUE_APP_DATA_TIMEOUT)
+          })
+      }
+
+      getDataplanes()
+    },
+    getEntity (entity) {
+      this.entityIsLoading = true
+      this.entityIsEmpty = false
+
+      const mesh = this.$route.params.mesh
+
+      if (entity && entity !== null) {
+        const entityMesh = (mesh === 'all')
+          ? entity.mesh
+          : mesh
+
+        return this.$api.getDataplaneFromMesh(entityMesh, entity.name)
+          .then(response => {
+            if (response) {
+              const selected = ['type', 'name', 'mesh']
+
+              // get mTLS data if it's present
+              const getMTLSData = async () => {
+                let data = null
+
+                try {
+                  const res = await this.$api.getDataplaneOverviewFromMesh(entityMesh, entity.name)
+
+                  if (res.dataplaneInsight.mTLS) {
+                    const mtls = res.dataplaneInsight.mTLS
+
+                    const rawExpDate = new Date(mtls.certificateExpirationTime)
+                    // this prevents any weird date shifting
+                    const fixedExpDate = new Date(
+                      rawExpDate.getTime() +
+                      rawExpDate.getTimezoneOffset() * 60000
+                    )
+                    // assembled to display date and time (in 24-hour format)
+                    const assembledExpDate = `
+                      ${fixedExpDate.toLocaleDateString('en-US')} ${fixedExpDate.getHours()}:${fixedExpDate.getMinutes()}:${fixedExpDate.getSeconds()}
+                    `
+
+                    data = {
+                      certificateExpirationTime: {
+                        label: 'Expiration Time',
+                        // value: new Date(mtls.certificateExpirationTime).toLocaleDateString('en-US')
+                        value: assembledExpDate
+                      },
+                      lastCertificateRegeneration: {
+                        label: 'Last Generated',
+                        value: humanReadableDate(mtls.lastCertificateRegeneration)
+                      },
+                      certificateRegenerations: {
+                        label: 'Regenerations',
+                        value: mtls.certificateRegenerations
+                      }
+                    }
+                  }
+                } catch (error) {
+                  console.log(error)
+                }
+
+                return data
+              }
+
+              // combine all tags into a single object
+              const fullTagSrc = () => {
+                const src = response.networking || null
+                const inbound = src.inbound || null
+                const gateway = src.gateway || null
+                const ingress = src.ingress || null
+
+                if (inbound || gateway || ingress) {
+                  const final = []
+
+                  // inbound tags
+                  if (inbound) {
+                    for (let i = 0; i < inbound.length; i++) {
+                      const rawTags = inbound[i].tags || null
+
+                      if (rawTags) {
+                        const tagKeys = Object.keys(rawTags)
+                        const tagVals = Object.values(rawTags)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  // gateway tags
+                  if (gateway) {
+                    const gatewayItems = gateway.tags || null
+
+                    if (gatewayItems) {
+                      for (let i = 0; i < Object.keys(gatewayItems).length; i++) {
+                        const tagKeys = Object.keys(gatewayItems)
+                        const tagVals = Object.values(gatewayItems)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  // ingress tags
+                  if (ingress) {
+                    for (let i = 0; i < ingress.length; i++) {
+                      const ingressTags = ingress[i].tags || null
+                      const ingressService = ingress[i].service || null
+
+                      if (ingressService) {
+                        final.push({
+                          label: 'service',
+                          value: ingressService
+                        })
+                      }
+
+                      if (ingressTags) {
+                        const tagKeys = Object.keys(ingressTags)
+                        const tagVals = Object.values(ingressTags)
+
+                        for (let x = 0; x < tagKeys.length; x++) {
+                          final.push({
+                            label: tagKeys[x],
+                            value: tagVals[x]
+                          })
+                        }
+                      }
+                    }
+                  }
+
+                  return final
+                }
+
+                return null
+              }
+
+              const newEntity = async () => {
+                return {
+                  basicData: { ...getSome(response, selected) },
+                  tags: { ...fullTagSrc() },
+                  mtls: await getMTLSData()
+                }
+              }
+
+              newEntity().then(i => {
+                this.entity = i
+                this.entityNamespace = i.basicData.name
+                this.tabGroupTitle = `Mesh: ${i.basicData.name}`
+                this.entityOverviewTitle = `Entity Overview for ${i.basicData.name}`
+              })
+
+              this.rawEntity = response
+            } else {
+              this.entity = null
+              this.entityIsEmpty = true
+            }
+          })
+          .catch(error => {
+            this.entityHasError = true
+            console.error(error)
+          })
+          .finally(() => {
+            setTimeout(() => {
+              this.entityIsLoading = false
+            }, process.env.VUE_APP_DATA_TIMEOUT)
+          })
+      } else {
+        setTimeout(() => {
+          this.entityIsEmpty = true
+          this.entityIsLoading = false
+        }, process.env.VUE_APP_DATA_TIMEOUT)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-dp-button {
+  background-color: var(--logo-green) !important;
+}
+</style>
diff --git a/src/views/Entities/Meshes.vue b/src/views/Entities/Meshes.vue
index 2b9f0a4e4f..2888e23457 100644
--- a/src/views/Entities/Meshes.vue
+++ b/src/views/Entities/Meshes.vue
@@ -5,7 +5,6 @@
         :page-size="pageSize"
         :has-error="hasError"
         :is-loading="isLoading"
-        :is-empty="isEmpty"
         :empty-state="empty_state"
         :display-data-table="true"
         :table-data="tableData"
@@ -38,13 +37,21 @@
         </template>
       </DataOverview>
       <Tabs
+        v-if="isEmpty === false"
         :has-error="hasError"
         :is-loading="isLoading"
-        :is-empty="isEmpty"
         :tabs="tabs"
         :tab-group-title="tabGroupTitle"
         initial-tab-override="overview"
       >
+        <template slot="tabHeader">
+          <div>
+            <h3>{{ tabGroupTitle }}</h3>
+          </div>
+          <!-- <div>
+            <EntityURLControl :url="shareUrl" />
+          </div> -->
+        </template>
         <template slot="overview">
           <LabelList
             :has-error="entityHasError"
@@ -144,6 +151,7 @@
 <script>
 import { mapState } from 'vuex'
 import { getSome, humanReadableDate, getOffset } from '@/helpers'
+import EntityURLControl from '@/components/Utils/EntityURLControl'
 import sortEntities from '@/mixins/EntitySorter'
 import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
 import Pagination from '@/components/Pagination'
@@ -158,6 +166,7 @@ export default {
     title: 'Meshes'
   },
   components: {
+    EntityURLControl,
     FrameSkeleton,
     Pagination,
     DataOverview,
@@ -272,6 +281,19 @@ export default {
     },
     countCols () {
       return Math.ceil(this.counts.length / this.itemsPerCol)
+    },
+    shareUrl () {
+      const urlRoot = `${window.location.origin}/#`
+
+      const shareUrl = () => {
+        if (this.$route.query.ns) {
+          return this.$route.fullPath
+        }
+
+        return `${urlRoot}${this.$route.fullPath}`
+      }
+
+      return shareUrl()
     }
   },
   watch: {
@@ -368,15 +390,18 @@ export default {
 
               this.tableData.data = [...items]
               this.tableDataIsEmpty = false
+              this.isEmpty = false
             } else {
               this.tableData.data = []
               this.tableDataIsEmpty = true
+              this.isEmpty = true
 
               this.getEntity(null)
             }
           })
           .catch(error => {
             this.hasError = true
+            this.isEmpty = true
 
             console.error(error)
           })
diff --git a/src/views/Entities/RemoteCP.vue b/src/views/Entities/RemoteCP.vue
new file mode 100644
index 0000000000..9c63a74e29
--- /dev/null
+++ b/src/views/Entities/RemoteCP.vue
@@ -0,0 +1,358 @@
+<template>
+  <div class="local-cps">
+    <page-header noflex>
+      <h2 class="xxl">
+        {{ pageTitle }}
+      </h2>
+    </page-header>
+    <KEmptyState
+      v-if="!multicluster"
+      class="global-api-status"
+      cta-is-hidden
+    >
+      <template slot="title">
+        <KIcon
+          class="kong-icon--centered"
+          icon="dangerCircle"
+          size="64"
+        />
+        Kuma is running in Standalone mode.
+      </template>
+      <template slot="message">
+        <p>
+          To access this page, you must be running in <strong>Multicluster</strong> mode.
+        </p>
+      </template>
+    </KEmptyState>
+    <FrameSkeleton v-else>
+      <DataOverview
+        :page-size="pageSize"
+        :has-error="hasError"
+        :is-loading="isLoading"
+        :empty-state="empty_state"
+        :display-data-table="true"
+        :table-data="tableData"
+        :table-data-is-empty="tableDataIsEmpty"
+        table-data-function-text="View"
+        table-data-row="name"
+        @tableAction="tableAction"
+        @reloadData="loadData"
+      >
+        <template slot="pagination">
+          <Pagination
+            :has-previous="previous.length > 0"
+            :has-next="hasNext"
+            @next="goToNextPage"
+            @previous="goToPreviousPage"
+          />
+        </template>
+      </DataOverview>
+      <Tabs
+        v-if="isEmpty === false"
+        :has-error="hasError"
+        :is-loading="isLoading"
+        :tabs="tabs"
+        initial-tab-override="overview"
+      >
+        <template slot="tabHeader">
+          <div>
+            <h3>{{ tabGroupTitle }}</h3>
+          </div>
+        </template>
+        <template slot="overview">
+          <LabelList
+            :has-error="entityHasError"
+            :is-loading="entityIsLoading"
+            :is-empty="entityIsEmpty"
+          >
+            <div>
+              <ul>
+                <li
+                  v-for="(value, key) in entity"
+                  :key="key"
+                >
+                  <h4>
+                    {{ key }}
+                  </h4>
+                  <p v-if="key === 'status'">
+                    <KBadge :appearance="value === 'Offline' ? 'danger' : 'success'">
+                      {{ value }}
+                    </KBadge>
+                  </p>
+                  <p v-else>
+                    {{ value }}
+                  </p>
+                </li>
+              </ul>
+            </div>
+          </LabelList>
+        </template>
+      </Tabs>
+    </FrameSkeleton>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import { humanReadableDate, getOffset } from '@/helpers'
+import sortEntities from '@/mixins/EntitySorter'
+import PageHeader from '@/components/Utils/PageHeader.vue'
+import FrameSkeleton from '@/components/Skeletons/FrameSkeleton'
+import Pagination from '@/components/Pagination'
+import DataOverview from '@/components/Skeletons/DataOverview'
+import Tabs from '@/components/Utils/Tabs'
+import LabelList from '@/components/Utils/LabelList'
+
+export default {
+  name: 'RemoteCP',
+  metaInfo: {
+    title: 'Remote CPs'
+  },
+  components: {
+    PageHeader,
+    FrameSkeleton,
+    Pagination,
+    DataOverview,
+    Tabs,
+    LabelList
+  },
+  filters: {
+    formatValue (value) {
+      return value ? value.toLocaleString('en').toString() : 0
+    },
+    readableDate (value) {
+      return humanReadableDate(value)
+    }
+  },
+  mixins: [
+    sortEntities
+  ],
+  data () {
+    return {
+      isLoading: true,
+      isEmpty: false,
+      hasError: false,
+      entityIsLoading: true,
+      entityIsEmpty: false,
+      entityHasError: false,
+      tableDataIsEmpty: false,
+      empty_state: {
+        title: 'No Data',
+        message: 'There are no Meshes present.'
+      },
+      tableData: {
+        headers: [
+          { key: 'actions', hideLabel: true },
+          { label: 'Status', key: 'status' },
+          { label: 'Name', key: 'name' },
+          { label: 'URL', key: 'url' }
+        ],
+        data: []
+      },
+      tabs: [
+        {
+          hash: '#overview',
+          title: 'Overview'
+        }
+      ],
+      entity: [],
+      rawEntity: null,
+      firstEntity: null,
+      pageSize: this.$pageSize,
+      pageOffset: null,
+      next: null,
+      hasNext: false,
+      previous: [],
+      tabGroupTitle: null,
+      entityOverviewTitle: null,
+      itemsPerCol: 3
+    }
+  },
+  computed: {
+    ...mapState({
+      mesh: 'selectedMesh'
+    }),
+    ...mapGetters({
+      multicluster: 'getMulticlusterStatus'
+    }),
+    pageTitle () {
+      const metaTitle = this.$route.meta.title
+
+      return metaTitle
+    },
+    shareUrl () {
+      const urlRoot = `${window.location.origin}#`
+      const entity = this.entity
+
+      const shareUrl = () => {
+        if (this.$route.query.ns) {
+          return this.$route.fullPath
+        }
+
+        return `${urlRoot}${this.$route.fullPath}?ns=${entity.name}`
+      }
+
+      return shareUrl()
+    }
+  },
+  watch: {
+    '$route' (to, from) {
+      this.init()
+    }
+  },
+  beforeMount () {
+    this.init()
+  },
+  methods: {
+    init () {
+      if (this.multicluster) {
+        this.loadData()
+      }
+    },
+    goToPreviousPage () {
+      this.pageOffset = this.previous.pop()
+      this.next = null
+
+      this.loadData()
+    },
+    goToNextPage () {
+      this.previous.push(this.pageOffset)
+      this.pageOffset = this.next
+      this.next = null
+
+      this.loadData()
+    },
+    tableAction (ev) {
+      const data = ev
+
+      // reset back to the first tab
+      this.$store.dispatch('updateSelectedTab', this.tabs[0].hash)
+
+      // set the active table row
+      this.$store.dispatch('updateSelectedTableRow', data.name)
+
+      // load the data into the tabs
+      this.getEntity(data)
+    },
+    loadData () {
+      this.isLoading = true
+      this.isEmpty = false
+
+      const endpoint = this.$api.getLocalCPs()
+
+      const getLocalCPs = () => {
+        return endpoint
+          .then(response => {
+            // check to see if the `next` url is present
+            if (response.next) {
+              this.next = getOffset(response.next)
+              this.hasNext = true
+            } else {
+              this.hasNext = false
+            }
+
+            const items = response
+
+            if (items.length > 0) {
+              // rewrite the status column to be more human-readable
+              items.forEach(i => {
+                const status = (i.active === false)
+                  ? 'Offline'
+                  : 'Online'
+
+                delete i.active
+
+                i.status = status
+              })
+
+              // sort the table data by name and the mesh it's associated with
+              this.sortEntities(items)
+
+              // set the first item as the default for initial load
+              this.firstEntity = items[0].name
+
+              // load the YAML entity for the first item on page load
+              this.getEntity(items[0])
+
+              // set the selected table row for the first item on page load
+              this.$store.dispatch('updateSelectedTableRow', this.firstEntity)
+
+              this.tableData.data = [...items]
+              this.tableDataIsEmpty = false
+              this.isEmpty = false
+            } else {
+              this.tableData.data = []
+              this.tableDataIsEmpty = true
+              this.isEmpty = true
+
+              this.getEntity(null)
+            }
+          })
+          .catch(error => {
+            this.hasError = true
+            this.isEmpty = true
+
+            console.error(error)
+          })
+          .finally(() => {
+            setTimeout(() => {
+              this.isLoading = false
+            }, process.env.VUE_APP_DATA_TIMEOUT)
+          })
+      }
+
+      getLocalCPs()
+    },
+    getEntity (entity) {
+      this.entityIsLoading = true
+      this.entityIsEmpty = false
+
+      const promise = new Promise((resolve, reject) => {
+        if (entity && entity !== null) {
+          resolve(entity)
+        } else {
+          const error = new Error('Entity is either undefined or not present.')
+
+          reject(error)
+        }
+      })
+
+      if (entity && entity !== null) {
+        promise
+          .then(response => {
+            if (response) {
+              this.tabGroupTitle = `Local CP: ${response.name}`
+              this.entityOverviewTitle = `Entity Overview for ${response.name}`
+
+              this.entity = response
+              this.rawEntity = response
+            } else {
+              this.entity = null
+              this.entityIsEmpty = true
+            }
+          })
+          .catch(error => {
+            this.entityHasError = true
+            console.error(error)
+          })
+          .finally(() => {
+            setTimeout(() => {
+              this.entityIsLoading = false
+            }, process.env.VUE_APP_DATA_TIMEOUT)
+          })
+      } else {
+        setTimeout(() => {
+          this.entityIsEmpty = true
+          this.entityIsLoading = false
+        }, process.env.VUE_APP_DATA_TIMEOUT)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-mesh-button {
+  background-color: var(--logo-green) !important;
+}
+</style>
diff --git a/src/views/Onboarding/GetStarted.vue b/src/views/Onboarding/GetStarted.vue
index 22645b2d71..838be2220d 100644
--- a/src/views/Onboarding/GetStarted.vue
+++ b/src/views/Onboarding/GetStarted.vue
@@ -102,7 +102,6 @@
           <KButton
             :to="{ name: 'setup-complete' }"
             appearance="primary"
-            class="mr-4"
           >
             Next Step
           </KButton>
@@ -161,23 +160,13 @@
               Dataplanes.
             </p>
             <div class="cols">
-              <div>
-                <KButton
-                  :to="{ name: 'kubernetes-dataplane' }"
-                  appearance="primary"
-                  @click.native="completeOnboarding()"
-                >
-                  Kubernetes Dataplane Wizard
-                </KButton>
-              </div>
-              <div>
-                <router-link
-                  :to="{ name: 'global-overview' }"
-                  @click.native="completeOnboarding()"
-                >
-                  Skip to Dashboard
-                </router-link>
-              </div>
+              <KButton
+                :to="{ name: 'kubernetes-dataplane' }"
+                appearance="primary"
+                @click.native="completeOnboarding()"
+              >
+                Kubernetes Dataplane Wizard
+              </KButton>
             </div>
           </div>
           <!-- universal instructions -->
@@ -190,19 +179,12 @@
               Dataplanes.
             </p>
             <div class="cols">
-              <div>
-                <KButton
-                  :to="{ name: 'universal-dataplane' }"
-                  appearance="primary"
-                >
-                  Universal Dataplane Wizard
-                </KButton>
-              </div>
-              <div>
-                <router-link :to="{ name: 'global-overview' }">
-                  Skip to Dashboard
-                </router-link>
-              </div>
+              <KButton
+                :to="{ name: 'universal-dataplane' }"
+                appearance="primary"
+              >
+                Universal Dataplane Wizard
+              </KButton>
             </div>
           </div>
 
@@ -215,6 +197,16 @@
           </KButton> -->
         </div>
       </div>
+      <footer class="extra-controls">
+        <KButton
+          :to="{ name: 'global-overview' }"
+          appearance="primary"
+          size="small"
+          @click.native="completeOnboarding()"
+        >
+          Skip to Dashboard
+        </KButton>
+      </footer>
     </div>
     <!-- .app-source-check -->
 
@@ -355,7 +347,7 @@ export default {
   padding: var(--spacing-md) 0;
   margin: var(--spacing-md) 0;
   border-top: 1px solid var(--tblack-10);
-  border-bottom: 1px solid var(--tblack-10);
+  // border-bottom: 1px solid var(--tblack-10);
 }
 
 .app-source-check {
@@ -459,6 +451,12 @@ export default {
   }
 }
 
+.extra-controls {
+  border-top: 1px solid var(--tblack-10);
+  margin-top: var(--spacing-md);
+  padding-top: var(--spacing-sm);
+}
+
 @media (min-width: 768px) {
   .dataplane-global-status {
     flex: 1;
diff --git a/src/views/Overview.vue b/src/views/Overview.vue
index 0332c54dde..e2b17c9d86 100644
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
@@ -87,7 +87,8 @@ export default {
     ...mapGetters({
       title: 'getTagline',
       environment: 'getEnvironment',
-      selectedMesh: 'getSelectedMesh'
+      selectedMesh: 'getSelectedMesh',
+      multicluster: 'getMulticlusterStatus'
     }),
     pageTitle () {
       const metaTitle = this.$route.meta.title
@@ -184,6 +185,18 @@ export default {
         }
       ]
 
+      // if Kuma is running in multicluster mode
+      if (this.multicluster) {
+        const clusters = {
+          metric: 'Remote CPs',
+          value: this.$store.state.totalClusters,
+          url: '/remote-cp'
+        }
+
+        tableData.push(clusters)
+      }
+
+      // if the user is viewing data for all meshes
       if (mesh !== 'all') {
         // if the user is viewing the overview with a mesh selected,
         // we hide the mesh count from the metrics grid
@@ -213,6 +226,10 @@ export default {
   methods: {
     init () {
       this.getCounts()
+
+      if (this.multicluster) {
+        this.$store.dispatch('fetchTotalClusterCount')
+      }
     },
     getCounts () {
       let actions
diff --git a/src/views/Wizard/components/StepSkeleton.vue b/src/views/Wizard/components/StepSkeleton.vue
index a1ec94ea6f..11a4e0adb0 100644
--- a/src/views/Wizard/components/StepSkeleton.vue
+++ b/src/views/Wizard/components/StepSkeleton.vue
@@ -334,6 +334,7 @@ $bp-max-width: 1219px;
     border-radius: 6px;
     padding: var(--spacing-md);
     font-size: var(--base-font-size);
+    overflow: auto;
   }
 }
 
diff --git a/src/views/Wizard/views/DataplaneKubernetes.vue b/src/views/Wizard/views/DataplaneKubernetes.vue
index d747e271d5..71ae9a2d22 100644
--- a/src/views/Wizard/views/DataplaneKubernetes.vue
+++ b/src/views/Wizard/views/DataplaneKubernetes.vue
@@ -606,6 +606,26 @@
             by {{ title }}.
           </p>
         </template>
+        <template slot="example">
+          <h3>Example</h3>
+          <p>
+            Below is an example of a Dataplane resource output:
+          </p>
+          <code>
+            <pre>apiVersion: 'kuma.io/v1alpha1'
+kind: Dataplane
+mesh: default
+metadata:
+  name: dp-echo-1
+networking:
+  address: 10.0.0.1
+  inbound:
+  - port: 10000
+    servicePort: 9000
+    tags:
+      service: echo</pre>
+          </code>
+        </template>
       </StepSkeleton>
     </div>
   </div>
@@ -676,6 +696,9 @@ export default {
       sidebarContent: [
         {
           name: 'dataplane'
+        },
+        {
+          name: 'example'
         }
       ],
       startScanner: false,