diff --git a/addons/api/mirage/config.js b/addons/api/mirage/config.js
index 007950f69..008ed2743 100644
--- a/addons/api/mirage/config.js
+++ b/addons/api/mirage/config.js
@@ -13,7 +13,7 @@ export default function () {
   // make this `/api`, for example, if your API is namespaced
   this.namespace = config.api.namespace;
   // delay for each request, automatically set to 0 during testing
-  this.timing = 350;
+  this.timing = 1;
 
   // Allow any configured API host to passthrough, which is useful in
   // development for testing against a locally running backend.
diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs
index 587b8c369..90f899281 100644
--- a/addons/rose/addon/components/rose/dropdown/index.hbs
+++ b/addons/rose/addon/components/rose/dropdown/index.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}}"
+  class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}} {{if @style (concat "rose-dropdown-" @style)}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
index 4b75b3ad5..96717ebc1 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
@@ -5,6 +5,7 @@ $xs: sizing.rems(xs); // 8
 $xxs: sizing.rems(xxs); // 4
 $chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
 $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
+$chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23626873' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
 
 .rose-dropdown {
   --background-image-light: #{$chevron};
@@ -121,4 +122,26 @@ $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23f
     border: none;
     margin: $xxs 0;
   }
+
+  // Styles for condensed verion. Some are overrides
+  &.rose-dropdown-condensed {
+    --background-image: #{$chevronGrey};
+    border: sizing.rems(xxxxs) solid var(--ui-border);
+    border-radius: sizing.rems(xxs);
+
+    .rose-dropdown-trigger {
+      color: var(--ui-gray-starker-1);
+      padding: 0 sizing.rems(s); // To clear the inherit padding.
+
+      &.show-caret {
+        padding-right: sizing.rems(l) + sizing.rems(xs); // 32
+        background-position: right sizing.rems(xs) center;
+      }
+    }
+
+    .rose-dropdown-content {
+      border: none;
+      border: sizing.rems(xxxxs) solid var(--ui-border);
+    }
+  }
 }
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index a0f4b0a67..2d9634e42 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -7,8 +7,14 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
 .rose-dropdown-item {
   @include type.type(s);
   min-width: (sizing.rems(m)) * 20;
-  $line-height: math.div(36, 14);
-  line-height: $line-height;
+  $paddingY: math.div(
+    sizing.rems(xl) - (sizing.rems(m) + sizing.rems(xxxs)),
+    2
+  );
+  $paddingX: sizing.rems(s);
+  padding: $paddingY $paddingX;
+  //$line-height: math.div(36, 14);
+  //line-height: $line-height;
 
   --color: var(--stark);
   --background-color: transparent;
@@ -16,26 +22,22 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
   color: var(--color);
   background-color: var(--background-color);
 
-  &:hover {
-    --background-color: var(--ui-gray-subtler-5);
-  }
-
   .rose-form-radio {
     color: currentColor;
     margin-bottom: 0;
 
     .rose-form-radio-label {
       display: block;
+      margin: -#{$paddingY} -#{$paddingX};
       padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
       padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
       padding-left: sizing.rems(s);
       padding-right: sizing.rems(xl);
       font-weight: normal;
 
-      // &::before,
-      // &::after {
-      //   display: none;
-      // }
+      &:hover {
+        background-color: var(--ui-gray-subtler-5);
+      }
 
       &::after {
         top: sizing.rems(xxs) + sizing.rems(xxxs);
@@ -57,11 +59,6 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         ~ .rose-form-radio-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
-
-          // background-image: #{$checkmark};
-          // background-repeat: no-repeat;
-          // background-position: right sizing.rems(m) center;
-          // background-size: sizing.rems(m);
         }
       }
 
diff --git a/addons/rose/addon/styles/rose/components/form/_fieldset.scss b/addons/rose/addon/styles/rose/components/form/_fieldset.scss
index d0b35d2ea..33f5ad5d9 100644
--- a/addons/rose/addon/styles/rose/components/form/_fieldset.scss
+++ b/addons/rose/addon/styles/rose/components/form/_fieldset.scss
@@ -3,7 +3,7 @@
 
 .rose-form-fieldset {
   margin-bottom: sizing.rems(m);
-  
+
   .rose-form-fieldset-title {
     @include type.type(l, bold);
   }
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index e82d02286..e3cd92620 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,196 +1,54 @@
-<h2>Condensed Table</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell >Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </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>
+<h2>Condensed dropdown</h2>
+<Rose::Dropdown
+  @style="condensed"
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+  <dropdown.section @title="ID">
+    <dropdown.item>cl_nbv9375hLHs</dropdown.item>
+  </dropdown.section>
 
-<h2>Condensed Table with Shrink Cells</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell @shrink={{true}}>Host Set</row.headerCell>
-      <row.headerCell @shrink={{true}}>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell @shrink={{true}}>host-set-1, host-set-2</row.cell>
-      <row.cell @shrink={{true}}>
-        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
-      </row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer @hidden={{true}} as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.separator />
 
-<h2>Condensed Table with Right and Center aligned cells</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell @alignCenter={{true}}>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell @alignCenter={{true}}>host-set-1, host-set-2</row.cell>
-      <row.cell @alignRight={{true}}>optional name</row.cell>
-      <row.cell @alignCenter={{true}}>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>
+  <dropdown.section @title="Name">
+    <dropdown.item>Key/Value</dropdown.item>
+  </dropdown.section>
 
-<h2>Condensed Table Key/Value Lookalike (edit mode)</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row  as |row|>
-      <row.headerCell @shrink={{true}}>Key</row.headerCell>
-      <row.headerCell colspan="2">Value</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Input @contextual={{true}} as |input|>
-          <input.field />
-        </Rose::Form::Input>
-      </row.cell>
-      <row.cell @shrink={{true}} @alignRight={{true}}>
-        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Select
-          @name="Test select"
-          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>
-        </Rose::Form::Select>
-      </row.cell>
-      <row.cell @shrink={{true}} @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Input @contextual={{true}} as |input|>
-          <input.field />
-        </Rose::Form::Input>
-      </row.cell>
-      <row.cell @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-    <body.row as |row|>
-      <row.cell>Key</row.cell>
-      <row.cell>
-        <Rose::Form::Textarea
-          @name="field"
-          readonly={{false}}
-        />
-      </row.cell>
-      <row.cell @alignRight={{true}}>
-        <Rose::Button @style="secondary">Add</Rose::Button>
-      </row.cell>
-    </body.row>
-  </table.body>
-  <table.footer @hidden={{true}} as |footer|>
-    <footer.row as |row|>
-      <row.cell colspan="3">Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.separator />
 
-<h2>Condensed Table With Visually Hidden Header & Footer</h2>
-<Rose::Table @style="condensed" as |table|>
-  <table.header as |header|>
-    <header.row @hidden={{true}} as |row|>
-      <row.headerCell >Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </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 @hidden={{true}} as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+  <dropdown.section @title="Description">
+    <dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
+  </dropdown.section>
+</Rose::Dropdown>
 
-<h2>Table</h2>
-<Rose::Table as |table|>
-  <table.header as |header|>
-    <header.row as |row|>
-      <row.headerCell>Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
-    </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>
\ No newline at end of file
+<h2>Normal Dropdown</h2>
+<Rose::Dropdown
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+  <dropdown.section @title="ID">
+    <dropdown.item>cl_nbv9375hLHs</dropdown.item>
+  </dropdown.section>
+  <dropdown.separator />
+
+  <dropdown.section @title="Name">
+    <dropdown.item>Key/Value</dropdown.item>
+  </dropdown.section>
+  <dropdown.separator />
+
+  <dropdown.section @title="Description">
+    <dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
+  </dropdown.section>
+</Rose::Dropdown>
+
+<h2>Normal Dropdown</h2>
+<Rose::Dropdown
+  @text="Credential library details"
+  @showCaret={{true}}
+  as |dropdown|
+>
+<dropdown.link @route="about">Menu item</dropdown.link>
+<dropdown.link @route="about">Menu item 2</dropdown.link>
+</Rose::Dropdown>