diff --git a/.changelog/11767.txt b/.changelog/11767.txt
new file mode 100644
index 000000000000..6ce06f5f573d
--- /dev/null
+++ b/.changelog/11767.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Ensure we show a readonly designed page for readonly intentions
+```
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
index 76281fd9c78a..0d3f875b46bb 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
@@ -56,7 +56,10 @@ as |api|>
     </BlockSlot>
 
     <BlockSlot @name="form">
-{{#let api.data as |item|}}
+{{#let
+  api.data
+  (not (can 'write intention' item=api.data))
+as |item readonly|}}
 {{#if (not readonly)}}
 
   {{#let (changeset-get item 'Action') as |newAction|}}
@@ -193,6 +196,7 @@ as |api|>
         </div>
       </form>
   {{else}}
+
     {{#if item.IsManagedByCRD}}
       <Notice
         class="crd"
@@ -215,8 +219,10 @@ as |api|>
         </notice.Footer>
       </Notice>
     {{/if}}
+
     <Consul::Intention::View
       @item={{item}}
+      data-test-readonly
     />
   {{/if}}
 {{/let}}
diff --git a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs
index e5e6ea49d5cf..e77f07c5061a 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs
@@ -1,4 +1,7 @@
-<div class="consul-intention-view">
+<div
+  class="consul-intention-view"
+  ...attributes
+>
 
   <div class="definition-table">
       <dl>
diff --git a/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact b/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact
index 40825c210523..97c7db878371 100644
--- a/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact
+++ b/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact
@@ -81,7 +81,7 @@ ${fake.helpers.randomize([
     ],
 `:``}
     "Precedence": ${fake.random.number({min: 1, max: 100})},
-${ !legacy && fake.random.number({min: 1, max: 10}) > 2 ? `
+${ (!legacy || source[1] === "external-source") && fake.random.number({min: 1, max: 10}) > 2 ? `
     "Meta": {
       "external-source": "${fake.helpers.randomize(['kubernetes', 'consul-api-gateway'])}"
     },
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/read-only.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/read-only.feature
new file mode 100644
index 000000000000..c67bfd4f05aa
--- /dev/null
+++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/read-only.feature
@@ -0,0 +1,15 @@
+@setupApplicationTest
+Feature: dc / intentions / read-only
+  Scenario: Viewing a readonly intention
+    Given 1 datacenter model with the value "dc1"
+    And 1 intention model from yaml:
+    ---
+      Meta:
+        external-source: kubernetes
+    ---
+    When I visit the intention page for yaml
+    ---
+      dc: dc1
+      intention: default:external-source:web:default:external-source:db
+    ---
+    Then I see the "[data-test-readonly]" element
diff --git a/ui/packages/consul-ui/tests/acceptance/steps/dc/intentions/read-only-steps.js b/ui/packages/consul-ui/tests/acceptance/steps/dc/intentions/read-only-steps.js
new file mode 100644
index 000000000000..ba1093295f36
--- /dev/null
+++ b/ui/packages/consul-ui/tests/acceptance/steps/dc/intentions/read-only-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}