diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index b02b4108..bdfbde4a 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -1,6 +1,7 @@
 <script setup>
 import FwbButtonGroupExample from './buttonGroup/examples/FwbButtonGroupExample.vue'
 import FwbButtonGroupExampleIcon from './buttonGroup/examples/FwbButtonGroupExampleIcon.vue'
+import FwbButtonGroupExampleDropdown from './buttonGroup/examples/FwbButtonGroupExampleDropdown.vue'
 </script>
 
 # Vue Button Group - Flowbite
@@ -57,3 +58,44 @@ import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
 import { FwbButtonGroup, FwbButton } from 'flowbite-vue'
 </script>
 ```
+
+## Grouping buttons and dropdowns
+
+You can also mix buttons with dropdowns inside the button group.
+<fwb-button-group-example-dropdown />
+```vue
+<template>
+  <fwb-button-group>
+    <fwb-button>Button 1</fwb-button>
+    <fwb-button>Button 2</fwb-button>
+    <fwb-dropdown text="Dropdown">
+      <p class="p-2">
+        This is a test dropdown
+      </p>
+    </fwb-dropdown>
+    <fwb-dropdown text="Dropdown with list">
+      <fwb-list-group>
+        <fwb-list-group-item hover>
+          <a href="#">These</a>
+        </fwb-list-group-item>
+        <fwb-list-group-item hover>
+          <a href="#">are</a>
+        </fwb-list-group-item>
+        <fwb-list-group-item hover>
+          <a href="#">some</a>
+        </fwb-list-group-item>
+        <fwb-list-group-item hover>
+          <a href="#">list</a>
+        </fwb-list-group-item>
+        <fwb-list-group-item hover>
+          <a href="#">items</a>
+        </fwb-list-group-item>
+      </fwb-list-group>
+    </fwb-dropdown>
+  </fwb-button-group>
+</template>
+
+<script setup>
+  import { FwbButtonGroup, FwbButton, FwbDropdown, FwbListGroupItem, FwbListGroup } from 'flowbite-vue'
+</script>
+```
\ No newline at end of file
diff --git a/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue b/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue
new file mode 100644
index 00000000..6f1ab7b3
--- /dev/null
+++ b/docs/components/buttonGroup/examples/FwbButtonGroupExampleDropdown.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="vp-raw">
+    <fwb-button-group>
+      <fwb-button>Button 1</fwb-button>
+      <fwb-button>Button 2</fwb-button>
+      <fwb-dropdown text="Dropdown">
+        <p class="p-2">
+          This is a test dropdown
+        </p>
+      </fwb-dropdown>
+      <fwb-dropdown text="Dropdown with list">
+        <fwb-list-group>
+          <fwb-list-group-item hover>
+            <a href="#">These</a>
+          </fwb-list-group-item>
+          <fwb-list-group-item hover>
+            <a href="#">are</a>
+          </fwb-list-group-item>
+          <fwb-list-group-item hover>
+            <a href="#">some</a>
+          </fwb-list-group-item>
+          <fwb-list-group-item hover>
+            <a href="#">list</a>
+          </fwb-list-group-item>
+          <fwb-list-group-item hover>
+            <a href="#">items</a>
+          </fwb-list-group-item>
+        </fwb-list-group>
+      </fwb-dropdown>
+    </fwb-button-group>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton, FwbButtonGroup, FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
+</script>
diff --git a/src/components/FwbButtonGroup/FwbButtonGroup.vue b/src/components/FwbButtonGroup/FwbButtonGroup.vue
index 36a14857..daf027cb 100644
--- a/src/components/FwbButtonGroup/FwbButtonGroup.vue
+++ b/src/components/FwbButtonGroup/FwbButtonGroup.vue
@@ -9,14 +9,17 @@
 
 <style>
 .fwb-button-group > button,
+.fwb-button-group > .fwb-dropdown button,
 .fwb-button-group > .fwb-tooltip button {
   @apply rounded-none;
 }
 .fwb-button-group > button:first-child,
+.fwb-button-group > .fwb-dropdown:first-child button,
 .fwb-button-group > .fwb-tooltip:first-child button {
   @apply rounded-l-lg;
 }
 .fwb-button-group > button:last-child,
+.fwb-button-group > .fwb-dropdown:last-child button,
 .fwb-button-group > .fwb-tooltip:last-child button {
   @apply rounded-r-lg;
 }
diff --git a/src/components/FwbDropdown/FwbDropdown.vue b/src/components/FwbDropdown/FwbDropdown.vue
index 084a2424..04b16e8c 100644
--- a/src/components/FwbDropdown/FwbDropdown.vue
+++ b/src/components/FwbDropdown/FwbDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="wrapper"
-    class="inline-flex relative"
+    class="fwb-dropdown inline-flex relative"
   >
     <div class="inline-flex items-center">
       <fwb-slot-listener @click="onToggle">