diff --git a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown-flow.png b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown-flow.png
index 470334df..e03a8225 100755
Binary files a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown-flow.png and b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown-flow.png differ
diff --git a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown.png b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown.png
index 470334df..e03a8225 100755
Binary files a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown.png and b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown.png differ
diff --git a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-md-dropdown.png b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-md-dropdown.png
index 470334df..d81ef2b7 100755
Binary files a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-md-dropdown.png and b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-md-dropdown.png differ
diff --git a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-option-dropdown-flow.png b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-option-dropdown-flow.png
index 470334df..e03a8225 100755
Binary files a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-option-dropdown-flow.png and b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-option-dropdown-flow.png differ
diff --git a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-xs-dropdown.png b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-xs-dropdown.png
index 893c0dd7..2c64b5a5 100755
Binary files a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-xs-dropdown.png and b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-xs-dropdown.png differ
diff --git a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-fire-function-dropdown-flow.png b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-fire-function-dropdown-flow.png
index 470334df..e03a8225 100755
Binary files a/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-fire-function-dropdown-flow.png and b/cypress-visual-screenshots/baseline/Dropdown.cy.tsx-fire-function-dropdown-flow.png differ
diff --git a/cypress/component/integration/Dropdown.cy.tsx b/cypress/component/integration/Dropdown.cy.tsx
index 4ae158a2..02a4c7ce 100644
--- a/cypress/component/integration/Dropdown.cy.tsx
+++ b/cypress/component/integration/Dropdown.cy.tsx
@@ -1,61 +1,58 @@
 import '../../../src/global.css';
-import React from 'react';
 import { Dropdown, MassaLogo, MassaToken } from '../../../src/components';
 import { compareSnapshot } from '../../compareSnapshot';
 
 describe('Component | Integration | Dropdown', function () {
   describe('Dropdown', () => {
-    describe('default dropdown', () => {
-      beforeEach(() => {
-        cy.mount(
+    beforeEach(() => {
+      cy.mount(
+        <div className="theme-dark">
           <Dropdown
             options={[
               {
                 icon: (
-                  <MassaToken size={32} className="bg-c-default rounded-full" />
+                  <MassaToken
+                    data-testid="dropdown-option-1"
+                    size={32}
+                    className="bg-c-default rounded-full"
+                  />
                 ),
                 item: 'account 1 name',
                 onClick: () => console.log('option 1'),
               },
               {
-                icon: <MassaLogo size={32} />,
+                icon: <MassaLogo data-testid="dropdown-option-2" size={32} />,
                 item: 'account 2 name with a biiiiig content',
+                onClick: () => console.log('option 2'),
               },
-              { icon: <MassaLogo size={32} />, item: 'account 3 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 4 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 5 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 6 name' },
-            ]}
-          />,
-        );
-      });
-      it('should render', () => {
-        cy.get('[data-testid="dropdown"]').should('exist');
-      });
-
-      it('should match snapshot', () => {
-        cy.mount(
-          <Dropdown
-            options={[
               {
-                icon: (
-                  <MassaToken size={32} className="bg-c-default rounded-full" />
-                ),
-                item: 'account 1 name',
-                onClick: () => console.log('option 1'),
+                icon: <MassaLogo data-testid="dropdown-option-3" size={32} />,
+                item: 'account 3 name',
               },
               {
-                icon: <MassaLogo size={32} />,
-                item: 'account 2 name with a biiiiig content',
+                icon: <MassaLogo data-testid="dropdown-option-4" size={32} />,
+                item: 'account 4 name',
+              },
+              {
+                icon: <MassaLogo data-testid="dropdown-option-5" size={32} />,
+                item: 'account 5 name',
+                onClick: () => console.log('option 5'),
+              },
+              {
+                icon: <MassaLogo data-testid="dropdown-option-6" size={32} />,
+                item: 'account 6 name',
               },
-              { icon: <MassaLogo size={32} />, item: 'account 3 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 4 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 5 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 6 name' },
             ]}
-          />,
-        );
+          />
+        </div>,
+      );
+    });
+    describe('default dropdown', () => {
+      it('should render', () => {
+        cy.get('[data-testid="dropdown"]').should('exist');
+      });
 
+      it('should match snapshot', () => {
         compareSnapshot(cy, 'default-dropdown');
       });
     });
@@ -63,26 +60,31 @@ describe('Component | Integration | Dropdown', function () {
     describe('default xs dropdown', () => {
       beforeEach(() => {
         cy.mount(
-          <Dropdown
-            size={'xs'}
-            options={[
-              {
-                icon: (
-                  <MassaToken size={32} className="bg-c-default rounded-full" />
-                ),
-                item: 'account 1 name',
-                onClick: () => console.log('option 1'),
-              },
-              {
-                icon: <MassaLogo size={32} />,
-                item: 'account 2 name with a biiiiig content',
-              },
-              { icon: <MassaLogo size={32} />, item: 'account 3 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 4 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 5 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 6 name' },
-            ]}
-          />,
+          <div className="theme-dark">
+            <Dropdown
+              size={'xs'}
+              options={[
+                {
+                  icon: (
+                    <MassaToken
+                      size={32}
+                      className="bg-c-default rounded-full"
+                    />
+                  ),
+                  item: 'account 1 name',
+                  onClick: () => console.log('option 1'),
+                },
+                {
+                  icon: <MassaLogo size={32} />,
+                  item: 'account 2 name with a biiiiig content',
+                },
+                { icon: <MassaLogo size={32} />, item: 'account 3 name' },
+                { icon: <MassaLogo size={32} />, item: 'account 4 name' },
+                { icon: <MassaLogo size={32} />, item: 'account 5 name' },
+                { icon: <MassaLogo size={32} />, item: 'account 6 name' },
+              ]}
+            />
+          </div>,
         );
       });
       it('should render', () => {
@@ -97,26 +99,32 @@ describe('Component | Integration | Dropdown', function () {
     describe('default md dropdown', () => {
       beforeEach(() => {
         cy.mount(
-          <Dropdown
-            size={'md'}
-            options={[
-              {
-                icon: (
-                  <MassaToken size={32} className="bg-c-default rounded-full" />
-                ),
-                item: 'account 1 name',
-                onClick: () => console.log('option 1'),
-              },
-              {
-                icon: <MassaLogo size={32} />,
-                item: 'account 2 name with a biiiiig content',
-              },
-              { icon: <MassaLogo size={32} />, item: 'account 3 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 4 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 5 name' },
-              { icon: <MassaLogo size={32} />, item: 'account 6 name' },
-            ]}
-          />,
+          <div className="theme-dark">
+            <Dropdown
+              size={'md'}
+              options={[
+                {
+                  icon: (
+                    <MassaToken
+                      size={32}
+                      className="bg-c-default rounded-full"
+                    />
+                  ),
+                  item: 'account 1 name',
+                  onClick: () => console.log('option 1'),
+                },
+                {
+                  icon: <MassaLogo size={32} />,
+                  item: 'account 2 name with a biiiiig content',
+                },
+                { icon: <MassaLogo size={32} />, item: 'account 3 name' },
+                { icon: <MassaLogo size={32} />, item: 'account 4 name' },
+                { icon: <MassaLogo size={32} />, item: 'account 5 name' },
+                { icon: <MassaLogo size={32} />, item: 'account 6 name' },
+              ]}
+            />
+            ,
+          </div>,
         );
       });
 
@@ -130,49 +138,10 @@ describe('Component | Integration | Dropdown', function () {
     });
 
     describe('default dropdown flow', () => {
-      beforeEach(() => {
-        cy.mount(
-          <Dropdown
-            options={[
-              {
-                icon: (
-                  <MassaToken
-                    data-testid="dropdown-option-1"
-                    size={32}
-                    className="bg-c-default rounded-full"
-                  />
-                ),
-                item: 'account 1 name',
-                onClick: () => console.log('option 1'),
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-2" size={32} />,
-                item: 'account 2 name with a biiiiig content',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-3" size={32} />,
-                item: 'account 3 name',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-4" size={32} />,
-                item: 'account 4 name',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-5" size={32} />,
-                item: 'account 5 name',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-6" size={32} />,
-                item: 'account 6 name',
-              },
-            ]}
-          />,
-        );
-      });
-
       it('should render', () => {
         cy.get('[data-testid="dropdown"]').should('exist');
-        it('should open and close when clicked', () => {
+
+        it('should toggle when clicked', () => {
           cy.get('[data-testid="dropdown"]').should('exist');
 
           for (let i = 1; i <= 6; i++) {
@@ -211,46 +180,6 @@ describe('Component | Integration | Dropdown', function () {
     });
 
     describe('select option dropdown flow', () => {
-      beforeEach(() => {
-        cy.mount(
-          <Dropdown
-            options={[
-              {
-                icon: (
-                  <MassaToken
-                    data-testid="dropdown-option-1"
-                    size={32}
-                    className="bg-c-default rounded-full"
-                  />
-                ),
-                item: 'account 1 name',
-                onClick: () => console.log('option 1'),
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-2" size={32} />,
-                item: 'account 2 name with a biiiiig content',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-3" size={32} />,
-                item: 'account 3 name',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-4" size={32} />,
-                item: 'account 4 name',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-5" size={32} />,
-                item: 'account 5 name',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-6" size={32} />,
-                item: 'account 6 name',
-              },
-            ]}
-          />,
-        );
-      });
-
       it('should render', () => {
         cy.get('[data-testid="dropdown"]').should('exist');
         it('should open and close when clicked', () => {
@@ -269,11 +198,6 @@ describe('Component | Integration | Dropdown', function () {
         });
         // open state
         cy.get('[data-testid="dropdown-button"]').should('exist').click();
-
-        for (let i = 1; i <= 6; i++) {
-          cy.get(`[data-testid="dropdown-option-${i}"]`).should('be.visible');
-        }
-
         cy.get(`[data-testid="dropdown-option-4"]`).click();
 
         // close state
@@ -302,56 +226,10 @@ describe('Component | Integration | Dropdown', function () {
     });
 
     describe('fire function dropdown flow', () => {
-      beforeEach(() => {
-        cy.mount(
-          <Dropdown
-            options={[
-              {
-                icon: (
-                  <MassaToken
-                    data-testid="dropdown-option-1"
-                    size={32}
-                    className="bg-c-default rounded-full"
-                  />
-                ),
-                item: 'account 1 name',
-                onClick: () => console.log('option 1'),
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-2" size={32} />,
-                item: 'account 2 name with a biiiiig content',
-                onClick: () => console.log('option 2'),
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-3" size={32} />,
-                item: 'account 3 name',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-4" size={32} />,
-                item: 'account 4 name',
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-5" size={32} />,
-                item: 'account 5 name',
-                onClick: () => console.log('option 5'),
-              },
-              {
-                icon: <MassaLogo data-testid="dropdown-option-6" size={32} />,
-                item: 'account 6 name',
-              },
-            ]}
-          />,
-        );
-      });
-
       it('should render', () => {
         cy.get('[data-testid="dropdown"]').should('exist');
         cy.get('[data-testid="dropdown"]').should('exist');
 
-        for (let i = 1; i <= 6; i++) {
-          cy.get(`[data-testid="dropdown-option-${i}"]`).should('exist');
-        }
-
         cy.get('[data-testid="dropdown-option-1"]').should('be.visible');
         for (let i = 2; i <= 6; i++) {
           cy.get(`[data-testid="dropdown-option-${i}"]`).should(
@@ -379,10 +257,6 @@ describe('Component | Integration | Dropdown', function () {
         // open state
         cy.get('[data-testid="dropdown-button"]').should('exist').click();
 
-        for (let i = 1; i <= 6; i++) {
-          cy.get(`[data-testid="dropdown-option-${i}"]`).should('be.visible');
-        }
-
         cy.get(`[data-testid="dropdown-option-5"]`).click();
 
         cy.get('@consoleLog').should('be.calledWith', 'option 5');