diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index 87c50f1f1..25a441767 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -7,7 +7,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 # Dropdown
 
-A simple dropdown component with support for links and buttons.
+A simple dropdown component with support for links and buttons. Dropdown buttons support pre-defined styles of `Rose::Button`.
 
 <Preview>
   <Story name="Basic Dropdown" height="5rem">{{
@@ -43,3 +43,25 @@ A simple dropdown component with support for links and buttons.
     <dropdown.button>Button menu item</dropdown.button>
   </Rose::Dropdown>
 ```
+
+Dropdown content can be aligned to right edge of the component instead of the default left edge. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
+
+```htmlbars
+  <Rose::Dropdown @text="Choose One&hellip;" style="float: right" @alignRight={{true}} 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>
+  </Rose::Dropdown>
+```
+
+Dropdown button styles can be supplied through a `style` attribute.
+
+```htmlbars
+<Rose::Dropdown @text="Dropdown" as |dropdown|>
+  <dropdown.button>Button menu item</dropdown.button>
+  <dropdown.button @style="warning">Button - warning</dropdown.button>
+  <dropdown.button @style="primary">Button - primary</dropdown.button>
+  <dropdown.button @style="secondary">Button - secondary</dropdown.button>
+  <dropdown.button @style="ghost">Button - ghost</dropdown.button>
+</Rose::Dropdown>
+```
diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index d4fb27f03..58eac5a0a 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -93,7 +93,7 @@
   }
 
   .rose-dropdown-link,
-  .rose-button-dropdown {
+  .rose-dropdown-button {
     @include type.type(s, normal);
     display: block;
     // Targeting min-width of 200
@@ -109,13 +109,17 @@
     line-height: $lineHeight;
     text-align: left;
     text-decoration: none;
+    box-shadow: none;
+    text-shadow: none;
+    cursor: pointer;
 
     &:hover {
-      background-color: var(--ui-gray-subtler-4);
+      box-shadow: none;
+      text-shadow: none;
     }
   }
 
-  .rose-button-dropdown {
+  .rose-dropdown-button {
     width: 100%;
   }
 }
diff --git a/addons/rose/addon/templates/components/rose/button.hbs b/addons/rose/addon/templates/components/rose/button.hbs
index a8ac2acbd..6f5974289 100644
--- a/addons/rose/addon/templates/components/rose/button.hbs
+++ b/addons/rose/addon/templates/components/rose/button.hbs
@@ -2,7 +2,7 @@
   ...attributes
   type={{if @submit "submit" "button"}}
   disabled={{if @disabled "disabled"}}
-  class="{{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
+  class="{{@class}} {{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
   >
 
   <span class="rose-button-wrapper">
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 7de02c1b7..8d2b75734 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -25,7 +25,7 @@
   <div class="rose-dropdown-content" {{on-click-inside this.close}}>
     {{yield (hash
       link=(component "link-to" class="rose-dropdown-link")
-      button=(component "rose/button" style="dropdown")
+      button=(component "rose/button" class="rose-dropdown-button" style=this.style)
     )}}
   </div>
 
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index dba08ec08..72f1657d5 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -19,8 +19,21 @@
     >
       <dropdown.link @route="index">Menu item</dropdown.link>
       <dropdown.link @route="about">Menu item</dropdown.link>
-      <dropdown.button>Button menu item</dropdown.button>
+      <dropdown.button>Button - default</dropdown.button>
+      <dropdown.button @style="warning">Button - warning</dropdown.button>
+      <dropdown.button @style="primary">Button - primary</dropdown.button>
+      <dropdown.button @style="secondary">Button - secondary</dropdown.button>
+      <dropdown.button @style="ghost">Button - ghost</dropdown.button>
     </utilities.dropdown>
   </header.utilities>
 </Rose::Header>
 
+<Rose::Dropdown @text="Dropdown" 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>
+  <dropdown.button @style="warning">Button - warning</dropdown.button>
+  <dropdown.button @style="primary">Button - primary</dropdown.button>
+  <dropdown.button @style="secondary">Button - secondary</dropdown.button>
+  <dropdown.button @style="ghost">Button - ghost</dropdown.button>
+</Rose::Dropdown>