diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
index c4287d3991..4a2c70fb27 100644
--- a/examples/stencil-components/vanilla-cdn/index.html
+++ b/examples/stencil-components/vanilla-cdn/index.html
@@ -235,14 +235,14 @@ <h2>Dropdown</h2>
         dropdown
       </ifx-dropdown-trigger-button>
       <ifx-dropdown-menu size="l">
-        <ifx-dropdown-header>Header Text</ifx-dropdown-header>
+       <ifx-dropdown-header>Header Text</ifx-dropdown-header>
         <ifx-search-field show-delete-icon="false"></ifx-search-field>
-        <ifx-dropdown-item target="_blank" href="https://www.google.de">First</ifx-dropdown-item>
+        <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
         <ifx-dropdown-separator></ifx-dropdown-separator>
-        <ifx-dropdown-item icon="calendar16">One</ifx-dropdown-item>
-        <ifx-dropdown-item>Two</ifx-dropdown-item>
-        <ifx-dropdown-item>Three</ifx-dropdown-item>
-        <ifx-dropdown-item>Four</ifx-dropdown-item>
+        <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+        <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+        <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+        <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
       </ifx-dropdown-menu>
     </ifx-dropdown>
     <br />
diff --git a/examples/wrapper-components/react-javascript/package-lock.json b/examples/wrapper-components/react-javascript/package-lock.json
index 639b54af8b..83a94b028b 100644
--- a/examples/wrapper-components/react-javascript/package-lock.json
+++ b/examples/wrapper-components/react-javascript/package-lock.json
@@ -21903,16 +21903,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/uglify-js": {
@@ -39332,9 +39332,9 @@
       }
     },
     "typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true
     },
     "uglify-js": {
diff --git a/examples/wrapper-components/react-javascript/src/components/Dropdown/Dropdown.js b/examples/wrapper-components/react-javascript/src/components/Dropdown/Dropdown.js
index 8a37b1709e..1e682aa36b 100644
--- a/examples/wrapper-components/react-javascript/src/components/Dropdown/Dropdown.js
+++ b/examples/wrapper-components/react-javascript/src/components/Dropdown/Dropdown.js
@@ -13,10 +13,10 @@ function Dropdown() {
     </IfxDropdownTriggerButton>
     <IfxDropdownMenu size="l" onIfxDropdownMenu={handleValue}>
      <IfxDropdownHeader>Header Text</IfxDropdownHeader>
-      <IfxDropdownItem target="_blank" href="https://www.google.de">lorem10</IfxDropdownItem>
+      <IfxDropdownItem>Menu Item</IfxDropdownItem>
       <IfxDropdownSeparator></IfxDropdownSeparator>
-      <IfxDropdownItem icon="calendar16">Link Item</IfxDropdownItem>
-      <IfxDropdownItem>Menu Item lorem10</IfxDropdownItem>
+      <IfxDropdownItem>Menu Item</IfxDropdownItem>
+      <IfxDropdownItem>Menu Item</IfxDropdownItem>
     </IfxDropdownMenu>
   </IfxDropdown>
   );
diff --git a/examples/wrapper-components/react-typescript/src/components/Dropdown/Dropdown.tsx b/examples/wrapper-components/react-typescript/src/components/Dropdown/Dropdown.tsx
index 4cf154027c..bee26aeba1 100644
--- a/examples/wrapper-components/react-typescript/src/components/Dropdown/Dropdown.tsx
+++ b/examples/wrapper-components/react-typescript/src/components/Dropdown/Dropdown.tsx
@@ -9,10 +9,10 @@ function Dropdown() {
     </IfxDropdownTriggerButton>
     <IfxDropdownMenu size="l">
      <IfxDropdownHeader>Header Text</IfxDropdownHeader>
-      <IfxDropdownItem target="_blank" href="https://www.google.de">lorem10</IfxDropdownItem>
+      <IfxDropdownItem>Menu Item</IfxDropdownItem>
       <IfxDropdownSeparator></IfxDropdownSeparator>
-      <IfxDropdownItem icon="calendar16">Link Item</IfxDropdownItem>
-      <IfxDropdownItem>Menu Item lorem10</IfxDropdownItem>
+      <IfxDropdownItem>Menu Item</IfxDropdownItem>
+      <IfxDropdownItem>Menu Item</IfxDropdownItem>
     </IfxDropdownMenu>
   </IfxDropdown>
   );
diff --git a/examples/wrapper-components/vue-javascript/src/components/Dropdown.vue b/examples/wrapper-components/vue-javascript/src/components/Dropdown.vue
index 45f461d319..b3e0b95d91 100644
--- a/examples/wrapper-components/vue-javascript/src/components/Dropdown.vue
+++ b/examples/wrapper-components/vue-javascript/src/components/Dropdown.vue
@@ -8,12 +8,12 @@
     <ifx-dropdown-menu size="l">
      <ifx-dropdown-header>Header Text</ifx-dropdown-header>
       <ifx-search-field show-delete-icon="false"></ifx-search-field>
-      <ifx-dropdown-item target="_blank" href="https://www.google.de">First</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
       <ifx-dropdown-separator></ifx-dropdown-separator>
-      <ifx-dropdown-item icon="calendar16">One</ifx-dropdown-item>
-      <ifx-dropdown-item>Two</ifx-dropdown-item>
-      <ifx-dropdown-item>Three</ifx-dropdown-item>
-      <ifx-dropdown-item>Four</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
     </ifx-dropdown-menu>
   </ifx-dropdown>
   </div>
diff --git a/package-lock.json b/package-lock.json
index ae6e1781f9..5424afa580 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22690,10 +22690,14 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
       "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -40391,9 +40395,9 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
     "uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
       "dev": true
     },
     "uvu": {
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
index 7f629633b1..35d4995b80 100644
--- a/packages/components-vue/lib/components.ts
+++ b/packages/components-vue/lib/components.ts
@@ -154,8 +154,8 @@ export const IfxDropdownTrigger = /*@__PURE__*/ defineContainer<JSX.IfxDropdownT
 
 export const IfxDropdownTriggerButton = /*@__PURE__*/ defineContainer<JSX.IfxDropdownTriggerButton>('ifx-dropdown-trigger-button', undefined, [
   'isOpen',
+  'theme',
   'variant',
-  'color',
   'size',
   'disabled',
   'hideArrow'
diff --git a/packages/components/src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx b/packages/components/src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx
index 0e01d1a727..9be133161b 100644
--- a/packages/components/src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx
+++ b/packages/components/src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx
@@ -10,8 +10,9 @@ import { IOpenable } from '../IOpenable';
 
 export class DropdownItem implements IOpenable {
   @Prop() isOpen: boolean = false;
-  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';
-  @Prop() color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' = 'primary';
+
+  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';
+  @Prop() variant: 'primary';
   @Prop() size: 's' | 'm' = 'm';
   @Prop() disabled: boolean;
   @Prop() hideArrow: boolean = false;
@@ -20,7 +21,7 @@ export class DropdownItem implements IOpenable {
     return (
       <ifx-button
         variant={this.variant}
-        color={this.color}
+        theme={this.theme}
         size={this.size}
         disabled={this.disabled}
         class="dropdown-trigger-button"
diff --git a/packages/components/src/components/dropdown/dropdown-trigger-button/readme.md b/packages/components/src/components/dropdown/dropdown-trigger-button/readme.md
index fcfb5d75e9..62425393dc 100644
--- a/packages/components/src/components/dropdown/dropdown-trigger-button/readme.md
+++ b/packages/components/src/components/dropdown/dropdown-trigger-button/readme.md
@@ -7,14 +7,14 @@
 
 ## Properties
 
-| Property    | Attribute    | Description | Type                                                             | Default     |
-| ----------- | ------------ | ----------- | ---------------------------------------------------------------- | ----------- |
-| `color`     | `color`      |             | `"danger" \| "primary" \| "secondary" \| "success" \| "warning"` | `'primary'` |
-| `disabled`  | `disabled`   |             | `boolean`                                                        | `undefined` |
-| `hideArrow` | `hide-arrow` |             | `boolean`                                                        | `false`     |
-| `isOpen`    | `is-open`    |             | `boolean`                                                        | `false`     |
-| `size`      | `size`       |             | `"m" \| "s"`                                                     | `'m'`       |
-| `variant`   | `variant`    |             | `"primary" \| "secondary" \| "tertiary"`                         | `'primary'` |
+| Property    | Attribute    | Description | Type                                 | Default     |
+| ----------- | ------------ | ----------- | ------------------------------------ | ----------- |
+| `disabled`  | `disabled`   |             | `boolean`                            | `undefined` |
+| `hideArrow` | `hide-arrow` |             | `boolean`                            | `false`     |
+| `isOpen`    | `is-open`    |             | `boolean`                            | `false`     |
+| `size`      | `size`       |             | `"m" \| "s"`                         | `'m'`       |
+| `theme`     | `theme`      |             | `"danger" \| "default" \| "inverse"` | `'default'` |
+| `variant`   | `variant`    |             | `"primary"`                          | `undefined` |
 
 
 ## Dependencies
diff --git a/packages/components/src/components/dropdown/dropdown.stories.ts b/packages/components/src/components/dropdown/dropdown.stories.ts
index 4cb04e8393..2a4c552d53 100644
--- a/packages/components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/components/src/components/dropdown/dropdown.stories.ts
@@ -7,9 +7,14 @@ export default {
     label: "Dropdown",
     size: "m",
     disabled: false,
+    search: false,
+    header: false,
+    separator: false,
     variant: "solid",
-    color: "primary",
+    url: "",
+    target: "_self",
     icon: "c-check-16",
+    dropdownMenuItemIcon: false,
     defaultOpen: false,
     noCloseOnOutsideClick: false,
     noCloseOnMenuClick: false,
@@ -50,11 +55,12 @@ export default {
       options: ['primary', 'secondary', 'tertiary'],
       control: { type: 'radio' },
     },
-    color: {
-      description: 'The color scheme of the dropdown button. Accepted values are "primary", "secondary", "success", "danger", "warning"',
-      options: ['primary', 'secondary', 'success', 'danger', 'warning'],
+
+    target: {
+      options: ['_self', '_blank'],
       control: { type: 'radio' },
     },
+
     icon: {
       description: 'The icon to be displayed on the dropdown button',
       options: Object.values(icons).map(i => i['name']),
@@ -87,29 +93,21 @@ export default {
 
 const DefaultTemplate = (args) => {
   const wrapper = document.createElement('div');
-  wrapper.innerHTML = `<ifx-dropdown
-    placement="${args.placement}"
-    ${args.defaultOpen ? 'default-open' : ''}
-    ${args.noCloseOnOutsideClick ? 'no-close-on-outside-click' : ''}
-    ${args.noCloseOnMenuClick ? 'no-close-on-menu-click' : ''}
-    ${args.disabled ? 'disabled' : ''}
-    ${args.noAppendToBody ? 'no-append-to-body' : ''}
-  >
-    <ifx-dropdown-trigger-button
-      variant="${args.variant}"
-      color="${args.color}"
-      icon="${args.icon}"
-      type="${args.type}"
-    >${args.label}</ifx-dropdown-trigger-button>
-    <ifx-dropdown-menu size="${args.size}">
-      <ifx-dropdown-item target="_blank" href="https://www.google.de">Link Item</ifx-dropdown-item>
-      <ifx-dropdown-separator></ifx-dropdown-separator>
-      <ifx-dropdown-item href="javascript:void(0)">Console log from click event</ifx-dropdown-item>
-      <ifx-dropdown-item icon="c-check-16">Item with Icon</ifx-dropdown-item>
-      <ifx-dropdown-separator></ifx-dropdown-separator>
-      <ifx-dropdown-item>Boring Item</ifx-dropdown-item>
-    </ifx-dropdown-menu>
-  </ifx-dropdown>`;
+  wrapper.innerHTML = `<ifx-dropdown placement="bottom-start" no-close-on-menu-click="true">
+  <ifx-dropdown-trigger-button variant="${args.variant}">
+    dropdown
+  </ifx-dropdown-trigger-button>
+  <ifx-dropdown-menu size="${args.size}">
+    ${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ""}
+    ${args.search ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ""}
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+    ${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ""}
+    <ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
+  </ifx-dropdown-menu>
+</ifx-dropdown>`;
 
   const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;
   const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
@@ -139,12 +137,10 @@ const LabelTriggerTemplate = (args) => {
     </ifx-dropdown-trigger>
     Some more text
     <ifx-dropdown-menu>
-      <ifx-dropdown-item target="_blank" href="https://www.google.de">Link Item</ifx-dropdown-item>
-      <ifx-dropdown-separator></ifx-dropdown-separator>
-      <ifx-dropdown-item href="javascript:void(0)">Console log from click event</ifx-dropdown-item>
-      <ifx-dropdown-item icon="c-check-16">Item with Icon</ifx-dropdown-item>
-      <ifx-dropdown-separator></ifx-dropdown-separator>
-      <ifx-dropdown-item>Boring Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
     </ifx-dropdown-menu>
   </ifx-dropdown>`;
 
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 5bd2d52b0f..18b91da920 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -20,6 +20,7 @@
 </head>
 
 <body>
+  
 
 
 </body>