diff --git a/addons/rose/addon/components/rose/metadata-list/index.hbs b/addons/rose/addon/components/rose/metadata-list/index.hbs
new file mode 100644
index 000000000..73d43e19c
--- /dev/null
+++ b/addons/rose/addon/components/rose/metadata-list/index.hbs
@@ -0,0 +1,10 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<ul class='rose-metadata-list {{@orientation}}'>
+  {{yield
+    (hash Item=(component 'rose/metadata-list/item' icon=@icon color=@color))
+  }}
+</ul>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/metadata-list/index.stories.mdx b/addons/rose/addon/components/rose/metadata-list/index.stories.mdx
new file mode 100644
index 000000000..647ff712e
--- /dev/null
+++ b/addons/rose/addon/components/rose/metadata-list/index.stories.mdx
@@ -0,0 +1,50 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs';
+import { hbs } from 'ember-cli-htmlbars';
+
+<Meta title="Rose/MetadataList" component="MetadataList" />
+
+# MetadataList
+
+A page section component that allows for a list of metadata items.
+
+```handlebars
+<Rose::MetadataList @orientation='vertical' as |list|>
+  <list.Item @icon='arrow-up' @color='success'>
+    Text Here
+  </list.Item>
+</Rose::MetadataList>
+```
+
+<Preview>
+  <Story name="MetadataList">
+    {{
+      template: hbs`
+    <Rose::MetadataList as |list|>
+      <list.Item @icon='clock' @color='success'>
+        Time Started: xx:xx:xx
+      </list.Item>
+      <list.Item @icon='clock' @color='critical'>
+        Time Ended: xx:xx:xx
+      </list.Item>
+    </Rose::MetadataList>
+    `,
+    }}
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name="MetadataList vertical">
+    {{
+      template: hbs`
+    <Rose::MetadataList @orientation='vertical' as |list|>
+      <list.Item @icon='clock' @color='success'>
+        Time Started: xx:xx:xx
+      </list.Item>
+      <list.Item @icon='clock' @color='critical'>
+        Time Ended: xx:xx:xx
+      </list.Item>
+    </Rose::MetadataList>
+    `,
+    }}
+  </Story>
+</Preview>
diff --git a/ui/admin/app/components/metadata-list/item/index.hbs b/addons/rose/addon/components/rose/metadata-list/item/index.hbs
similarity index 67%
rename from ui/admin/app/components/metadata-list/item/index.hbs
rename to addons/rose/addon/components/rose/metadata-list/item/index.hbs
index 6e608def0..1a15da49f 100644
--- a/ui/admin/app/components/metadata-list/item/index.hbs
+++ b/addons/rose/addon/components/rose/metadata-list/item/index.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<li class='metadata-list-item {{(concat "hds-foreground-" @color)}}'>
+<li class='rose-metadata-list-item {{(concat "hds-foreground-" @color)}}'>
   {{#if @icon}}
     <FlightIcon @name={{@icon}} />
   {{/if}}
diff --git a/addons/rose/app/components/rose/metadata-list.js b/addons/rose/app/components/rose/metadata-list.js
new file mode 100644
index 000000000..b8cfbeb3f
--- /dev/null
+++ b/addons/rose/app/components/rose/metadata-list.js
@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'rose/components/rose/metadata-list';
diff --git a/addons/rose/app/components/rose/metadata-list/item.js b/addons/rose/app/components/rose/metadata-list/item.js
new file mode 100644
index 000000000..cc570df42
--- /dev/null
+++ b/addons/rose/app/components/rose/metadata-list/item.js
@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'rose/components/rose/metadata-list/item';
diff --git a/addons/rose/app/styles/rose/components/_index.scss b/addons/rose/app/styles/rose/components/_index.scss
index a9b75766e..45adc1c5d 100644
--- a/addons/rose/app/styles/rose/components/_index.scss
+++ b/addons/rose/app/styles/rose/components/_index.scss
@@ -24,3 +24,4 @@
 @import 'link-button';
 @import 'toolbar';
 @import 'code-editor';
+@import 'metadata-list';
diff --git a/addons/rose/app/styles/rose/components/metadata-list/_index.scss b/addons/rose/app/styles/rose/components/metadata-list/_index.scss
new file mode 100644
index 000000000..5913baa10
--- /dev/null
+++ b/addons/rose/app/styles/rose/components/metadata-list/_index.scss
@@ -0,0 +1,17 @@
+.rose-metadata-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  &.vertical {
+    flex-direction: column;
+    row-gap: 1rem;
+  }
+
+  .rose-metadata-list-item {
+    display: flex;
+    align-items: center;
+    column-gap: 0.3rem;
+  }
+}
diff --git a/ui/admin/tests/integration/components/metadata-list/index-test.js b/addons/rose/tests/integration/components/rose/metadata-list/index-test.js
similarity index 58%
rename from ui/admin/tests/integration/components/metadata-list/index-test.js
rename to addons/rose/tests/integration/components/rose/metadata-list/index-test.js
index 4aca5459e..efbb9f558 100644
--- a/ui/admin/tests/integration/components/metadata-list/index-test.js
+++ b/addons/rose/tests/integration/components/rose/metadata-list/index-test.js
@@ -1,66 +1,61 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'admin/tests/helpers';
+import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Component | metadata-list/item', function (hooks) {
+module('Integration | Component | rose/metadata-list', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders horizontal (default) with icon, color and text', async function (assert) {
     assert.expect(3);
     await render(hbs`
-      <MetadataList as |list|>
+      <Rose::MetadataList as |list|>
         <list.Item
           @icon='arrow-up'
           @color='success'
         >
           Sample text
         </list.Item>
-      </MetadataList>
+      </Rose::MetadataList>
     `);
 
     assert.dom('[data-test-icon="arrow-up"]').isVisible();
-    assert.dom('li.metadata-list-item').hasClass('hds-foreground-success');
-    assert.dom('li.metadata-list-item').hasText('Sample text');
+    assert.dom('li.rose-metadata-list-item').hasClass('hds-foreground-success');
+    assert.dom('li.rose-metadata-list-item').hasText('Sample text');
   });
 
   test('it renders vertical with icon, color and text', async function (assert) {
     assert.expect(4);
     await render(hbs`
-      <MetadataList @orientation='vertical' as |list|>
+      <Rose::MetadataList @orientation='vertical' as |list|>
         <list.Item
           @icon='arrow-down'
           @color='action'
         >
           Sample text 2
         </list.Item>
-      </MetadataList>
+      </Rose::MetadataList>
     `);
 
-    assert.dom('ul.metadata-list').hasClass('vertical');
+    assert.dom('ul.rose-metadata-list').hasClass('vertical');
     assert.dom('[data-test-icon="arrow-down"]').isVisible();
-    assert.dom('li.metadata-list-item').hasClass('hds-foreground-action');
-    assert.dom('li.metadata-list-item').hasText('Sample text 2');
+    assert.dom('li.rose-metadata-list-item').hasClass('hds-foreground-action');
+    assert.dom('li.rose-metadata-list-item').hasText('Sample text 2');
   });
 
   test('it renders no icon if @icon not provided', async function (assert) {
     assert.expect(2);
     await render(hbs`
-      <MetadataList as |list|>
+      <Rose::MetadataList as |list|>
         <list.Item
           @color='action'
         >
           Sample text 3
         </list.Item>
-      </MetadataList>
+      </Rose::MetadataList>
     `);
 
     assert.dom('.flight-icon').isNotVisible();
-    assert.dom('li.metadata-list-item').hasText('Sample text 3');
+    assert.dom('li.rose-metadata-list-item').hasText('Sample text 3');
   });
 });
diff --git a/ui/admin/app/components/metadata-list/index.hbs b/ui/admin/app/components/metadata-list/index.hbs
deleted file mode 100644
index 4fc82886a..000000000
--- a/ui/admin/app/components/metadata-list/index.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<ul class='metadata-list {{@orientation}}'>
-  {{yield (hash Item=(component 'metadata-list/item' icon=@icon color=@color))}}
-</ul>
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 35d387618..6382c981e 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -918,25 +918,6 @@
   }
 }
 
-// Metadata List
-.metadata-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 1rem;
-
-  &.vertical {
-    flex-direction: column;
-    row-gap: 1rem;
-  }
-
-  .metadata-list-item {
-    display: flex;
-    align-items: center;
-    column-gap: 0.3rem;
-  }
-}
-
 // Session Recording Status
 // overwrites recording badge icon to red
 .session-recording-status-badge {
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 67c68c889..795c8f5d7 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
@@ -37,7 +37,7 @@
         {{! Channel details information }}
         <div class='section-details'>
           <h2>{{t 'resources.session-recording.channel.details'}}</h2>
-          <MetadataList @orientation='vertical' as |list|>
+          <Rose::MetadataList @orientation='vertical' as |list|>
             {{! Start time }}
             {{#if @model.channelRecording.start_time}}
               <list.Item @icon='calendar' @color='faint'>
@@ -78,7 +78,7 @@
                 }}
               </list.Item>
             {{/if}}
-          </MetadataList>
+          </Rose::MetadataList>
         </div>
 
         {{! Related information }}
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
index de2816197..6ba776f76 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
@@ -96,7 +96,7 @@
                         </span>
                       </B.Td>
                       <B.Td>
-                        <MetadataList as |list|>
+                        <Rose::MetadataList as |list|>
                           {{! Bytes up }}
                           {{#if B.data.bytes_up}}
                             <list.Item @icon='arrow-up' @color='success'>
@@ -121,7 +121,7 @@
                               {{format-time-duration B.data.duration}}
                             </list.Item>
                           {{/if}}
-                        </MetadataList>
+                        </Rose::MetadataList>
                       </B.Td>
                       <B.Td>
                         <Copyable
@@ -173,7 +173,7 @@
           <div class='section-details'>
             <h2>{{t 'resources.session-recording.details'}}</h2>
 
-            <MetadataList @orientation='vertical' as |list|>
+            <Rose::MetadataList @orientation='vertical' as |list|>
               {{! Session Recording Status }}
               {{#if @model.sessionRecording.state}}
                 <list.Item>
@@ -222,7 +222,7 @@
                   }}
                 </list.Item>
               {{/if}}
-            </MetadataList>
+            </Rose::MetadataList>
           </div>
 
           {{! Related information }}