diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 26f3bfca5..f4ada9696 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -217,6 +217,8 @@ session-recording:
   connection:
     title: Connection
     title_plural: Connections
+  channels-by-connection:
+    title: Channels by connection
   channel:
     title: Channel
     title_plural: Channels
diff --git a/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording.js b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording.js
new file mode 100644
index 000000000..cf762b744
--- /dev/null
+++ b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording.js
@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeSessionRecordingsSessionRecordingController extends Controller {
+  // =services
+
+  @service intl;
+
+  /**
+   * Session recording breadcrumb
+   */
+  get breadCrumb() {
+    return this.model.displayName;
+  }
+}
diff --git a/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection.js b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection.js
new file mode 100644
index 000000000..a16cea405
--- /dev/null
+++ b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection.js
@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConnectionController extends Controller {
+  // =services
+
+  @service intl;
+
+  // =attributes
+  /**
+   * Translated breadcrumb
+   */
+  get breadCrumb() {
+    return this.intl.t(
+      'resources.session-recording.channels-by-connection.title'
+    );
+  }
+}
diff --git a/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js
new file mode 100644
index 000000000..5853cd990
--- /dev/null
+++ b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js
@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConnectionChannelController extends Controller {
+  // =services
+
+  @service intl;
+
+  /**
+   * Session recording channel breadcrumb
+   */
+  get breadCrumb() {
+    return this.model.channel_id;
+  }
+}
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
index f36440b2a..57ede0481 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
@@ -1,6 +1,10 @@
 {{page-title (t 'resources.session-recording.channel.title')}}
 
 <Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
   <page.header>
     <h2>{{t 'resources.session-recording.channel.title'}}</h2>
   </page.header>
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
index 9641c3084..acd86daed 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
@@ -1,4 +1,8 @@
 <Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
   <page.header>
     <h2>{{t 'resources.session-recording.session.title'}}</h2>
   </page.header>
diff --git a/ui/admin/tests/acceptance/session-recordings/list-test.js b/ui/admin/tests/acceptance/session-recordings/list-test.js
index ebeca115a..8a868b266 100644
--- a/ui/admin/tests/acceptance/session-recordings/list-test.js
+++ b/ui/admin/tests/acceptance/session-recordings/list-test.js
@@ -12,6 +12,7 @@ module('Acceptance | session recordings | list', function (hooks) {
   const LIST_SESSION_RECORDING_BUTTON =
     'table > tbody > tr > td:last-child > a';
 
+  // Instances
   const instances = {
     scopes: {
       global: null,
@@ -20,6 +21,7 @@ module('Acceptance | session recordings | list', function (hooks) {
     sessionRecording: null,
   };
 
+  // Urls
   const urls = {
     globalScope: null,
     sessionRecordings: null,
diff --git a/ui/admin/tests/acceptance/session-recordings/session-recording/channels-by-connection/channel-test.js b/ui/admin/tests/acceptance/session-recordings/session-recording/channels-by-connection/channel-test.js
new file mode 100644
index 000000000..a971cdb27
--- /dev/null
+++ b/ui/admin/tests/acceptance/session-recordings/session-recording/channels-by-connection/channel-test.js
@@ -0,0 +1,63 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'admin/tests/helpers';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { authenticateSession } from 'ember-simple-auth/test-support';
+
+module(
+  'Acceptance | session recordings | session recording | channels by connection | channel',
+  function (hooks) {
+    setupApplicationTest(hooks);
+    setupMirage(hooks);
+
+    // Instances
+    const instances = {
+      scopes: {
+        global: null,
+        org: null,
+      },
+      sessionRecording: null,
+      connectionRecording: null,
+      channelRecording: null,
+    };
+
+    // Urls
+    const urls = {
+      globalScope: null,
+      sessionRecordings: null,
+      sessionRecording: null,
+    };
+
+    hooks.beforeEach(function () {
+      instances.scopes.global = this.server.create('scope', { id: 'global' });
+      instances.scopes.org = this.server.create('scope', {
+        type: 'org',
+        scope: { id: 'global', type: 'global' },
+      });
+      instances.sessionRecording = this.server.create('session-recording', {
+        scope: instances.scopes.global,
+      });
+      instances.connectionRecording = this.server.create(
+        'connection-recording',
+        {
+          session_recording: instances.sessionRecording,
+        }
+      );
+      instances.channelRecording = this.server.create('channel-recording', {
+        connection_recording: instances.connectionRecording,
+      });
+      urls.globalScope = `/scopes/global`;
+      urls.sessionRecordings = `${urls.globalScope}/session-recordings`;
+      urls.sessionRecording = `${urls.sessionRecordings}/${instances.sessionRecording.id}`;
+      urls.connectionRecording = `${urls.sessionRecording}/channels-by-connection/${instances.channelRecording.id}`;
+      authenticateSession({});
+    });
+
+    test('user can navigate to a channel', async function (assert) {
+      assert.expect(1);
+      // Visit channel
+      await visit(urls.connectionRecording);
+      assert.strictEqual(currentURL(), urls.connectionRecording);
+    });
+  }
+);
diff --git a/ui/admin/tests/acceptance/session-recordings/session-recording/session-recording-test.js b/ui/admin/tests/acceptance/session-recordings/session-recording/session-recording-test.js
new file mode 100644
index 000000000..5177f2a56
--- /dev/null
+++ b/ui/admin/tests/acceptance/session-recordings/session-recording/session-recording-test.js
@@ -0,0 +1,48 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'admin/tests/helpers';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { authenticateSession } from 'ember-simple-auth/test-support';
+
+module('Acceptance | session recordings | session recording', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  // Instances
+  const instances = {
+    scopes: {
+      global: null,
+      org: null,
+    },
+    sessionRecording: null,
+  };
+  // Urls
+  const urls = {
+    globalScope: null,
+    sessionRecordings: null,
+    sessionRecording: null,
+  };
+
+  hooks.beforeEach(function () {
+    instances.scopes.global = this.server.create('scope', { id: 'global' });
+    instances.scopes.org = this.server.create('scope', {
+      type: 'org',
+      scope: { id: 'global', type: 'global' },
+    });
+    instances.sessionRecording = this.server.create('session-recording', {
+      scope: instances.scopes.global,
+    });
+    urls.globalScope = `/scopes/global`;
+    urls.sessionRecordings = `${urls.globalScope}/session-recordings`;
+    urls.sessionRecording = `${urls.sessionRecordings}/${instances.sessionRecording.id}`;
+    authenticateSession({});
+  });
+
+  test('user can navigate to a session recording', async function (assert) {
+    assert.expect(1);
+
+    // Visit session recording
+    await visit(urls.sessionRecording);
+    assert.strictEqual(currentURL(), urls.sessionRecording);
+  });
+});
diff --git a/ui/admin/tests/unit/controllers/scopes/scope/session-recordings-test.js b/ui/admin/tests/unit/controllers/scopes/scope/session-recordings-test.js
index 94159166b..99bb09ace 100644
--- a/ui/admin/tests/unit/controllers/scopes/scope/session-recordings-test.js
+++ b/ui/admin/tests/unit/controllers/scopes/scope/session-recordings-test.js
@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'admin/tests/helpers';
 
-module('Unit | Controller | scopes/scope/session-recordings', function (hooks) {
+module('Unit | Controller | session-recordings', function (hooks) {
   setupTest(hooks);
 
   test('it exists', function (assert) {
diff --git a/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording-test.js b/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording-test.js
new file mode 100644
index 000000000..842723c89
--- /dev/null
+++ b/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording-test.js
@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'admin/tests/helpers';
+
+module(
+  'Unit | Controller | session-recordings | session-recording',
+  function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+      let controller = this.owner.lookup(
+        'controller:scopes/scope/session-recordings/session-recording'
+      );
+      assert.ok(controller);
+    });
+  }
+);
diff --git a/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection-test.js b/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection-test.js
new file mode 100644
index 000000000..4e0d89aaa
--- /dev/null
+++ b/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection-test.js
@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'admin/tests/helpers';
+
+module(
+  'Unit | Controller | session-recordings | session-recording | channels-by-connection',
+  function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+      let controller = this.owner.lookup(
+        'controller:scopes/scope/session-recordings/session-recording/channels-by-connection'
+      );
+      assert.ok(controller);
+    });
+  }
+);
diff --git a/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel-test.js b/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel-test.js
new file mode 100644
index 000000000..4841bc908
--- /dev/null
+++ b/ui/admin/tests/unit/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel-test.js
@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'admin/tests/helpers';
+
+module(
+  'Unit | Controller | session-recordings | session-recording | channels-by-connection | channel',
+  function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+      let controller = this.owner.lookup(
+        'controller:scopes/scope/session-recordings/session-recording/channels-by-connection/channel'
+      );
+      assert.ok(controller);
+    });
+  }
+);