diff --git a/packages/kuma-gui/features/application/MainNavigation.feature b/packages/kuma-gui/features/application/MainNavigation.feature
index 8e0a84d16..559893b6a 100644
--- a/packages/kuma-gui/features/application/MainNavigation.feature
+++ b/packages/kuma-gui/features/application/MainNavigation.feature
@@ -95,4 +95,4 @@ Feature: application / MainNavigation
             inbound:
               - port: 51112
       """
-      And the "[data-testid='data-plane-connection-inbound-summary-stats-view-tab'].active" element exists
+    And the "[data-testid='data-plane-connection-inbound-summary-stats-view-tab'].active" element exists
diff --git a/packages/kuma-gui/features/hostname-generators/HostnameGeneratorSummary.feature b/packages/kuma-gui/features/hostname-generators/HostnameGeneratorSummary.feature
new file mode 100644
index 000000000..511aead1e
--- /dev/null
+++ b/packages/kuma-gui/features/hostname-generators/HostnameGeneratorSummary.feature
@@ -0,0 +1,32 @@
+Feature: HostnameGenerator summary
+
+  Background:
+    Given the CSS selectors
+      | Alias             | Selector                                 |
+      | summary           | [data-testid='summary']                  |
+      | select-preference | $summary [data-testid='select-input']    |
+      | structured-view   | $summary [data-testid='structured-view'] |
+
+  Scenario: Switching to YAML format and back
+    Given the URL "/hostnamegenerators" responds with
+      """
+      body:
+        items:
+          - name: <HostnameGenerator>
+      """
+    When I visit the "/hostname-generators/<HostnameGenerator>" URL
+    Then the "$select-preference" element exists
+    And the "$structured-view" element exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-yaml'] button" element
+    Then the URL contains "format=yaml"
+    And the "[data-testid='k-code-block']" element exists
+    And the "$structured-view" element doesn't exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-structured'] button" element
+    Then the URL contains "format=structured"
+    And the "$structured-view" element exists
+
+    Examples:
+      | HostnameGenerator           |
+      | local-mesh-external-service |
diff --git a/packages/kuma-gui/features/mesh/builtin-gateways/BuiltinGatewaySummary.feature b/packages/kuma-gui/features/mesh/builtin-gateways/BuiltinGatewaySummary.feature
new file mode 100644
index 000000000..5a10c468b
--- /dev/null
+++ b/packages/kuma-gui/features/mesh/builtin-gateways/BuiltinGatewaySummary.feature
@@ -0,0 +1,40 @@
+Feature: BuiltinGateway summary
+
+  Background:
+    Given the CSS selectors
+      | Alias             | Selector                                 |
+      | summary           | [data-testid='summary']                  |
+      | select-preference | $summary [data-testid='select-input']    |
+      | structured-view   | $summary [data-testid='structured-view'] |
+    And the environment
+      """
+      KUMA_MESHGATEWAY_COUNT: 1
+      """
+    And the URL "/meshes/default/meshgateways" responds with
+      """
+      body:
+        items:
+          - name: gateway-1
+            labels:
+              kuma.io/origin: zone
+              kuma.io/zone: zone-1
+              kuma.io/display-name: gateway-1
+      """
+
+  Scenario: Switching to YAML format and back
+    When I visit the "<URL>" URL
+    Then the "$select-preference" element exists
+    And the "$structured-view" element exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-yaml'] button" element
+    Then the URL contains "format=yaml"
+    And the "[data-testid='k-code-block']" element exists
+    And the "$structured-view" element doesn't exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-structured'] button" element
+    Then the URL contains "format=structured"
+    And the "$structured-view" element exists
+
+    Examples:
+      | URL                                        |
+      | /meshes/default/gateways/builtin/gateway-1 |
diff --git a/packages/kuma-gui/features/mesh/dataplanes/DataplanePolicySummary.feature b/packages/kuma-gui/features/mesh/dataplanes/DataplanePolicySummary.feature
index 1f0373273..9dafba37f 100644
--- a/packages/kuma-gui/features/mesh/dataplanes/DataplanePolicySummary.feature
+++ b/packages/kuma-gui/features/mesh/dataplanes/DataplanePolicySummary.feature
@@ -3,9 +3,12 @@ Feature: Dataplane policy summary
   Background:
     Given the CSS selectors
       | Alias                      | Selector                                                                   |
-      | summary-slideout-container | [data-testid='summary'] [data-testid='slideout-container']                 |
+      | summary                    | [data-testid='summary']                                                    |
+      | summary-slideout-container | $summary [data-testid='slideout-container']                                |
       | summary-title              | $summary-slideout-container [data-testid='slideout-title']                 |
       | summary-content            | $summary-slideout-container [data-testid='data-plane-policy-summary-view'] |
+      | select-preference          | $summary [data-testid='select-input']                                      |
+      | structured-view            | $summary [data-testid='structured-view']                                   |
 
   Scenario: Policy Summary View has expected content
     Given the URL "/meshes/default/meshhttproutes/the-other-http-route" responds with
@@ -46,4 +49,36 @@ Feature: Dataplane policy summary
     And the "$summary-content" element contains "MeshGateway:foo"
     And the "$summary-content" element contains "Namespace"
     And the "$summary-content" element contains "kuma-system"
-    And the "$summary-content [data-testid='k-code-block']" element exists
+    And the "$select-preference" element exists
+
+  Scenario: Switching to YAML format and back
+    Given the URL "/meshes/default/meshhttproutes/<PolicyName>" responds with
+      """
+      body:
+        type: MeshHTTPRoute
+        mesh: default
+        name: <PolicyName>
+        labels:
+          k8s.kuma.io/namespace: kuma-system
+          kuma.io/display-name: foo
+        spec:
+          targetRef:
+            kind: MeshGateway
+            name: foo
+      """
+    When I visit the "/meshes/default/data-planes/dataplane-1/policies/meshhttproutes/<PolicyName>" URL
+    Then the "$select-preference" element exists
+    And the "$structured-view" element exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-yaml'] button" element
+    Then the URL contains "format=yaml"
+    And the "[data-testid='k-code-block']" element exists
+    And the "$structured-view" element doesn't exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-structured'] button" element
+    Then the URL contains "format=structured"
+    And the "$structured-view" element exists
+
+    Examples:
+      | PolicyName           |
+      | the-other-http-route |
diff --git a/packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature b/packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature
index 08df8a662..6009c964c 100644
--- a/packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature
+++ b/packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature
@@ -6,6 +6,8 @@ Feature: Dataplane summary
       | item                 | [data-testid='data-plane-collection'] tbody tr |
       | summary              | [data-testid='summary']                        |
       | close-summary-button | $summary [data-testid='slideout-close-icon']   |
+      | select-preference    | $summary [data-testid='select-input']          |
+      | structured-view      | $summary [data-testid='structured-view']       |
     And the environment
       """
       KUMA_SUBSCRIPTION_COUNT: 2
@@ -47,3 +49,21 @@ Feature: Dataplane summary
       """
     When I visit the "/meshes/default/data-planes/test-data-plane-1?page=2&size=50" URL
     Then the "$summary" element exists
+
+  Scenario: Switching to YAML format and back
+    Given the environment
+      """
+      KUMA_DATAPLANE_COUNT: 1
+      """
+    When I visit the "/meshes/default/data-planes/test-data-plane-1" URL
+    Then the "$select-preference" element exists
+    And the "$structured-view" element exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-yaml'] button" element
+    Then the URL contains "format=yaml"
+    And the "[data-testid='k-code-block']" element exists
+    And the "$structured-view" element doesn't exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-structured'] button" element
+    Then the URL contains "format=structured"
+    And the "$structured-view" element exists
diff --git a/packages/kuma-gui/features/mesh/dataplanes/overview/summary/Clusters.feature b/packages/kuma-gui/features/mesh/dataplanes/overview/summary/Clusters.feature
index c45e1acf7..a4d0df2cf 100644
--- a/packages/kuma-gui/features/mesh/dataplanes/overview/summary/Clusters.feature
+++ b/packages/kuma-gui/features/mesh/dataplanes/overview/summary/Clusters.feature
@@ -2,7 +2,7 @@ Feature: mesh / dataplanes / connections / clusters
 
   Scenario: The inbound clusters tab correctly filters by 'localhost_<port>'
     Given the CSS selectors
-      | Alias | Selector                                                                              |
+      | Alias | Selector                                                                                         |
       | code  | [data-testid='data-plane-connection-inbound-summary-clusters-view'] [data-testid='k-code-block'] |
     And the URL "/meshes/mesh-name/dataplanes/service-64cbb7b8b5-6g94n.namespace/_overview" responds with
       """
@@ -30,7 +30,7 @@ Feature: mesh / dataplanes / connections / clusters
 
   Scenario: The outbound clusters tab correctly filters by '<clusterName>'
     Given the CSS selectors
-      | Alias | Selector                                                                               |
+      | Alias | Selector                                                                                          |
       | code  | [data-testid='data-plane-connection-outbound-summary-clusters-view'] [data-testid='k-code-block'] |
     And the URL "/meshes/mesh-name/dataplanes/service-64cbb7b8b5-6g94n.namespace/stats" responds with
       """
diff --git a/packages/kuma-gui/features/mesh/policies/PolicySummary.feature b/packages/kuma-gui/features/mesh/policies/PolicySummary.feature
index 30e56a28c..c0d53935e 100644
--- a/packages/kuma-gui/features/mesh/policies/PolicySummary.feature
+++ b/packages/kuma-gui/features/mesh/policies/PolicySummary.feature
@@ -7,6 +7,8 @@ Feature: Policy summary
       | item                 | $items tbody tr                              |
       | summary              | [data-testid='summary']                      |
       | close-summary-button | $summary [data-testid='slideout-close-icon'] |
+      | select-preference    | $summary [data-testid='select-input']        |
+      | structured-view      | $summary [data-testid='structured-view']     |
     And the URL "/meshes/default/meshfaultinjections" responds with
       """
       body:
@@ -38,3 +40,21 @@ Feature: Policy summary
       """
     When I visit the "/meshes/default/policies/meshfaultinjections/mfi-1?page=2&size=50" URL
     Then the "$summary" element exists
+
+  Scenario: Switching to YAML format and back
+    Given the environment
+      """
+      KUMA_MESHFAULTINJECTION_COUNT: 1
+      """
+    When I visit the "/meshes/default/policies/meshfaultinjections/mfi-1" URL
+    Then the "$select-preference" element exists
+    And the "$structured-view" element exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-yaml'] button" element
+    Then the URL contains "format=yaml"
+    And the "[data-testid='k-code-block']" element exists
+    And the "$structured-view" element doesn't exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-structured'] button" element
+    Then the URL contains "format=structured"
+    And the "$structured-view" element exists
diff --git a/packages/kuma-gui/features/mesh/services/mesh-external-services/MeshExternalServiceSummary.feature b/packages/kuma-gui/features/mesh/services/mesh-external-services/MeshExternalServiceSummary.feature
new file mode 100644
index 000000000..58544e3aa
--- /dev/null
+++ b/packages/kuma-gui/features/mesh/services/mesh-external-services/MeshExternalServiceSummary.feature
@@ -0,0 +1,47 @@
+Feature: MeshExternalService summary
+
+  Background:
+    Given the CSS selectors
+      | Alias             | Selector                                 |
+      | summary           | [data-testid='summary']                  |
+      | select-preference | $summary [data-testid='select-input']    |
+      | structured-view   | $summary [data-testid='structured-view'] |
+    And the environment
+      """
+      KUMA_SERVICE_COUNT: 1
+      """
+
+  Rule: In a namespaced environment
+
+    Background:
+      Given the environment
+        """
+        KUMA_ENVIRONMENT: kubernetes
+        """
+      And the URL "/meshes/default/meshexternalservices" responds with
+        """
+        body:
+          items:
+          - name: monitor-proxy-0.kuma-demo
+            labels:
+              kuma.io/display-name: monitor-proxy-0
+              k8s.kuma.io/namespace: kuma-demo
+        """
+
+    Scenario Outline: Switching to YAML format and back
+      When I visit the "<URL>" URL
+      Then the "$select-preference" element exists
+      And the "$structured-view" element exists
+      When I click the "$select-preference" element
+      When I click the "[data-testid='select-item-yaml'] button" element
+      Then the URL contains "format=yaml"
+      And the "[data-testid='k-code-block']" element exists
+      And the "$structured-view" element doesn't exists
+      When I click the "$select-preference" element
+      When I click the "[data-testid='select-item-structured'] button" element
+      Then the URL contains "format=structured"
+      And the "$structured-view" element exists
+
+      Examples:
+        | URL                                                                       |
+        | /meshes/default/services/mesh-external-services/monitor-proxy-0.kuma-demo |
diff --git a/packages/kuma-gui/features/mesh/services/mesh-multi-zone-services/MeshMultiZoneServiceSummary.feature b/packages/kuma-gui/features/mesh/services/mesh-multi-zone-services/MeshMultiZoneServiceSummary.feature
new file mode 100644
index 000000000..08f1b484d
--- /dev/null
+++ b/packages/kuma-gui/features/mesh/services/mesh-multi-zone-services/MeshMultiZoneServiceSummary.feature
@@ -0,0 +1,47 @@
+Feature: MeshMultiZoneService summary
+
+  Background:
+    Given the CSS selectors
+      | Alias             | Selector                                 |
+      | summary           | [data-testid='summary']                  |
+      | select-preference | $summary [data-testid='select-input']    |
+      | structured-view   | $summary [data-testid='structured-view'] |
+    And the environment
+      """
+      KUMA_SERVICE_COUNT: 1
+      """
+
+  Rule: In a namespaced environment
+
+    Background:
+      Given the environment
+        """
+        KUMA_ENVIRONMENT: kubernetes
+        """
+      And the URL "/meshes/default/meshmultizoneservices" responds with
+        """
+        body:
+          items:
+          - name: monitor-proxy-0.kuma-demo
+            labels:
+              kuma.io/display-name: monitor-proxy-0
+              k8s.kuma.io/namespace: kuma-demo
+        """
+
+    Scenario Outline: Switching to YAML format and back
+      When I visit the "<URL>" URL
+      Then the "$select-preference" element exists
+      And the "$structured-view" element exists
+      When I click the "$select-preference" element
+      When I click the "[data-testid='select-item-yaml'] button" element
+      Then the URL contains "format=yaml"
+      And the "[data-testid='k-code-block']" element exists
+      And the "$structured-view" element doesn't exists
+      When I click the "$select-preference" element
+      When I click the "[data-testid='select-item-structured'] button" element
+      Then the URL contains "format=structured"
+      And the "$structured-view" element exists
+
+      Examples:
+        | URL                                                                         |
+        | /meshes/default/services/mesh-multi-zone-services/monitor-proxy-0.kuma-demo |
diff --git a/packages/kuma-gui/features/mesh/services/mesh-services/MeshServiceSummary.feature b/packages/kuma-gui/features/mesh/services/mesh-services/MeshServiceSummary.feature
new file mode 100644
index 000000000..877c4fff8
--- /dev/null
+++ b/packages/kuma-gui/features/mesh/services/mesh-services/MeshServiceSummary.feature
@@ -0,0 +1,47 @@
+Feature: MeshService summary
+
+  Background:
+    Given the CSS selectors
+      | Alias             | Selector                                 |
+      | summary           | [data-testid='summary']                  |
+      | select-preference | $summary [data-testid='select-input']    |
+      | structured-view   | $summary [data-testid='structured-view'] |
+    And the environment
+      """
+      KUMA_SERVICE_COUNT: 1
+      """
+
+  Rule: In a namespaced environment
+
+    Background:
+      Given the environment
+        """
+        KUMA_ENVIRONMENT: kubernetes
+        """
+      And the URL "/meshes/default/meshservices" responds with
+        """
+        body:
+          items:
+          - name: monitor-proxy-0.kuma-demo
+            labels:
+              kuma.io/display-name: monitor-proxy-0
+              k8s.kuma.io/namespace: kuma-demo
+        """
+
+    Scenario Outline: Switching to YAML format and back
+      When I visit the "<URL>" URL
+      Then the "$select-preference" element exists
+      And the "$structured-view" element exists
+      When I click the "$select-preference" element
+      When I click the "[data-testid='select-item-yaml'] button" element
+      Then the URL contains "format=yaml"
+      And the "[data-testid='k-code-block']" element exists
+      And the "$structured-view" element doesn't exists
+      When I click the "$select-preference" element
+      When I click the "[data-testid='select-item-structured'] button" element
+      Then the URL contains "format=structured"
+      And the "$structured-view" element exists
+
+      Examples:
+        | URL                                                              |
+        | /meshes/default/services/mesh-services/monitor-proxy-0.kuma-demo |
diff --git a/packages/kuma-gui/features/zones/zone-cps/egresses/ZoneEgressSummary.feature b/packages/kuma-gui/features/zones/zone-cps/egresses/ZoneEgressSummary.feature
index 7f7ea5ee3..200792d82 100644
--- a/packages/kuma-gui/features/zones/zone-cps/egresses/ZoneEgressSummary.feature
+++ b/packages/kuma-gui/features/zones/zone-cps/egresses/ZoneEgressSummary.feature
@@ -6,6 +6,8 @@ Feature: Zone Egress summary
       | item                 | [data-testid='zone-egress-collection'] tbody tr |
       | summary              | [data-testid='summary']                         |
       | close-summary-button | $summary [data-testid='slideout-close-icon']    |
+      | select-preference    | $summary [data-testid='select-input']           |
+      | structured-view      | $summary [data-testid='structured-view']        |
     And the URL "/zoneegresses/_overview" responds with
       """
       body:
@@ -39,3 +41,21 @@ Feature: Zone Egress summary
       """
     When I visit the "/zones/zone-1/egresses/zone-egress-1?page=2&size=50" URL
     Then the "$summary" element exists
+
+  Scenario: Switching to YAML format and back
+    Given the environment
+      """
+      KUMA_ZONEEGRESS_COUNT: 1
+      """
+    When I visit the "/zones/zone-1/egresses/zone-egress-1" URL
+    Then the "$select-preference" element exists
+    And the "$structured-view" element exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-yaml'] button" element
+    Then the URL contains "format=yaml"
+    And the "[data-testid='k-code-block']" element exists
+    And the "$structured-view" element doesn't exists
+    When I click the "$select-preference" element
+    When I click the "[data-testid='select-item-structured'] button" element
+    Then the URL contains "format=structured"
+    And the "$structured-view" element exists
diff --git a/packages/kuma-gui/features/zones/zone-cps/ingresses/ZoneIngressSummary.feature b/packages/kuma-gui/features/zones/zone-cps/ingresses/ZoneIngressSummary.feature
index 4aad544f0..48abba5f0 100644
--- a/packages/kuma-gui/features/zones/zone-cps/ingresses/ZoneIngressSummary.feature
+++ b/packages/kuma-gui/features/zones/zone-cps/ingresses/ZoneIngressSummary.feature
@@ -59,5 +59,3 @@ Feature: Zone Ingress summary
     When I click the "[data-testid='select-item-structured'] button" element
     Then the URL contains "format=structured"
     And the "$structured-view" element exists
-
-
diff --git a/packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml b/packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml
index a178e977a..f8cf8250d 100644
--- a/packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml
@@ -66,7 +66,11 @@ data-planes:
       about:
         title: About this Data Plane Proxy
       gateway: 'Gateway'
-      config: YAML
+      config: Configuration
+      format: Format
+      formats:
+        yaml: YAML
+        structured: Structured
       inbounds: 'Inbounds'
       inbound_name: '{service}'
       port: ':{port}'
diff --git a/packages/kuma-gui/src/app/data-planes/views/DataPlanePolicySummaryView.vue b/packages/kuma-gui/src/app/data-planes/views/DataPlanePolicySummaryView.vue
index 43699a516..bccbe2b2b 100644
--- a/packages/kuma-gui/src/app/data-planes/views/DataPlanePolicySummaryView.vue
+++ b/packages/kuma-gui/src/app/data-planes/views/DataPlanePolicySummaryView.vue
@@ -8,6 +8,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t }"
   >
@@ -41,7 +42,38 @@
           <PolicySummary
             v-if="data"
             :policy="data"
+            :format="route.params.format"
           >
+            <template #header>
+              <header>
+                <XLayout
+                  type="separated"
+                  size="max"
+                >
+                  <h3>
+                    {{ t('policies.routes.item.config') }}
+                  </h3>
+                  <div v-if="data.spec">
+                    <XSelect
+                      :label="t('policies.routes.item.format')"
+                      :selected="route.params.format"
+                      @change="(value) => {
+                        route.update({ format: value })
+                      }"
+                    >
+                      <template
+                        v-for="value in ['structured', 'yaml']"
+                        :key="value"
+                        #[`${value}-option`]
+                      >
+                        {{ t(`policies.routes.item.formats.${value}`) }}
+                      </template>
+                    </XSelect>
+                  </div>
+                </XLayout>
+              </header>
+            </template>
+            
             <ResourceCodeBlock
               :resource="data.config"
               is-searchable
diff --git a/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue b/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue
index bf3fcf4c3..34eaa05e5 100644
--- a/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue
+++ b/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue
@@ -7,6 +7,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t, uri, can }"
   >
@@ -53,191 +54,222 @@
               </h2>
             </template>
 
-            <XLayout
-              type="stack"
-            >
-              <div
-                class="stack-with-borders"
-              >
-                <DefinitionCard
-                  layout="horizontal"
+            <XLayout>
+              <header>
+                <XLayout
+                  type="separated"
+                  size="max"
                 >
-                  <template #title>
-                    {{ t('http.api.property.status') }}
-                  </template>
-
-                  <template #body>
-                    <XLayout
-                      type="separated"
+                  <h3>
+                    {{ t('data-planes.routes.item.config') }}
+                  </h3>
+                  <div>
+                    <XSelect
+                      :label="t('data-planes.routes.item.format')"
+                      :selected="route.params.format"
+                      @change="(value) => {
+                        route.update({ format: value })
+                      }"
                     >
-                      <StatusBadge
-                        :status="item.status"
-                      />
-
-                      <DataCollection
-                        v-if="item.dataplaneType === 'standard'"
-                        :items="item.dataplane.networking.inbounds"
-                        :predicate="item => item.state !== 'Ready'"
-                        :empty="false"
-                        v-slot="{ items : inbounds }"
+                      <template
+                        v-for="value in ['structured', 'yaml']"
+                        :key="value"
+                        #[`${value}-option`]
                       >
-                        <XIcon
-                          name="info"
-                          :color="KUI_COLOR_TEXT_NEUTRAL"
-                        >
-                          <ul>
-                            <li
-                              v-for="inbound in inbounds"
-                              :key="`${inbound.service}:${inbound.port}`"
-                            >
-                              {{ t('data-planes.routes.item.unhealthy_inbound', { service: inbound.service, port: inbound.port }) }}
-                            </li>
-                          </ul>
-                        </XIcon>
-                      </DataCollection>
-                    </XLayout>
-                  </template>
-                </DefinitionCard>
+                        {{ t(`data-planes.routes.item.formats.${value}`) }}
+                      </template>
+                    </XSelect>
+                  </div>
+                </XLayout>
+              </header>
+            </XLayout>
 
-                <DefinitionCard
-                  layout="horizontal"
+            <template v-if="route.params.format === 'structured'">
+              <XLayout
+                type="stack"
+                data-testid="structured-view"
+              >
+                <div
+                  class="stack-with-borders"
                 >
-                  <template #title>
-                    Type
-                  </template>
-
-                  <template #body>
-                    {{ t(`data-planes.type.${item.dataplaneType}`) }}
-                  </template>
-                </DefinitionCard>
+                  <DefinitionCard
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('http.api.property.status') }}
+                    </template>
 
-                <DefinitionCard
-                  v-if="item.namespace.length > 0"
-                  layout="horizontal"
-                >
-                  <template #title>
-                    {{ t('data-planes.routes.item.namespace') }}
-                  </template>
+                    <template #body>
+                      <XLayout
+                        type="separated"
+                      >
+                        <StatusBadge
+                          :status="item.status"
+                        />
 
-                  <template #body>
-                    {{ item.namespace }}
-                  </template>
-                </DefinitionCard>
+                        <DataCollection
+                          v-if="item.dataplaneType === 'standard'"
+                          :items="item.dataplane.networking.inbounds"
+                          :predicate="item => item.state !== 'Ready'"
+                          :empty="false"
+                          v-slot="{ items : inbounds }"
+                        >
+                          <XIcon
+                            name="info"
+                            :color="KUI_COLOR_TEXT_NEUTRAL"
+                          >
+                            <ul>
+                              <li
+                                v-for="inbound in inbounds"
+                                :key="`${inbound.service}:${inbound.port}`"
+                              >
+                                {{ t('data-planes.routes.item.unhealthy_inbound', { service: inbound.service, port: inbound.port }) }}
+                              </li>
+                            </ul>
+                          </XIcon>
+                        </DataCollection>
+                      </XLayout>
+                    </template>
+                  </DefinitionCard>
 
-                <DefinitionCard
-                  v-if="can('use zones') && item.zone"
-                  layout="horizontal"
-                >
-                  <template
-                    #title
-                  >
-                    Zone
-                  </template>
-                  <template
-                    #body
+                  <DefinitionCard
+                    layout="horizontal"
                   >
-                    <XAction
-                      :to="{
-                        name: 'zone-cp-detail-view',
-                        params: {
-                          zone: item.zone,
-                        },
-                      }"
-                    >
-                      {{ item.zone }}
-                    </XAction>
-                  </template>
-                </DefinitionCard>
-                <DefinitionCard
-                  layout="horizontal"
-                >
-                  <template #title>
-                    {{ t('http.api.property.modificationTime') }}
-                  </template>
-
-                  <template #body>
-                    {{ t('common.formats.datetime', { value: Date.parse(item.modificationTime) }) }}
-                  </template>
-                </DefinitionCard>
-              </div>
+                    <template #title>
+                      Type
+                    </template>
 
-              <XLayout
-                v-if="item.dataplane.networking.gateway"
-                type="stack"
-              >
-                <h3>{{ t('data-planes.routes.item.gateway') }}</h3>
+                    <template #body>
+                      {{ t(`data-planes.type.${item.dataplaneType}`) }}
+                    </template>
+                  </DefinitionCard>
 
-                <div
-                  class="stack-with-borders"
-                >
                   <DefinitionCard
+                    v-if="item.namespace.length > 0"
                     layout="horizontal"
                   >
                     <template #title>
-                      {{ t('http.api.property.tags') }}
+                      {{ t('data-planes.routes.item.namespace') }}
                     </template>
 
                     <template #body>
-                      <TagList
-                        alignment="right"
-                        :tags="item.dataplane.networking.gateway.tags"
-                      />
+                      {{ item.namespace }}
                     </template>
                   </DefinitionCard>
 
+                  <DefinitionCard
+                    v-if="can('use zones') && item.zone"
+                    layout="horizontal"
+                  >
+                    <template
+                      #title
+                    >
+                      Zone
+                    </template>
+                    <template
+                      #body
+                    >
+                      <XAction
+                        :to="{
+                          name: 'zone-cp-detail-view',
+                          params: {
+                            zone: item.zone,
+                          },
+                        }"
+                      >
+                        {{ item.zone }}
+                      </XAction>
+                    </template>
+                  </DefinitionCard>
                   <DefinitionCard
                     layout="horizontal"
                   >
                     <template #title>
-                      {{ t('http.api.property.address') }}
+                      {{ t('http.api.property.modificationTime') }}
                     </template>
 
                     <template #body>
-                      <XCopyButton
-                        :text="`${item.dataplane.networking.address}`"
-                      />
+                      {{ t('common.formats.datetime', { value: Date.parse(item.modificationTime) }) }}
                     </template>
                   </DefinitionCard>
                 </div>
-              </XLayout>
-            </XLayout>
 
-            <XLayout
-              type="stack"
-            >
-              <h3>
-                {{ t('data-planes.routes.item.config') }}
-              </h3>
+                <XLayout
+                  v-if="item.dataplane.networking.gateway"
+                  type="stack"
+                >
+                  <h3>{{ t('data-planes.routes.item.gateway') }}</h3>
+
+                  <div
+                    class="stack-with-borders"
+                  >
+                    <DefinitionCard
+                      layout="horizontal"
+                    >
+                      <template #title>
+                        {{ t('http.api.property.tags') }}
+                      </template>
+
+                      <template #body>
+                        <TagList
+                          alignment="right"
+                          :tags="item.dataplane.networking.gateway.tags"
+                        />
+                      </template>
+                    </DefinitionCard>
+
+                    <DefinitionCard
+                      layout="horizontal"
+                    >
+                      <template #title>
+                        {{ t('http.api.property.address') }}
+                      </template>
+
+                      <template #body>
+                        <XCopyButton
+                          :text="`${item.dataplane.networking.address}`"
+                        />
+                      </template>
+                    </DefinitionCard>
+                  </div>
+                </XLayout>
+              </XLayout>
+            </template>
 
-              <ResourceCodeBlock
-                :resource="item.config"
-                language="yaml"
-                is-searchable
-                :query="route.params.codeSearch"
-                :is-filter-mode="route.params.codeFilter"
-                :is-reg-exp-mode="route.params.codeRegExp"
-                @query-change="route.update({ codeSearch: $event })"
-                @filter-mode-change="route.update({ codeFilter: $event })"
-                @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-                v-slot="{ copy, copying }"
+            <template v-else>
+              <XLayout
+                type="stack"
               >
-                <DataSource
-                  v-if="copying"
-                  :src="uri(sources, `/meshes/:mesh/dataplanes/:name/as/kubernetes`, {
-                    mesh: route.params.mesh,
-                    name: route.params.dataPlane,
-                  }, {
-                    cacheControl: 'no-store',
-                  })"
-                  @change="(data) => {
-                    copy((resolve) => resolve(data))
-                  }"
-                  @error="(e) => {
-                    copy((_resolve, reject) => reject(e))
-                  }"
-                />
-              </ResourceCodeBlock>
-            </XLayout>
+                <ResourceCodeBlock
+                  :resource="item.config"
+                  language="yaml"
+                  is-searchable
+                  :query="route.params.codeSearch"
+                  :is-filter-mode="route.params.codeFilter"
+                  :is-reg-exp-mode="route.params.codeRegExp"
+                  @query-change="route.update({ codeSearch: $event })"
+                  @filter-mode-change="route.update({ codeFilter: $event })"
+                  @reg-exp-mode-change="route.update({ codeRegExp: $event })"
+                  v-slot="{ copy, copying }"
+                >
+                  <DataSource
+                    v-if="copying"
+                    :src="uri(sources, `/meshes/:mesh/dataplanes/:name/as/kubernetes`, {
+                      mesh: route.params.mesh,
+                      name: route.params.dataPlane,
+                    }, {
+                      cacheControl: 'no-store',
+                    })"
+                    @change="(data) => {
+                      copy((resolve) => resolve(data))
+                    }"
+                    @error="(e) => {
+                      copy((_resolve, reject) => reject(e))
+                    }"
+                  />
+                </ResourceCodeBlock>
+              </XLayout>
+            </template>
           </AppView>
         </template>
       </template>
diff --git a/packages/kuma-gui/src/app/gateways/locales/en-us/index.yaml b/packages/kuma-gui/src/app/gateways/locales/en-us/index.yaml
index 73907ce43..a9e5ee476 100644
--- a/packages/kuma-gui/src/app/gateways/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/gateways/locales/en-us/index.yaml
@@ -15,7 +15,11 @@ gateways:
             A <a href="{KUMA_DOCS_URL}/using-mesh/managing-ingress-traffic/delegated/?{KUMA_UTM_QUERY_PARAMS}" target="_blank">Delegated Gateway</a> allows the integration of existing API gateway solutions into the mesh by adding an Envoy sidecar proxy to an existing Gateway. It then manages the traffic between the services inside the mesh and external clients (North/South).
     item:
       namespace: Namespace
-      config: YAML
+      config: Configuration
+      format: Format
+      formats:
+        yaml: YAML
+        structured: Structured
 
 builtin-gateways:
   routes:
diff --git a/packages/kuma-gui/src/app/gateways/views/BuiltinGatewaySummaryView.vue b/packages/kuma-gui/src/app/gateways/views/BuiltinGatewaySummaryView.vue
index 9cd519a0d..c9be20ec3 100644
--- a/packages/kuma-gui/src/app/gateways/views/BuiltinGatewaySummaryView.vue
+++ b/packages/kuma-gui/src/app/gateways/views/BuiltinGatewaySummaryView.vue
@@ -7,6 +7,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t }"
   >
@@ -52,53 +53,81 @@
                 </XAction>
               </h2>
             </template>
+            <XLayout type="stack">
+              <header>
+                <XLayout
+                  type="separated"
+                  size="max"
+                >
+                  <h3>
+                    {{ t('gateways.routes.item.config') }}
+                  </h3>
+                  <div>
+                    <XSelect
+                      :label="t('gateways.routes.item.format')"
+                      :selected="route.params.format"
+                      @change="(value) => {
+                        route.update({ format: value })
+                      }"
+                    >
+                      <template
+                        v-for="value in ['structured', 'yaml']"
+                        :key="value"
+                        #[`${value}-option`]
+                      >
+                        {{ t(`gateways.routes.item.formats.${value}`) }}
+                      </template>
+                    </XSelect>
+                  </div>
+                </XLayout>
+              </header>
 
-            <div
-              class="stack-with-borders"
-            >
-              <DefinitionCard
-                v-if="item.namespace.length > 0"
-                layout="horizontal"
-              >
-                <template #title>
-                  {{ t('gateways.routes.item.namespace') }}
-                </template>
-
-                <template #body>
-                  {{ item.namespace }}
-                </template>
-              </DefinitionCard>
-            </div>
-            <div>
-              <h3>
-                {{ t('gateways.routes.item.config') }}
-              </h3>
-
-              <div class="mt-4">
-                <ResourceCodeBlock
-                  :resource="item.config"
-                  is-searchable
-                  :query="route.params.codeSearch"
-                  :is-filter-mode="route.params.codeFilter"
-                  :is-reg-exp-mode="route.params.codeRegExp"
-                  @query-change="route.update({ codeSearch: $event })"
-                  @filter-mode-change="route.update({ codeFilter: $event })"
-                  @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-                  v-slot="{ copy, copying }"
+              <template v-if="route.params.format === 'structured'">
+                <div
+                  class="stack-with-borders"
+                  data-testid="structured-view"
                 >
-                  <DataSource
-                    v-if="copying"
-                    :src="`/meshes/${route.params.mesh}/mesh-gateways/${route.params.gateway}/as/kubernetes?no-store`"
-                    @change="(data) => {
-                      copy((resolve) => resolve(data))
-                    }"
-                    @error="(e) => {
-                      copy((_resolve, reject) => reject(e))
-                    }"
-                  />
-                </ResourceCodeBlock>
-              </div>
-            </div>
+                  <DefinitionCard
+                    v-if="item.namespace.length > 0"
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('gateways.routes.item.namespace') }}
+                    </template>
+
+                    <template #body>
+                      {{ item.namespace }}
+                    </template>
+                  </DefinitionCard>
+                </div>
+              </template>
+              <template v-else>
+                <div class="mt-4">
+                  <ResourceCodeBlock
+                    :resource="item.config"
+                    is-searchable
+                    :query="route.params.codeSearch"
+                    :is-filter-mode="route.params.codeFilter"
+                    :is-reg-exp-mode="route.params.codeRegExp"
+                    @query-change="route.update({ codeSearch: $event })"
+                    @filter-mode-change="route.update({ codeFilter: $event })"
+                    @reg-exp-mode-change="route.update({ codeRegExp: $event })"
+                    v-slot="{ copy, copying }"
+                  >
+                    <DataSource
+                      v-if="copying"
+                      :src="`/meshes/${route.params.mesh}/mesh-gateways/${route.params.gateway}/as/kubernetes?no-store`"
+                      @change="(data) => {
+                        copy((resolve) => resolve(data))
+                      }"
+                      @error="(e) => {
+                        copy((_resolve, reject) => reject(e))
+                      }"
+                    />
+                  </ResourceCodeBlock>
+                </div>
+              </template>
+            </XLayout>
           </AppView>
         </template>
       </template>
diff --git a/packages/kuma-gui/src/app/hostname-generators/locales/en-us/index.yaml b/packages/kuma-gui/src/app/hostname-generators/locales/en-us/index.yaml
index dbe6f239e..3034547e6 100644
--- a/packages/kuma-gui/src/app/hostname-generators/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/hostname-generators/locales/en-us/index.yaml
@@ -18,7 +18,11 @@ hostname-generators:
       title: "{name}"
       subtitle: "{name} HostnameGenerator"
       breadcrumbs: Hostname Generators
-      config: YAML
+      config: Configuration
+      format: Format
+      formats:
+        yaml: YAML
+        structured: Structured
       about:
         title: About this Hostname Generator
     items:
diff --git a/packages/kuma-gui/src/app/hostname-generators/views/HostnameGeneratorSummaryView.vue b/packages/kuma-gui/src/app/hostname-generators/views/HostnameGeneratorSummaryView.vue
index ca7cf853e..dc7be07e9 100644
--- a/packages/kuma-gui/src/app/hostname-generators/views/HostnameGeneratorSummaryView.vue
+++ b/packages/kuma-gui/src/app/hostname-generators/views/HostnameGeneratorSummaryView.vue
@@ -6,6 +6,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t, can }"
   >
@@ -35,73 +36,99 @@
             </h2>
           </template>
 
-          <div
-            class="stack"
+          <XLayout
+            type="stack"
           >
-            <div
-              class="stack-with-borders"
-            >
-              <DefinitionCard
-                v-if="item.namespace.length > 0"
-                layout="horizontal"
+            <header>
+              <XLayout
+                type="separated"
+                size="max"
               >
-                <template
-                  #title
-                >
-                  {{ t('hostname-generators.common.namespace') }}
-                </template>
-
-                <template
-                  #body
-                >
-                  {{ item.namespace }}
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                v-if="can('use zones') && item.zone"
-                layout="horizontal"
-              >
-                <template
-                  #title
-                >
-                  {{ t('hostname-generators.common.zone') }}
-                </template>
-                <template
-                  #body
-                >
-                  <XAction
-                    :to="{
-                      name: 'zone-cp-detail-view',
-                      params: {
-                        zone: item.zone,
-                      },
+                <h3>
+                  {{ t('hostname-generators.routes.item.config') }}
+                </h3>
+                <div>
+                  <XSelect
+                    :label="t('hostname-generators.routes.item.format')"
+                    :selected="route.params.format"
+                    @change="(value) => {
+                      route.update({ format: value })
                     }"
                   >
-                    {{ item.zone }}
-                  </XAction>
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                v-if="item.spec.template"
-                layout="horizontal"
+                    <template
+                      v-for="value in ['structured', 'yaml']"
+                      :key="value"
+                      #[`${value}-option`]
+                    >
+                      {{ t(`hostname-generators.routes.item.formats.${value}`) }}
+                    </template>
+                  </XSelect>
+                </div>
+              </XLayout>
+            </header>
+            <template v-if="route.params.format === 'structured'">
+              <div
+                class="stack-with-borders"
+                data-testid="structured-view"
               >
-                <template
-                  #title
+                <DefinitionCard
+                  v-if="item.namespace.length > 0"
+                  layout="horizontal"
                 >
-                  {{ t('hostname-generators.common.template') }}
-                </template>
-                <template
-                  #body
-                >
-                  {{ item.spec.template }}
-                </template>
-              </DefinitionCard>
-            </div>
-            <div>
-              <h3>
-                {{ t('hostname-generators.routes.item.config') }}
-              </h3>
+                  <template
+                    #title
+                  >
+                    {{ t('hostname-generators.common.namespace') }}
+                  </template>
 
+                  <template
+                    #body
+                  >
+                    {{ item.namespace }}
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  v-if="can('use zones') && item.zone"
+                  layout="horizontal"
+                >
+                  <template
+                    #title
+                  >
+                    {{ t('hostname-generators.common.zone') }}
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XAction
+                      :to="{
+                        name: 'zone-cp-detail-view',
+                        params: {
+                          zone: item.zone,
+                        },
+                      }"
+                    >
+                      {{ item.zone }}
+                    </XAction>
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  v-if="item.spec.template"
+                  layout="horizontal"
+                >
+                  <template
+                    #title
+                  >
+                    {{ t('hostname-generators.common.template') }}
+                  </template>
+                  <template
+                    #body
+                  >
+                    {{ item.spec.template }}
+                  </template>
+                </DefinitionCard>
+              </div>
+            </template>
+            <template v-else>
               <div class="mt-4">
                 <ResourceCodeBlock
                   :resource="item.$raw"
@@ -126,8 +153,8 @@
                   />
                 </ResourceCodeBlock>
               </div>
-            </div>
-          </div>
+            </template>
+          </XLayout>
         </AppView>
       </template>
     </DataCollection>
diff --git a/packages/kuma-gui/src/app/policies/components/PolicySummary.vue b/packages/kuma-gui/src/app/policies/components/PolicySummary.vue
index ce42e3eac..eeb4d46a4 100644
--- a/packages/kuma-gui/src/app/policies/components/PolicySummary.vue
+++ b/packages/kuma-gui/src/app/policies/components/PolicySummary.vue
@@ -1,13 +1,13 @@
 <template>
-  <div
-    class="stack"
+  <XLayout
+    type="stack"
   >
-    <div v-if="props.policy.spec">
-      <h3>
-        {{ t('policies.routes.item.overview') }}
-      </h3>
-
-      <div class="mt-4 stack-with-borders">
+    <slot name="header" />
+    <template v-if="props.policy.spec && props.format === 'structured'">
+      <div
+        class="mt-4 stack-with-borders"
+        data-testid="structured-view"
+      >
         <DefinitionCard
           layout="horizontal"
         >
@@ -67,21 +67,19 @@
           </template>
         </DefinitionCard>
       </div>
-    </div>
-
-    <div>
-      <h3>
-        {{ t('policies.routes.item.config') }}
-      </h3>
-
-      <div class="mt-4">
-        <slot />
+    </template>
+    <template v-else>
+      <div>
+        <div class="mt-4">
+          <slot />
+        </div>
       </div>
-    </div>
-  </div>
+    </template>
+  </XLayout>
 </template>
 
 <script lang="ts" setup>
+
 import type { Policy } from '../data'
 import { useI18n, useCan } from '@/app/application'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
@@ -91,5 +89,6 @@ const can = useCan()
 
 const props = defineProps<{
   policy: Policy
+  format: string
 }>()
 </script>
diff --git a/packages/kuma-gui/src/app/policies/locales/en-us/index.yaml b/packages/kuma-gui/src/app/policies/locales/en-us/index.yaml
index 5a72a9c31..82531eb5c 100644
--- a/packages/kuma-gui/src/app/policies/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/policies/locales/en-us/index.yaml
@@ -7,8 +7,11 @@ policies:
     item:
       title: "{name}"
       breadcrumbs: Policies
-      overview: 'Overview'
-      config: 'YAML'
+      config: 'Configuration'
+      format: Format
+      formats:
+        yaml: YAML
+        structured: Structured
       navigation:
         policy-detail-view: Overview
         policy-detail-config-view: YAML
diff --git a/packages/kuma-gui/src/app/policies/views/PolicySummaryView.vue b/packages/kuma-gui/src/app/policies/views/PolicySummaryView.vue
index 4bc5a5f76..042564d08 100644
--- a/packages/kuma-gui/src/app/policies/views/PolicySummaryView.vue
+++ b/packages/kuma-gui/src/app/policies/views/PolicySummaryView.vue
@@ -8,6 +8,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t }"
   >
@@ -58,7 +59,38 @@
             <PolicySummary
               v-if="item"
               :policy="item"
+              :format="route.params.format"
             >
+              <template #header>
+                <header>
+                  <XLayout
+                    type="separated"
+                    size="max"
+                  >
+                    <h3>
+                      {{ t('policies.routes.item.config') }}
+                    </h3>
+                    <div v-if="item.spec">
+                      <XSelect
+                        :label="t('policies.routes.item.format')"
+                        :selected="route.params.format"
+                        @change="(value) => {
+                          route.update({ format: value })
+                        }"
+                      >
+                        <template
+                          v-for="value in ['structured', 'yaml']"
+                          :key="value"
+                          #[`${value}-option`]
+                        >
+                          {{ t(`policies.routes.item.formats.${value}`) }}
+                        </template>
+                      </XSelect>
+                    </div>
+                  </XLayout>
+                </header>
+              </template>
+              
               <ResourceCodeBlock
                 :resource="item.config"
                 is-searchable
diff --git a/packages/kuma-gui/src/app/services/locales/en-us/index.yaml b/packages/kuma-gui/src/app/services/locales/en-us/index.yaml
index 7d2cf4cfe..4f5560db8 100644
--- a/packages/kuma-gui/src/app/services/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/services/locales/en-us/index.yaml
@@ -20,7 +20,11 @@ services:
         mesh-external-service-detail-view: 'Overview'
         mesh-external-service-config-view: 'YAML'
       overview: 'Overview'
-      config: 'YAML'
+      config: 'Configuration'
+      format: Format
+      formats:
+        yaml: YAML
+        structured: Structured
     items:
       title: Services
       navigation:
diff --git a/packages/kuma-gui/src/app/services/views/MeshExternalServiceSummaryView.vue b/packages/kuma-gui/src/app/services/views/MeshExternalServiceSummaryView.vue
index d101344c1..33735070c 100644
--- a/packages/kuma-gui/src/app/services/views/MeshExternalServiceSummaryView.vue
+++ b/packages/kuma-gui/src/app/services/views/MeshExternalServiceSummaryView.vue
@@ -7,6 +7,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t, can }"
   >
@@ -37,87 +38,113 @@
             </h2>
           </template>
 
-          <div
-            class="stack"
+          <XLayout
+            type="stack"
           >
-            <div
-              class="stack-with-borders"
-            >
-              <DefinitionCard
-                v-if="item.namespace.length > 0"
-                layout="horizontal"
+            <header>
+              <XLayout
+                type="separated"
+                size="max"
               >
-                <template
-                  #title
-                >
-                  Namespace
-                </template>
-
-                <template
-                  #body
-                >
-                  {{ item.namespace }}
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                v-if="can('use zones') && item.zone"
-                layout="horizontal"
-              >
-                <template
-                  #title
-                >
-                  Zone
-                </template>
-                <template
-                  #body
-                >
-                  <XAction
-                    :to="{
-                      name: 'zone-cp-detail-view',
-                      params: {
-                        zone: item.zone,
-                      },
+                <h3>
+                  {{ t('services.routes.item.config') }}
+                </h3>
+                <div>
+                  <XSelect
+                    :label="t('services.routes.item.format')"
+                    :selected="route.params.format"
+                    @change="(value) => {
+                      route.update({ format: value })
                     }"
                   >
-                    {{ item.zone }}
-                  </XAction>
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                v-if="item.spec.match"
-                layout="horizontal"
+                    <template
+                      v-for="value in ['structured', 'yaml']"
+                      :key="value"
+                      #[`${value}-option`]
+                    >
+                      {{ t(`services.routes.item.formats.${value}`) }}
+                    </template>
+                  </XSelect>
+                </div>
+              </XLayout>
+            </header>
+            <template v-if="route.params.format === 'structured'">
+              <div
+                class="stack-with-borders"
+                data-testid="structured-view"
               >
-                <template #title>
-                  Port
-                </template>
-                <template #body>
-                  <KumaPort
-                    :port="item.spec.match"
-                  />
-                </template>
-              </DefinitionCard>
-              <DefinitionCard layout="horizontal">
-                <template
-                  #title
-                >
-                  TLS
-                </template>
-                <template
-                  #body
+                <DefinitionCard
+                  v-if="item.namespace.length > 0"
+                  layout="horizontal"
                 >
-                  <XBadge
-                    appearance="neutral"
+                  <template
+                    #title
                   >
-                    {{ item.spec.tls?.enabled ? 'Enabled' : 'Disabled' }}
-                  </XBadge>
-                </template>
-              </DefinitionCard>
-            </div>
-            <div>
-              <h3>
-                {{ t('services.routes.item.config') }}
-              </h3>
+                    Namespace
+                  </template>
 
+                  <template
+                    #body
+                  >
+                    {{ item.namespace }}
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  v-if="can('use zones') && item.zone"
+                  layout="horizontal"
+                >
+                  <template
+                    #title
+                  >
+                    Zone
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XAction
+                      :to="{
+                        name: 'zone-cp-detail-view',
+                        params: {
+                          zone: item.zone,
+                        },
+                      }"
+                    >
+                      {{ item.zone }}
+                    </XAction>
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  v-if="item.spec.match"
+                  layout="horizontal"
+                >
+                  <template #title>
+                    Port
+                  </template>
+                  <template #body>
+                    <KumaPort
+                      :port="item.spec.match"
+                    />
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard layout="horizontal">
+                  <template
+                    #title
+                  >
+                    TLS
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XBadge
+                      appearance="neutral"
+                    >
+                      {{ item.spec.tls?.enabled ? 'Enabled' : 'Disabled' }}
+                    </XBadge>
+                  </template>
+                </DefinitionCard>
+              </div>
+            </template>
+            <template v-else>
               <div class="mt-4">
                 <ResourceCodeBlock
                   :resource="item.config"
@@ -142,8 +169,8 @@
                   />
                 </ResourceCodeBlock>
               </div>
-            </div>
-          </div>
+            </template>
+          </XLayout>
         </AppView>
       </template>
     </DataCollection>
diff --git a/packages/kuma-gui/src/app/services/views/MeshMultiZoneServiceSummaryView.vue b/packages/kuma-gui/src/app/services/views/MeshMultiZoneServiceSummaryView.vue
index 9412cb5d8..039b7a185 100644
--- a/packages/kuma-gui/src/app/services/views/MeshMultiZoneServiceSummaryView.vue
+++ b/packages/kuma-gui/src/app/services/views/MeshMultiZoneServiceSummaryView.vue
@@ -7,6 +7,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t }"
   >
@@ -37,69 +38,95 @@
             </h2>
           </template>
 
-          <div
-            class="stack"
+          <XLayout
+            type="stack"
           >
-            <div
-              class="stack-with-borders"
-            >
-              <DefinitionCard
-                layout="horizontal"
+            <header>
+              <XLayout
+                type="separated"
+                size="max"
               >
-                <template
-                  #title
-                >
-                  Ports
-                </template>
-                <template
-                  #body
-                >
-                  <XLayout
-                    type="separated"
-                    truncate
+                <h3>
+                  {{ t('services.routes.item.config') }}
+                </h3>
+                <div>
+                  <XSelect
+                    :label="t('services.routes.item.format')"
+                    :selected="route.params.format"
+                    @change="(value) => {
+                      route.update({ format: value })
+                    }"
                   >
-                    <KumaPort
-                      v-for="connection in item.spec.ports"
-                      :key="connection.port"
-                      :port="{
-                        ...connection,
-                        targetPort: undefined,
-                      }"
-                    />
-                  </XLayout>
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                layout="horizontal"
+                    <template
+                      v-for="value in ['structured', 'yaml']"
+                      :key="value"
+                      #[`${value}-option`]
+                    >
+                      {{ t(`services.routes.item.formats.${value}`) }}
+                    </template>
+                  </XSelect>
+                </div>
+              </XLayout>
+            </header>
+            <template v-if="route.params.format === 'structured'">
+              <div
+                class="stack-with-borders"
+                data-testid="structured-view"
               >
-                <template
-                  #title
+                <DefinitionCard
+                  layout="horizontal"
                 >
-                  Selector
-                </template>
-                <template
-                  #body
+                  <template
+                    #title
+                  >
+                    Ports
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XLayout
+                      type="separated"
+                      truncate
+                    >
+                      <KumaPort
+                        v-for="connection in item.spec.ports"
+                        :key="connection.port"
+                        :port="{
+                          ...connection,
+                          targetPort: undefined,
+                        }"
+                      />
+                    </XLayout>
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  layout="horizontal"
                 >
-                  <XLayout
-                    type="separated"
-                    truncate
+                  <template
+                    #title
+                  >
+                    Selector
+                  </template>
+                  <template
+                    #body
                   >
-                    <XBadge
-                      v-for="(value, key) in item.spec.selector.meshService.matchLabels"
-                      :key="`${key}:${value}`"
-                      appearance="info"
+                    <XLayout
+                      type="separated"
+                      truncate
                     >
-                      {{ key }}:{{ value }}
-                    </XBadge>
-                  </XLayout>
-                </template>
-              </DefinitionCard>
-            </div>
-            <div>
-              <h3>
-                {{ t('services.routes.item.config') }}
-              </h3>
-
+                      <XBadge
+                        v-for="(value, key) in item.spec.selector.meshService.matchLabels"
+                        :key="`${key}:${value}`"
+                        appearance="info"
+                      >
+                        {{ key }}:{{ value }}
+                      </XBadge>
+                    </XLayout>
+                  </template>
+                </DefinitionCard>
+              </div>
+            </template>
+            <template v-else>
               <div class="mt-4">
                 <ResourceCodeBlock
                   :resource="item.config"
@@ -124,8 +151,8 @@
                   />
                 </ResourceCodeBlock>
               </div>
-            </div>
-          </div>
+            </template>
+          </XLayout>
         </AppView>
       </template>
     </DataCollection>
diff --git a/packages/kuma-gui/src/app/services/views/MeshServiceSummaryView.vue b/packages/kuma-gui/src/app/services/views/MeshServiceSummaryView.vue
index b60d52d9a..36388d30c 100644
--- a/packages/kuma-gui/src/app/services/views/MeshServiceSummaryView.vue
+++ b/packages/kuma-gui/src/app/services/views/MeshServiceSummaryView.vue
@@ -7,6 +7,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t, can }"
   >
@@ -39,138 +40,164 @@
             </h2>
           </template>
 
-          <div
-            class="stack"
+          <XLayout
+            type="stack"
           >
-            <div
-              class="stack-with-borders"
-            >
-              <DefinitionCard
-                layout="horizontal"
+            <header>
+              <XLayout
+                type="separated"
+                size="max"
               >
-                <template
-                  #title
-                >
-                  State
-                </template>
-                <template
-                  #body
-                >
-                  <XBadge
-                    :appearance="item.spec.state === 'Available' ? 'success' : 'danger'"
+                <h3>
+                  {{ t('services.routes.item.config') }}
+                </h3>
+                <div>
+                  <XSelect
+                    :label="t('services.routes.item.format')"
+                    :selected="route.params.format"
+                    @change="(value) => {
+                      route.update({ format: value })
+                    }"
                   >
-                    {{ item.spec.state }}
-                  </XBadge>
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                layout="horizontal"
-              >
-                <template
-                  #title
-                >
-                  Dataplane Proxies
-                </template>
-                <template
-                  #body
-                >
-                  {{ item.status.dataplaneProxies?.connected }} connected, {{ item.status.dataplaneProxies?.healthy }} healthy ({{ item.status.dataplaneProxies?.total }} total)
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                v-if="item.namespace"
-                layout="horizontal"
-              >
-                <template
-                  #title
-                >
-                  Namespace
-                </template>
-                <template
-                  #body
-                >
-                  {{ item.namespace }}
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                v-if="can('use zones') && item.zone"
-                layout="horizontal"
+                    <template
+                      v-for="value in ['structured', 'yaml']"
+                      :key="value"
+                      #[`${value}-option`]
+                    >
+                      {{ t(`services.routes.item.formats.${value}`) }}
+                    </template>
+                  </XSelect>
+                </div>
+              </XLayout>
+            </header>
+            <template v-if="route.params.format === 'structured'">
+              <div
+                class="stack-with-borders"
+                data-testid="structured-view"
               >
-                <template
-                  #title
+                <DefinitionCard
+                  layout="horizontal"
                 >
-                  Zone
-                </template>
-                <template
-                  #body
+                  <template
+                    #title
+                  >
+                    State
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XBadge
+                      :appearance="item.spec.state === 'Available' ? 'success' : 'danger'"
+                    >
+                      {{ item.spec.state }}
+                    </XBadge>
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  layout="horizontal"
                 >
-                  <XAction
-                    :to="{
-                      name: 'zone-cp-detail-view',
-                      params: {
-                        zone: item.zone,
-                      },
-                    }"
+                  <template
+                    #title
                   >
-                    {{ item.zone }}
-                  </XAction>
-                </template>
-              </DefinitionCard>
-              <DefinitionCard
-                layout="horizontal"
-              >
-                <template
-                  #title
+                    Dataplane Proxies
+                  </template>
+                  <template
+                    #body
+                  >
+                    {{ item.status.dataplaneProxies?.connected }} connected, {{ item.status.dataplaneProxies?.healthy }} healthy ({{ item.status.dataplaneProxies?.total }} total)
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  v-if="item.namespace"
+                  layout="horizontal"
                 >
-                  Ports
-                </template>
-                <template
-                  #body
+                  <template
+                    #title
+                  >
+                    Namespace
+                  </template>
+                  <template
+                    #body
+                  >
+                    {{ item.namespace }}
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  v-if="can('use zones') && item.zone"
+                  layout="horizontal"
                 >
-                  <XLayout
-                    type="separated"
-                    truncate
+                  <template
+                    #title
                   >
-                    <KumaPort
-                      v-for="connection in item.spec.ports"
-                      :key="connection.port"
-                      :port="{
-                        ...connection,
-                        targetPort: undefined,
+                    Zone
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XAction
+                      :to="{
+                        name: 'zone-cp-detail-view',
+                        params: {
+                          zone: item.zone,
+                        },
                       }"
-                    />
-                  </XLayout>
-                </template>
-              </DefinitionCard>
-              <DefinitionCard layout="horizontal">
-                <template
-                  #title
-                >
-                  Selector
-                </template>
-                <template
-                  #body
+                    >
+                      {{ item.zone }}
+                    </XAction>
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  layout="horizontal"
                 >
-                  <XLayout
-                    type="separated"
-                    truncate
+                  <template
+                    #title
                   >
-                    <XBadge
-                      v-for="(value, key) in item.spec.selector.dataplaneTags"
-                      :key="`${key}:${value}`"
-                      appearance="info"
+                    Ports
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XLayout
+                      type="separated"
+                      truncate
                     >
-                      {{ key }}:{{ value }}
-                    </XBadge>
-                  </XLayout>
-                </template>
-              </DefinitionCard>
-            </div>
-            <div>
-              <h3>
-                {{ t('services.routes.item.config') }}
-              </h3>
-
+                      <KumaPort
+                        v-for="connection in item.spec.ports"
+                        :key="connection.port"
+                        :port="{
+                          ...connection,
+                          targetPort: undefined,
+                        }"
+                      />
+                    </XLayout>
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard layout="horizontal">
+                  <template
+                    #title
+                  >
+                    Selector
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XLayout
+                      type="separated"
+                      truncate
+                    >
+                      <XBadge
+                        v-for="(value, key) in item.spec.selector.dataplaneTags"
+                        :key="`${key}:${value}`"
+                        appearance="info"
+                      >
+                        {{ key }}:{{ value }}
+                      </XBadge>
+                    </XLayout>
+                  </template>
+                </DefinitionCard>
+              </div>
+            </template>
+            <template v-else>
               <div class="mt-4">
                 <ResourceCodeBlock
                   :resource="item.config"
@@ -195,8 +222,8 @@
                   />
                 </ResourceCodeBlock>
               </div>
-            </div>
-          </div>
+            </template>
+          </XLayout>
         </AppView>
       </template>
     </DataCollection>
diff --git a/packages/kuma-gui/src/app/subscriptions/locales/en-us/index.yaml b/packages/kuma-gui/src/app/subscriptions/locales/en-us/index.yaml
index 06808bd9f..19aae6495 100644
--- a/packages/kuma-gui/src/app/subscriptions/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/subscriptions/locales/en-us/index.yaml
@@ -1,6 +1,11 @@
 subscriptions:
   routes:
     item:
+      config: Configuration
+      format: Format
+      formats:
+        yaml: YAML
+        structured: Structured
       navigation:
         zone-cp-subscription-summary-overview-view: Overview
         zone-cp-subscription-summary-config-view: YAML
diff --git a/packages/kuma-gui/src/app/subscriptions/routes.ts b/packages/kuma-gui/src/app/subscriptions/routes.ts
index fd24ae2eb..abe00414e 100644
--- a/packages/kuma-gui/src/app/subscriptions/routes.ts
+++ b/packages/kuma-gui/src/app/subscriptions/routes.ts
@@ -4,20 +4,7 @@ export const routes = (prefix: string): RouteRecordRaw[] => {
     {
       path: 'subscription/:subscription',
       name: `${prefix}-subscription-summary-view`,
-      redirect: { name: `${prefix}-subscription-summary-overview-view` },
       component: () => import('@/app/subscriptions/views/SubscriptionSummaryView.vue'),
-      children: [
-        {
-          path: 'overview',
-          name: `${prefix}-subscription-summary-overview-view`,
-          component: () => import('@/app/subscriptions/views/SubscriptionSummaryOverviewView.vue'),
-        },
-        {
-          path: 'config',
-          name: `${prefix}-subscription-summary-config-view`,
-          component: () => import('@/app/subscriptions/views/SubscriptionSummaryConfigView.vue'),
-        },
-      ],
     },
   ]
 }
diff --git a/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryConfigView.vue b/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryConfigView.vue
deleted file mode 100644
index 8a21d563c..000000000
--- a/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryConfigView.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <RouteView
-    :name="props.routeName"
-    :params="{
-      codeSearch: '',
-      codeFilter: false,
-      codeRegExp: false,
-    }"
-    v-slot="{ route }"
-  >
-    <AppView>
-      <XCodeBlock
-        language="yaml"
-        :code="YAML.stringify(props.data.$raw)"
-        is-searchable
-        :query="route.params.codeSearch"
-        :is-filter-mode="route.params.codeFilter"
-        :is-reg-exp-mode="route.params.codeRegExp"
-        @query-change="route.update({ codeSearch: $event })"
-        @filter-mode-change="route.update({ codeFilter: $event })"
-        @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-      />
-    </AppView>
-  </RouteView>
-</template>
-
-<script lang="ts" setup>
-import type { Subscription } from '../data'
-import { YAML } from '@/app/application'
-const props = defineProps<{
-  data: Subscription
-  routeName: string
-}>()
-</script>
diff --git a/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryOverviewView.vue b/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryOverviewView.vue
deleted file mode 100644
index ca664b74c..000000000
--- a/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryOverviewView.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-  <RouteView
-    :name="props.routeName"
-    v-slot="{ t }"
-  >
-    <AppView>
-      <div
-        class="stack-with-borders"
-      >
-        <DefinitionCard
-          layout="horizontal"
-        >
-          <template #title>
-            {{ t('http.api.property.version') }}
-          </template>
-
-          <template #body>
-            <template
-              v-for="version in [props.data.version?.kumaCp?.version]"
-            >
-              {{ version ?? '-' }}
-            </template>
-          </template>
-        </DefinitionCard>
-        <DefinitionCard
-          layout="horizontal"
-        >
-          <template #title>
-            {{ t('http.api.property.connectTime') }}
-          </template>
-
-          <template #body>
-            {{ t('common.formats.datetime', { value: Date.parse(props.data.connectTime ?? '') }) }}
-          </template>
-        </DefinitionCard>
-        <DefinitionCard
-          v-if="props.data.disconnectTime"
-          layout="horizontal"
-        >
-          <template #title>
-            {{ t('http.api.property.disconnectTime') }}
-          </template>
-
-          <template #body>
-            {{ t('common.formats.datetime', { value: Date.parse(props.data.disconnectTime) }) }}
-          </template>
-        </DefinitionCard>
-        <DefinitionCard
-          layout="horizontal"
-        >
-          <template #title>
-            {{ t('subscriptions.routes.item.headers.responses') }}
-          </template>
-
-          <template #body>
-            <template
-              v-for="responses in [props.data.status?.total ?? {}]"
-            >
-              {{ responses.responsesSent }}/{{ responses.responsesAcknowledged }}
-            </template>
-          </template>
-        </DefinitionCard>
-        <template
-          v-for="prop in (['zoneInstanceId', 'globalInstanceId', 'controlPlaneInstanceId'] as const)"
-          :key="typeof prop"
-        >
-          <DefinitionCard
-            v-if="props.data[prop]"
-            layout="horizontal"
-          >
-            <template #title>
-              {{ t(`http.api.property.${prop}`) }}
-            </template>
-
-            <template #body>
-              {{ props.data[prop] }}
-            </template>
-          </DefinitionCard>
-        </template>
-        <DefinitionCard
-          layout="horizontal"
-        >
-          <template #title>
-            {{ t('http.api.property.id') }}
-          </template>
-
-          <template #body>
-            {{ props.data.id }}
-          </template>
-        </DefinitionCard>
-      </div>
-      <XAlert
-        v-if="Object.keys(props.data.status.acknowledgements).length === 0"
-        variant="info"
-      >
-        <template #icon>
-          <PortalIcon />
-        </template>
-
-        {{ t('common.detail.subscriptions.no_stats', { id: props.data.id }) }}
-      </XAlert>
-      <div
-        v-else
-        class="mt-8 stack-with-borders"
-      >
-        <div>
-          <slot name="default" />
-        </div>
-        <DefinitionCard
-          class="mt-4"
-          layout="horizontal"
-        >
-          <template #title>
-            <strong>
-              {{ t('subscriptions.routes.item.headers.type') }}
-            </strong>
-          </template>
-
-          <template #body>
-            {{ t('subscriptions.routes.item.headers.stat') }}
-          </template>
-        </DefinitionCard>
-        <template
-          v-for="[key, item] in Object.entries(props.data.status.acknowledgements ?? {})"
-          :key="key"
-        >
-          <DefinitionCard
-            layout="horizontal"
-          >
-            <template #title>
-              {{ t(`http.api.property.${key}`) }}
-            </template>
-
-            <template #body>
-              {{ item.responsesSent }}/{{ item.responsesAcknowledged }}
-            </template>
-          </DefinitionCard>
-        </template>
-      </div>
-    </AppView>
-  </RouteView>
-</template>
-
-<script lang="ts" setup>
-import { PortalIcon } from '@kong/icons'
-
-import type { Subscription } from '../data'
-import DefinitionCard from '@/app/common/DefinitionCard.vue'
-
-const props = defineProps<{
-  data: Subscription
-  routeName: string
-}>()
-</script>
diff --git a/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryView.vue b/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryView.vue
index ad0c584d4..0ad338a7a 100644
--- a/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryView.vue
+++ b/packages/kuma-gui/src/app/subscriptions/views/SubscriptionSummaryView.vue
@@ -3,6 +3,10 @@
     :name="props.routeName"
     :params="{
       subscription: '',
+      codeSearch: '',
+      codeFilter: false,
+      codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t }"
   >
@@ -19,34 +23,190 @@
               {{ item.zoneInstanceId ?? item.globalInstanceId ?? item.controlPlaneInstanceId }}
             </h2>
           </template>
-          <XTabs
-            :selected="route.child()?.name"
-          >
-            <template
-              v-for="{ name } in route.children"
-              :key="name"
-              #[`${name}-tab`]
-            >
-              <XAction
-                :to="{
-                  name,
-                }"
+
+          <XLayout type="stack">
+            <header>
+              <XLayout
+                type="separated"
+                size="max"
+              >
+                <h3>
+                  {{ t('subscriptions.routes.item.config') }}
+                </h3>
+                <div>
+                  <XSelect
+                    :label="t('subscriptions.routes.item.format')"
+                    :selected="route.params.format"
+                    @change="(value) => {
+                      route.update({ format: value })
+                    }"
+                  >
+                    <template
+                      v-for="value in ['structured', 'yaml']"
+                      :key="value"
+                      #[`${value}-option`]
+                    >
+                      {{ t(`subscriptions.routes.item.formats.${value}`) }}
+                    </template>
+                  </XSelect>
+                </div>
+              </XLayout>
+            </header>
+
+            <template v-if="route.params.format === 'structured'">
+              <XLayout
+                type="stack"
+                data-testid="structured-view"
               >
-                {{ t(`subscriptions.routes.item.navigation.${name}`) }}
-              </XAction>
+                <div
+                  class="stack-with-borders"
+                >
+                  <DefinitionCard
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('http.api.property.version') }}
+                    </template>
+
+                    <template #body>
+                      <template
+                        v-for="version in [item.version?.kumaCp?.version]"
+                      >
+                        {{ version ?? '-' }}
+                      </template>
+                    </template>
+                  </DefinitionCard>
+                  <DefinitionCard
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('http.api.property.connectTime') }}
+                    </template>
+
+                    <template #body>
+                      {{ t('common.formats.datetime', { value: Date.parse(item.connectTime ?? '') }) }}
+                    </template>
+                  </DefinitionCard>
+                  <DefinitionCard
+                    v-if="item.disconnectTime"
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('http.api.property.disconnectTime') }}
+                    </template>
+
+                    <template #body>
+                      {{ t('common.formats.datetime', { value: Date.parse(item.disconnectTime) }) }}
+                    </template>
+                  </DefinitionCard>
+                  <DefinitionCard
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('subscriptions.routes.item.headers.responses') }}
+                    </template>
+
+                    <template #body>
+                      <template
+                        v-for="responses in [item.status?.total ?? {}]"
+                      >
+                        {{ responses.responsesSent }}/{{ responses.responsesAcknowledged }}
+                      </template>
+                    </template>
+                  </DefinitionCard>
+                  <template
+                    v-for="prop in (['zoneInstanceId', 'globalInstanceId', 'controlPlaneInstanceId'] as const)"
+                    :key="typeof prop"
+                  >
+                    <DefinitionCard
+                      v-if="item[prop]"
+                      layout="horizontal"
+                    >
+                      <template #title>
+                        {{ t(`http.api.property.${prop}`) }}
+                      </template>
+
+                      <template #body>
+                        {{ item[prop] }}
+                      </template>
+                    </DefinitionCard>
+                  </template>
+                  <DefinitionCard
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('http.api.property.id') }}
+                    </template>
+
+                    <template #body>
+                      {{ item.id }}
+                    </template>
+                  </DefinitionCard>
+                </div>
+                <XAlert
+                  v-if="Object.keys(item.status.acknowledgements).length === 0"
+                  variant="info"
+                >
+                  <template #icon>
+                    <PortalIcon />
+                  </template>
+
+                  {{ t('common.detail.subscriptions.no_stats', { id: item.id }) }}
+                </XAlert>
+                <div
+                  v-else
+                  class="mt-8 stack-with-borders"
+                >
+                  <div>
+                    <slot name="default" />
+                  </div>
+                  <DefinitionCard
+                    class="mt-4"
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      <strong>
+                        {{ t('subscriptions.routes.item.headers.type') }}
+                      </strong>
+                    </template>
+
+                    <template #body>
+                      {{ t('subscriptions.routes.item.headers.stat') }}
+                    </template>
+                  </DefinitionCard>
+                  <template
+                    v-for="[key, _item] in Object.entries(item.status.acknowledgements ?? {})"
+                    :key="key"
+                  >
+                    <DefinitionCard
+                      layout="horizontal"
+                    >
+                      <template #title>
+                        {{ t(`http.api.property.${key}`) }}
+                      </template>
+
+                      <template #body>
+                        {{ _item.responsesSent }}/{{ _item.responsesAcknowledged }}
+                      </template>
+                    </DefinitionCard>
+                  </template>
+                </div>
+              </XLayout>
+            </template>
+            <template v-else>
+              <XCodeBlock
+                language="yaml"
+                :code="YAML.stringify(item.$raw)"
+                is-searchable
+                :query="route.params.codeSearch"
+                :is-filter-mode="route.params.codeFilter"
+                :is-reg-exp-mode="route.params.codeRegExp"
+                @query-change="route.update({ codeSearch: $event })"
+                @filter-mode-change="route.update({ codeFilter: $event })"
+                @reg-exp-mode-change="route.update({ codeRegExp: $event })"
+              />
             </template>
-          </XTabs>
-
-          <RouterView
-            v-slot="{ Component }"
-          >
-            <component
-              :is="Component"
-              :data="item"
-            >
-              <slot name="default" />
-            </component>
-          </RouterView>
+          </XLayout>
         </AppView>
       </template>
     </DataCollection>
@@ -54,7 +214,11 @@
 </template>
 
 <script lang="ts" setup>
+import { PortalIcon } from '@kong/icons'
+
 import type { Subscription } from '../data/'
+import { YAML } from '@/app/application'
+import DefinitionCard from '@/app/common/DefinitionCard.vue'
 
 const props = defineProps<{
   data: Subscription[]
diff --git a/packages/kuma-gui/src/app/zone-egresses/locales/en-us/index.yaml b/packages/kuma-gui/src/app/zone-egresses/locales/en-us/index.yaml
index 2776e0443..19fed6114 100644
--- a/packages/kuma-gui/src/app/zone-egresses/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/zone-egresses/locales/en-us/index.yaml
@@ -14,7 +14,7 @@ zone-egresses:
         zone-egress-clusters-view: 'Clusters'
         zone-egress-config-view: 'YAML'
       overview: 'Overview'
-      config: 'YAML'
+      config: 'Configuration'
       subscriptions:
         title: 'XDS connections'
       about:
@@ -22,6 +22,10 @@ zone-egresses:
     items:
       title: Egresses
       breadcrumbs: Egresses
+      format: Format
+      formats:
+        yaml: YAML
+        structured: Structured
       intro: !!text/markdown |
         A Zone Egress is specialized gateway that manages and routes outbound traffic from services with a zone to external destinations outside the mesh.
   href:
diff --git a/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressSummaryView.vue b/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressSummaryView.vue
index dedda4a5c..a82df7421 100644
--- a/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressSummaryView.vue
+++ b/packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressSummaryView.vue
@@ -6,6 +6,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t }"
   >
@@ -53,88 +54,121 @@
               </h2>
             </template>
 
-            <div
-              class="stack-with-borders"
+            <XLayout
+              type="stack"
             >
-              <DefinitionCard
-                layout="horizontal"
-              >
-                <template #title>
-                  {{ t('http.api.property.status') }}
-                </template>
-
-                <template #body>
-                  <StatusBadge
-                    :status="item.state"
-                  />
-                </template>
-              </DefinitionCard>
-
-              <DefinitionCard
-                v-if="item.namespace.length > 0"
-                layout="horizontal"
-              >
-                <template #title>
-                  {{ t('data-planes.routes.item.namespace') }}
-                </template>
-
-                <template #body>
-                  {{ item.namespace }}
-                </template>
-              </DefinitionCard>
-
-              <DefinitionCard
-                layout="horizontal"
-              >
-                <template #title>
-                  {{ t('http.api.property.address') }}
-                </template>
-
-                <template #body>
-                  <template
-                    v-if="item.zoneEgress.socketAddress.length > 0"
-                  >
-                    <XCopyButton
-                      :text="item.zoneEgress.socketAddress"
-                    />
-                  </template>
-
-                  <template v-else>
-                    {{ t('common.detail.none') }}
-                  </template>
-                </template>
-              </DefinitionCard>
-            </div>
-            <div>
-              <h3>
-                {{ t('zone-ingresses.routes.item.config') }}
-              </h3>
-
-              <div class="mt-4">
-                <ResourceCodeBlock
-                  :resource="item.config"
-                  is-searchable
-                  :query="route.params.codeSearch"
-                  :is-filter-mode="route.params.codeFilter"
-                  :is-reg-exp-mode="route.params.codeRegExp"
-                  @query-change="route.update({ codeSearch: $event })"
-                  @filter-mode-change="route.update({ codeFilter: $event })"
-                  @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-                  v-slot="{ copy, copying }"
+              <header>
+                <XLayout
+                  type="separated"
+                  size="max"
                 >
-                  <DataSource
-                    v-if="copying"
-                    :src="`/zone-egresses/${route.params.zoneEgress}/as/kubernetes?no-store`"
-                    @change="(data) => {
-                      copy((resolve) => resolve(data))
-                    }"
-                    @error="(e) => {
-                      copy((_resolve, reject) => reject(e))
-                    }"
-                  />
-                </ResourceCodeBlock>
-              </div>
-            </div>
+                  <h3>
+                    {{ t('zone-ingresses.routes.item.config') }}
+                  </h3>
+                  <div>
+                    <XSelect
+                      :label="t('zone-ingresses.routes.items.format')"
+                      :selected="route.params.format"
+                      @change="(value) => {
+                        route.update({ format: value })
+                      }"
+                    >
+                      <template
+                        v-for="value in ['structured', 'yaml']"
+                        :key="value"
+                        #[`${value}-option`]
+                      >
+                        {{ t(`zone-ingresses.routes.items.formats.${value}`) }}
+                      </template>
+                    </XSelect>
+                  </div>
+                </XLayout>
+              </header>
+              <template v-if="route.params.format === 'structured'">
+                <XLayout
+                  type="stack"
+                  class="stack-with-borders"
+                  data-testid="structured-view"
+                >
+                  <DefinitionCard
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('http.api.property.status') }}
+                    </template>
+                
+                    <template #body>
+                      <StatusBadge
+                        :status="item.state"
+                      />
+                    </template>
+                  </DefinitionCard>
+              
+                  <DefinitionCard
+                    v-if="item.namespace.length > 0"
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('data-planes.routes.item.namespace') }}
+                    </template>
+              
+                    <template #body>
+                      {{ item.namespace }}
+                    </template>
+                  </DefinitionCard>
+            
+                  <DefinitionCard
+                    layout="horizontal"
+                  >
+                    <template #title>
+                      {{ t('http.api.property.address') }}
+                    </template>
+            
+                    <template #body>
+                      <template
+                        v-if="item.zoneEgress.socketAddress.length > 0"
+                      >
+                        <XCopyButton
+                          :text="item.zoneEgress.socketAddress"
+                        />
+                      </template>
+            
+                      <template v-else>
+                        {{ t('common.detail.none') }}
+                      </template>
+                    </template>
+                  </DefinitionCard>
+                </XLayout>
+              </template>
+              <template v-else>
+                <div>
+                  <div class="mt-4">
+                    <ResourceCodeBlock
+                      :resource="item.config"
+                      is-searchable
+                      :query="route.params.codeSearch"
+                      :is-filter-mode="route.params.codeFilter"
+                      :is-reg-exp-mode="route.params.codeRegExp"
+                      @query-change="route.update({ codeSearch: $event })"
+                      @filter-mode-change="route.update({ codeFilter: $event })"
+                      @reg-exp-mode-change="route.update({ codeRegExp: $event })"
+                      v-slot="{ copy, copying }"
+                    >
+                      <DataSource
+                        v-if="copying"
+                        :src="`/zone-egresses/${route.params.zoneEgress}/as/kubernetes?no-store`"
+                        @change="(data) => {
+                          copy((resolve) => resolve(data))
+                        }"
+                        @error="(e) => {
+                          copy((_resolve, reject) => reject(e))
+                        }"
+                      />
+                    </ResourceCodeBlock>
+                  </div>
+                </div>
+              </template>
+            </XLayout>
           </AppView>
         </template>
       </template>