diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss
index 3d6e2a416..04d35448a 100644
--- a/web/src/assets/styles/app.scss
+++ b/web/src/assets/styles/app.scss
@@ -37,15 +37,16 @@ button.remove-link:hover {
 }
 
 #productSelectionForm {
-  .pf-v5-c-radio input {
+  input[type="radio"] {
     align-self: center;
-    width: 20px;
-    height: 20px;
+    flex-shrink: 0;
+    inline-size: 20px;
+    block-size: 20px;
   }
 
   .pf-v5-c-card {
     img {
-      width: 80px;
+      max-inline-size: 80px;
     }
 
     label {
diff --git a/web/src/components/product/ProductSelectionPage.tsx b/web/src/components/product/ProductSelectionPage.tsx
index 05560f0fe..9c9795171 100644
--- a/web/src/components/product/ProductSelectionPage.tsx
+++ b/web/src/components/product/ProductSelectionPage.tsx
@@ -28,7 +28,6 @@ import {
   Form,
   Grid,
   GridItem,
-  Radio,
   List,
   ListItem,
   Split,
@@ -39,7 +38,8 @@ import {
 import { Page } from "~/components/core";
 import { Center } from "~/components/layout";
 import { useConfigMutation, useProduct } from "~/queries/software";
-import styles from "@patternfly/react-styles/css/utilities/Text/text";
+import pfTextStyles from "@patternfly/react-styles/css/utilities/Text/text";
+import pfRadioStyles from "@patternfly/react-styles/css/components/Radio/radio";
 import { slugify } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
@@ -63,16 +63,21 @@ const Option = ({ product, isChecked, onChange }) => {
       <Card isRounded>
         <CardBody>
           <Split hasGutter>
-            <Radio
+            <input
               id={id}
+              type="radio"
               name="product"
-              isChecked={isChecked}
+              className={pfRadioStyles.radioInput}
+              checked={isChecked}
               onChange={onChange}
               aria-details={detailsId}
             />
             <img aria-hidden src={logoSrc} alt={logoAltText} />
             <Stack hasGutter>
-              <label htmlFor={id} className={`${styles.fontSizeLg} ${styles.fontWeightBold}`}>
+              <label
+                htmlFor={id}
+                className={`${pfTextStyles.fontSizeLg} ${pfTextStyles.fontWeightBold}`}
+              >
                 {product.name}
               </label>
               <p id={detailsId}>{product.description}</p>