diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 9ac40d894c..e16b88789c 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -4,16 +4,14 @@
 
 ## Bug Fixes
 
-- We reverted back the way CSS stylesheets were imported internally. It caused a regression bug, svg files would not load when imported from CSS properties (e.g. checkbox, ...). Paths resolution were failing. (not an issue for projects importing CSS via CDN, only for the ones importing styles via the local npm package)
-
 ## Component changes
 
 ### Non breaking UI changes
 
+- add possibility to disable rotation of the dropdown toggle icon on active state
+
 ## Testing
 
-- E2E tests for topbar
+- E2E tests for dropdown component
 
 ## Design System website
-
-- fix a homepage UI bug (section's height)
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap
index c2eb637aea..d11dd40a1e 100644
--- a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap
@@ -292,6 +292,18 @@ exports[`Documentation: Dropdown DeveloperDocumentation renders 1`] = `
   >
     Developer Documentation
   </h2>
+  <h3>
+    Style
+  </h3>
+  <p>
+    Add 
+    <code
+      className="code-tags code-tags-secondary"
+    >
+      .no-rotation
+    </code>
+     CSS class on the dropdown toggle to disable the icon rotation.
+  </p>
   <h3>
     JavaScript methods
   </h3>
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/constants.js b/src/App/ComponentsDocumentation/components/Dropdown/constants.js
index 6483b0415e..639a2c4a66 100644
--- a/src/App/ComponentsDocumentation/components/Dropdown/constants.js
+++ b/src/App/ComponentsDocumentation/components/Dropdown/constants.js
@@ -147,7 +147,7 @@ const dropdownSidebarOptions = () => ({
 			],
 		},
 		{
-			id: "preffered_position",
+			id: "preferred_position",
 			title: "Position",
 			values: [
 				{
@@ -186,6 +186,19 @@ const dropdownSidebarOptions = () => ({
 			],
 		},
 	],
+	checkbox: [
+		{
+			inputs: [
+				{
+					id: "toggle-icon-rotation",
+					name: "Disable toggle icon rotation",
+					value: {
+						noRotation: true,
+					},
+				},
+			],
+		},
+	],
 });
 
 export const overviewDropdown = {
@@ -237,7 +250,7 @@ export const overviewDropdown = {
 						],
 					},
 					{
-						id: "preffered_position",
+						id: "preferred_position",
 						title: "Position",
 						values: [
 							{
@@ -276,6 +289,19 @@ export const overviewDropdown = {
 						],
 					},
 				],
+				checkbox: [
+					{
+						inputs: [
+							{
+								id: "toggle-icon-rotation",
+								name: "Disable toggle icon rotation",
+								value: {
+									noRotation: true,
+								},
+							},
+						],
+					},
+				],
 			},
 			title: "Select",
 			description: (
@@ -485,6 +511,7 @@ export const howToUse = [
 							icon="filter_list"
 							iconAfter={false}
 							largePadding={true}
+							noRotation={true}
 						/>
 						<ButtonComponent
 							type="secondary"
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js
new file mode 100644
index 0000000000..ab7dbe02c6
--- /dev/null
+++ b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js
@@ -0,0 +1,172 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+/**
+ *
+ * @param {import("@playwright/test").Page} page
+ * @returns boolean
+ */
+const checkIfOptionsDisplayed = async (page) =>
+	await (
+		await page.locator(".showcase-panel-advanced").getAttribute("class")
+	).includes("options-active");
+
+const openOptions = async (page) => {
+	const areOptionsDisplayed = await checkIfOptionsDisplayed(page);
+
+	if (!areOptionsDisplayed) {
+		await page.getByRole("button", { name: "Open options menu" }).click();
+	}
+};
+
+const closeOptions = async (page) => {
+	const areOptionsDisplayed = await checkIfOptionsDisplayed(page);
+
+	if (areOptionsDisplayed) {
+		await page.getByRole("button", { name: "Close options menu" }).click();
+	}
+};
+
+test("Dropdown page exist", async ({ page }) => {
+	await page.goto("http://localhost:3000/");
+	await page
+		.getByRole("link", {
+			name: "Components Find all currently available components here",
+		})
+		.click();
+	await expect(page.getByRole("link", { name: "Dropdown" })).toHaveCount(
+		page.viewportSize().width < 991 ? 1 : 2
+	);
+	await page.getByText("expand_moreDropdownarrow_forward").click();
+	await expect(page).toHaveTitle(/Dropdown/);
+	await expect(
+		page.getByRole("heading", { name: "Dropdown", exact: true, level: 1 })
+	).toBeVisible();
+});
+test.describe(`dropdown visual regressions`, () => {
+	/**
+	 * @type string
+	 */
+	let brand;
+	/**
+	 * @type {import("@playwright/test").Locator}
+	 */
+	let previewContainer;
+
+	test.beforeEach(async ({ page }) => {
+		await page.goto("http://localhost:3000/components/dropdown");
+
+		brand = (await page.title()).includes("Swedbank") ? "SwedbankPay" : "PayEx";
+		previewContainer = await page.locator(".component-preview-content > div");
+	});
+
+	test(`visual regresion dropdown - toggle normal`, async ({ page }) => {
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-dropdown-toggle-normal.png`
+		);
+	});
+	test(`visual regresion dropdown - toggle hovered`, async ({ page }) => {
+		await previewContainer.getByRole("button").hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-dropdown-toggle-hovered.png`
+		);
+	});
+	test(`visual regresion dropdown - toggle active`, async ({ page }) => {
+		await previewContainer.getByRole("button").click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-dropdown-toggle-active.png`
+		);
+	});
+	test(`visual regresion dropdown - select dropdown opened`, async ({
+		page,
+	}) => {
+		await previewContainer.getByRole("button").click();
+		await expect(page.locator(".component-preview-content")).toHaveScreenshot(
+			`${brand}-dropdown-select-opened-previewContainer.png`
+		);
+		await expect(
+			previewContainer.getByText(
+				"VISA Mastercard AMEX Maestro card Stripe Vipps Swish"
+			)
+		).toHaveScreenshot(`${brand}-dropdown-select-opened-dropdownContainer.png`);
+	});
+});
+
+test.describe(`dropdown options behave correctly`, () => {
+	/**
+	 * @type string
+	 */
+	let brand;
+	/**
+	 * @type {import("@playwright/test").Locator}
+	 */
+	let previewContainer;
+
+	test.beforeEach(async ({ page }) => {
+		await page.goto("http://localhost:3000/components/dropdown");
+
+		brand = (await page.title()).includes("Swedbank") ? "SwedbankPay" : "PayEx";
+		previewContainer = await page.locator(".component-preview-content > div");
+	});
+
+	test("dropdown options - disable rotation", async ({ page }) => {
+		await expect(previewContainer.getByRole("button")).not.toHaveClass(
+			"no-rotation"
+		);
+		await expect(previewContainer.getByRole("button").locator("i")).toHaveCSS(
+			"transform",
+			"none"
+		);
+		await previewContainer.getByRole("button").click();
+		await expect(previewContainer.getByRole("button").locator("i")).toHaveCSS(
+			"transform",
+			"matrix(-1, 0, 0, -1, 0, 0)"
+		);
+		await previewContainer.getByRole("button").first().click();
+		await expect(previewContainer.getByRole("button").locator("i")).toHaveCSS(
+			"transform",
+			"none"
+		);
+		await openOptions(page);
+		await page
+			.getByLabel("Disable toggle icon rotation")
+			.click({ force: true });
+		await closeOptions(page);
+		await expect(previewContainer.getByRole("button").first()).toHaveClass(
+			/no-rotation/
+		);
+		await previewContainer.getByRole("button").click();
+		await expect(
+			previewContainer.getByRole("button").first().locator("i")
+		).toHaveCSS("transform", "none");
+	});
+	// TODO: test toggle type
+	test("dropdown options - menu width", async ({ page }) => {
+		const buttonWidth = (
+			await previewContainer.getByRole("button").first().boundingBox()
+		).width;
+
+		await previewContainer.getByRole("button").first().click();
+		await expect(
+			(
+				await previewContainer.locator(".dropdown-menu").boundingBox()
+			).width
+		).not.toBe(buttonWidth);
+		await previewContainer.getByRole("button").first().click();
+		await openOptions(page);
+		await page.getByLabel("Full width").click({ force: true });
+		await closeOptions(page);
+		await previewContainer.getByRole("button").first().click();
+		await expect(
+			(
+				await previewContainer.locator(".dropdown-menu").boundingBox()
+			).width
+		).toBe(buttonWidth);
+	});
+	// TODO: test menu position
+	// TODO: test states (error, etc)
+	// TODO: test keyboard navigation
+	// TODO: test accessibility
+	// TODO: test custom content
+	// TODO: test navigation inside modal
+});
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Chrome-darwin.png
new file mode 100644
index 0000000000..ff13e5418e
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Safari-darwin.png
new file mode 100644
index 0000000000..9ae1b5353f
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-chromium-darwin.png
new file mode 100644
index 0000000000..a9d4025693
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-firefox-darwin.png
new file mode 100644
index 0000000000..787b23fb4b
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-webkit-darwin.png
new file mode 100644
index 0000000000..abbf06a318
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png
new file mode 100644
index 0000000000..dc9136aaf7
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png
new file mode 100644
index 0000000000..d1e4492424
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png
new file mode 100644
index 0000000000..619e35bcaa
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png
new file mode 100644
index 0000000000..48fad3f5e6
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png
new file mode 100644
index 0000000000..c66aa36a68
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png
new file mode 100644
index 0000000000..365b4d709f
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png
new file mode 100644
index 0000000000..64d21446e8
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png
new file mode 100644
index 0000000000..3cb370621e
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png
new file mode 100644
index 0000000000..3bc547b689
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png
new file mode 100644
index 0000000000..74142915dd
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png
new file mode 100644
index 0000000000..af9847cac2
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png
new file mode 100644
index 0000000000..377dd4941d
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..e7789b680a
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png
new file mode 100644
index 0000000000..9bf3f88a38
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png
new file mode 100644
index 0000000000..67110fa5ec
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png
new file mode 100644
index 0000000000..47beacbe6d
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png
new file mode 100644
index 0000000000..d35c8072e9
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png
new file mode 100644
index 0000000000..2c1ec88535
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png
new file mode 100644
index 0000000000..f979c625f4
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png
new file mode 100644
index 0000000000..763693f351
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/index.js b/src/App/ComponentsDocumentation/components/Dropdown/index.js
index 5d5fda3473..5f85a025c3 100644
--- a/src/App/ComponentsDocumentation/components/Dropdown/index.js
+++ b/src/App/ComponentsDocumentation/components/Dropdown/index.js
@@ -93,6 +93,11 @@ const ContentGuidelines = () => (
 const DeveloperDocumentation = () => (
 	<section>
 		<h2 id="developer-documentation">Developer Documentation</h2>
+		<h3>Style</h3>
+		<p>
+			Add <CodeTags type="secondary" code=".no-rotation" /> CSS class on the
+			dropdown toggle to disable the icon rotation.
+		</p>
 		<h3>JavaScript methods</h3>
 		<p>
 			Use <CodeTags type="secondary" code="dg.dropdown.init()" /> to initialize
diff --git a/src/App/components/Dropdown/index.js b/src/App/components/Dropdown/index.js
index 2a2a47fd5f..13e96bd4e3 100644
--- a/src/App/components/Dropdown/index.js
+++ b/src/App/components/Dropdown/index.js
@@ -2,7 +2,13 @@ import React, { useEffect, useState, Fragment } from "react";
 import PropTypes from "prop-types";
 import { dropdown } from "@src/scripts/main";
 
-const DropdownSelect = ({ disabled, errorMessage, fullWidth, position }) => {
+const DropdownSelect = ({
+	disabled,
+	errorMessage,
+	fullWidth,
+	position,
+	noRotation = false,
+}) => {
 	const [buttonLabel, setButtonLabel] = useState("Card type");
 	const cardTypes = [
 		"VISA",
@@ -28,7 +34,7 @@ const DropdownSelect = ({ disabled, errorMessage, fullWidth, position }) => {
 				<div className="toggle-menu-container">
 					{"\n"}
 					<button
-						className="dropdown-toggle"
+						className={`dropdown-toggle${noRotation ? " no-rotation" : ""}`}
 						id="dropdownSelect"
 						type="button"
 						aria-label="dropdown button"
@@ -75,6 +81,7 @@ const DropdownToggle = ({
 	label = "Default label",
 	icon = isIconButton ? "more_vert" : "keyboard_arrow_down",
 	iconAfter,
+	noRotation = false,
 }) => {
 	useEffect(() => {
 		dropdown.init();
@@ -85,7 +92,7 @@ const DropdownToggle = ({
 			<button
 				className={`dropdown-toggle${
 					isIconButton ? " dropdown-toggle-icon" : ""
-				}`}
+				}${noRotation ? " no-rotation" : ""}`}
 				type="button"
 				aria-label="dropdown button"
 				disabled={disabled}
@@ -139,6 +146,7 @@ const Dropdown = ({
 	disabled,
 	dropdownSelect,
 	disableDefaultKeyboardNavigation = false,
+	noRotation = false,
 }) => (
 	<>
 		{dropdownSelect ? (
@@ -147,6 +155,7 @@ const Dropdown = ({
 				errorMessage={errorMessage}
 				fullWidth={fullWidth}
 				position={position}
+				noRotation={noRotation}
 			/>
 		) : (
 			<div
@@ -167,6 +176,7 @@ const Dropdown = ({
 						label={label}
 						icon={icon}
 						iconAfter={iconAfter}
+						noRotation={noRotation}
 					/>
 					<div
 						className={`dropdown-menu${fullWidth ? " full-width" : ""}${
@@ -204,6 +214,7 @@ Dropdown.propTypes = {
 	largePadding: PropTypes.bool,
 	dropdownSelect: PropTypes.bool,
 	disableDefaultKeyboardNavigation: PropTypes.bool,
+	noRotation: PropTypes.bool,
 };
 
 export default Dropdown;
diff --git a/src/less/components/dropdown.less b/src/less/components/dropdown.less
index b83b13b1b6..3e0067a8d5 100644
--- a/src/less/components/dropdown.less
+++ b/src/less/components/dropdown.less
@@ -7,40 +7,40 @@
 
 	&.has-error {
 		.dropdown-toggle {
-			border: 2px solid @brand-error;
+			border: 2px solid var(--brand-error);
 
 			&:hover,
 			&:focus,
 			&:active {
-				background-color: @brand-error-light;
-				color: @brand-secondary;
-				border: 2px solid @brand-error;
+				background-color: var(--brand-error-light);
+				color: var(--brand-secondary);
+				border: 2px solid var(--brand-error);
 			}
 
 			&:focus {
-				outline: 1px solid @brand-secondary;
+				outline: 1px solid var(--brand-secondary);
 			}
 
 			i {
-				color: @brand-error;
+				color: var(--brand-error);
 			}
 		}
 	}
 
 	&.disabled {
 		.dropdown-toggle {
-			background-color: @white;
-			color: @secondary-disabled-bg;
-			border-color: @secondary-disabled-bg;
+			background-color: var(--white);
+			color: var(--secondary-disabled-bg);
+			border-color: var(--secondary-disabled-bg);
 			border-width: 1px;
 			box-shadow: none;
 
 			&:hover,
 			&:active {
 				cursor: not-allowed;
-				background-color: @white;
-				color: @secondary-disabled-bg;
-				border-color: @secondary-disabled-bg;
+				background-color: var(--white);
+				color: var(--secondary-disabled-bg);
+				border-color: var(--secondary-disabled-bg);
 				border-width: 1px;
 				box-shadow: none;
 			}
@@ -48,8 +48,8 @@
 	}
 
 	&:focus-within .dropdown-toggle {
-		background-color: @brand-secondary;
-		color: @white;
+		background-color: var(--brand-secondary);
+		color: var(--white);
 	}
 
 	.toggle-menu-container {
@@ -74,7 +74,7 @@
 		overflow: hidden;
 		box-shadow: 1px 2px 10px rgba(0, 0, 0, 15%);
 		border-radius: 4px;
-		background-color: @white;
+		background-color: var(--white);
 		display: none;
 		width: max-content;
 		padding: 5px;
@@ -101,7 +101,7 @@
 			text-decoration: none;
 			white-space: nowrap;
 			align-items: center;
-			color: @brand-secondary;
+			color: var(--brand-secondary);
 			border-radius: 4px;
 			cursor: pointer;
 
@@ -111,12 +111,12 @@
 
 			&:hover {
 				text-decoration: none;
-				background-color: @light-gray;
+				background-color: var(--light-gray);
 			}
 
 			&:focus {
 				text-decoration: none;
-				outline: 2px solid @brand-secondary;
+				outline: 2px solid var(--brand-secondary);
 			}
 		}
 	}
@@ -133,15 +133,15 @@
 		touch-action: manipulation;
 		cursor: pointer;
 		line-height: 1rem;
-		border: 1px solid @brand-secondary;
+		border: 1px solid var(--brand-secondary);
 		white-space: nowrap;
 		height: 60px;
 		border-radius: var(--border-radius);
 		font-size: 1.125rem;
 		padding: 12px 16px;
 		user-select: none;
-		background-color: @white;
-		color: @brand-secondary;
+		background-color: var(--white);
+		color: var(--brand-secondary);
 
 		&:hover {
 			box-shadow: inset 0 0 0 3px var(--btn-secondary-hover);
@@ -159,11 +159,11 @@
 		user-select: none;
 		border-radius: 2px;
 		background-color: transparent;
-		color: @brand-secondary;
+		color: var(--brand-secondary);
 		display: flex;
 		padding: 0;
 		border: 0;
-		outline: 0 solid @brand-secondary;
+		outline: 0 solid var(--brand-secondary);
 
 		&:not(.material-icons) {
 			padding: 0.7rem;
@@ -178,10 +178,10 @@
 
 	&.active {
 		.dropdown-toggle {
-			background: @brand-secondary;
-			color: @white;
+			background: var(--brand-secondary);
+			color: var(--white);
 
-			& i {
+			&:not(.no-rotation) i {
 				transform: rotate(180deg);
 				transition: transform 0.3s ease;
 			}
@@ -210,8 +210,8 @@
 	}
 
 	&.has-error .help-block {
-		color: @brand-error;
-		border-color: @brand-error;
+		color: var(--brand-error);
+		border-color: var(--brand-error);
 	}
 }
 
diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less
index 351449b7bb..1d0b68ef79 100644
--- a/src/less/variables-swedbankpay.less
+++ b/src/less/variables-swedbankpay.less
@@ -176,6 +176,9 @@
 	--brand-secondary-light-2: var(--brown-soft, #a38b80);
 	--brand-secondary-light-3: var(--brown-light, #d4c4bc);
 
+	// Grayscale
+	--light-gray: #f9f8f6;
+
 	// Brown scale colors
 
 	// Text colors
@@ -189,6 +192,10 @@
 
 	// System colors
 	--brand-error: #b5111a;
+	--brand-error-light: #fceee9;
+
+	// Button colors
+	--secondary-disabled-bg: #e3d1c3;
 
 	// Universal utilities
 	--border-radius: 8px;