diff --git a/addons/rose/addon/components/rose/table.js b/addons/rose/addon/components/rose/table.js
new file mode 100644
index 000000000..bd991b9d8
--- /dev/null
+++ b/addons/rose/addon/components/rose/table.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/table';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table.stories.mdx b/addons/rose/addon/components/rose/table.stories.mdx
new file mode 100644
index 000000000..0af8d7d0b
--- /dev/null
+++ b/addons/rose/addon/components/rose/table.stories.mdx
@@ -0,0 +1,67 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Table" component="Table" />
+
+# Table
+
+A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table row to be defined with table cells.
+
+```htmlbars
+<Rose::Table as |table|>
+  <table.header as |header|>
+    <header.row as |row|>
+      <row.cell>Address</row.cell>
+      <row.cell>Host Set</row.cell>
+      <row.cell>Name</row.cell>
+      <row.cell>Description</row.cell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell>host-set-1, host-set-2</row.cell>
+      <row.cell>optional name</row.cell>
+      <row.cell>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
+```
+
+<Preview>
+  <Story name="Basic">{{
+    template: hbs`
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.cell>Address</row.cell>
+          <row.cell>Host Set</row.cell>
+          <row.cell>Name</row.cell>
+          <row.cell>Description</row.cell>
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        <body.row as |row|>
+          <row.cell>1.1.1.1</row.cell>
+          <row.cell>host-set-1, host-set-2</row.cell>
+          <row.cell>optional name</row.cell>
+          <row.cell>description</row.cell>
+        </body.row>
+      </table.body>
+      <table.footer as |footer|>
+        <footer.row as |row|>
+          <row.cell>Footer</row.cell>
+        </footer.row>
+      </table.footer>
+    </Rose::Table>
+    `,
+    context: {}
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/table/body.js b/addons/rose/addon/components/rose/table/body.js
new file mode 100644
index 000000000..2702ed983
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/body.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/body';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table/cell.js b/addons/rose/addon/components/rose/table/cell.js
new file mode 100644
index 000000000..3943c8054
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/cell.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/cell';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table/footer.js b/addons/rose/addon/components/rose/table/footer.js
new file mode 100644
index 000000000..ff0346354
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/footer.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/footer';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table/header.js b/addons/rose/addon/components/rose/table/header.js
new file mode 100644
index 000000000..bcc2ff040
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/header.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/header';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table/row.js b/addons/rose/addon/components/rose/table/row.js
new file mode 100644
index 000000000..4012b9afd
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/row.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/row';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index bebf8b7de..9376545de 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -7,3 +7,4 @@
 @import 'page-header';
 @import 'separator';
 @import 'nav';
+@import 'table';
diff --git a/addons/rose/addon/styles/rose/components/table/_index.scss b/addons/rose/addon/styles/rose/components/table/_index.scss
new file mode 100644
index 000000000..ef81e56e7
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/table/_index.scss
@@ -0,0 +1,17 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-table {
+  @include type.type(s, normal);
+  width: 100%;
+
+  .rose-table-header {
+    background-color: var(--ui-gray-subtler-5);
+    text-align: left;
+  }
+
+  .rose-table-cell {
+    border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+    padding: sizing.rems(xs) sizing.rems(xxs);
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/table.hbs b/addons/rose/addon/templates/components/rose/table.hbs
new file mode 100644
index 000000000..580885405
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table.hbs
@@ -0,0 +1,11 @@
+<table ...attributes class="rose-table">
+  {{#if @caption}}
+    <caption>{{@caption}}</caption>
+  {{/if}}
+
+  {{yield (hash
+    header=(component 'rose/table/header')
+    body=(component 'rose/table/body')
+    footer=(component 'rose/table/footer')
+  )}}
+</table>
diff --git a/addons/rose/addon/templates/components/rose/table/body.hbs b/addons/rose/addon/templates/components/rose/table/body.hbs
new file mode 100644
index 000000000..f82c64d04
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/body.hbs
@@ -0,0 +1,5 @@
+<tbody ...attributes class="rose-table-body">
+  {{yield (hash
+    row=(component 'rose/table/row')
+  )}}
+</tbody>
diff --git a/addons/rose/addon/templates/components/rose/table/cell.hbs b/addons/rose/addon/templates/components/rose/table/cell.hbs
new file mode 100644
index 000000000..5cfc41c8d
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/cell.hbs
@@ -0,0 +1,9 @@
+{{#if @header}}
+  <th ...attributes class="rose-table-cell rose-table-header-cell">
+    {{yield}}
+  </th>
+{{else}}
+  <td ...attributes class="{{concat "rose-table-cell" (if @footer " rose-table-footer-cell" " rose-table-body-cell")}}">
+    {{yield}}
+  </td>
+{{/if}}
diff --git a/addons/rose/addon/templates/components/rose/table/footer.hbs b/addons/rose/addon/templates/components/rose/table/footer.hbs
new file mode 100644
index 000000000..107b0b53f
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/footer.hbs
@@ -0,0 +1,5 @@
+<tfoot ...attributes class="rose-table-footer">
+  {{yield (hash
+    row=(component 'rose/table/row' footer=true)
+  )}}
+</tfoot>
diff --git a/addons/rose/addon/templates/components/rose/table/header.hbs b/addons/rose/addon/templates/components/rose/table/header.hbs
new file mode 100644
index 000000000..13344bc99
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/header.hbs
@@ -0,0 +1,5 @@
+<thead ...attributes class="rose-table-header">
+  {{yield (hash
+    row=(component 'rose/table/row' header=true)
+  )}}
+</thead>
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs
new file mode 100644
index 000000000..aae991def
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/row.hbs
@@ -0,0 +1,5 @@
+<tr ...attributes class="rose-table-row">
+  {{yield (hash
+    cell=(component 'rose/table/cell' header=@header footer=@footer)
+  )}}
+</tr>
diff --git a/addons/rose/app/components/rose/table.js b/addons/rose/app/components/rose/table.js
new file mode 100644
index 000000000..9101f15ac
--- /dev/null
+++ b/addons/rose/app/components/rose/table.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table';
diff --git a/addons/rose/app/components/rose/table/body.js b/addons/rose/app/components/rose/table/body.js
new file mode 100644
index 000000000..bf58d0690
--- /dev/null
+++ b/addons/rose/app/components/rose/table/body.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/body';
diff --git a/addons/rose/app/components/rose/table/cell.js b/addons/rose/app/components/rose/table/cell.js
new file mode 100644
index 000000000..7e3b6e8b8
--- /dev/null
+++ b/addons/rose/app/components/rose/table/cell.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/cell';
diff --git a/addons/rose/app/components/rose/table/footer.js b/addons/rose/app/components/rose/table/footer.js
new file mode 100644
index 000000000..8fedb5800
--- /dev/null
+++ b/addons/rose/app/components/rose/table/footer.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/footer';
diff --git a/addons/rose/app/components/rose/table/header.js b/addons/rose/app/components/rose/table/header.js
new file mode 100644
index 000000000..c0a585fe7
--- /dev/null
+++ b/addons/rose/app/components/rose/table/header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/header';
diff --git a/addons/rose/app/components/rose/table/row.js b/addons/rose/app/components/rose/table/row.js
new file mode 100644
index 000000000..91618b6a0
--- /dev/null
+++ b/addons/rose/app/components/rose/table/row.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/row';
diff --git a/addons/rose/tests/dummy/app/controllers/playground.js b/addons/rose/tests/dummy/app/controllers/playground.js
new file mode 100644
index 000000000..af7c86470
--- /dev/null
+++ b/addons/rose/tests/dummy/app/controllers/playground.js
@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class PlaygroundController extends Controller {
+  color = 'green';
+
+  @action
+  actionHandler(/*value*/) {
+    // eslint-disable-next-line no-console
+    //console.log('action handled');
+  }
+}
diff --git a/addons/rose/tests/dummy/app/router.js b/addons/rose/tests/dummy/app/router.js
index c5464a74c..5668362d0 100644
--- a/addons/rose/tests/dummy/app/router.js
+++ b/addons/rose/tests/dummy/app/router.js
@@ -8,4 +8,5 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('about');
+  this.route('playground');
 });
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 576a37395..3554ea5f2 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,209 +1,23 @@
-<Rose::Layout::Global as |global|>
-  <global.header>
-    <Rose::Header as |header|>
-
-      <header.brand @logo="logo" @text="Product Name" />
-
-      <header.nav as |nav|>
-        <nav.dropdown @text="org-name" as |dropdown|>
-          <dropdown.link @route="index">Menu item</dropdown.link>
-          <dropdown.link @route="about">Menu item</dropdown.link>
-          <dropdown.button>Button menu item</dropdown.button>
-        </nav.dropdown>
-        <nav.link @route="index">Section</nav.link>
-        <nav.link @route="about">Section</nav.link>
-      </header.nav>
-
-
-      <header.utilities as |utilities|>
-        <utilities.dropdown
-          @text="user@example.net"
-          @iconOnly={{true}}
-          @icon="user-square-fill" as |dropdown|
-        >
-          <dropdown.link @route="index">Menu item</dropdown.link>
-          <dropdown.link @route="about">Menu item</dropdown.link>
-          <dropdown.button>Button menu item</dropdown.button>
-        </utilities.dropdown>
-      </header.utilities>
-
-    </Rose::Header>
-  </global.header>
-
-  <global.navigation>
-    <Rose::Nav::Sidebar @title="Title" as |nav|>
-      <nav.link @route="index">Item Name</nav.link>
-      <nav.link @route="about">Item Name</nav.link>
-      <nav.link @route="about">Item Name</nav.link>
-      <nav.link @route="about">Item Name</nav.link>
-    </Rose::Nav::Sidebar>
-  </global.navigation>
-
-  <global.body>
-    <Rose::Layout::Page as |page|>
-      <page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
-      <page.header>Header</page.header>
-      <page.navigation>Navigation</page.navigation>
-      <page.actions>Actions</page.actions>
-      <page.body>Body</page.body>
-    </Rose::Layout::Page>
-
-    Dummy app index template
-
-    <Rose::Notification
-      @style="error"
-      @heading="Error"
-      @dismiss={{this.actionHandler}}
-      @dismissText="Dismiss"
-    >
-    An error occurred.
-    </Rose::Notification>
-
-    <h2>Icon</h2>
-    <Rose::Icon @name="alert-circle-fill" />
-    <Rose::Icon @name="alert-circle-fill" @size="medium" />
-    <Rose::Icon @name="alert-circle-fill" @size="small" />
-
-    <h2>Button</h2>
-    <Rose::Button @style="primary">Primary</Rose::Button>
-    <br>
-    <Rose::Button @style="primary" @disabled={{true}}>Primary</Rose::Button>
-    <br>
-
-    <Rose::Button @style="secondary">Secondary</Rose::Button>
-    <br>
-    <Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
-    <br>
-
-    <h2>Form</h2>
-    <Rose::Form
-      @onSubmit={{this.actionHandler}}
-      @cancel={{this.actionHandler}}
-      @disabled={{false}}
-      as |form|
-    >
-
-      <h3>Inputs</h3>
-      <form.input
-        @label="Label"
-        @value="Read only"
-        readonly={{true}}
-        />
-      <form.input
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        />
-      <form.input
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        @error={{true}}
-        />
-      <form.input
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        disabled={{true}}
-        />
-
-      <h3>Textareas</h3>
-      <form.textarea
-        @label="Label"
-        @value="Read only"
-        readonly={{true}}
-        />
-      <form.textarea
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        />
-      <form.textarea
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        @error={{true}}
-        />
-      <form.textarea
-        @label="Label"
-        @helperText="Helper text"
-        @value="Text"
-        disabled={{true}}
-        />
-
-      <h3>Selects</h3>
-      <form.select
-        @label="Label"
-        @helperText="Helper text"
-        @onChange={{fn this.actionHandler}}
-        as |field|
-      >
-        <field.field as |select|>
-          <select.option>Choose an option</select.option>
-          <select.option @value="value-1">Value 1</select.option>
-          <select.option @value="value-2">Value 2</select.option>
-          <select.option @value="value-3">Value 3</select.option>
-        </field.field>
-      </form.select>
-      <form.select
-
-        @label="Label"
-        @helperText="Helper text"
-        @onChange={{fn this.actionHandler}}
-        as |field|
-      >
-        <field.field as |select|>
-          <select.option>Choose an option</select.option>
-        </field.field>
-      </form.select>
-
-
-      <h3>Radio Group</h3>
-      <form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
-        <radioGroup.radio
-          @label="Red"
-          @value="red"
-        />
-        <radioGroup.radio
-          @label="Green"
-          @value="green"
-        />
-        <radioGroup.radio
-          @label="Blue"
-          @value="blue"
-          @disabled={{true}}
-        />
-      </form.radioGroup>
-
-      <h3>Checkboxes</h3>
-      <form.checkbox
-        @label="Label"
-        />
-      <form.checkbox
-        @error={{true}}
-        @label="Error"
-        />
-      <form.checkbox
-        @checked={{true}}
-        @label="Checked"
-        />
-      <form.checkbox
-        @label="Disabled"
-        disabled={{true}}
-        />
-      <form.checkbox
-        @checked={{true}}
-        @label="Disabled + Checked"
-        disabled={{true}}
-        />
-
-      <form.actions
-        @submitText="Save"
-        @cancelText="Cancel" />
-    </Rose::Form>
-
-    <Rose::Card::Link @title="I'm a card" />
-    <Rose::Card::Link @title="I'm a card" @description="I'm a description" />
-    <Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
-  </global.body>
-</Rose::Layout::Global>
+<Rose::Table as |table|>
+  <table.header as |header|>
+    <header.row as |row|>
+      <row.cell>Address</row.cell>
+      <row.cell>Host Set</row.cell>
+      <row.cell>Name</row.cell>
+      <row.cell>Description</row.cell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell>host-set-1, host-set-2</row.cell>
+      <row.cell>optional name</row.cell>
+      <row.cell>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs
new file mode 100644
index 000000000..576a37395
--- /dev/null
+++ b/addons/rose/tests/dummy/app/templates/playground.hbs
@@ -0,0 +1,209 @@
+<Rose::Layout::Global as |global|>
+  <global.header>
+    <Rose::Header as |header|>
+
+      <header.brand @logo="logo" @text="Product Name" />
+
+      <header.nav as |nav|>
+        <nav.dropdown @text="org-name" as |dropdown|>
+          <dropdown.link @route="index">Menu item</dropdown.link>
+          <dropdown.link @route="about">Menu item</dropdown.link>
+          <dropdown.button>Button menu item</dropdown.button>
+        </nav.dropdown>
+        <nav.link @route="index">Section</nav.link>
+        <nav.link @route="about">Section</nav.link>
+      </header.nav>
+
+
+      <header.utilities as |utilities|>
+        <utilities.dropdown
+          @text="user@example.net"
+          @iconOnly={{true}}
+          @icon="user-square-fill" as |dropdown|
+        >
+          <dropdown.link @route="index">Menu item</dropdown.link>
+          <dropdown.link @route="about">Menu item</dropdown.link>
+          <dropdown.button>Button menu item</dropdown.button>
+        </utilities.dropdown>
+      </header.utilities>
+
+    </Rose::Header>
+  </global.header>
+
+  <global.navigation>
+    <Rose::Nav::Sidebar @title="Title" as |nav|>
+      <nav.link @route="index">Item Name</nav.link>
+      <nav.link @route="about">Item Name</nav.link>
+      <nav.link @route="about">Item Name</nav.link>
+      <nav.link @route="about">Item Name</nav.link>
+    </Rose::Nav::Sidebar>
+  </global.navigation>
+
+  <global.body>
+    <Rose::Layout::Page as |page|>
+      <page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
+      <page.header>Header</page.header>
+      <page.navigation>Navigation</page.navigation>
+      <page.actions>Actions</page.actions>
+      <page.body>Body</page.body>
+    </Rose::Layout::Page>
+
+    Dummy app index template
+
+    <Rose::Notification
+      @style="error"
+      @heading="Error"
+      @dismiss={{this.actionHandler}}
+      @dismissText="Dismiss"
+    >
+    An error occurred.
+    </Rose::Notification>
+
+    <h2>Icon</h2>
+    <Rose::Icon @name="alert-circle-fill" />
+    <Rose::Icon @name="alert-circle-fill" @size="medium" />
+    <Rose::Icon @name="alert-circle-fill" @size="small" />
+
+    <h2>Button</h2>
+    <Rose::Button @style="primary">Primary</Rose::Button>
+    <br>
+    <Rose::Button @style="primary" @disabled={{true}}>Primary</Rose::Button>
+    <br>
+
+    <Rose::Button @style="secondary">Secondary</Rose::Button>
+    <br>
+    <Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
+    <br>
+
+    <h2>Form</h2>
+    <Rose::Form
+      @onSubmit={{this.actionHandler}}
+      @cancel={{this.actionHandler}}
+      @disabled={{false}}
+      as |form|
+    >
+
+      <h3>Inputs</h3>
+      <form.input
+        @label="Label"
+        @value="Read only"
+        readonly={{true}}
+        />
+      <form.input
+        @label="Label"
+        @helperText="Helper text"
+        @value="Text"
+        />
+      <form.input
+        @label="Label"
+        @helperText="Helper text"
+        @value="Text"
+        @error={{true}}
+        />
+      <form.input
+        @label="Label"
+        @helperText="Helper text"
+        @value="Text"
+        disabled={{true}}
+        />
+
+      <h3>Textareas</h3>
+      <form.textarea
+        @label="Label"
+        @value="Read only"
+        readonly={{true}}
+        />
+      <form.textarea
+        @label="Label"
+        @helperText="Helper text"
+        @value="Text"
+        />
+      <form.textarea
+        @label="Label"
+        @helperText="Helper text"
+        @value="Text"
+        @error={{true}}
+        />
+      <form.textarea
+        @label="Label"
+        @helperText="Helper text"
+        @value="Text"
+        disabled={{true}}
+        />
+
+      <h3>Selects</h3>
+      <form.select
+        @label="Label"
+        @helperText="Helper text"
+        @onChange={{fn this.actionHandler}}
+        as |field|
+      >
+        <field.field as |select|>
+          <select.option>Choose an option</select.option>
+          <select.option @value="value-1">Value 1</select.option>
+          <select.option @value="value-2">Value 2</select.option>
+          <select.option @value="value-3">Value 3</select.option>
+        </field.field>
+      </form.select>
+      <form.select
+
+        @label="Label"
+        @helperText="Helper text"
+        @onChange={{fn this.actionHandler}}
+        as |field|
+      >
+        <field.field as |select|>
+          <select.option>Choose an option</select.option>
+        </field.field>
+      </form.select>
+
+
+      <h3>Radio Group</h3>
+      <form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
+        <radioGroup.radio
+          @label="Red"
+          @value="red"
+        />
+        <radioGroup.radio
+          @label="Green"
+          @value="green"
+        />
+        <radioGroup.radio
+          @label="Blue"
+          @value="blue"
+          @disabled={{true}}
+        />
+      </form.radioGroup>
+
+      <h3>Checkboxes</h3>
+      <form.checkbox
+        @label="Label"
+        />
+      <form.checkbox
+        @error={{true}}
+        @label="Error"
+        />
+      <form.checkbox
+        @checked={{true}}
+        @label="Checked"
+        />
+      <form.checkbox
+        @label="Disabled"
+        disabled={{true}}
+        />
+      <form.checkbox
+        @checked={{true}}
+        @label="Disabled + Checked"
+        disabled={{true}}
+        />
+
+      <form.actions
+        @submitText="Save"
+        @cancelText="Cancel" />
+    </Rose::Form>
+
+    <Rose::Card::Link @title="I'm a card" />
+    <Rose::Card::Link @title="I'm a card" @description="I'm a description" />
+    <Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
+  </global.body>
+</Rose::Layout::Global>
diff --git a/addons/rose/tests/integration/components/rose/table-test.js b/addons/rose/tests/integration/components/rose/table-test.js
new file mode 100644
index 000000000..06f2a5b8c
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table-test.js
@@ -0,0 +1,46 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Table />`);
+    assert.ok(find('table'));
+    assert.ok(find('.rose-table'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Table id="table"/>`);
+    assert.ok(find('#table'));
+  });
+
+  test('it renders with caption', async function (assert) {
+    await render(hbs`<Rose::Table @caption="table caption"/>`);
+    assert.ok(find('caption'));
+    assert.equal(find('caption').textContent.trim(), 'table caption');
+  });
+
+  test('it renders with header', async function (assert) {
+    await render(hbs`<Rose::Table as |table|>
+      <table.header />
+    </Rose::Table>`);
+    assert.ok(find('thead'));
+  });
+
+  test('it renders with body', async function (assert) {
+    await render(hbs`<Rose::Table as |table|>
+      <table.body />
+    </Rose::Table>`);
+    assert.ok(find('tbody'));
+  });
+
+  test('it renders with footer', async function (assert) {
+    await render(hbs`<Rose::Table as |table|>
+      <table.footer />
+    </Rose::Table>`);
+    assert.ok(find('tfoot'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/body-test.js b/addons/rose/tests/integration/components/rose/table/body-test.js
new file mode 100644
index 000000000..e7c026883
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/body-test.js
@@ -0,0 +1,36 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table/body', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Table::Body />`);
+    assert.ok(find('tbody'));
+    assert.ok(find('.rose-table-body'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Table::Body id="body"/>`);
+    assert.ok(find('#body'));
+  });
+
+  test('it renders with row', async function (assert) {
+    await render(hbs`<Rose::Table::Body as |body|>
+      <body.row />
+    </Rose::Table::Body>`);
+    assert.ok(find('tr'));
+  });
+
+  test('it renders with row cell', async function (assert) {
+    await render(hbs`<Rose::Table::Body as |body|>
+      <body.row as |row|>
+        <row.cell />
+      </body.row>
+    </Rose::Table::Body>`);
+    assert.ok(find('td'));
+    assert.ok(find('.rose-table-body-cell'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/cell-test.js b/addons/rose/tests/integration/components/rose/table/cell-test.js
new file mode 100644
index 000000000..aeec60376
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/cell-test.js
@@ -0,0 +1,39 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table/cell', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Table::Cell />`);
+    assert.ok(find('td'));
+    assert.ok(find('.rose-table-cell'));
+    assert.ok(find('.rose-table-body-cell'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Table::Cell id="cell"/>`);
+    assert.ok(find('#cell'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Table::Cell>
+      Cell content
+    </Rose::Table::Cell>`);
+    assert.equal(find('.rose-table-cell').textContent.trim(), 'Cell content');
+  });
+
+  test('it renders as header cell', async function (assert) {
+    await render(hbs`<Rose::Table::Cell @header={{true}}/>`);
+    assert.ok(find('.rose-table-cell'));
+    assert.ok(find('.rose-table-header-cell'));
+  });
+
+  test('it renders as footer cell', async function (assert) {
+    await render(hbs`<Rose::Table::Cell @footer={{true}}/>`);
+    assert.ok(find('.rose-table-cell'));
+    assert.ok(find('.rose-table-footer-cell'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/footer-test.js b/addons/rose/tests/integration/components/rose/table/footer-test.js
new file mode 100644
index 000000000..1e4cd8997
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/footer-test.js
@@ -0,0 +1,36 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table/footer', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Table::Footer />`);
+    assert.ok(find('tfoot'));
+    assert.ok(find('.rose-table-footer'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Table::Footer id="footer"/>`);
+    assert.ok(find('#footer'));
+  });
+
+  test('it renders with row', async function (assert) {
+    await render(hbs`<Rose::Table::Footer as |footer|>
+      <footer.row />
+    </Rose::Table::Footer>`);
+    assert.ok(find('tr'));
+  });
+
+  test('it renders with row cell', async function (assert) {
+    await render(hbs`<Rose::Table::Footer as |footer|>
+      <footer.row as |row|>
+        <row.cell />
+      </footer.row>
+    </Rose::Table::Footer>`);
+    assert.ok(find('td'));
+    assert.ok(find('.rose-table-cell'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/header-test.js b/addons/rose/tests/integration/components/rose/table/header-test.js
new file mode 100644
index 000000000..f6ae7c289
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/header-test.js
@@ -0,0 +1,36 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table/header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Table::Header />`);
+    assert.ok(find('thead'));
+    assert.ok(find('.rose-table-header'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Table::Header id="header"/>`);
+    assert.ok(find('#header'));
+  });
+
+  test('it renders with row', async function (assert) {
+    await render(hbs`<Rose::Table::Header as |header|>
+      <header.row />
+    </Rose::Table::Header>`);
+    assert.ok(find('tr'));
+  });
+
+  test('it renders with row cell', async function (assert) {
+    await render(hbs`<Rose::Table::Header as |header|>
+      <header.row as |row|>
+        <row.cell />
+      </header.row>
+    </Rose::Table::Header>`);
+    assert.ok(find('th'));
+    assert.ok(find('.rose-table-header-cell'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/row-test.js b/addons/rose/tests/integration/components/rose/table/row-test.js
new file mode 100644
index 000000000..efb3182d4
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/row-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table/row', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Table::Row />`);
+    assert.ok(find('tr'));
+    assert.ok(find('.rose-table-row'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Table::Row id="row"/>`);
+    assert.ok(find('#row'));
+  });
+
+  test('it renders with cell', async function (assert) {
+    await render(hbs`<Rose::Table::Row as |row|>
+      <row.cell />
+    </Rose::Table::Row>`);
+    assert.ok(find('.rose-table-cell'));
+  });
+});