diff --git a/.changeset/nasty-dots-eat.md b/.changeset/nasty-dots-eat.md
new file mode 100644
index 00000000..3b22b0e0
--- /dev/null
+++ b/.changeset/nasty-dots-eat.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+add dark grey dropdown button
diff --git a/packages/components/src/dropdown-button/dropdown-button.stories.tsx b/packages/components/src/dropdown-button/dropdown-button.stories.tsx
index b08e6168..7134f29b 100644
--- a/packages/components/src/dropdown-button/dropdown-button.stories.tsx
+++ b/packages/components/src/dropdown-button/dropdown-button.stories.tsx
@@ -22,18 +22,20 @@ export default {
 
   render: args => (
     <div className="grid gap-4">
-      {(['primary', 'grey', 'outline', 'ghost'] as const).map(variant => (
-        <div key={variant} className="flex items-center gap-4">
-          {(['40', '32', '24'] as const).map(size => (
-            <DropdownButton
-              key={size}
-              {...args}
-              variant={variant}
-              size={size}
-            />
-          ))}
-        </div>
-      ))}
+      {(['primary', 'grey', 'darkGrey', 'outline', 'ghost'] as const).map(
+        variant => (
+          <div key={variant} className="flex items-center gap-4">
+            {(['40', '32', '24'] as const).map(size => (
+              <DropdownButton
+                key={size}
+                {...args}
+                variant={variant}
+                size={size}
+              />
+            ))}
+          </div>
+        ),
+      )}
     </div>
   ),
 } satisfies Meta<typeof DropdownButton>
diff --git a/packages/components/src/dropdown-button/dropdown-button.tsx b/packages/components/src/dropdown-button/dropdown-button.tsx
index 842bbe94..215efb7a 100644
--- a/packages/components/src/dropdown-button/dropdown-button.tsx
+++ b/packages/components/src/dropdown-button/dropdown-button.tsx
@@ -13,7 +13,7 @@ type ButtonProps = Extract<
 type Props = ButtonProps & {
   variant?: Extract<
     ButtonProps['variant'],
-    'primary' | 'grey' | 'outline' | 'ghost'
+    'primary' | 'grey' | 'outline' | 'ghost' | 'darkGrey'
   >
   iconAfter?: never
 }
@@ -53,6 +53,10 @@ const iconStyles = cva({
         'text-neutral-100 dark:text-white-100',
         '[&>path[fill="#E7EAEE"]]:dark:fill-neutral-80',
       ],
+      darkGrey: [
+        'text-neutral-100 dark:text-white-100',
+        '[&>path[fill="#E7EAEE"]]:dark:fill-neutral-80',
+      ],
     },
   },
 })