diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 21d4af19e..cf28c5b9b 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -375,6 +375,7 @@ target:
       client: Client
       any-worker: Any worker
       front-line-worker: Front line worker
+      hcp-worker: HCP worker
       egress-worker: Egress worker
       ingress-worker: Ingress worker
       host: Host
diff --git a/ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs b/ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs
new file mode 100644
index 000000000..28340d3c2
--- /dev/null
+++ b/ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs
@@ -0,0 +1,80 @@
+<div data-test-dual-filters-hcp>
+  {{#if (and @egressFilter @ingressFilter)}}
+    <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-on-ingress-on as |D|>
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.ingress-worker'}}
+      </D.Item>
+      <D.Group
+        @title={{t 'resources.target.workers.diagram.network'}}
+        @color='highlight'
+      >
+        <D.Item @icon='settings'>
+          {{t 'resources.target.workers.diagram.egress-worker'}}
+        </D.Item>
+        <D.Item @icon='server'>
+          {{t 'resources.target.workers.diagram.host'}}
+        </D.Item>
+      </D.Group>
+    </OrderedSeriesDiagram>
+  {{else if @ingressFilter}}
+    <OrderedSeriesDiagram
+      data-test-dual-filter-hcp-egress-off-ingress-on
+      as |D|
+    >
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.ingress-worker'}}
+      </D.Item>
+      <D.Item @icon='server'>
+        {{t 'resources.target.workers.diagram.host'}}
+      </D.Item>
+    </OrderedSeriesDiagram>
+  {{else if @egressFilter}}
+    <OrderedSeriesDiagram
+      data-test-dual-filter-hcp-egress-on-ingress-off
+      as |D|
+    >
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{#if (feature-flag 'target-worker-filters-v2-hcp')}}
+          {{t 'resources.target.workers.diagram.hcp-worker'}}
+        {{else}}
+          {{t 'resources.target.workers.diagram.front-line-worker'}}
+        {{/if}}
+      </D.Item>
+      <D.Group
+        @title={{t 'resources.target.workers.diagram.network'}}
+        @color='highlight'
+      >
+        <D.Item @icon='settings'>
+          {{t 'resources.target.workers.diagram.egress-worker'}}
+        </D.Item>
+        <D.Item @icon='server'>
+          {{t 'resources.target.workers.diagram.host'}}
+        </D.Item>
+      </D.Group>
+    </OrderedSeriesDiagram>
+  {{else}}
+    <OrderedSeriesDiagram
+      data-test-dual-filter-hcp-egress-off-ingress-off
+      as |D|
+    >
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.hcp-worker'}}
+      </D.Item>
+      <D.Item @icon='server'>
+        {{t 'resources.target.workers.diagram.host'}}
+      </D.Item>
+    </OrderedSeriesDiagram>
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/ui/admin/config/environment.js b/ui/admin/config/environment.js
index ca07d1ee6..6e6edcc2a 100644
--- a/ui/admin/config/environment.js
+++ b/ui/admin/config/environment.js
@@ -150,6 +150,7 @@ module.exports = function (environment) {
     ENV.featureFlags['vault-worker-filter'] = true;
     ENV.featureFlags['target-worker-filters-v2'] = true;
     ENV.featureFlags['target-worker-filters-v2-ingress'] = true;
+    ENV.featureFlags['target-worker-filters-v2-hcp'] = true;
     ENV.featureFlags['target-network-address'] = true;
     ENV.featureFlags['credential-library-vault-ssh-cert'] = true;
   }
diff --git a/ui/admin/tests/integration/components/worker-diagram/dual-filter/hcp/index-test.js b/ui/admin/tests/integration/components/worker-diagram/dual-filter/hcp/index-test.js
new file mode 100644
index 000000000..965e1f32b
--- /dev/null
+++ b/ui/admin/tests/integration/components/worker-diagram/dual-filter/hcp/index-test.js
@@ -0,0 +1,55 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'admin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module(
+  'Integration | Component | worker-diagram | dual-filter | hcp',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks);
+
+    let featuresService;
+    const targetWorkerFilterIngress = 'target-worker-filters-v2-ingress';
+    const targetWorkerFilterHCP = 'target-worker-filters-v2-hcp';
+
+    hooks.beforeEach(function () {
+      featuresService = this.owner.lookup('service:features');
+      featuresService.enable(targetWorkerFilterHCP);
+      featuresService.disable(targetWorkerFilterIngress);
+    });
+
+    test('it renders the correct diagram when egressFilter is false and ingress is false', async function (assert) {
+      await render(
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{false}} @ingressFilter={{false}} />`
+      );
+
+      assert.dom('[data-test-dual-filter-hcp-egress-off-ingress-off]').exists();
+    });
+
+    test('it renders the correct diagram when egressFilter is true and ingress is false', async function (assert) {
+      await render(
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{true}} @ingressFilter={{false}} />`
+      );
+
+      assert.dom('[data-test-dual-filter-hcp-egress-on-ingress-off]').exists();
+    });
+
+    test('it renders the correct diagram when egressFilter is false and ingress is true', async function (assert) {
+      await render(
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{false}} @ingressFilter={{true}} />`
+      );
+
+      assert.dom('[data-test-dual-filter-hcp-egress-off-ingress-on]').exists();
+    });
+
+    test('it renders the correct diagram when egressFilter is true and ingress is true', async function (assert) {
+      await render(
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{true}} @ingressFilter={{true}} />`
+      );
+
+      assert.dom('[data-test-dual-filter-hcp-egress-on-ingress-on]').exists();
+    });
+  }
+);
diff --git a/ui/admin/tests/integration/components/worker-diagram/dual-filter/index-test.js b/ui/admin/tests/integration/components/worker-diagram/dual-filter/index-test.js
index 1a802a0da..ceaf11016 100644
--- a/ui/admin/tests/integration/components/worker-diagram/dual-filter/index-test.js
+++ b/ui/admin/tests/integration/components/worker-diagram/dual-filter/index-test.js
@@ -5,75 +5,51 @@ import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
 
 module(
-  'Integration | Component | worker-diagram/dual-filter',
+  'Integration | Component | worker-diagram | dual-filter',
   function (hooks) {
     setupRenderingTest(hooks);
     setupIntl(hooks);
 
+    let featuresService;
+    const targetWorkerFilterIngress = 'target-worker-filters-v2-ingress';
+    const targetWorkerFilterHCP = 'target-worker-filters-v2-hcp';
+
+    hooks.beforeEach(function () {
+      featuresService = this.owner.lookup('service:features');
+      featuresService.enable(targetWorkerFilterIngress);
+      featuresService.disable(targetWorkerFilterHCP);
+    });
+
     test('it renders the correct diagram when egressFilter is false and ingress is false', async function (assert) {
-      assert.expect(4);
       await render(
         hbs`<WorkerDiagram::DualFilter @egressFilter={{false}} @ingressFilter={{false}} />`
       );
 
-      assert.dom('[data-test-dual-filter-egress-off-ingress-off]').isVisible();
-      assert
-        .dom('[data-test-dual-filter-egress-on-ingress-off]')
-        .doesNotExist();
-      assert
-        .dom('[data-test-dual-filter-egress-off-ingress-on]')
-        .doesNotExist();
-      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').doesNotExist();
+      assert.dom('[data-test-dual-filter-egress-off-ingress-off]').exists();
     });
 
     test('it renders the correct diagram when egressFilter is true and ingress is false', async function (assert) {
-      assert.expect(4);
       await render(
         hbs`<WorkerDiagram::DualFilter @egressFilter={{true}} @ingressFilter={{false}} />`
       );
 
-      assert.dom('[data-test-dual-filter-egress-on-ingress-off]').isVisible();
-      assert
-        .dom('[data-test-dual-filter-egress-off-ingress-on]')
-        .doesNotExist();
-      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').doesNotExist();
-      assert
-        .dom('[data-test-dual-filter-egress-off-ingress-off]')
-        .doesNotExist();
+      assert.dom('[data-test-dual-filter-egress-on-ingress-off]').exists();
     });
 
     test('it renders the correct diagram when egressFilter is false and ingress is true', async function (assert) {
-      assert.expect(4);
       await render(
         hbs`<WorkerDiagram::DualFilter @egressFilter={{false}} @ingressFilter={{true}} />`
       );
 
-      assert.dom('[data-test-dual-filter-egress-off-ingress-on]').isVisible();
-      assert
-        .dom('[data-test-dual-filter-egress-on-ingress-off]')
-        .doesNotExist();
-      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').doesNotExist();
-      assert
-        .dom('[data-test-dual-filter-egress-off-ingress-off]')
-        .doesNotExist();
+      assert.dom('[data-test-dual-filter-egress-off-ingress-on]').exists();
     });
 
     test('it renders the correct diagram when egressFilter is true and ingress is true', async function (assert) {
-      assert.expect(4);
       await render(
         hbs`<WorkerDiagram::DualFilter @egressFilter={{true}} @ingressFilter={{true}} />`
       );
 
-      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').isVisible();
-      assert
-        .dom('[data-test-dual-filter-egress-off-ingress-on]')
-        .doesNotExist();
-      assert
-        .dom('[data-test-dual-filter-egress-on-ingress-off]')
-        .doesNotExist();
-      assert
-        .dom('[data-test-dual-filter-egress-off-ingress-off]')
-        .doesNotExist();
+      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').exists();
     });
   }
 );