diff --git a/src/icons/payex/circlepx.svg b/src/icons/payex/circlepx.svg
new file mode 100644
index 0000000000..10316e927e
--- /dev/null
+++ b/src/icons/payex/circlepx.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z" fill="#3C3C3C"/>
+</svg>
diff --git a/src/icons/payex/circlepx_disabled.svg b/src/icons/payex/circlepx_disabled.svg
new file mode 100644
index 0000000000..1f101129fb
--- /dev/null
+++ b/src/icons/payex/circlepx_disabled.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z" fill="#C8C8C8"/>
+</svg>
diff --git a/src/less/components/payex/radio.less b/src/less/components/payex/radio.less
index b90cf5a537..b90b70ff88 100644
--- a/src/less/components/payex/radio.less
+++ b/src/less/components/payex/radio.less
@@ -6,6 +6,7 @@
 
 	input[type="radio"] {
 		+ label {
+			
 			&:before {
 				border: 2px solid @radiobutton-border;
 			}
@@ -14,55 +15,110 @@
 		&:is(:hover, :focus-visible) + label:before {
 			box-shadow: 0 0 0 0.375rem var(--gray);
 		}
+
+		&:checked + label:before {
+			background-position: center;
+			background-image: url("../../../icons/payex/circlepx.svg");
+		}
 	}
 }
 
+.radio input[type=radio][disabled]:checked+label:before {
+	background-image: url("../../../icons/payex/circlepx_disabled.svg");
+}
+
 .checkmark {
+	
     label {
-
         border: 1px solid var(--gray);
-        outline: none !important; 
+        outline: none !important;
+		color: var(--light-black);
 
 		.radio.checkmark label .checkmark-icon {
 			background-color: var(--brand-secondary);
 		}
 
         &:hover {
-            background-color: var(--gray) !important;
-            color: var(--white);
-            border: 1px solid var(--gray) !important; 
-            outline: none !important; 
-	
+			border: 1px solid var(--gray) !important;
+			background-color: var(--light-gray) !important;
+			color: var(--brand-secondary) !important;
+
 			.checkmark-icon,
 			> i {
-				background-color: var(--white);
+				background-color: var(--brand-secondary) !important;
 			}
 			
 			.checkmark-icon::before, .checkmark label:hover > i::before {
-				border-color: var(--gray) !important;
-			}
-        }
+				border-color: var(--light-gray) !important;
+			} 
 
-        &:active {
-            border: 3px solid var(--brand-secondary) !important; 
-            outline: none; 
+			.checkmark-icon::before,
+            .checkmark label:hover > i::before {
+                border-color: var(--light-gray) !important;
+            }
         }
+    }
+}
 
-        &:disabled {
-            color: var(--white) !important;
-            border: 1px solid var(--gray) !important; 
-            background-color: var(--light-gray) !important; 
-            outline: none; 
-        }
+.radio.checkmark input[type="radio"]:checked + label:hover {
+    border: 1px solid var(--brand-secondary);
+    outline: none !important;
+}
 
-		&:focus {
-			border: 1px solid var(--gray);
-			background-color: var(--light-gray);
+.radio.checkmark input[type="radio"]:checked + label {
+    border: 1px solid var(--brand-secondary);
+    outline: 3px solid var(--brand-secondary) !important;
+}
 
-			.checkmark-icon::before, .checkmark label:focus > i::before {
-				border-color: var(--light-gray);
-			}
-		}
-	 
-    }
+.radio.checkmark input[type="radio"]:disabled:checked + label {
+	color: var(--white);
+    border: 1px solid var(--gray) !important; 
+    outline: none !important;
+
+	.checkmark-icon,
+	> i {
+		background-color: var(--white);
+	}
+	.checkmark-icon::before, .checkmark label:disabled > i::before {
+		border-color: var(--gray) !important;
+	}
+}
+
+.radio.checkmark input[type="radio"]:disabled + label:hover {
+    color: var(--white) !important;               
+    border: 1px solid var(--gray) !important;     
+    outline: none !important;                     
+    background-color: var(--gray) !important;     
+    box-shadow: none !important;                  
+    cursor: not-allowed !important;               
+
+	.checkmark-icon,
+	> i {
+		background-color: var(--white) !important;
+	}
+	.checkmark-icon::before, .checkmark label:disabled > i::before {
+		border-color: var(--gray) !important;
+	}
+}
+
+.radio.checkmark input[type="radio"]:disabled:checked:hover + label {
+	color: var(--white);
+    border: 1px solid var(--gray) !important; 
+    outline: none !important;
+	box-shadow: none;
+
+	.checkmark-icon,
+	> i {
+		background-color: var(--white);
+	}
+	.checkmark-icon::before, .checkmark label:disabled > i::before {
+		border-color: var(--gray) !important;
+	}
 }
+	
+.radio.checkmark input[type="radio"]:disabled + label {
+	color: var(--white);
+	border: 1px solid var(--gray) !important; 
+	outline: none !important;
+	background-color: var(--gray) !important;
+}
\ No newline at end of file
diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
index 48f60f0206..0c8ff4ef06 100644
--- a/src/less/variables-payex.less
+++ b/src/less/variables-payex.less
@@ -152,6 +152,7 @@ body {
 :root {
 	/* Grayscale */
 	--black: #000000;
+	--light-black: #2F2424;
 	--list-gray: #999999;
 	--light-gray: #f4f4f4;
 	--gray: #c8c8c8;