diff --git a/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs b/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs
new file mode 100644
index 000000000..0475d964f
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs
@@ -0,0 +1,3 @@
+<span class="consul-transparent-proxy">
+  {{t "components.consul.transparent-proxy"}}
+</span>
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/components/pill.scss b/ui/packages/consul-ui/app/styles/components/pill.scss
index 9ecbdb2fd..20c6988b7 100644
--- a/ui/packages/consul-ui/app/styles/components/pill.scss
+++ b/ui/packages/consul-ui/app/styles/components/pill.scss
@@ -2,7 +2,8 @@ span.policy-service-identity,
 span.policy-node-identity,
 .leader,
 .consul-auth-method-type,
-.topology-metrics-source-type {
+.topology-metrics-source-type,
+.consul-transparent-proxy {
   @extend %pill-200, %frame-gray-600;
 }
 span.policy-service-identity::before,
diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs
index d42586c88..8e58a1f9f 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs
@@ -58,6 +58,9 @@ as |route|>
             </h1>
             <Consul::ExternalSource @item={{item}} />
             <Consul::Kind @item={{item}} @withInfo={{true}} />
+            {{#if proxy.ServiceProxy.Mode}}
+              <Consul::TransparentProxy />
+            {{/if}}
           </BlockSlot>
           <BlockSlot @name="nav">
             <dl>
diff --git a/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ b/ui/packages/consul-ui/mock-api/v1/catalog/connect/_
index e15b69694..2af98f095 100644
--- a/ui/packages/consul-ui/mock-api/v1/catalog/connect/_
+++ b/ui/packages/consul-ui/mock-api/v1/catalog/connect/_
@@ -49,6 +49,7 @@ ${range(env('CONSUL_EXPOSED_COUNT', 3)).map((i) => `
 `)}
             ]
           },
+          "Mode": ${fake.random.boolean()},
           "DestinationServiceName": "${location.pathname.slice(4)}"
           ${ location.pathname.slice(4) === "service-0" ? `
           ,