diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 824a3ae63e..af69016ac4 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -8,6 +8,14 @@
 
   - labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style
 
+- Radio inputs
+
+  - minor non-breaking UI change to the default input radio
+  - minor UI changes to checkmark variant
+    - some non-breaking UI changes (colors, width, ...)
+    - Now the checkmark icon is achieved via span.checkmark-icon instead of an actual icon element loading an svg.
+    - It is now possible to add a subtext inside the checkmark variant (use span.subtext)
+
 - Buttons
   - minor non-breaking UI updates (height for size large, unify hover state, modify active & focus-visible UI, and more)
   - add Danish MitId button style (you can use either `i.bank-id-dk` OR `i.mitid-dk`, both are supported)
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/RadioButton/__snapshots__/index.test.js.snap
index 17d5f63a36..aecc550e67 100644
--- a/src/App/ComponentsDocumentation/components/RadioButton/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/RadioButton/__snapshots__/index.test.js.snap
@@ -152,7 +152,7 @@ exports[`Component: RadioButton DeveloperDocumentation renders 1`] = `
         className="d-flex justify-content-center"
       >
         <div
-          className="radio"
+          className="radio "
         >
           
 
@@ -229,7 +229,7 @@ exports[`Component: RadioButton DeveloperDocumentation renders 1`] = `
                 className="code-view-code"
               >
                 <pre>
-                  &lt;div class="radio"&gt;
+                  &lt;div class="radio "&gt;
                   
 
                       &lt;input type="radio" id="radio-example-10" name="radio-example" disabled checked&gt;
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/constants.js b/src/App/ComponentsDocumentation/components/RadioButton/constants.js
index 737fbbf0c0..064534c18b 100644
--- a/src/App/ComponentsDocumentation/components/RadioButton/constants.js
+++ b/src/App/ComponentsDocumentation/components/RadioButton/constants.js
@@ -9,7 +9,7 @@ const options = [
 	},
 	{
 		id: "radio-example-2",
-		label: "Label",
+		label: "Longer label",
 	},
 ];
 
@@ -18,7 +18,7 @@ export const radiobuttonShowCase = {
 	tabsId: "radioShowcaseTabs",
 	elements: [
 		{
-			tab: "Primary",
+			tab: "Default",
 			component: (
 				<Radio
 					groupTitle="Group legend"
@@ -98,6 +98,14 @@ export const radiobuttonShowCase = {
 									hintTextId: "hint-text-radio-example",
 								},
 							},
+							{
+								id: "label_subtext",
+								name: "Label subtext",
+								value: {
+									hasLabelSubtext: true,
+									size: "large",
+								},
+							},
 						],
 					},
 				],
@@ -126,6 +134,24 @@ export const radiobuttonShowCase = {
 							},
 						],
 					},
+					{
+						id: "size_radio",
+						title: "Size modifiers",
+						values: [
+							{
+								name: "Small",
+								value: {
+									size: "small",
+								},
+							},
+							{
+								name: "Large",
+								value: {
+									size: "large",
+								},
+							},
+						],
+					},
 				],
 			},
 			title: "Checkmark buttons",
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js
new file mode 100644
index 0000000000..5941f0e832
--- /dev/null
+++ b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js
@@ -0,0 +1,141 @@
+// @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("Radio buttons 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: "Radio button" })).toHaveCount(
+		page.viewportSize().width < 991 ? 1 : 2,
+	);
+	await page
+		.getByLabel("components overview")
+		.getByRole("link", { name: "Radio button" })
+		.click();
+	await expect(page).toHaveTitle(/Radio button/);
+	await expect(
+		page.getByRole("heading", { name: "Radio button", exact: true, level: 1 }),
+	).toBeVisible();
+});
+test.describe(`radio button visual regressions`, () => {
+	/**
+	 * @type string
+	 */
+	let brand;
+	/**
+	 * @type {import("@playwright/test").Locator}
+	 */
+	let previewContainer;
+
+	test.beforeEach(async ({ page }) => {
+		await page.goto("http://localhost:3000/components/radio-button");
+
+		brand = (await page.title()).includes("Swedbank") ? "SwedbankPay" : "PayEx";
+		previewContainer = await page.locator(".component-preview-content > form");
+	});
+
+	// radio input default
+	test(`visual regresion radio input default`, async ({ page }) => {
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-default.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-default-hovered.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-default-checked-changed.png`,
+		);
+	});
+	// radio input - checkmark - small
+	test(`visual regresion radio input checkmark small`, async ({ page }) => {
+		page.getByRole("link", { name: "Checkmark" }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-small.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-small-hovered.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-small-checked-changed.png`,
+		);
+	});
+	// radio input - checkmark - large
+	test(`visual regresion radio input checkmark large`, async ({ page }) => {
+		page.getByRole("link", { name: "Checkmark" }).click();
+
+		await openOptions(page);
+		await page.getByLabel("Large").click({ force: true });
+		await closeOptions(page);
+
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-large.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-large-hovered.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-large-checked-changed.png`,
+		);
+	});
+	// radio input - checkmark - subtext
+	test(`visual regresion radio input checkmark with subtext`, async ({
+		page,
+	}) => {
+		page.getByRole("link", { name: "Checkmark" }).click();
+
+		await openOptions(page);
+		await page.getByLabel("Label subtext").click({ force: true });
+		await closeOptions(page);
+
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-subtext.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).hover();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-subtext-hovered.png`,
+		);
+		await previewContainer.getByText("Longer label", { exact: true }).click();
+		await expect(previewContainer).toHaveScreenshot(
+			`${brand}-radio-input-checkmark-subtext-checked-changed.png`,
+		);
+	});
+});
+
+test.describe(`radio input options behave correctly`, () => {
+	// TODO:
+});
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-checked-changed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-checked-changed-chromium-darwin.png
new file mode 100644
index 0000000000..a250047331
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-checked-changed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-chromium-darwin.png
new file mode 100644
index 0000000000..a9f0296de2
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..e6cde83114
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-large-hovered-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-checked-changed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-checked-changed-chromium-darwin.png
new file mode 100644
index 0000000000..3047a94dff
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-checked-changed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-chromium-darwin.png
new file mode 100644
index 0000000000..c04f82dad9
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..24ec6f5676
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-small-hovered-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-checked-changed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-checked-changed-chromium-darwin.png
new file mode 100644
index 0000000000..abf6d42745
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-checked-changed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-chromium-darwin.png
new file mode 100644
index 0000000000..44bf25d053
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..0a0bf7daeb
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-checkmark-subtext-hovered-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-checked-changed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-checked-changed-chromium-darwin.png
new file mode 100644
index 0000000000..c765b31fc9
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-checked-changed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-chromium-darwin.png
new file mode 100644
index 0000000000..d9cd8ca952
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-hovered-chromium-darwin.png
new file mode 100644
index 0000000000..edbc76f768
Binary files /dev/null and b/src/App/ComponentsDocumentation/components/RadioButton/radiobutton.e2e.spec.js-snapshots/SwedbankPay-radio-input-default-hovered-chromium-darwin.png differ
diff --git a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
index add8c9a74b..f13b09c5d2 100644
--- a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
+++ b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
@@ -1095,7 +1095,7 @@ exports[`Forms: index renders 1`] = `
                 Don't
               </span>
               <div
-                className="radio"
+                className="radio "
               >
                 
 
@@ -1151,7 +1151,7 @@ exports[`Forms: index renders 1`] = `
                 </div>
               </div>
               <div
-                className="radio"
+                className="radio "
               >
                 
 
diff --git a/src/App/components/FormComponents/Radio.js b/src/App/components/FormComponents/Radio.js
index a80a9319a3..4376d4ab0f 100644
--- a/src/App/components/FormComponents/Radio.js
+++ b/src/App/components/FormComponents/Radio.js
@@ -15,6 +15,8 @@ const Radio = ({
 	style,
 	helpBlock,
 	errorMessage,
+	size = "small",
+	hasLabelSubtext = false,
 }) => {
 	const attrs = {
 		type: "radio",
@@ -42,18 +44,29 @@ const Radio = ({
 						{style === "checkmark" ? (
 							<div className="radio-row">
 								{options.map(({ label, id, checked }, i) => (
-									<div className={`radio${style ? ` ${style}` : ""}`} key={i}>
+									<div
+										className={`radio${style ? ` ${style}` : ""} ${size === "large" ? "large" : ""}`}
+										key={i}
+									>
 										{"\n"}
 										<input {...attrs} id={id} defaultChecked={checked} />
 										{"\n"}
 										<label htmlFor={id}>
-											{style === "checkmark" && (
-												<i
-													className="swepay-icon-check-circle-filled-customizable bg-blend-exclusion small"
-													aria-hidden="true"
-												></i>
-											)}{" "}
-											{label}
+											{!hasLabelSubtext ? (
+												<>
+													{"\n"}
+													{label}
+												</>
+											) : (
+												<>
+													<span>{label}</span>
+													{"\n"}
+													<span className="subtext">100 kr extra/mån</span>
+												</>
+											)}
+											{"\n"}
+											<span className="checkmark-icon"></span>
+											{"\n"}
 										</label>
 										{"\n"}
 									</div>
@@ -97,7 +110,9 @@ const Radio = ({
 				</form>
 			) : (
 				<>
-					<div className={`radio${style ? ` ${style}` : ""}`}>
+					<div
+						className={`radio${style ? ` ${style}` : ""} ${size === "large" ? "large" : ""}`}
+					>
 						{"\n"}
 						<input {...attrs} />
 						{"\n"}
@@ -130,6 +145,8 @@ Radio.propTypes = {
 	className: PropTypes.string,
 	style: PropTypes.string,
 	helpBlock: PropTypes.string,
+	size: PropTypes.oneOf(["small", "large"]),
+	hasLabelSubtext: PropTypes.bool,
 };
 
 export default Radio;
diff --git a/src/App/components/FormComponents/__snapshots__/Radio.test.js.snap b/src/App/components/FormComponents/__snapshots__/Radio.test.js.snap
index 619f7e818c..d37f58f2f6 100644
--- a/src/App/components/FormComponents/__snapshots__/Radio.test.js.snap
+++ b/src/App/components/FormComponents/__snapshots__/Radio.test.js.snap
@@ -121,7 +121,7 @@ exports[`Component: Radio - renders checkbox group with groupTitle 1`] = `
 
 exports[`Component: Radio - renders checked 1`] = `
 <div
-  className="radio"
+  className="radio "
 >
   
 
@@ -140,7 +140,7 @@ exports[`Component: Radio - renders checked 1`] = `
 
 exports[`Component: Radio - renders disabled 1`] = `
 <div
-  className="radio"
+  className="radio "
 >
   
 
@@ -217,7 +217,7 @@ exports[`Component: Radio - renders radio group 1`] = `
 
 exports[`Component: Radio - renders with id and label 1`] = `
 <div
-  className="radio"
+  className="radio "
 >
   
 
@@ -244,7 +244,7 @@ exports[`Component: Radio - renders with id and label 1`] = `
 
 exports[`Component: Radio - renders with name 1`] = `
 <div
-  className="radio"
+  className="radio "
 >
   
 
@@ -263,7 +263,7 @@ exports[`Component: Radio - renders with name 1`] = `
 
 exports[`Component: Radio - renders without label 1`] = `
 <div
-  className="radio"
+  className="radio "
 >
   
 
diff --git a/src/less/components/radio.less b/src/less/components/radio.less
index 687f39eef7..a4d059cf21 100644
--- a/src/less/components/radio.less
+++ b/src/less/components/radio.less
@@ -1,13 +1,15 @@
 @import "./form.less";
 @import "../global.less";
 
-@radio-height: 1.375rem;
-@radio-width: @radio-height;
-
-@checkmark-width: 7.5rem;
-@checkmark-heigth: 2rem;
+// TODO: next major release: remove support for `.radio.checkmark label i` and replace with `.radio.checkmark label .checkmark-icon` officially
 
 .radio {
+	--radio-height: 1.375rem;
+	--radio-width: var(--radio-height);
+
+	--checkmark-width: 7.5rem;
+	--checkmark-heigth: 2rem;
+
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -22,8 +24,8 @@
 		position: relative;
 		align-items: center;
 		margin: 0;
-		margin-left: 1.75rem;
-		padding-left: (1rem / 5);
+		margin-inline-start: 1.75rem;
+		padding-inline-start: calc(1rem / 5);
 		min-height: 1.5rem;
 	}
 
@@ -36,10 +38,10 @@
 			position: absolute;
 			visibility: visible;
 			left: -1.5rem;
-			height: @radio-height;
-			width: @radio-width;
+			height: var(--radio-height);
+			width: var(--radio-width);
 			background-color: var(--white);
-			border: 2px solid @brand-secondary-light-2;
+			border: 2px solid var(--brand-secondary-light-2);
 			cursor: pointer;
 			border-radius: 50%;
 		}
@@ -48,20 +50,19 @@
 			background-color: var(--white);
 			background-repeat: no-repeat;
 			background-image: url("../../icons/shapes/circle.svg");
-			border-color: @brand-secondary;
+			border-color: var(--brand-secondary);
 		}
 
-		&:focus + label:before,
-		&:hover + label:before {
-			box-shadow: 0 0 0 0.375rem @brand-secondary-light-3;
-			border-color: @brand-secondary;
+		&:is(:hover, :focus-visible) + label:before {
+			box-shadow: 0 0 0 0.375rem var(--brand-primary-light);
+			border-color: var(--brand-secondary);
 			outline: 4px solid transparent;
 		}
 
 		&[disabled] {
 			+ label:before {
-				background-color: @input-bg-disabled;
-				border-color: @input-checked-bg-disabled;
+				background-color: var(--input-bg-disabled);
+				border-color: var(--input-checked-bg-disabled);
 				box-shadow: none;
 			}
 
@@ -79,14 +80,16 @@
 	}
 }
 
-.checkmark {
+.radio.checkmark {
 	border: 2px solid transparent;
 	pointer-events: none;
-	width: @checkmark-width;
-	height: @checkmark-heigth;
+	width: auto;
+	min-width: fit-content;
+	height: auto;
+	margin: 0;
 
-	&:not(:last-child) {
-		margin-right: 8px;
+	&.large {
+		height: 3.5rem;
 	}
 
 	&:active {
@@ -97,11 +100,6 @@
 		background-color: transparent;
 	}
 
-	&:disabled {
-		border: 2px solid transparent;
-		margin: auto;
-	}
-
 	* {
 		pointer-events: all;
 	}
@@ -109,70 +107,138 @@
 	label {
 		outline: 1px solid var(--black);
 		border-radius: var(--border-radius, 8px);
-		margin: auto;
+		padding: 7px 1rem;
 		height: 100%;
 		width: 100%;
-		gap: 5px;
-		padding-left: 1.25rem;
-	}
+		margin: 0;
+		gap: 1rem;
+		justify-content: space-between;
 
-	label:before {
-		display: none;
-	}
+		&:before {
+			display: none;
+		}
 
-	label
-		:is(
-			i[class^="at-"],
-			i[class*=" at-"],
-			i[class^="swepay-icon-"],
-			i[class*=" swepay-icon-"],
-			.material-icons
-		) {
-		color: var(--white);
-		margin-left: -10px;
-	}
+		&
+			:is(
+				i[class^="at-"],
+				i[class*=" at-"],
+				i[class^="swepay-icon-"],
+				i[class*=" swepay-icon-"],
+				.material-icons
+			) {
+			color: inherit;
+			margin-inline-end: -10px;
+		}
 
-	input[type="radio"]:hover:not(:disabled) + label {
-		background-color: @light-gray;
-		color: @medium-brown;
-		border-radius: var(--border-radius, 8px);
-		border: 0 solid transparent;
-		outline: 1px solid @medium-brown;
+		.checkmark-icon,
+		& > i {
+			order: 2;
+			width: 24px;
+			height: 24px;
+			background-color: var(--brown-solid);
+			border-radius: 50%;
+			position: relative;
+			aspect-ratio: 1;
+
+			// display a checkmark icon in pure CSS
+			&::before {
+				content: "";
+				position: absolute;
+				width: 0.42rem;
+				height: 0.7rem;
+				border: solid var(--white);
+				border-width: 0 2px 2px 0;
+				transform: rotate(45deg) translate(145%, -25%);
+			}
+		}
 	}
 
-	input[type="radio"]:checked + label {
-		background-color: @brand-secondary;
-		border-radius: var(--border-radius, 8px);
-		color: var(--white);
-		padding-left: 1.875rem;
+	// checked state
+	input[type="radio"]:checked {
+		& + label {
+			border-radius: var(--border-radius, 8px);
+			outline-width: 3px;
+			outline-offset: -2px;
+
+			// we're migrating from i to a pure CSS span.checkmark-icon. Keep <i > for now until next major release i {
+			i {
+				color: #000000;
+			}
+		}
+
+		&:hover:not(:disabled) + label {
+			background-color: var(--brown-medium);
+			color: var(--white);
+
+			.checkmark-icon,
+			> i {
+				background-color: var(--white);
+
+				&::before {
+					border-color: var(--brown-medium);
+				}
+			}
+		}
 	}
 
-	input[type="radio"]:checked:hover + label {
-		background-color: @medium-brown;
-		color: var(--white);
+	// not checked state
+	input[type="radio"]:not(:checked) + label {
+		.checkmark-icon,
+		i {
+			visibility: hidden;
+		}
 	}
 
-	input[type="radio"]:disabled + label {
-		color: @light-brown;
-		outline: 1px solid @light-brown;
+	// disabled state
+	input[type="radio"]:disabled {
+		border: 2px solid transparent;
+		margin: auto;
+
+		& + label {
+			color: var(--brown-light);
+			outline: 1px solid var(--brown-light);
+		}
+
+		&:checked + label {
+			outline: 0;
+			background-color: var(--gray);
+			color: var(--brown-light);
+
+			.checkmark-icon,
+			& > i {
+				background-color: var(--brown-light);
+
+				&::before {
+					border-color: var(--gray);
+				}
+			}
+
+			// we're migrating from i to a pure CSS span.checkmark-icon. Keep <i> for now until next major release
+			i {
+				visibility: hidden;
+			}
+		}
 	}
 
-	input[type="radio"]:checked:disabled + label {
-		background-color: @light-brown;
+	// not disabled state
+	input[type="radio"]:not(:disabled):hover + label {
+		background-color: var(--brown-medium);
 		color: var(--white);
-		outline: 0;
-		padding-left: 1.25rem;
+		border-radius: var(--border-radius, 8px);
+		border: 0 solid transparent;
+		outline: 1px solid var(--brown-medium);
+		box-shadow: none !important;
 
+		// we're migrating from i to a pure CSS span.checkmark-icon. Keep <i> for now until next major release
 		i {
-			visibility: hidden;
+			color: #f0f0f0;
 		}
 	}
 
 	input[type="radio"] {
-		&:focus + label,
-		&:hover:not(:disabled) + label {
-			box-shadow: 0 0 0 0.3rem @brand-secondary-light-3;
-			border-color: @brand-secondary;
+		&:focus-visible + label {
+			box-shadow: 0 0 0 0.3rem var(--brand-secondary-light-3);
+			border-color: var(--brand-secondary);
 		}
 
 		&:not(:checked) + label {
@@ -181,12 +247,66 @@
 			}
 		}
 	}
+
+	&:not(.large) label {
+		gap: calc(1rem - (24px - 16px));
+
+		& .checkmark-icon,
+		& > i {
+			transform: scale(0.67);
+		}
+	}
+
+	&:has(.subtext) {
+		width: 248px;
+		height: auto;
+
+		input[type="radio"] + label {
+			display: grid;
+			width: 100%;
+			height: fit-content;
+			padding: 1rem;
+			grid-template-areas:
+				"label-title checkmark"
+				"label-subtext checkmark";
+			grid-template-columns: 1fr auto;
+			gap: 0 1rem;
+			grid-template-rows: auto auto;
+
+			span {
+				margin: 0;
+			}
+
+			span:not(.subtext, .checkmark-icon) {
+				grid-area: label-title;
+				font-weight: var(--font-weight-bold);
+			}
+
+			.subtext {
+				grid-area: label-subtext;
+				font-weight: var(--font-weight-normal);
+			}
+
+			.checkmark-icon {
+				grid-area: checkmark-icon;
+				grid-row: 1 / -1;
+				transform: none;
+			}
+		}
+
+		input[type="radio"]:not(:checked) + label :is(.checkmark-icon, i) {
+			visibility: hidden;
+		}
+	}
 }
 
 fieldset {
 	&.radio-group {
 		.radio-row {
-			display: inline-flex;
+			display: inline-grid;
+			gap: 1rem;
+			grid-auto-flow: column;
+			grid-auto-columns: 1fr;
 		}
 
 		legend {
@@ -202,7 +322,6 @@ fieldset {
 
 		span {
 			font-weight: normal;
-			margin-left: 0.2rem;
 		}
 	}
 
@@ -226,7 +345,7 @@ fieldset {
 		label,
 		legend,
 		.hint-text {
-			color: @light-brown;
+			color: var(--brown-light);
 		}
 	}
 }
diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
index ba4aa14f43..5a8ee55174 100644
--- a/src/less/variables-payex.less
+++ b/src/less/variables-payex.less
@@ -296,7 +296,8 @@ body {
 	--blue-syntax-highlight: #43d0dd;
 	--yellow-syntax-highlight: #fff3d5;
 	--dark-brown: var(--brand-secondary, #3c3c3c);
-	--light-brown: var(--brand-secondary-light-3, #c8c8c8);
+	--brown-light: var(--brand-secondary-light-3, #c8c8c8);
+	--light-brown: var(--brown-light);
 	--help-block-text: #707070;
 	--tab-link: var(--help-block-text, #707070);
 	--radiobutton-border: var(--help-block-text, #707070);