diff --git a/ui/admin/app/components/session-recording/player/index.hbs b/ui/admin/app/components/session-recording/player/index.hbs
new file mode 100644
index 000000000..377faca68
--- /dev/null
+++ b/ui/admin/app/components/session-recording/player/index.hbs
@@ -0,0 +1,12 @@
+<div class='session-recording-player-layout'>
+  <div class='session-recording-player-header'>
+    <Hds::Link::Standalone
+      @icon='arrow-left'
+      @text='Back to channels'
+      @href='...'
+    />
+  </div>
+  <div class='session-recording-player-theme'>
+    <Heap::Player @data={{@asciiCast}} />
+  </div>
+</div>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection.hbs
index 708976b2e..5915f218c 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection.hbs
@@ -1,3 +1,3 @@
-{{page-title (t 'resources.session-recordings.channel.title_plural')}}
+{{page-title (t 'resources.session-recording.channel.title_plural')}}
 
 {{outlet}}
\ No newline at end of file
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 0aa78b6e8..22b74e153 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,7 +1,5 @@
-{{page-title (t 'resources.session-recordings.channel.title')}}
+{{page-title (t 'resources.session-recording.channel.title')}}
 
 <p>{{@model.scope_id}}</p>
-<div>
-  <Heap::Player @data={{@model.asciicast}} />
-</div>
+<SessionRecording::Player @asciiCast={{@model.asciicast}} />
 {{outlet}}
\ No newline at end of file
diff --git a/ui/admin/tests/integration/components/session-recording/player-test.js b/ui/admin/tests/integration/components/session-recording/player-test.js
new file mode 100644
index 000000000..fc93a81f5
--- /dev/null
+++ b/ui/admin/tests/integration/components/session-recording/player-test.js
@@ -0,0 +1,34 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'admin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | session-recording/player', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    const castConfig = {
+      version: 2,
+      width: 124,
+      height: 36,
+      timestamp: 1670352594,
+      env: { SHELL: '/bin/zsh', TERM: 'xterm-256color' },
+    };
+    this.cast = `${JSON.stringify(castConfig)}
+[2.676444, "o", "y"]
+[2.788653, "o", "a"]
+[2.868652, "o", "r"]
+[3.001764, "o", "n"]
+[3.167636, "o", " "]
+[3.313668, "o", "t"]
+[3.460527, "o", "e"]
+[3.561983, "o", "s"]
+[3.63678, "o", "t"]`;
+
+    await render(hbs`
+      <SessionRecording::Player @asciiCast={{this.cast}} />
+    `);
+
+    assert.dom(this.element).hasText('Back to channels --:----:--');
+  });
+});